import { useState } from "react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Mail, Phone, MapPin, Clock, Send } from "lucide-react";
import { toast } from "sonner";

const faqs = [
  { q: "How do I enroll in a course?", a: "Simply browse our course catalog, select a course, and click Enroll Now. You can start learning immediately after payment. We also offer a free trial for new students." },
  { q: "Do I receive a certificate upon completion?", a: "Yes! Every course includes a verifiable certificate of completion that you can share on LinkedIn and add to your resume. Our certificates are recognized by industry leaders." },
  { q: "What is your refund policy?", a: "We offer a 30-day money-back guarantee on all courses. If you are not satisfied, contact our support team for a full refund — no questions asked." },
  { q: "Are there any prerequisites for courses?", a: "Prerequisites vary by course. Beginner courses require no prior experience. Intermediate and advanced courses list their prerequisites on the course detail page." },
];

export default function ContactPage() {
  const [sending, setSending] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSending(true);
    setTimeout(() => {
      setSending(false);
      toast.success("Message sent! We will get back to you within 24 hours.");
    }, 1200);
  };

  return (
    <div className="min-h-screen bg-white dark:bg-slate-950">
      <Header />

      {/* ── Contact Section ── */}
      <section className="pt-32 pb-20">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center mb-12 animate-fade-up">
            <h1 className="text-3xl sm:text-4xl font-bold mb-3">Get In Touch</h1>
            <p className="text-muted-foreground max-w-xl mx-auto">Have questions about courses, enrollment, or partnerships? We are here to help.</p>
          </div>

          <div className="grid lg:grid-cols-5 gap-10">
            {/* Info */}
            <div className="lg:col-span-2 space-y-6 animate-fade-up" style={{ animationDelay: "0.1s" }}>
              <Card className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl">
                <CardContent className="p-6 space-y-5">
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center shrink-0">
                      <Mail className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
                    </div>
                    <div>
                      <div className="font-semibold text-sm mb-0.5">Email</div>
                      <div className="text-sm text-muted-foreground">hello@luminaracademy.com</div>
                    </div>
                  </div>
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center shrink-0">
                      <Phone className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
                    </div>
                    <div>
                      <div className="font-semibold text-sm mb-0.5">Phone</div>
                      <div className="text-sm text-muted-foreground">+1 (555) 234-5678</div>
                    </div>
                  </div>
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center shrink-0">
                      <MapPin className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
                    </div>
                    <div>
                      <div className="font-semibold text-sm mb-0.5">Address</div>
                      <div className="text-sm text-muted-foreground">500 Innovation Drive, Suite 300, San Francisco, CA 94105</div>
                    </div>
                  </div>
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center shrink-0">
                      <Clock className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
                    </div>
                    <div>
                      <div className="font-semibold text-sm mb-0.5">Office Hours</div>
                      <div className="text-sm text-muted-foreground">Mon–Fri 9:00 AM – 6:00 PM PST</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* Form */}
            <div className="lg:col-span-3 animate-fade-up" style={{ animationDelay: "0.15s" }}>
              <Card className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl">
                <CardContent className="p-6">
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid sm:grid-cols-2 gap-4">
                      <div>
                        <label className="text-sm font-medium mb-1.5 block">Full Name</label>
                        <Input required placeholder="Your name" className="rounded-lg" />
                      </div>
                      <div>
                        <label className="text-sm font-medium mb-1.5 block">Email</label>
                        <Input type="email" required placeholder="you@example.com" className="rounded-lg" />
                      </div>
                    </div>
                    <div>
                      <label className="text-sm font-medium mb-1.5 block">Subject</label>
                      <Select>
                        <SelectTrigger className="rounded-lg"><SelectValue placeholder="Select a subject" /></SelectTrigger>
                        <SelectContent>
                          <SelectItem value="enrollment">Course Enrollment</SelectItem>
                          <SelectItem value="technical">Technical Support</SelectItem>
                          <SelectItem value="billing">Billing & Payments</SelectItem>
                          <SelectItem value="partnership">Partnership</SelectItem>
                          <SelectItem value="other">Other</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <label className="text-sm font-medium mb-1.5 block">Message</label>
                      <Textarea placeholder="How can we help you?" rows={5} className="rounded-lg resize-none" />
                    </div>
                    <Button type="submit" disabled={sending} className="w-full bg-indigo-600 hover:bg-indigo-700 text-white rounded-full shadow-lg shadow-indigo-500/20 active:scale-[0.97] transition-all">
                      {sending ? "Sending..." : (<><Send className="mr-2 h-4 w-4" /> Send Message</>)}
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section className="py-20 bg-slate-50 dark:bg-slate-950">
        <div className="mx-auto max-w-3xl px-6">
          <div className="text-center mb-12 animate-fade-up">
            <h2 className="text-2xl sm:text-3xl font-bold">Frequently Asked Questions</h2>
          </div>
          <Accordion type="single" collapsible className="space-y-3 animate-fade-up">
            {faqs.map((f, i) => (
              <AccordionItem key={i} value={`faq-\${i}`} className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200/60 dark:border-slate-800/60 px-6">
                <AccordionTrigger className="text-left font-medium hover:no-underline">{f.q}</AccordionTrigger>
                <AccordionContent className="text-muted-foreground">{f.a}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </section>

      <Footer />
    </div>
  );
}