"use client";

import { useState } from "react";
import { Check } from "lucide-react";
import {
  GlassCard,
  ShimmerBorder,
  StaggerChildren,
  ScrollReveal,
  CountUp,
  GlowOrb,
  GridOverlay,
  GradientText,
} from "@/components/ui/primitives";

const plans = [
  {
    name: "Starter",
    description: "For individuals and small projects",
    monthlyPrice: 0,
    yearlyPrice: 0,
    cta: "Get Started Free",
    highlight: false,
    features: [
      "Up to 1,000 events/month",
      "1 team member",
      "Basic analytics",
      "Community support",
      "7-day data retention",
    ],
  },
  {
    name: "Pro",
    description: "For growing teams and products",
    monthlyPrice: 29,
    yearlyPrice: 24,
    cta: "Start Free Trial",
    highlight: true,
    features: [
      "Up to 100,000 events/month",
      "10 team members",
      "Advanced analytics",
      "Priority support",
      "1-year data retention",
      "Custom dashboards",
      "API access",
    ],
  },
  {
    name: "Enterprise",
    description: "For large-scale operations",
    monthlyPrice: 99,
    yearlyPrice: 79,
    cta: "Contact Sales",
    highlight: false,
    features: [
      "Unlimited events",
      "Unlimited team members",
      "Custom analytics",
      "Dedicated support",
      "Unlimited data retention",
      "SSO & SAML",
      "SLA guarantee",
      "Custom integrations",
    ],
  },
];

export default function SaasPricing1() {
  const [annual, setAnnual] = useState(true);

  return (
    <section className="relative overflow-hidden bg-white py-24" id="pricing">
      <GridOverlay type="dots" fade="radial" opacity={0.03} />
      <GlowOrb
        color="#4f46e5"
        size="lg"
        position={{ top: "-20%", left: "50%" }}
        animate={false}
        className="opacity-[0.06]"
      />

      <div className="relative mx-auto max-w-6xl px-6">
        {/* Header */}
        <ScrollReveal variant="blur-in">
          <div className="mx-auto max-w-2xl text-center">
            <h2 className="text-3xl font-semibold tracking-tight text-gray-900 md:text-4xl">
              <GradientText from="indigo-500" to="violet-500">Pricing</GradientText>{" "}Plans
            </h2>
            <p className="mt-4 text-base leading-relaxed text-gray-500">
              Start free, scale as you grow. All plans include a 14-day trial with
              full access to every feature.
            </p>
          </div>
        </ScrollReveal>

        {/* Toggle */}
        <ScrollReveal variant="fade-up" delay={0.15}>
          <div className="mt-10 flex items-center justify-center gap-3">
            <span
              className={`text-sm transition-colors ${!annual ? "text-gray-900 font-medium" : "text-gray-400"}`}
            >
              Monthly
            </span>
            <button
              onClick={() => setAnnual(!annual)}
              className={`relative h-6 w-11 rounded-full transition-colors ${annual ? "bg-linear-to-r from-indigo-500 to-violet-500" : "bg-gray-300"}`}
            >
              <span
                className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${annual ? "left-[22px]" : "left-0.5"}`}
              />
            </button>
            <span
              className={`text-sm transition-colors ${annual ? "text-gray-900 font-medium" : "text-gray-400"}`}
            >
              Annual
              <span className="ml-1.5 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">
                Save 20%
              </span>
            </span>
          </div>
        </ScrollReveal>

        {/* Cards */}
        <StaggerChildren staggerDelay={0.15} className="mt-12 grid gap-6 md:grid-cols-3">
          {plans.map((plan) => {
            const price = annual ? plan.yearlyPrice : plan.monthlyPrice;

            const card = (
              <div
                className={`relative rounded-2xl p-8 transition-all duration-300 ${
                  plan.highlight
                    ? "bg-gray-900 text-white shadow-2xl shadow-gray-900/20"
                    : "border border-gray-200 bg-white hover:border-gray-300 hover:shadow-lg"
                }`}
              >
                {plan.highlight && (
                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-linear-to-r from-indigo-500 to-violet-500 px-3 py-1 text-xs font-medium text-white shadow-lg shadow-indigo-500/25">
                    Most Popular
                  </div>
                )}

                <div>
                  <h3
                    className={`text-lg font-medium ${plan.highlight ? "text-white" : "text-gray-900"}`}
                  >
                    {plan.name}
                  </h3>
                  <p
                    className={`mt-1 text-sm ${plan.highlight ? "text-gray-400" : "text-gray-500"}`}
                  >
                    {plan.description}
                  </p>
                </div>

                <div className="mt-6">
                  <span
                    className={`text-4xl font-semibold tracking-tight ${plan.highlight ? "text-white" : "text-gray-900"}`}
                  >
                    $<CountUp end={price} duration={1.5} />
                  </span>
                  <span
                    className={`text-sm ${plan.highlight ? "text-gray-400" : "text-gray-500"}`}
                  >
                    /month
                  </span>
                </div>

                <a
                  href="#"
                  className={`mt-6 block w-full rounded-full py-2.5 text-center text-sm font-medium transition-all ${
                    plan.highlight
                      ? "bg-white text-gray-900 hover:bg-gray-100 hover:shadow-lg"
                      : "bg-gray-900 text-white hover:bg-gray-800 hover:shadow-lg"
                  }`}
                >
                  {plan.cta}
                </a>

                <ul className="mt-8 space-y-3">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-start gap-3">
                      <Check
                        className={`mt-0.5 h-4 w-4 shrink-0 ${plan.highlight ? "text-indigo-400" : "text-emerald-500"}`}
                      />
                      <span
                        className={`text-sm ${plan.highlight ? "text-gray-300" : "text-gray-600"}`}
                      >
                        {feature}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            );

            if (plan.highlight) {
              return (
                <ShimmerBorder
                  key={plan.name}
                  borderWidth={1}
                  speed={4}
                  colors={["#4f46e5", "#7c3aed", "#06b6d4", "#4f46e5"]}
                  borderRadius="1rem"
                >
                  {card}
                </ShimmerBorder>
              );
            }

            return <div key={plan.name}>{card}</div>;
          })}
        </StaggerChildren>
      </div>
    </section>
  );
}
Pricing Table
