import Container from "@/components/ui/Container";
import Reveal from "@/components/ui/Reveal";
import { Check, Sparkles, ArrowRight } from "lucide-react";

type Plan = {
  name: string;
  price: string;
  cadence?: string;
  blurb: string;
  features: string[];
  cta: string;
  highlight?: boolean;
  badge?: string;
};

const PLANS: Plan[] = [
  {
    name: "Readiness & Civics",
    price: "$29",
    cadence: "one-time",
    blurb: "See where you stand and start studying.",
    features: [
      "General eligibility overview",
      "Readiness snapshot",
      "Document organizer checklist",
      "Travel-day calculator",
      "Civics test practice",
      "Interview readiness score",
      "Your recommended next step",
    ],
    cta: "Start Readiness Check",
  },
  {
    name: "Complete Prep",
    price: "$99",
    cadence: "one-time",
    blurb: "Everything you need to get fully ready on your own.",
    features: [
      "Everything in Readiness & Civics",
      "Full civics course — all 100 questions",
      "Audio mock interview practice",
      "Printable document organizer",
      "Step-by-step self-filing guide",
      "Progress tracking & reminders",
      "Spanish / English throughout",
    ],
    cta: "Get Complete Prep",
    highlight: true,
    badge: "Most popular",
  },
  {
    name: "Attorney Help",
    price: "Varies",
    cadence: "by attorney",
    blurb: "For arrests, long trips, taxes, or complex cases.",
    features: [
      "Everything in Complete Prep",
      "Intro to an independent licensed immigration attorney",
      "For red-flag and complex situations",
      "Legal advice & form review by the attorney",
      "Their fees & services are set by them",
      "Peace of mind before you file",
    ],
    cta: "Find an Attorney",
  },
];

export default function Pricing() {
  return (
    <section id="pricing" className="bg-navy bg-navy-glow grain py-20 md:py-28">
      <Container>
        <Reveal className="mx-auto max-w-2xl text-center">
          <span className="eyebrow-dark">Pricing</span>
          <h2 className="mt-5 text-balance text-3xl font-600 text-white sm:text-4xl">
            Honest pricing. Start small, go as far as you need.
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-cream/65">
            Begin with a low-cost readiness check. Upgrade for full prep. Connect
            with a licensed attorney whenever your case calls for one.
          </p>
        </Reveal>

        <div className="mt-14 grid items-stretch gap-6 lg:grid-cols-3">
          {PLANS.map((plan, i) => (
            <Reveal key={plan.name} delay={i * 90}>
              <div
                className={`relative flex h-full flex-col rounded-3xl p-7 sm:p-8 ${
                  plan.highlight
                    ? "border-2 border-gold bg-white shadow-lift lg:-mt-4 lg:mb-0"
                    : "border border-white/10 bg-navy-700/50 backdrop-blur"
                }`}
              >
                {plan.badge && (
                  <span className="absolute -top-3.5 left-1/2 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full bg-gold px-3.5 py-1.5 text-xs font-700 uppercase tracking-wide text-navy shadow-gold">
                    <Sparkles className="h-3.5 w-3.5" />
                    {plan.badge}
                  </span>
                )}

                <h3
                  className={`font-display text-xl font-600 ${
                    plan.highlight ? "text-navy" : "text-white"
                  }`}
                >
                  {plan.name}
                </h3>
                <p
                  className={`mt-1.5 text-sm ${
                    plan.highlight ? "text-navy/55" : "text-cream/55"
                  }`}
                >
                  {plan.blurb}
                </p>

                <div className="mt-5 flex items-baseline gap-1.5">
                  <span
                    className={`font-display text-4xl font-700 ${
                      plan.highlight ? "text-navy" : "text-white"
                    }`}
                  >
                    {plan.price}
                  </span>
                  {plan.cadence && (
                    <span
                      className={`text-sm font-medium ${
                        plan.highlight ? "text-navy/45" : "text-cream/45"
                      }`}
                    >
                      {plan.cadence}
                    </span>
                  )}
                </div>

                <ul className="mt-6 flex-1 space-y-3">
                  {plan.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5">
                      <span
                        className={`mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full ${
                          plan.highlight
                            ? "bg-emerald-50 text-emerald-700"
                            : "bg-white/10 text-emerald-300"
                        }`}
                      >
                        <Check className="h-3 w-3" strokeWidth={3} />
                      </span>
                      <span
                        className={`text-sm leading-relaxed ${
                          plan.highlight ? "text-navy/75" : "text-cream/75"
                        }`}
                      >
                        {f}
                      </span>
                    </li>
                  ))}
                </ul>

                <a
                  href="#top"
                  className={`btn btn-lg mt-7 w-full ${
                    plan.highlight ? "btn-gold" : "btn-ghost-light"
                  }`}
                >
                  {plan.cta}
                  <ArrowRight className="h-4 w-4" />
                </a>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <p className="mx-auto mt-10 max-w-3xl text-center text-xs leading-relaxed text-cream/45">
            CitizenPilot is not a law firm or government agency and does not
            provide legal advice or prepare, review, or file forms. Attorney
            services are provided by independent licensed professionals. USCIS
            government filing fees are separate and paid directly to USCIS.
          </p>
        </Reveal>
      </Container>
    </section>
  );
}