"use client";

/**
 * Pricing page — 5 tiers (Growth / Professional / Agency / Agency Pro
 * / Enterprise), annual toggle defaults to annual, finalized pricing
 * from the Feb 2026 pricing review. Below the cards: Add-ons section,
 * a full feature-comparison table, and the FAQ.
 *
 * Annual savings in the copy are computed off the monthly-equivalent
 * prices shown on the cards — do NOT round these up; users recompute
 * from the card prices and catch any drift.
 */

import { useState } from "react";
import { Check, X, Sparkles, Zap, Building2, Crown, Rocket } from "lucide-react";
import PricingFaq from "@/components/pricing/faq";
import PricingComparisonTable from "@/components/pricing/comparison-table";
import PricingAddOns from "@/components/pricing/add-ons";

type Tier = {
  id: "growth" | "professional" | "agency" | "agency_pro" | "enterprise";
  name: string;
  /** Monthly price when billing monthly. null = Enterprise (custom). */
  price: number | null;
  /** Monthly-equivalent price when billing annually. null = Enterprise. */
  annualPrice: number | null;
  /** Dollar savings per year vs paying monthly. Shown below the annual
   *  price so customers see the concrete number, not just a %. */
  annualSavings: number | null;
  icon: typeof Zap;
  description: string;
  brands: string;
  popular: boolean;
  highlights: string[];
  ai: string;
  notIncluded: string[];
  cta: "trial" | "demo";
};

const TIERS: Tier[] = [
  {
    id: "growth",
    name: "Growth",
    price: 299,
    annualPrice: 249,
    annualSavings: 598,
    icon: Zap,
    description: "For businesses getting serious about SEO with first-party data",
    brands: "3",
    popular: false,
    highlights: [
      "Dashboard + Technical Audit",
      "GSC + GA4 integrations",
      "Cookieless Site Tag (100K events/mo)",
      "Conversion Intelligence + CWV",
      "50 rank tracking keywords",
      "3 SEO content briefs/mo",
      "Keyword Research + Backlinks",
      "3 competitor brands",
      "Basic Report Studio",
      "AI Strategist (5 chats/mo)",
      "Data Confidence Gauge",
      "Email support (48hr)",
    ],
    ai: "50 AI credits/mo",
    notIncluded: ["Session Explorer", "Heatmaps", "AI Visibility", "Paid Media"],
    cta: "trial",
  },
  {
    id: "professional",
    name: "Professional",
    price: 499,
    annualPrice: 416,
    annualSavings: 998,
    icon: Sparkles,
    description: "Full analytics suite with competitive intelligence and AI visibility",
    brands: "10",
    popular: true,
    highlights: [
      "Everything in Growth, plus:",
      "500K Site Tag events/mo",
      "Session Explorer + UX Frustration",
      "Heatmaps + Link Inspector",
      "AI Visibility Monitoring",
      "LLMO Content Briefs",
      "Full Content Intelligence",
      "500 rank tracking keywords",
      "15 content briefs/mo",
      "10 competitor brands · 5 Local GEO",
      "Full Report Studio + 3 email reports",
      "AI Strategist (25 chats/mo)",
      "Onboarding call · Priority support (24hr)",
    ],
    ai: "250 AI credits/mo",
    notIncluded: [],
    cta: "trial",
  },
  {
    id: "agency",
    name: "Agency",
    price: 1499,
    annualPrice: 1249,
    annualSavings: 2998,
    icon: Building2,
    description: "Full-power attribution and white-label client portal",
    brands: "25",
    popular: false,
    highlights: [
      "Everything in Professional, plus:",
      "2M Site Tag events/mo",
      "Paid Media Attribution",
      "OTT/CTV Cross-Device Attribution",
      "Visitor Identity Graphs",
      "Household Clustering",
      "200+ Channel Classifications",
      "White-Label Client Portal",
      "Custom branding · 25 Local GEO",
      "Unlimited content briefs + AI Strategist",
      "2,000 rank tracking keywords",
      "Dedicated onboarding · Priority support (12hr)",
    ],
    ai: "1,000 AI credits/mo",
    notIncluded: [],
    cta: "trial",
  },
  {
    id: "agency_pro",
    name: "Agency Pro",
    price: 3499,
    annualPrice: 2916,
    annualSavings: 6998,
    icon: Rocket,
    description: "For established agencies scaling to 50+ brands",
    brands: "50",
    popular: false,
    highlights: [
      "Everything in Agency, plus:",
      "10M Site Tag events/mo",
      "API Access",
      "5,000 AI credits/mo",
      "5,000 rank tracking keywords",
      "Unlimited SERP lookups",
      "Unlimited competitors + Local GEO",
      "Priority support (4hr)",
    ],
    ai: "5,000 AI credits/mo",
    notIncluded: [],
    cta: "trial",
  },
  {
    id: "enterprise",
    name: "Enterprise",
    price: null,
    annualPrice: null,
    annualSavings: null,
    icon: Crown,
    description: "For large agencies and multi-location brands",
    brands: "Unlimited",
    popular: false,
    highlights: [
      "Everything in Agency Pro, plus:",
      "Unlimited brands + seats + events",
      "Custom integrations",
      "Dedicated account manager",
      "SLA guarantee",
      "SSO/SAML",
      "1-hour support response",
    ],
    ai: "Unlimited everything",
    notIncluded: [],
    cta: "demo",
  },
];

