"use client";

import Link from "next/link";
import { useState } from "react";
import {
  Zap,
  Globe,
  Layers,
  Shield,
  Wifi,
  Users,
  Check,
  Code2,
  Bot,
  Sparkles,
  LayoutGrid,
  ArrowRight,
  ChevronRight,
  BarChart3,
  Eye,
  Store,
} from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { Button } from "@/components/ui/button";
import { GlassContainer } from "@/components/ui/GlassContainer";
import { AnimatedSection, AnimatedItem } from "@/components/ui/AnimatedSection";
import { BentoGrid, BentoCard } from "@/components/ui/BentoGrid";
import { BenchmarkTable } from "@/components/ui/BenchmarkTable";
import { AnimatedTerminal } from "@/components/ui/AnimatedTerminal";
import { DashboardPreview } from "@/components/ui/DashboardPreview";
import { FaqAccordion } from "@/components/ui/FaqAccordion";
import { PricingToggle } from "@/components/ui/PricingToggle";
import { SavingsCalculator } from "@/components/ui/SavingsCalculator";
import { WaitlistForm } from "@/components/ui/WaitlistForm";
import { cn } from "@/lib/utils";

/* ═══════════════════════════════════════════════════════════════
   Inline sub-components
   ═══════════════════════════════════════════════════════════════ */

