import { Reveal } from "./Reveal";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Link } from "@tanstack/react-router";
import { HelpCircle } from "lucide-react";

const faqs = [
  {
    q: "Is Fighter Bull's beginner friendly?",
    a: "Absolutely. We start from candlestick basics and gradually take you through institutional-level concepts like SMC, ICT, and CRT — no prior experience required.",
  },
  {
    q: "Which markets do you teach?",
    a: "Cryptocurrency, Forex, Commodities, and Indian Options — along with universal institutional trading concepts that work across all markets.",
  },
  {
    q: "Do I get live mentorship and recorded sessions?",
    a: "Yes. You get live market sessions, real-time chart analysis, and recorded access depending on your selected plan.",
  },
  {
    q: "How long are the courses?",
    a: "Plans range from 3 months (Basic Crypto) to 6 months (Premium Mentorship), with structured modules and ongoing support.",
  },
  {
    q: "Do you guarantee profits or provide signals?",
    a: "No. Trading involves real risk and we do not guarantee profits. Our focus is education, strategy, risk management, and trading psychology.",
  },
  {
    q: "Do you help with funding challenges?",
    a: "Yes. Our advanced mentorship plans include guidance for prop firm evaluations and funded account models.",
  },
  {
    q: "How do I enroll and pay?",
    a: "You can enroll directly from the website. We accept UPI, bank transfer, crypto, and online payment gateways.",
  },
];

export function HomeFAQ() {
  return (
    <section id="faq" className="relative py-20 md:py-28">
      <div className="mx-auto max-w-5xl px-4 md:px-8">
        <Reveal>
          <div className="text-center">
            <div className="inline-flex items-center gap-2 rounded-full border border-border bg-surface px-4 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
              <HelpCircle className="h-3.5 w-3.5" /> FAQ
            </div>
            <h2 className="mt-5 text-3xl font-bold tracking-tight md:text-5xl">
              Got Questions? <span className="text-gradient-gold">We've Got Answers</span>
            </h2>
            <p className="mx-auto mt-4 max-w-2xl text-muted-foreground">
              Quick answers to the most common questions from our trading community.
            </p>
          </div>
        </Reveal>

        <Reveal delay={100}>
          <Accordion
            type="single"
            collapsible
            className="mt-12 rounded-2xl border border-border bg-surface px-4 md:px-6"
          >
            {faqs.map((f, i) => (
              <AccordionItem key={f.q} value={`faq-${i}`} className="border-border">
                <AccordionTrigger className="text-left text-base font-semibold hover:no-underline md:text-lg">
                  {f.q}
                </AccordionTrigger>
                <AccordionContent className="text-muted-foreground leading-relaxed">
                  {f.a}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </Reveal>

        <div className="mt-8 text-center">
          <Link
            to="/faq"
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:underline"
          >
            View all FAQs →
          </Link>
        </div>
      </div>
    </section>
  );
}