import { Check, Crown, Sparkles } from "lucide-react";
import { Reveal } from "./Reveal";

const plans = [
  {
    name: "Basic",
    price: "3,999",
    duration: "3 Months",
    features: ["Crypto Trading Basics", "Technical Analysis", "Chart Reading", "Risk Management", "Live Market Sessions"],
  },
  {
    name: "Advance",
    price: "4,999",
    duration: "4 Months",
    features: ["Crypto + Forex Trading", "Advanced Strategies", "Market Psychology", "Live Trading Practice", "Daily Guidance"],
  },
  {
    name: "Pro Trader",
    price: "6,999",
    duration: "5 Months",
    popular: true,
    features: ["Crypto + Forex + Indian Options", "Advanced Technical Analysis", "Smart Money Concepts", "Scalping & Swing Trading", "Strategy Building"],
  },
  {
    name: "Elite Mentorship",
    price: "9,999",
    duration: "6 Months",
    elite: true,
    features: ["All-in-One Course", "1-on-1 Personal Guidance", "Funding Account Support", "Trading Psychology", "Portfolio Management", "Premium Community"],
  },
];

export function Courses() {
  return (
    <section id="courses" className="relative mx-auto max-w-7xl px-4 py-24 md:px-8">
      <Reveal>
        <div className="mx-auto max-w-3xl text-center">
          <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
          </div>
          <h2 className="mt-4 text-4xl font-bold md:text-5xl">
            Choose your <span className="text-gradient-primary">trading path</span>
          </h2>
          <p className="mt-4 text-muted-foreground">Practical, structured mentorship programs for every level.</p>
        </div>
      </Reveal>
      <div className="mt-16 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        {plans.map((p, i) => (
          <Reveal key={p.name} delay={i * 100}>
            <div
              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>
              <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 space-y-3 flex-1">
                {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 ${p.popular ? "text-primary" : "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 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"
                }`}
              >
                Enroll Now
              </a>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}