import { createFileRoute, Link } from "@tanstack/react-router";
import { Check, Crown, Sparkles, ArrowLeft, MessageCircle } from "lucide-react";
import { Navbar } from "@/components/site/Navbar";
import { Footer } from "@/components/site/Footer";

export const Route = createFileRoute("/course-plans")({
  head: () => ({
    meta: [
      { title: "Course Plans & Pricing — Fighter Bull's Trading Academy" },
      { name: "description", content: "Detailed course plans, pricing, durations and what's included — Crypto, Forex, Indian Options, and Elite Mentorship at Fighter Bull's." },
      { property: "og:title", content: "Course Plans & Pricing — Fighter Bull's" },
      { property: "og:description", content: "Compare all 4 mentorship plans with full pricing, syllabus, and inclusions." },
    ],
  }),
  component: CoursePlansPage,
});

const plans = [
  {
    name: "Basic",
    price: "3,999",
    duration: "3 Months",
    tagline: "Start your crypto journey",
    features: [
      "Crypto Trading Basics",
      "Candlestick & Chart Reading",
      "Technical Analysis Foundation",
      "Risk & Money Management",
      "Live Market Sessions (Weekly)",
      "Recorded Class Access",
    ],
  },
  {
    name: "Advance",
    price: "4,999",
    duration: "4 Months",
    tagline: "Crypto + Forex combo",
    features: [
      "Everything in Basic",
      "Forex Market Structure",
      "Advanced Chart Patterns",
      "Market Psychology",
      "Live Trading Practice",
      "Daily Market Guidance",
    ],
  },
  {
    name: "Pro Trader",
    price: "6,999",
    duration: "5 Months",
    popular: true,
    tagline: "Most popular complete pack",
    features: [
      "Crypto + Forex + Indian Options",
      "Smart Money Concepts (SMC/ICT)",
      "Order Blocks, Liquidity, BOS/CHoCH",
      "Scalping & Swing Strategies",
      "Strategy Building Workshops",
      "Priority Doubt Support",
    ],
  },
  {
    name: "Elite Mentorship",
    price: "9,999",
    duration: "6 Months",
    elite: true,
    tagline: "1-on-1 institutional mentorship",
    features: [
      "Everything in Pro Trader",
      "1-on-1 Personal Guidance",
      "Funding / Prop Firm Support",
      "Advanced Trading Psychology",
      "Portfolio & Risk Management",
      "Premium Private Community",
      "Lifetime Strategy Updates",
    ],
  },
];

const faqs = [
  { q: "How do I pay?", a: "We accept UPI, bank transfer, crypto (USDT) and online payment gateways. Contact us on WhatsApp to get the exact payment link for your chosen plan." },
  { q: "Are classes live or recorded?", a: "You get both — weekly live mentorship sessions plus access to recorded classes on demand." },
  { q: "Languages?", a: "Sessions are conducted in Bengali, Hindi and English." },
  { q: "Refunds?", a: "Refund eligibility is limited to within the first 4 classes. See our Refund Policy for full terms." },
];

function CoursePlansPage() {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <main className="mx-auto max-w-7xl px-4 py-12 md:px-8 md:py-20">
        <Link to="/" className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
          <ArrowLeft className="h-4 w-4" /> Back to home
        </Link>

        <div className="mt-6 max-w-3xl">
          <div className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
            Course Plans & Pricing
          </div>
          <h1 className="mt-4 text-4xl font-bold leading-tight md:text-6xl">
            Pick the plan that fits your <span className="text-gradient-primary">trading goals</span>
          </h1>
          <p className="mt-4 text-muted-foreground md:text-lg">
            Transparent pricing. Real mentorship. From beginner basics to institutional-grade strategy — choose what works for you.
          </p>
        </div>

        <div className="mt-14 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {plans.map((p) => (
            <div
              key={p.name}
              className={`relative flex h-full flex-col rounded-3xl border p-6 transition-all duration-300 hover:-translate-y-2 ${
                p.popular
                  ? "border-primary bg-gradient-navy text-white shadow-glow scale-[1.02]"
                  : p.elite
                  ? "border-[color:var(--gold)]/50 bg-surface-elevated shadow-soft"
                  : "border-border bg-surface-elevated shadow-card hover:border-primary/40 hover:shadow-glow"
              }`}
            >
              {p.popular && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1 rounded-full bg-gradient-primary px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-primary-foreground shadow-glow">
                  <Sparkles className="h-3 w-3" /> Most Popular
                </div>
              )}
              {p.elite && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1 rounded-full bg-[color:var(--gold)] px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-foreground">
                  <Crown className="h-3 w-3" /> Elite
                </div>
              )}
              <h3 className={`text-lg font-bold ${p.popular ? "text-white" : ""}`}>{p.name}</h3>
              <p className={`mt-1 text-xs ${p.popular ? "text-white/70" : "text-muted-foreground"}`}>{p.tagline}</p>
              <div className="mt-4 flex items-baseline gap-1">
                <span className={`text-sm ${p.popular ? "text-white/70" : "text-muted-foreground"}`}>₹</span>
                <span className={`text-5xl font-bold ${p.elite ? "text-gradient-primary" : p.popular ? "text-white" : "text-foreground"}`}>{p.price}</span>
              </div>
              <div className={`mt-1 text-xs uppercase tracking-wider ${p.popular ? "text-white/60" : "text-muted-foreground"}`}>{p.duration}</div>
              <ul className="mt-6 flex-1 space-y-3">
                {p.features.map((f) => (
                  <li key={f} className="flex items-start gap-2 text-sm">
                    <Check className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                    <span className={p.popular ? "text-white/90" : "text-foreground/90"}>{f}</span>
                  </li>
                ))}
              </ul>
              <a
                href="https://wa.me/917029490341"
                target="_blank"
                rel="noreferrer"
                className={`mt-6 inline-flex w-full items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-bold transition-all hover-bounce ${
                  p.popular
                    ? "bg-white text-foreground shadow-soft"
                    : p.elite
                    ? "bg-gradient-primary text-primary-foreground shadow-glow"
                    : "border-2 border-primary/30 text-primary hover:bg-primary hover:text-primary-foreground"
                }`}
              >
                <MessageCircle className="h-4 w-4" /> Enroll on WhatsApp
              </a>
            </div>
          ))}
        </div>

        <div className="mt-20 grid gap-6 md:grid-cols-2">
          {faqs.map((f) => (
            <div key={f.q} className="rounded-2xl border border-border bg-surface-elevated p-6 shadow-card">
              <h3 className="text-base font-bold text-foreground">{f.q}</h3>
              <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{f.a}</p>
            </div>
          ))}
        </div>

        <div className="mt-16 rounded-3xl border border-primary/30 bg-gradient-primary p-8 text-center text-primary-foreground shadow-glow md:p-12">
          <h2 className="text-2xl font-bold md:text-3xl">Still not sure which plan fits you?</h2>
          <p className="mt-2 text-primary-foreground/90">Talk to our team on WhatsApp — we'll guide you in 2 minutes.</p>
          <a
            href="https://wa.me/917029490341"
            target="_blank"
            rel="noreferrer"
            className="mt-6 inline-flex items-center gap-2 rounded-full bg-white px-7 py-3 text-sm font-bold text-foreground shadow-soft hover:scale-105 transition-transform"
          >
            <MessageCircle className="h-4 w-4 text-primary" /> Chat with a Mentor
          </a>
        </div>
      </main>
      <Footer />
    </div>
  );
}