export default function PricingPage() {
  // Annual is the default — matches how every other SaaS surface
  // defaults (and the savings story is the whole sales pitch).
  const [annual, setAnnual] = useState(true);

  return (
    <div className="space-y-16 max-w-7xl mx-auto pb-20">

      {/* Header */}
      <div className="text-center pt-4">
        <h1 className="text-3xl md:text-4xl font-extrabold text-slate-900 mb-3">Simple, Transparent Pricing</h1>
        <p className="text-lg text-slate-500 max-w-2xl mx-auto mb-6">
          Your all-in-one SEO command center. Built-in tools plus integrations with the ones you already use.
        </p>
        <div className="inline-flex items-center bg-slate-100 rounded-xl p-1 gap-1">
          <button
            onClick={() => setAnnual(false)}
            className={`px-5 py-2 rounded-lg text-sm font-semibold transition-colors ${!annual ? "bg-white text-slate-900 shadow-sm" : "text-slate-500 hover:text-slate-700"}`}
          >
            Monthly
          </button>
          <button
            onClick={() => setAnnual(true)}
            className={`px-5 py-2 rounded-lg text-sm font-semibold transition-colors ${annual ? "bg-white text-slate-900 shadow-sm" : "text-slate-500 hover:text-slate-700"}`}
          >
            Annual <span className="text-[10px] font-bold text-green-600 bg-green-50 rounded-full px-2 py-0.5 ml-1">2 months free</span>
          </button>
        </div>
      </div>

      {/* Tier cards — 5-wide on XL screens so Agency Pro + Enterprise
          both fit in the primary scan line. On tablet they wrap
          predictably (2 cols), on mobile one per row. */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-4">
        {TIERS.map((tier) => {
          const price = annual ? tier.annualPrice : tier.price;
          const Icon = tier.icon;
          return (
            <div
              key={tier.id}
              className={`relative rounded-2xl border overflow-hidden flex flex-col ${
                tier.popular
                  ? "border-brand-300 shadow-lg shadow-brand-100/50 ring-2 ring-brand-500/20"
                  : "border-slate-200"
              }`}
            >
              {tier.popular && (
                <div className="bg-brand-600 text-white text-center py-1.5 text-[11px] font-bold uppercase tracking-widest">
                  Most Popular
                </div>
              )}
              <div className="px-5 pt-5 pb-5 flex-1 flex flex-col">
                <div className="flex items-center gap-2 mb-2">
                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${tier.popular ? "bg-brand-50 text-brand-600" : "bg-slate-100 text-slate-500"}`}>
                    <Icon className="w-4 h-4" />
                  </div>
                  <h3 className="text-base font-bold text-slate-900">{tier.name}</h3>
                </div>

                <div className="mb-3">
                  {price != null ? (
                    <>
                      <div className="flex items-baseline gap-1">
                        <span className="text-3xl font-extrabold text-slate-900 tabular-nums">${price.toLocaleString()}</span>
                        <span className="text-sm text-slate-500">/mo</span>
                      </div>
                      {annual ? (
                        <p className="text-[11px] text-slate-400 mt-0.5">
                          billed annually · <span className="text-emerald-600 font-semibold">save ${tier.annualSavings?.toLocaleString()}/yr</span>
                        </p>
                      ) : (
                        <p className="text-[11px] text-slate-400 mt-0.5">
                          billed monthly · save ${tier.annualSavings?.toLocaleString()}/yr on annual
                        </p>
                      )}
                    </>
                  ) : (
                    <>
                      <span className="text-3xl font-extrabold text-slate-900">Custom</span>
                      <p className="text-[11px] text-slate-400 mt-0.5">tailored to your team</p>
                    </>
                  )}
                </div>

                <p className="text-xs text-slate-500 mb-3 min-h-[32px]">{tier.description}</p>
                <p className="text-sm font-bold text-slate-900 mb-3">Up to {tier.brands} brands</p>

                <ul className="space-y-1.5 mb-4 flex-1">
                  {tier.highlights.map((h) => (
                    <li key={h} className="flex items-start gap-2 text-xs text-slate-700">
                      <Check className="w-3 h-3 text-green-500 mt-0.5 shrink-0" /> {h}
                    </li>
                  ))}
                  {tier.notIncluded.map((h) => (
                    <li key={h} className="flex items-start gap-2 text-xs text-slate-400">
                      <X className="w-3 h-3 text-slate-300 mt-0.5 shrink-0" /> {h}
                    </li>
                  ))}
                </ul>

                <div className="bg-slate-50 rounded-lg px-3 py-2 mb-4">
                  <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-0.5">AI Credits</p>
                  <p className="text-[11px] text-slate-700">{tier.ai}</p>
                </div>

                {tier.cta === "demo" ? (
                  <button className="w-full py-2.5 rounded-xl font-semibold text-xs bg-slate-900 text-white hover:bg-slate-800">
                    Book a Demo
                  </button>
                ) : (
                  <button
                    className={`w-full py-2.5 rounded-xl font-semibold text-xs transition-colors ${
                      tier.popular
                        ? "bg-brand-600 text-white hover:bg-brand-700 shadow-md shadow-brand-200"
                        : "bg-white text-slate-700 border border-slate-200 hover:bg-slate-50"
                    }`}
                  >
                    Get Started
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* Add-ons — small slabs showing the a-la-carte options
          without forcing a plan upgrade. */}
      <PricingAddOns />

      {/* Full feature matrix across all 5 tiers */}
      <PricingComparisonTable />

      {/* FAQ */}
      <PricingFaq />

      {/* Bottom CTA */}
      <div className="bg-gradient-to-r from-brand-600 to-violet-600 rounded-2xl px-8 py-12 text-center">
        <h2 className="text-2xl md:text-3xl font-extrabold text-white mb-3">Ready to Get Started?</h2>
        <p className="text-brand-100 text-sm mb-6">Your all-in-one SEO intelligence platform · Cancel anytime</p>
        <div className="flex items-center justify-center gap-3">
          <button className="px-8 py-3 bg-white text-brand-700 font-semibold rounded-xl hover:bg-brand-50 shadow-lg text-sm">Get Started</button>
          <button className="px-8 py-3 bg-white/10 text-white font-semibold rounded-xl hover:bg-white/20 text-sm border border-white/20">Book a Demo</button>
        </div>
      </div>
    </div>
  );
}
