"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Check, Sparkles } from "lucide-react";
import { Reveal } from "@/components/reveal";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { pricingPlans } from "@/data/pricing";
import { cn } from "@/lib/utils";

export function Pricing() {
  const [yearly, setYearly] = useState(true);

  return (
    <section id="pricing" className="section-pad relative">
      <div className="container">
        <div className="mx-auto max-w-2xl text-center">
          <Reveal>
            <span className="eyebrow">Simple pricing</span>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="mt-5 text-3xl font-bold tracking-tight text-ink-900 sm:text-5xl dark:text-white">
              Plans that grow with your business
            </h2>
          </Reveal>
          <Reveal delay={0.15}>
            <p className="mt-4 text-lg text-ink-600 dark:text-white/60">
              Start free, upgrade when you need more numbers, seats, or automation.
            </p>
          </Reveal>

          <Reveal delay={0.2}>
            <div className="mt-8 flex items-center justify-center gap-3">
              <span
                className={cn(
                  "text-sm font-medium",
                  !yearly ? "text-ink-900 dark:text-white" : "text-ink-400 dark:text-white/40"
                )}
              >
                Monthly
              </span>
              <Switch checked={yearly} onCheckedChange={setYearly} aria-label="Toggle yearly pricing" />
              <span
                className={cn(
                  "flex items-center gap-1.5 text-sm font-medium",
                  yearly ? "text-ink-900 dark:text-white" : "text-ink-400 dark:text-white/40"
                )}
              >
                Yearly
                <span className="rounded-full bg-whatsapp/15 px-2 py-0.5 text-xs font-semibold text-whatsapp-dark dark:text-whatsapp-light">
                  Save 20%
                </span>
              </span>
            </div>
          </Reveal>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-6 lg:grid-cols-3">
          {pricingPlans.map((plan, i) => (
            <Reveal key={plan.name} delay={i * 0.1} direction="up">
              <motion.div
                whileHover={{ y: -8 }}
                transition={{ type: "spring", stiffness: 300, damping: 22 }}
                className={cn(
                  "relative flex h-full flex-col rounded-3xl p-8",
                  plan.popular
                    ? "bg-ink-950 text-white shadow-2xl shadow-whatsapp/20 ring-1 ring-whatsapp/40"
                    : "border border-ink-900/8 bg-white shadow-card dark:border-white/10 dark:bg-white/[0.03]"
                )}
              >
                {plan.popular && (
                  <span className="absolute -top-3.5 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-full bg-whatsapp px-4 py-1.5 text-xs font-bold text-ink-950 shadow-glow-sm">
                    <Sparkles className="h-3.5 w-3.5" /> Most Popular
                  </span>
                )}

                <h3 className={cn("text-lg font-semibold", plan.popular ? "text-white" : "text-ink-900 dark:text-white")}>
                  {plan.name}
                </h3>
                <p className={cn("mt-1.5 text-sm", plan.popular ? "text-white/50" : "text-ink-500 dark:text-white/50")}>
                  {plan.tagline}
                </p>

                <div className="mt-6 flex items-baseline gap-1">
                  <span className={cn("text-4xl font-bold", plan.popular ? "text-white" : "text-ink-900 dark:text-white")}>
                    ${yearly ? plan.yearlyPrice : plan.monthlyPrice}
                  </span>
                  <span className={cn("text-sm", plan.popular ? "text-white/40" : "text-ink-400 dark:text-white/40")}>
                    /month
                  </span>
                </div>

                <Button
                  size="md"
                  variant={plan.popular ? "primary" : "outline"}
                  className={cn("mt-6 w-full", plan.popular && "btn-glow")}
                >
                  {plan.cta}
                </Button>

                <ul className="mt-8 flex-1 space-y-3.5">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-start gap-2.5 text-sm">
                      <Check
                        className={cn(
                          "mt-0.5 h-4 w-4 shrink-0",
                          plan.popular ? "text-whatsapp" : "text-whatsapp-dark dark:text-whatsapp-light"
                        )}
                      />
                      <span className={plan.popular ? "text-white/70" : "text-ink-600 dark:text-white/60"}>
                        {feature}
                      </span>
                    </li>
                  ))}
                </ul>
              </motion.div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}