function CopyableCode({ code }: { code: string }) {
  const [copied, setCopied] = useState(false);
  const handleCopy = () => {
    navigator.clipboard.writeText(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="group relative flex items-center gap-2 rounded-lg bg-white/[0.04] border border-white/10 px-4 py-3 font-mono text-sm transition-all hover:border-white/20 hover:bg-white/[0.06]">
      <code className="flex-1 text-gray-300">{code}</code>
      <button
        onClick={handleCopy}
        className={cn(
          "rounded px-3 py-1.5 text-xs font-medium transition-all",
          copied
            ? "bg-emerald-600/20 text-emerald-400"
            : "bg-white/[0.06] text-gray-400 hover:bg-white/10 hover:text-gray-200",
        )}
      >
        {copied ? "Copied" : "Copy"}
      </button>
    </div>
  );
}

function InstallCommands() {
  const [platform, setPlatform] = useState<"unix" | "windows">("unix");
  return (
    <div className="w-full max-w-lg">
      <div className="flex items-center gap-2 mb-2">
        {(["unix", "windows"] as const).map((p) => (
          <button
            key={p}
            onClick={() => setPlatform(p)}
            className={cn(
              "px-3 py-1 rounded text-xs font-medium transition-all",
              platform === p
                ? "bg-violet-500/20 text-violet-300 border border-violet-500/30"
                : "text-gray-500 hover:text-gray-300",
            )}
          >
            {p === "unix" ? "Linux / macOS" : "Windows"}
          </button>
        ))}
      </div>
      {platform === "unix" ? (
        <CopyableCode code="pip install llmhosts && llmhosts serve" />
      ) : (
        <CopyableCode code="pip install llmhosts && python -m llmhosts serve" />
      )}
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════════
   Data
   ═══════════════════════════════════════════════════════════════ */

const FEATURES = [
  { icon: Globe, title: "Intelligent Proxy", desc: "OpenAI + Anthropic compatible API. Drop-in replacement — change one URL and your entire stack works.", size: "wide" as const },
  { icon: Layers, title: "Three-Tier Router", desc: "Rules → kNN → ModernBERT. Sub-5ms routing with semantic model understanding." },
  { icon: Shield, title: "TrustShield Security", desc: "Prompt injection detection, HMAC audit chain, adaptive rate limiting, and mTLS mesh." },
  { icon: Wifi, title: "Remote Access", desc: "Auto-detects Tailscale or Cloudflare Tunnel. Your GPU, accessible from anywhere." },
  { icon: Users, title: "Multi-Device Mesh", desc: "Connect up to 5 GPUs on Pro. Route requests seamlessly across your fleet.", size: "wide" as const },
  { icon: Eye, title: "Verified Semantic Cache", desc: "vCache with <1% false positive rate. Cuts repeat inference cost by 60%." },
  { icon: BarChart3, title: "Token AI Assistant", desc: "Conversational fleet orchestrator. Cost analytics, proactive alerts, savings reports." },
  { icon: Store, title: "GPU Marketplace", desc: "Rent your idle cycles. Set your own prices. Earn while you sleep." },
];

const PAIN_POINTS = [
  { stat: "$0.03", unit: "/1K tokens", desc: "Cloud APIs charge this for models you already own and can run for free." },
  { stat: "90%", unit: "idle time", desc: "Your $2,000+ GPU sits unused most of the day while you pay cloud bills." },
  { stat: "0", unit: "remote access", desc: "Your powerful GPU is trapped on your desk. No easy way to use it from anywhere." },
];

const TOOLS = [
  { name: "Cursor", icon: Code2 },
  { name: "Claude Code", icon: Bot },
  { name: "Aider", icon: Sparkles },
  { name: "Continue.dev", icon: LayoutGrid },
  { name: "Open WebUI", icon: Globe },
];

const PLANS = {
  monthly: { starter: { price: "$0", period: "forever" }, pro: { price: "$29", period: "/month" }, team: { price: "$99", period: "/seat/month" } },
  annual: { starter: { price: "$0", period: "forever" }, pro: { price: "$23", period: "/month" }, team: { price: "$79", period: "/seat/month" } },
};

const FAQ_ITEMS = [
  { question: "Do I need a powerful GPU to use LLMHosts?", answer: "Any modern GPU works. A GTX 1060 runs 7B models fine. RTX 3060+ handles 13B. RTX 4090 or A100 runs 70B+. LLMHosts auto-detects your hardware and recommends the right models. Mac M-series chips work too." },
  { question: "How is this different from running a local inference engine?", answer: "LLMHosts wraps your local inference engine (and cloud backends) with an OpenAI-compatible API, intelligent three-tier routing, verified semantic caching that cuts 60% of repeat costs, remote tunnel access, TrustShield security, a web dashboard, Token AI assistant, and GPU marketplace. It turns a local inference setup into production infrastructure." },
  { question: "Is my data sent to the cloud?", answer: "On the Starter plan, everything stays 100% local. Zero telemetry, zero cloud calls. Pro and Team plans add optional cloud fallback for when your GPU is at capacity — you control exactly what gets routed where with privacy-first routing." },
  { question: "What happens after the 14-day Pro trial?", answer: "You keep using LLMHosts on the free Starter tier — unlimited local inference, single device, OpenAI-compatible API. All your configurations stay intact. Upgrade to Pro anytime to restore multi-device mesh, cloud fallback, and the full dashboard." },
  { question: "Can I earn money from my GPU?", answer: "Yes. The marketplace lets you opt-in to sharing your idle compute. Set your own prices, choose which models to serve, and earn revenue with an 80/20 split (you keep 80%). Requires Pro plan and Stripe Connect onboarding." },
  { question: "How does pricing work?", answer: "Starter is unlimited local inference forever — $0. Pro ($29/mo) adds cloud fallback, multi-device mesh, remote access, dashboard, Token AI, and marketplace access. Team ($99/seat/mo) adds GPU pooling, RBAC, and shared configurations. Cloud fallback tokens are billed at cost with no markup." },
  { question: "What AI coding tools does it work with?", answer: "Any tool that speaks the OpenAI API format. Cursor, Claude Code, Aider, Continue.dev, Open WebUI, LangChain, and hundreds more. Just change the base URL to your LLMHosts endpoint." },
  { question: "What about security?", answer: "TrustShield includes prompt injection detection (PromptGuard), HMAC-chain audit logging, adaptive rate limiting, mTLS mesh between nodes, and a transparency dashboard. Enterprise-grade security running on your hardware." },
];

/* ═══════════════════════════════════════════════════════════════
   Page
   ═══════════════════════════════════════════════════════════════ */

interface LandingPageClientProps {
  mode?: "open" | "exclusive";
}

export default function LandingPageClient({ mode = "open" }: LandingPageClientProps) {
  const [billing, setBilling] = useState<"monthly" | "annual">("monthly");
  const reduced = useReducedMotion();
  const plans = PLANS[billing];
  const isOpen = mode === "open";

  return (
    <div className="min-h-screen noise-overlay" data-funnel={mode} style={{ background: "#080809", color: "#e8e9eb" }}>
      {/* ─── Nav ─── */}
      <header className="border-b border-white/[0.06] sticky top-0 z-50" style={{ backdropFilter: "blur(16px) saturate(1.3)", WebkitBackdropFilter: "blur(16px) saturate(1.3)", background: "rgba(8,8,9,0.85)" }}>
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
          <Link href="/" className="flex items-center gap-2.5 group">
            <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-violet-600/20 border border-violet-500/30 transition-all group-hover:bg-violet-600/30 group-hover:border-violet-500/50">
              <Zap className="h-4 w-4 text-violet-400" />
            </div>
            <span className="text-lg font-bold tracking-tight text-white">LLMHosts</span>
          </Link>
          <nav className="flex items-center gap-6">
            {isOpen && <Link href="/pricing" className="text-sm text-gray-400 hover:text-white transition-colors hidden sm:block">Pricing</Link>}
            <Link href="/docs" className="text-sm text-gray-400 hover:text-white transition-colors hidden sm:block">Docs</Link>
            {isOpen ? (
              <>
                <Link href="/auth/login" className="text-sm text-gray-400 hover:text-white transition-colors">Sign in</Link>
                <Link href="/auth/register"><Button variant="primary" size="sm" className="bg-violet-600 hover:bg-violet-500 shadow-lg shadow-violet-600/20">Start Free Trial</Button></Link>
              </>
            ) : (
              <a href="#waitlist"><Button variant="primary" size="sm" className="bg-violet-600 hover:bg-violet-500 shadow-lg shadow-violet-600/20">Request Access</Button></a>
            )}
          </nav>
        </div>
      </header>

      <main>
        {/* ═══ S1: HERO ═══ */}
        <section className="relative overflow-hidden min-h-[90vh] flex items-center">
          <div className="pointer-events-none absolute -top-40 left-1/2 -translate-x-1/2 h-[800px] w-[800px] rounded-full opacity-15 blur-3xl" style={{ background: "radial-gradient(circle, #7c3aed 0%, transparent 60%)" }} aria-hidden />
          <div className="pointer-events-none absolute top-60 right-0 h-[400px] w-[400px] rounded-full opacity-10 blur-3xl" style={{ background: "radial-gradient(circle, #3b82f6 0%, transparent 70%)" }} aria-hidden />

          <div className="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 w-full">
            <div className="grid gap-12 lg:grid-cols-2 lg:gap-8 items-center">
              <motion.div initial={reduced ? {} : { opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }} className="relative">
                {isOpen ? (
                  <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/20 bg-violet-500/10 px-3.5 py-1.5 text-xs font-medium text-violet-300">
                    <span className="h-1.5 w-1.5 rounded-full bg-violet-400 animate-pulse" />14-day Pro trial · No credit card
                  </div>
                ) : (
                  <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-amber-500/20 bg-amber-500/10 px-3.5 py-1.5 text-xs font-medium text-amber-300">
                    <span className="h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />Early access · Limited spots
                  </div>
                )}

                <h1 className="text-4xl font-bold sm:text-5xl lg:text-6xl gradient-text-hero" style={{ letterSpacing: "-0.03em", lineHeight: 1.08 }}>
                  {isOpen ? (<>Your hardware. <span className="gradient-text-brand">Real AI infrastructure.</span> From anywhere.</>) : (<>Enterprise GPU infrastructure. <span className="gradient-text-brand">By invitation.</span></>)}
                </h1>

                <p className="mt-6 text-lg leading-relaxed text-gray-400 max-w-xl">
                  {isOpen ? "Turn your GPU into a production AI platform. Intelligent routing, verified caching, TrustShield security, and a real dashboard — not another inference wrapper." : "We're building the infrastructure layer for AI teams who run their own hardware. Intelligent routing, fleet management, and a GPU marketplace — built for professionals."}
                </p>

                <div className="mt-8 flex flex-col items-start gap-4" data-testid="deploy-cta">
                  {isOpen ? (
                    <>
                      <div className="flex flex-wrap gap-6">
                        <Link href="/auth/register" className="group inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-950 cursor-pointer px-6 py-3 text-base bg-violet-600 text-white hover:bg-violet-500 shadow-lg shadow-violet-600/25 focus:ring-violet-500/50">Start 14-day free trial<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" /></Link>
                        <a href="#demo" className="inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-950 cursor-pointer px-6 py-3 text-base text-gray-400 hover:text-gray-100 border border-white/10 hover:bg-white/5 hover:border-white/20 focus:ring-gray-500/50">See it in action</a>
                      </div>
                      <InstallCommands />
                    </>
                  ) : (
                    <WaitlistForm />
                  )}
                </div>
              </motion.div>

              <div className="hidden lg:block">{isOpen ? <AnimatedTerminal /> : <DashboardPreview />}</div>
            </div>
          </div>
        </section>

        {/* ═══ S2: PROBLEM ═══ */}
        <section className="border-y border-white/[0.06] py-20">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <AnimatedSection className="mb-14 text-center">
              <AnimatedItem>
                <h2 className="text-3xl font-bold text-white sm:text-4xl" style={{ letterSpacing: "-0.02em" }}>
                  You own the hardware. <span className="text-gray-500">You&apos;re still paying cloud prices.</span>
                </h2>
              </AnimatedItem>
            </AnimatedSection>
            <AnimatedSection className="grid gap-6 md:grid-cols-3" stagger={0.12}>
              {PAIN_POINTS.map((p) => (
                <AnimatedItem key={p.stat}>
                  <GlassContainer intensity="subtle" className="h-full p-6 text-center hover:border-white/20 transition-colors">
                    <div className="text-4xl font-bold text-white">{p.stat}<span className="text-lg text-gray-500 font-normal ml-1">{p.unit}</span></div>
                    <p className="mt-3 text-sm text-gray-400 leading-relaxed">{p.desc}</p>
                  </GlassContainer>
                </AnimatedItem>
              ))}
            </AnimatedSection>
            <AnimatedSection className="mt-10 text-center">
              <AnimatedItem>
                <p className="text-lg text-gray-500">There&apos;s a better way. <span className="text-violet-400">LLMHosts fixes all three.</span></p>
              </AnimatedItem>
            </AnimatedSection>
          </div>
        </section>

        {/* ═══ S3: FEATURES BENTO ═══ */}
        <section className="py-24">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <AnimatedSection className="mb-14 text-center">
              <AnimatedItem>
                <h2 className="text-3xl font-bold text-white sm:text-4xl" style={{ letterSpacing: "-0.02em" }}>Infrastructure, not a toy</h2>
                <p className="mt-4 text-gray-400 max-w-2xl mx-auto">Enterprise-grade routing, security, and monitoring — running on your hardware, under your control.</p>
              </AnimatedItem>
            </AnimatedSection>
            <AnimatedSection stagger={0.06}>
              <BentoGrid>
                {FEATURES.map((f) => (
                  <AnimatedItem key={f.title} className={f.size === "wide" ? "md:col-span-2" : ""}>
                    <BentoCard size={f.size}>
                      <div className="mb-4 inline-flex shrink-0 rounded-lg bg-violet-500/10 p-2.5 border border-violet-500/10"><f.icon className="h-5 w-5 text-violet-400" /></div>
                      <h3 className="text-base font-semibold text-white">{f.title}</h3>
                      <p className="mt-2 text-sm leading-relaxed text-gray-400">{f.desc}</p>
                    </BentoCard>
                  </AnimatedItem>
                ))}
              </BentoGrid>
            </AnimatedSection>
          </div>
        </section>

        {/* ═══ S4: SAVINGS CALCULATOR ═══ */}
        <section className="border-y border-white/[0.06] py-24" style={{ background: "linear-gradient(180deg, rgba(124,58,237,0.03) 0%, transparent 100%)" }}>
          <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <AnimatedSection className="mb-12 text-center">
              <AnimatedItem>
                <h2 className="text-3xl font-bold text-white sm:text-4xl" style={{ letterSpacing: "-0.02em" }}>Calculate your savings</h2>
                <p className="mt-4 text-gray-400">See exactly how much you&apos;ll save vs cloud APIs with your specific hardware.</p>
              </AnimatedItem>
            </AnimatedSection>
            <AnimatedSection><AnimatedItem><SavingsCalculator /></AnimatedItem></AnimatedSection>
          </div>
        </section>

        {/* ═══ S5: SOCIAL PROOF + COMPARISON ═══ */}
        <section className="py-24">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <AnimatedSection className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-20">
              {[{ value: "Sub-5ms", label: "routing overhead" }, { value: "60%", label: "cache cost savings" }, { value: "100+", label: "models supported" }, { value: "2 min", label: "to first API call" }].map(({ value, label }) => (
                <AnimatedItem key={value}><div className="text-center"><div className="text-3xl font-bold text-white">{value}</div><div className="text-xs text-gray-500 mt-1">{label}</div></div></AnimatedItem>
              ))}
            </AnimatedSection>

            <AnimatedSection className="mb-16">
              <AnimatedItem><p className="text-center text-sm text-gray-500 mb-6">Works with every tool that speaks the OpenAI API format</p></AnimatedItem>
              <div className="flex flex-wrap items-center justify-center gap-3">
                {TOOLS.map((tool) => (
                  <AnimatedItem key={tool.name}>
                    <motion.div whileHover={{ y: -3, scale: 1.03 }} transition={{ type: "spring", stiffness: 400, damping: 25 }} className="flex items-center gap-2.5 rounded-xl border border-white/10 bg-white/[0.04] px-5 py-3 transition-colors hover:border-violet-500/30 hover:bg-violet-500/5 cursor-default">
                      <tool.icon className="h-5 w-5 text-violet-400" /><span className="text-sm font-medium text-gray-300">{tool.name}</span>
                    </motion.div>
                  </AnimatedItem>
                ))}
              </div>
            </AnimatedSection>

            <AnimatedSection className="mb-14 text-center">
              <AnimatedItem>
                <h2 className="text-3xl font-bold text-white sm:text-4xl" style={{ letterSpacing: "-0.02em" }}>How we compare</h2>
                <p className="mt-4 text-gray-400 mb-8">The only AI platform that starts free and scales to cloud.</p>
              </AnimatedItem>
            </AnimatedSection>
            <AnimatedSection><AnimatedItem><div className="max-w-5xl mx-auto"><BenchmarkTable /></div></AnimatedItem></AnimatedSection>
          </div>
        </section>

        {/* ═══ S6: DEMO TERMINAL ═══ */}
        <section id="demo" className="border-y border-white/[0.06] py-24" style={{ background: "linear-gradient(180deg, rgba(124,58,237,0.03) 0%, transparent 100%)" }}>
          <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
            <AnimatedSection>
              <AnimatedItem>
                <h2 className="mb-3 text-center text-3xl font-bold tracking-tight text-white" style={{ letterSpacing: "-0.02em" }}>From install to production</h2>
                <p className="mb-10 text-center text-gray-400">Two commands. Under two minutes.</p>
              </AnimatedItem>
              <AnimatedItem><AnimatedTerminal /></AnimatedItem>
            </AnimatedSection>
          </div>
        </section>

        {/* ═══ S7: PRICING (Open) / WAITLIST (Exclusive) ═══ */}
        {isOpen ? (
          <section className="py-24">
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
              <AnimatedSection className="mb-12 text-center">
                <AnimatedItem>
                  <h2 className="text-3xl font-bold text-white sm:text-4xl" style={{ letterSpacing: "-0.02em" }}>Simple, transparent pricing</h2>
                  <p className="mt-4 text-gray-400 mb-8">Start with a 14-day Pro trial. No credit card required.</p>
                  <PricingToggle value={billing} onChange={setBilling} savingsPercent={20} />
                </AnimatedItem>
              </AnimatedSection>

              <AnimatedSection className="grid gap-6 md:grid-cols-2 lg:grid-cols-4" stagger={0.08}>
                {/* Starter */}
                <AnimatedItem>
                  <GlassContainer intensity="subtle" className="h-full p-8 flex flex-col">
                    <h3 className="text-lg font-semibold text-white">Starter</h3>
                    <div className="mt-4"><span className="text-4xl font-bold text-white">{plans.starter.price}</span><span className="text-sm text-gray-500 ml-1">{plans.starter.period}</span></div>
                    <p className="mt-3 text-sm text-gray-400">Full local inference. No limits.</p>
                    <ul className="mt-6 space-y-3 flex-1">
                      {["Unlimited local inference", "OpenAI + Anthropic API", "Intelligent routing", "Semantic caching", "1 device"].map((f) => (
                        <li key={f} className="flex items-start gap-2.5 text-sm text-gray-400"><Check className="h-4 w-4 text-violet-400 mt-0.5 shrink-0" />{f}</li>
                      ))}
                    </ul>
                    <Link href="/auth/register" className="mt-8 block"><Button variant="secondary" size="md" className="w-full bg-white/5 border-white/10 hover:bg-white/10">Get started free</Button></Link>
                  </GlassContainer>
                </AnimatedItem>

                {/* Pro */}
                <AnimatedItem>
                  <GlassContainer intensity="emphasis" glow className="h-full p-8 flex flex-col ring-1 ring-violet-500/30">
                    <div className="flex items-center justify-between">
                      <h3 className="text-lg font-semibold text-white">Pro</h3>
                      <span className="inline-flex rounded-full bg-violet-500/20 px-2.5 py-0.5 text-xs font-semibold text-violet-300">Most Popular</span>
                    </div>
                    <div className="mt-4">
                      <span className="text-4xl font-bold text-white">{plans.pro.price}</span><span className="text-sm text-gray-500 ml-1">{plans.pro.period}</span>
                      {billing === "annual" && <span className="ml-2 text-xs text-emerald-400">Save $72/yr</span>}
                    </div>
                    <p className="mt-3 text-sm text-gray-400">Cloud intelligence + multi-device.</p>
                    <ul className="mt-6 space-y-3 flex-1">
                      {["Everything in Starter", "Cloud fallback (at cost)", "Multi-device mesh (up to 5)", "Remote tunnel access", "Web dashboard + analytics", "Token AI assistant", "GPU marketplace access", "Priority support"].map((f) => (
                        <li key={f} className="flex items-start gap-2.5 text-sm text-gray-300"><Check className="h-4 w-4 text-violet-400 mt-0.5 shrink-0" />{f}</li>
                      ))}
                    </ul>
                    <Link href="/auth/register" className="mt-8 block">
                      <Button variant="primary" size="md" className="w-full bg-violet-600 hover:bg-violet-500 shadow-lg shadow-violet-600/25">Start 14-day free trial<ChevronRight className="h-4 w-4" /></Button>
                    </Link>
                    <p className="mt-2 text-center text-xs text-gray-500">No credit card required</p>
                  </GlassContainer>
                </AnimatedItem>

                {/* Team */}
                <AnimatedItem>
                  <GlassContainer intensity="subtle" className="h-full p-8 flex flex-col">
                    <h3 className="text-lg font-semibold text-white">Team</h3>
                    <div className="mt-4">
                      <span className="text-4xl font-bold text-white">{plans.team.price}</span><span className="text-sm text-gray-500 ml-1">{plans.team.period}</span>
                      {billing === "annual" && <span className="ml-2 text-xs text-emerald-400">Save $240/yr</span>}
                    </div>
                    <p className="mt-3 text-sm text-gray-400">Shared GPU pools + access controls.</p>
                    <ul className="mt-6 space-y-3 flex-1">
                      {["Everything in Pro", "GPU pooling across team", "Role-based access control", "Per-user cost tracking", "Shared configurations", "SSO + SAML (coming soon)"].map((f) => (
                        <li key={f} className="flex items-start gap-2.5 text-sm text-gray-400"><Check className="h-4 w-4 text-violet-400 mt-0.5 shrink-0" />{f}</li>
                      ))}
                    </ul>
                    <Link href="/auth/register" className="mt-8 block"><Button variant="secondary" size="md" className="w-full bg-white/5 border-white/10 hover:bg-white/10">Start free trial</Button></Link>
                  </GlassContainer>
                </AnimatedItem>

                {/* Enterprise */}
                <AnimatedItem>
                  <GlassContainer intensity="subtle" className="h-full p-8 flex flex-col">
                    <h3 className="text-lg font-semibold text-white">Enterprise</h3>
                    <div className="mt-4"><span className="text-3xl font-bold text-white">Custom</span></div>
                    <p className="mt-3 text-sm text-gray-400">Dedicated support, SLAs, and custom integrations.</p>
                    <ul className="mt-6 space-y-3 flex-1">
                      {["Everything in Team", "Unlimited devices", "Custom SLAs", "Dedicated support", "On-premise deployment", "Custom integrations"].map((f) => (
                        <li key={f} className="flex items-start gap-2.5 text-sm text-gray-400"><Check className="h-4 w-4 text-violet-400 mt-0.5 shrink-0" />{f}</li>
                      ))}
                    </ul>
                    <a href="mailto:enterprise@llmhosts.com" className="mt-8 block"><Button variant="secondary" size="md" className="w-full bg-white/5 border-white/10 hover:bg-white/10">Contact Sales</Button></a>
                  </GlassContainer>
                </AnimatedItem>
              </AnimatedSection>

              <div className="mt-6 text-center">
                <p className="text-sm text-gray-500">All plans include a 14-day Pro trial. Downgrade to Starter anytime — your configurations stay intact.</p>
              </div>
            </div>
          </section>
        ) : (
          <section id="waitlist" className="py-24">
            <div className="mx-auto max-w-2xl text-center px-4 sm:px-6 lg:px-8">
              <AnimatedSection><AnimatedItem>
                <h2 className="text-3xl font-bold text-white sm:text-4xl" style={{ letterSpacing: "-0.02em" }}>Join the waitlist</h2>
                <p className="mt-4 text-lg text-gray-400 mb-8">We&apos;re onboarding teams in batches. Get early access and shape the product.</p>
                <div className="flex justify-center"><WaitlistForm /></div>
              </AnimatedItem></AnimatedSection>
            </div>
          </section>
        )}

        {/* ═══ S8: FAQ ═══ */}
        <section className={cn("py-24", isOpen && "border-t border-white/[0.06]")} style={isOpen ? { background: "linear-gradient(180deg, rgba(124,58,237,0.03) 0%, transparent 100%)" } : undefined}>
          <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
            <AnimatedSection className="mb-12 text-center"><AnimatedItem><h2 className="text-3xl font-bold text-white" style={{ letterSpacing: "-0.02em" }}>Questions?</h2></AnimatedItem></AnimatedSection>
            <AnimatedSection><AnimatedItem><GlassContainer intensity="subtle" className="p-6"><FaqAccordion items={FAQ_ITEMS} /></GlassContainer></AnimatedItem></AnimatedSection>
          </div>
        </section>

        {/* ═══ S9: FINAL CTA ═══ */}
        <section className="border-y border-white/[0.06] py-24 relative overflow-hidden" style={{ background: "linear-gradient(180deg, rgba(124,58,237,0.05) 0%, transparent 100%)" }}>
          <div className="pointer-events-none absolute bottom-0 left-1/2 -translate-x-1/2 h-[400px] w-[600px] rounded-full opacity-15 blur-3xl" style={{ background: "radial-gradient(circle, #7c3aed 0%, transparent 60%)" }} aria-hidden />
          <div className="relative mx-auto max-w-2xl text-center px-4 sm:px-6 lg:px-8">
            <AnimatedSection><AnimatedItem>
              {isOpen ? (
                <>
                  <h2 className="text-3xl font-bold text-white sm:text-4xl" style={{ letterSpacing: "-0.02em" }}>14 days. Everything. Free.</h2>
                  <p className="mt-4 text-lg text-gray-400">Stop paying cloud providers for what your hardware can do. Start serving AI from your own machine in two minutes.</p>
                  <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
                    <Link href="/auth/register"><Button variant="primary" size="lg" className="bg-violet-600 hover:bg-violet-500 shadow-lg shadow-violet-600/25 group">Start your free trial<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" /></Button></Link>
                    <CopyableCode code="pip install llmhosts" />
                  </div>
                  <p className="mt-4 text-xs text-gray-500">No credit card required. Downgrade to Starter anytime.</p>
                </>
              ) : (
                <>
                  <h2 className="text-3xl font-bold text-white sm:text-4xl" style={{ letterSpacing: "-0.02em" }}>Your GPU is already powerful enough.</h2>
                  <p className="mt-4 text-lg text-gray-400">Join the waitlist and be among the first to turn your hardware into real AI infrastructure.</p>
                  <div className="mt-8 flex justify-center"><WaitlistForm /></div>
                </>
              )}
            </AnimatedItem></AnimatedSection>
          </div>
        </section>

        {/* ─── Footer ─── */}
        <footer className="py-12">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="flex flex-col items-center justify-between gap-6 md:flex-row">
              <div className="flex items-center gap-2">
                <div className="flex h-6 w-6 items-center justify-center rounded-md bg-violet-600/20 border border-violet-500/30"><Zap className="h-3.5 w-3.5 text-violet-400" /></div>
                <span className="font-bold text-white">LLMHosts</span>
              </div>
              <nav className="flex flex-wrap items-center justify-center gap-6 text-sm text-gray-500" data-nosnippet>
                {isOpen && <Link href="/pricing" className="hover:text-gray-300 transition-colors">Pricing</Link>}
                <Link href="/docs" className="hover:text-gray-300 transition-colors">Docs</Link>
                <Link href="/legal/terms" className="hover:text-gray-300 transition-colors">Terms</Link>
                <Link href="/legal/privacy" className="hover:text-gray-300 transition-colors">Privacy</Link>
                <Link href="/contact" className="hover:text-gray-300 transition-colors">Contact</Link>
              </nav>
            </div>
            <div className="mt-8 text-center text-xs text-gray-600"><p>&copy; {new Date().getFullYear()} LLMHosts, Inc. All rights reserved.</p></div>
          </div>
        </footer>
      </main>
    </div>
  );
}
