"use client";

import { useState } from "react";
import Container from "@/components/ui/Container";
import { ChevronDown, HelpCircle } from "lucide-react";

const FAQS: { q: string; a: string }[] = [
  {
    q: "Is CitizenPilot a government website?",
    a: "No. CitizenPilot is not a government agency and is not affiliated with USCIS. Official USCIS forms are always available for free at USCIS.gov.",
  },
  {
    q: "Do you prepare or review my N-400?",
    a: "No. CitizenPilot is a self-help and civics-prep tool. We don't select, prepare, review, or file immigration forms, and we don't give legal advice. We help you learn the process, organize your own documents, and practice for the test and interview. For preparing or reviewing forms — or any legal question — work with a licensed immigration attorney.",
  },
  {
    q: "Do you guarantee citizenship approval?",
    a: "No. USCIS makes all final decisions. CitizenPilot helps you prepare clearly, organize your documents, and practice — so you walk in more confident and avoid preventable mistakes.",
  },
  {
    q: "Are USCIS government fees included?",
    a: "No. Government filing fees are separate and paid directly to USCIS. CitizenPilot charges only for self-help guidance, civics practice, document organization, and interview prep.",
  },
  {
    q: "Can CitizenPilot speed up USCIS processing?",
    a: "No. We can't control government processing time. What we can do is help you get ready faster on your end, so you're prepared when it's your turn.",
  },
  {
    q: "Do I need a lawyer?",
    a: "Simple situations may only need self-help prep. But arrests, citations, long trips outside the U.S., tax issues, or prior immigration problems should be reviewed by a licensed immigration attorney. CitizenPilot flags these topics and helps you connect with one.",
  },
  {
    q: "Is Spanish support available?",
    a: "Yes. CitizenPilot is designed Spanish-first, with bilingual guidance and plain-language explanations throughout the whole experience.",
  },
];

function Item({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="card overflow-hidden">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        className="flex w-full items-center justify-between gap-4 px-6 py-5 text-left"
      >
        <span className="font-600 text-navy">{q}</span>
        <ChevronDown
          className={`h-5 w-5 shrink-0 text-navy/40 transition-transform duration-300 ${
            open ? "rotate-180" : ""
          }`}
        />
      </button>
      <div
        className={`grid transition-all duration-300 ease-out ${
          open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
        }`}
      >
        <div className="overflow-hidden">
          <p className="px-6 pb-5 text-sm leading-relaxed text-navy/65">{a}</p>
        </div>
      </div>
    </div>
  );
}

export default function FAQ() {
  return (
    <section id="faq" className="bg-cream py-20 md:py-28">
      <Container>
        <div className="mx-auto max-w-2xl text-center">
          <span className="eyebrow">
            <HelpCircle className="h-3.5 w-3.5" />
            Questions
          </span>
          <h2 className="mt-5 text-balance text-3xl font-600 text-navy sm:text-4xl">
            Straight answers, no fine-print games.
          </h2>
        </div>

        <div className="mx-auto mt-10 max-w-3xl space-y-3">
          {FAQS.map((f) => (
            <Item key={f.q} {...f} />
          ))}
        </div>

        {/* Final CTA band */}
        <div className="mx-auto mt-16 max-w-4xl overflow-hidden rounded-3xl bg-navy bg-navy-glow grain px-8 py-12 text-center shadow-lift sm:px-12 sm:py-14">
          <h3 className="text-balance font-display text-3xl font-600 text-white sm:text-4xl">
            Ready to see where you stand?
          </h3>
          <p className="mx-auto mt-3 max-w-xl text-lg text-cream/70">
            Take the readiness check today and get a clear, color-coded picture
            of your path to citizenship.
          </p>
          <div className="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <a href="#pricing" className="btn btn-lg btn-gold">
              Start My Readiness Check — $29
            </a>
            <a href="#how-it-works" className="btn btn-lg btn-ghost-light">
              See how it works
            </a>
          </div>
          <p className="mt-5 text-xs text-cream/40">
            Not a government website · No approval guarantees · USCIS fees are
            separate
          </p>
        </div>
      </Container>
    </section>
  );
}