import React, { useEffect, useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
  Heart,
  ShieldCheck,
  Sparkles,
  Video,
  Mic,
  Image as ImageIcon,
  Lock,
  Crown,
  Check,
  Wand2,
  Star,
  MessageCircle,
  SlidersHorizontal,
  CreditCard,
  UserCheck,
  BadgeCheck,
  Brain,
  Flame,
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";

const baseAvatars = [
  {
    id: "luna",
    name: "Luna",
    archetype: "Warm romantic",
    palette: ["from-fuchsia-500", "via-rose-400", "to-amber-300"],
    face: "oval",
    vibe: "Playful",
  },
  {
    id: "kai",
    name: "Kai",
    archetype: "Confident charmer",
    palette: ["from-cyan-500", "via-sky-400", "to-indigo-300"],
    face: "square",
    vibe: "Calm",
  },
  {
    id: "nova",
    name: "Nova",
    archetype: "Androgynous dreamer",
    palette: ["from-violet-500", "via-purple-400", "to-pink-300"],
    face: "heart",
    vibe: "Curious",
  },
];

const moods = ["Tender", "Flirty", "Adventurous", "Protective", "Witty", "Private 18+"];
const voices = ["Velvet", "Low Glow", "Bright Silk", "Noir Whisper"];
const styles = ["Editorial", "Soft cinematic", "Night luxe", "Minimal modern"];
const plans = {
  free: { label: "Free", avatars: 1, multimodal: false, adult: false },
  plus: { label: "Plus", avatars: 3, multimodal: true, adult: false },
  black: { label: "Black Label", avatars: 12, multimodal: true, adult: true },
};

function cn(...parts: (string | false | undefined)[]) {
  return parts.filter(Boolean).join(" ");
}

function Portrait({ palette, face, intensity = 55 }: { palette: string[]; face: string; intensity?: number }) {
  const faceClass = face === "square" ? "rounded-[28%]" : face === "heart" ? "rounded-[38%]" : "rounded-[44%]";
  return (
    <div className={cn("relative h-full w-full overflow-hidden bg-gradient-to-br", ...palette)}>
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(255,255,255,.30),transparent_28%),radial-gradient(circle_at_80%_12%,rgba(255,255,255,.18),transparent_20%),radial-gradient(circle_at_60%_72%,rgba(0,0,0,.16),transparent_28%)]" />
      <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/35 to-transparent" />
      <div className="absolute left-1/2 top-[18%] h-[68%] w-[58%] -translate-x-1/2">
        <div className={cn("absolute left-1/2 top-0 h-[42%] w-[46%] -translate-x-1/2 bg-[rgba(255,244,234,.88)] shadow-2xl", faceClass)} />
        <div className="absolute left-1/2 top-[32%] h-[42%] w-[70%] -translate-x-1/2 rounded-[38%] bg-[rgba(255,244,234,.85)]" />
        <div className="absolute left-[25%] top-[16%] h-[10%] w-[50%] rounded-full bg-black/80 blur-[1px]" style={{ opacity: 0.45 + intensity / 220 }} />
        <div className="absolute left-[30%] top-[22%] h-[2.5%] w-[11%] rounded-full bg-black/65" />
        <div className="absolute right-[30%] top-[22%] h-[2.5%] w-[11%] rounded-full bg-black/65" />
        <div className="absolute left-1/2 top-[28%] h-[7%] w-[2.5%] -translate-x-1/2 rounded-full bg-[rgba(180,120,105,.35)]" />
        <div className="absolute left-1/2 top-[35%] h-[3.6%] w-[18%] -translate-x-1/2 rounded-full bg-rose-900/40" />
        <div className="absolute left-1/2 bottom-0 h-[28%] w-[56%] -translate-x-1/2 rounded-t-[40%] bg-[rgba(255,236,228,.72)]" />
      </div>
      <div className="absolute inset-x-0 bottom-0 h-[32%] bg-black/10 backdrop-blur-[2px]" />
    </div>
  );
}

function generateReply(prompt: string, state: any) {
  const tone = state.mood === "Private 18+" ? "velvet" : state.mood.toLowerCase();
  const openers = {
    Tender: "I’m here with you.",
    Flirty: "You have my full attention.",
    Adventurous: "Let’s make this feel cinematic.",
    Protective: "You can relax here.",
    Witty: "Good. We’re finally getting interesting.",
    "Private 18+": "Private mode is on and your preferences are locked in.",
  } as Record<string, string>;
  const line = openers[state.mood] || "I’m tuned in.";
  const cue = prompt ? ` You said: “${prompt}”` : "";
  const persona = `${state.name} is using a ${tone} tone with ${state.voice} voice styling.`;
  const memory = ` Memory anchor: ${state.memory}% continuity, ${state.style} visual treatment.`;
  if (state.mode === "image") {
    return `${line}${cue} I’d render a ${state.style.toLowerCase()} portrait with ${state.glow}% glamour, ${state.voice.toLowerCase()} energy, and ${state.boundaries ? "tasteful" : "unguarded"} framing.${memory}`;
  }
  if (state.mode === "voice") {
    return `${line}${cue} Voice scene ready: breath pacing softened, cadence set to ${state.voice}, response shaped for a ${state.mood.toLowerCase()} interaction.${memory}`;
  }
  return `${line}${cue} ${persona}${memory}`;
}

export default function MyAiLoveBetterDemo() {
  const [plan, setPlan] = useState<keyof typeof plans>("plus");
  const [verified, setVerified] = useState(false);
  const [loggedIn, setLoggedIn] = useState(false);
  const [showAgeGate, setShowAgeGate] = useState(false);
  const [selected, setSelected] = useState(baseAvatars[0]);
  const [name, setName] = useState(baseAvatars[0].name);
  const [mood, setMood] = useState("Tender");
  const [voice, setVoice] = useState(voices[0]);
  const [style, setStyle] = useState(styles[0]);
  const [glow, setGlow] = useState(62);
  const [memory, setMemory] = useState(78);
  const [multiAvatar, setMultiAvatar] = useState(true);
  const [boundaries, setBoundaries] = useState(true);
  const [mode, setMode] = useState<"chat" | "voice" | "image">("chat");
  const [prompt, setPrompt] = useState("Plan a late-night rooftop date and remember I like jasmine tea.");
  const [messages, setMessages] = useState<any[]>([
    { role: "system", text: "Welcome back. Your companion profile and preferences are restored locally for this demo." },
    { role: "assistant", text: "I saved your jasmine tea preference, your low-light portrait style, and your preference for slow, thoughtful pacing." },
  ]);

  useEffect(() => {
    const saved = localStorage.getItem("myailove-better-demo");
    if (saved) {
      try {
        const parsed = JSON.parse(saved);
        setPlan(parsed.plan || "plus");
        setVerified(!!parsed.verified);
        setLoggedIn(!!parsed.loggedIn);
        setSelected(parsed.selected || baseAvatars[0]);
        setName(parsed.name || baseAvatars[0].name);
        setMood(parsed.mood || "Tender");
        setVoice(parsed.voice || voices[0]);
        setStyle(parsed.style || styles[0]);
        setGlow(parsed.glow ?? 62);
        setMemory(parsed.memory ?? 78);
        setMultiAvatar(parsed.multiAvatar ?? true);
        setBoundaries(parsed.boundaries ?? true);
        setMessages(parsed.messages || messages);
      } catch {}
    }
  }, []);

  useEffect(() => {
    localStorage.setItem(
      "myailove-better-demo",
      JSON.stringify({
        plan,
        verified,
        loggedIn,
        selected,
        name,
        mood,
        voice,
        style,
        glow,
        memory,
        multiAvatar,
        boundaries,
        messages,
      })
    );
  }, [plan, verified, loggedIn, selected, name, mood, voice, style, glow, memory, multiAvatar, boundaries, messages]);

  const planConfig = plans[plan];
  const canUseAdult = planConfig.adult && verified;
  const output = useMemo(
    () => generateReply(prompt, { mood, voice, style, glow, memory, name, mode, boundaries }),
    [prompt, mood, voice, style, glow, memory, name, mode, boundaries]
  );

  function send() {
    const requestedAdult = /adult|private|after dark|uncensored|nsfw/i.test(prompt) || mood === "Private 18+";
    if (requestedAdult && !canUseAdult) {
      setShowAgeGate(true);
      setMessages((m) => [
        ...m,
        { role: "user", text: prompt },
        { role: "assistant", text: "Private 18+ mode requires a Black Label plan and completed age verification. Everything else is available now." },
      ]);
      return;
    }
    setMessages((m) => [...m, { role: "user", text: prompt }, { role: "assistant", text: output }]);
  }

  function chooseAvatar(avatar: any) {
    if (!planConfig.avatars || (avatar.id !== selected.id && planConfig.avatars < 2 && multiAvatar)) return;
    setSelected(avatar);
    setName(avatar.name);
  }

  function upgrade(nextPlan: keyof typeof plans) {
    setPlan(nextPlan);
    setLoggedIn(true);
  }

  return (
    <div className="min-h-screen bg-neutral-950 text-white">
      <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,rgba(244,114,182,.16),transparent_20%),radial-gradient(circle_at_80%_10%,rgba(56,189,248,.14),transparent_18%),linear-gradient(180deg,#09090b,#111827_44%,#09090b)]" />
      <header className="sticky top-0 z-30 border-b border-white/10 backdrop-blur supports-[backdrop-filter]:bg-neutral-950/70">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-rose-500 to-fuchsia-500 shadow-lg shadow-rose-500/20">
              <Heart className="h-5 w-5" />
            </div>
            <div>
              <div className="text-lg font-semibold tracking-tight">myailove.ai</div>
              <div className="text-xs text-white/55">Tasteful companion product demo</div>
            </div>
          </div>
          <div className="hidden items-center gap-3 md:flex">
            <Badge variant="secondary" className="border border-emerald-400/30 bg-emerald-400/10 text-emerald-300">18,472 online</Badge>
            <Button variant="outline" className="border-white/15 bg-white/5 text-white hover:bg-white/10" onClick={() => setLoggedIn((v) => !v)}>
              {loggedIn ? "Signed in" : "Log in"}
            </Button>
            <Button className="rounded-2xl bg-white text-black hover:bg-white/90" onClick={() => upgrade("plus")}>Start free</Button>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-7xl px-6 py-10">
        <section className="grid gap-8 lg:grid-cols-[1.1fr_.9fr] lg:items-center">
          <div>
            <Badge className="mb-4 rounded-full border border-white/10 bg-white/5 px-4 py-1 text-white/80">Out-positioned for trust, retention, and conversion</Badge>
            <h1 className="max-w-4xl text-5xl font-semibold tracking-tight sm:text-6xl xl:text-7xl">
              A better AI companion demo: premium, coherent, and built to convert.
            </h1>
            <p className="mt-5 max-w-2xl text-lg leading-8 text-white/70">
              Instead of random stock photos and shallow promises, this prototype leans into what actually wins in the category: memory, customization, voice, tasteful visual identity, clear monetization, and gated private mode.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              {[
                "Memory-first relationship loop",
                "Tasteful premium funnel",
                "Multi-avatar upsell",
                "Private 18+ gating",
                "Local persistence for demo realism",
              ].map((x) => (
                <Badge key={x} className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-white/80">{x}</Badge>
              ))}
            </div>
            <div className="mt-8 grid gap-3 sm:grid-cols-3">
              {[
                { label: "What Replika proves", value: "care" },
                { label: "What Nomi proves", value: "memory" },
                { label: "What Candy proves", value: "multimodal" },
              ].map((item) => (
                <Card key={item.label} className="rounded-3xl border-white/10 bg-white/5">
                  <CardContent className="p-5">
                    <div className="text-sm text-white/50">{item.label}</div>
                    <div className="mt-1 text-2xl font-semibold capitalize">{item.value}</div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>

          <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}>
            <Card className="overflow-hidden rounded-[32px] border-white/10 bg-white/5 shadow-2xl shadow-fuchsia-950/30">
              <CardContent className="p-4">
                <div className="relative aspect-[16/11] overflow-hidden rounded-[26px] border border-white/10">
                  <Portrait palette={selected.palette} face={selected.face} intensity={glow} />
                  <div className="absolute inset-x-0 top-0 flex items-center justify-between p-4">
                    <Badge className="rounded-full bg-black/40 text-emerald-300 backdrop-blur"><Video className="mr-2 h-3.5 w-3.5" />Live preview</Badge>
                    <Badge className="rounded-full bg-black/40 text-white/85 backdrop-blur">{style}</Badge>
                  </div>
                  <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-5">
                    <div className="flex items-end justify-between gap-4">
                      <div>
                        <div className="text-2xl font-semibold">{name}</div>
                        <div className="mt-1 text-sm text-white/70">{selected.archetype} • {mood} • {voice}</div>
                      </div>
                      <div className="rounded-2xl border border-white/10 bg-white/10 px-3 py-2 text-right backdrop-blur">
                        <div className="text-xs text-white/55">Memory continuity</div>
                        <div className="text-lg font-semibold">{memory}%</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="mt-4 grid grid-cols-3 gap-3">
                  <Metric icon={MessageCircle} label="Chat" value="Instant" />
                  <Metric icon={Mic} label="Voice" value={planConfig.multimodal ? "Ready" : "Plus"} />
                  <Metric icon={ImageIcon} label="Portrait" value={planConfig.multimodal ? "Ready" : "Plus"} />
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </section>

        <section className="mt-10 grid gap-8 xl:grid-cols-[.95fr_1.05fr]">
          <Card className="rounded-[32px] border-white/10 bg-white/5">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-2xl"><Wand2 className="h-5 w-5 text-fuchsia-300" /> Build your companion</CardTitle>
              <CardDescription className="text-white/60">Consistent art direction beats random photo IDs every time.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-7">
              <div>
                <Label className="text-white/70">Companion roster</Label>
                <div className="mt-3 grid grid-cols-3 gap-3">
                  {baseAvatars.map((avatar, index) => {
                    const locked = index >= planConfig.avatars;
                    return (
                      <button
                        key={avatar.id}
                        onClick={() => !locked && chooseAvatar(avatar)}
                        className={cn(
                          "group overflow-hidden rounded-3xl border text-left transition",
                          locked ? "cursor-not-allowed border-white/10 opacity-45" : selected.id === avatar.id ? "border-fuchsia-400/70" : "border-white/10 hover:border-white/30"
                        )}
                      >
                        <div className="relative aspect-square">
                          <Portrait palette={avatar.palette} face={avatar.face} intensity={58} />
                          {locked && <div className="absolute inset-0 grid place-items-center bg-black/45"><Lock className="h-6 w-6" /></div>}
                        </div>
                        <div className="p-3">
                          <div className="font-medium">{avatar.name}</div>
                          <div className="text-xs text-white/55">{avatar.archetype}</div>
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>

              <div className="grid gap-5 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>Name</Label>
                  <Input value={name} onChange={(e) => setName(e.target.value)} className="border-white/10 bg-black/25 text-white" />
                </div>
                <div className="space-y-2">
                  <Label>Voice</Label>
                  <div className="grid grid-cols-2 gap-2">
                    {voices.map((v) => (
                      <Button key={v} variant="outline" onClick={() => setVoice(v)} className={cn("justify-start rounded-2xl border-white/10 bg-white/5 text-white hover:bg-white/10", voice === v && "border-fuchsia-400/60 bg-fuchsia-500/10")}>{v}</Button>
                    ))}
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                <Label>Visual treatment</Label>
                <div className="grid grid-cols-2 gap-2">
                  {styles.map((s) => (
                    <Button key={s} variant="outline" onClick={() => setStyle(s)} className={cn("justify-start rounded-2xl border-white/10 bg-white/5 text-white hover:bg-white/10", style === s && "border-cyan-400/60 bg-cyan-500/10")}>{s}</Button>
                  ))}
                </div>
              </div>

              <div>
                <div className="mb-3 flex items-center justify-between text-sm text-white/70"><span>Glamour level</span><span>{glow}%</span></div>
                <Slider value={[glow]} min={20} max={100} step={1} onValueChange={(v) => setGlow(v[0])} />
              </div>

              <div>
                <div className="mb-3 flex items-center justify-between text-sm text-white/70"><span>Memory continuity</span><span>{memory}%</span></div>
                <Slider value={[memory]} min={30} max={100} step={1} onValueChange={(v) => setMemory(v[0])} />
                <div className="mt-3"><Progress value={memory} /></div>
              </div>

              <div>
                <Label className="mb-3 block">Interaction mode</Label>
                <div className="flex flex-wrap gap-2">
                  {moods.map((item) => (
                    <Button
                      key={item}
                      variant="outline"
                      onClick={() => {
                        if (item === "Private 18+" && !canUseAdult) {
                          setShowAgeGate(true);
                          return;
                        }
                        setMood(item);
                      }}
                      className={cn("rounded-full border-white/10 bg-white/5 text-white hover:bg-white/10", mood === item && "border-rose-400/70 bg-rose-500/10")}
                    >
                      {item === "Private 18+" ? <Flame className="mr-2 h-4 w-4" /> : null}
                      {item}
                    </Button>
                  ))}
                </div>
              </div>

              <div className="grid gap-4 rounded-3xl border border-white/10 bg-black/20 p-4 sm:grid-cols-2">
                <ToggleRow label="Multiple saved companions" checked={multiAvatar} onCheckedChange={setMultiAvatar} helper={`${planConfig.avatars} slots on ${planConfig.label}`} />
                <ToggleRow label="Tasteful boundaries" checked={boundaries} onCheckedChange={setBoundaries} helper="Brand-safe by default" />
              </div>
            </CardContent>
          </Card>

          <Card className="rounded-[32px] border-white/10 bg-white/5">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-2xl"><Sparkles className="h-5 w-5 text-amber-300" /> Functional session demo</CardTitle>
              <CardDescription className="text-white/60">Stateful front-end flow: plans, gating, content mode, prompts, and local persistence.</CardDescription>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue="experience" className="w-full">
                <TabsList className="grid w-full grid-cols-3 rounded-2xl bg-black/20">
                  <TabsTrigger value="experience">Studio</TabsTrigger>
                  <TabsTrigger value="chat">Session</TabsTrigger>
                  <TabsTrigger value="plans">Monetization</TabsTrigger>
                </TabsList>

                <TabsContent value="experience" className="mt-6 space-y-4">
                  <div className="flex flex-wrap gap-2">
                    {[
                      { key: "chat", label: "Text scene", icon: MessageCircle },
                      { key: "voice", label: "Voice scene", icon: Mic },
                      { key: "image", label: "Portrait scene", icon: ImageIcon },
                    ].map((item) => {
                      const Icon = item.icon;
                      return (
                        <Button key={item.key} variant="outline" onClick={() => setMode(item.key as any)} className={cn("rounded-full border-white/10 bg-white/5 text-white hover:bg-white/10", mode === item.key && "border-emerald-400/60 bg-emerald-500/10")}>
                          <Icon className="mr-2 h-4 w-4" /> {item.label}
                        </Button>
                      );
                    })}
                  </div>
                  <div className="space-y-2">
                    <Label>Prompt</Label>
                    <Input value={prompt} onChange={(e) => setPrompt(e.target.value)} className="border-white/10 bg-black/25 text-white" />
                  </div>
                  <Card className="rounded-3xl border-white/10 bg-black/25">
                    <CardContent className="p-5">
                      <div className="mb-2 text-sm text-white/50">Generated output preview</div>
                      <div className="text-white/90">{output}</div>
                    </CardContent>
                  </Card>
                  <div className="flex flex-wrap gap-3">
                    <Button className="rounded-2xl bg-white text-black hover:bg-white/90" onClick={send}>Run session</Button>
                    <Button variant="outline" className="rounded-2xl border-white/10 bg-white/5 text-white hover:bg-white/10" onClick={() => setMessages([{ role: "assistant", text: "Fresh session started. Preferences remain saved." }])}>Reset transcript</Button>
                  </div>
                </TabsContent>

                <TabsContent value="chat" className="mt-6">
                  <div className="overflow-hidden rounded-[28px] border border-white/10 bg-black/25">
                    <div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
                      <div className="flex items-center gap-3">
                        <div className="h-11 w-11 overflow-hidden rounded-2xl border border-white/10">
                          <Portrait palette={selected.palette} face={selected.face} intensity={glow} />
                        </div>
                        <div>
                          <div className="font-medium">{name}</div>
                          <div className="text-xs text-emerald-300">{loggedIn ? "Memory restored" : "Guest session"}</div>
                        </div>
                      </div>
                      <Badge className="rounded-full border border-white/10 bg-white/5 text-white/80">{planConfig.label}</Badge>
                    </div>
                    <div className="max-h-[420px] space-y-3 overflow-auto p-5">
                      {messages.map((m, i) => (
                        <div key={i} className={cn("flex", m.role === "user" ? "justify-end" : "justify-start")}>
                          <div className={cn("max-w-[85%] rounded-3xl px-4 py-3 text-sm leading-6", m.role === "user" ? "bg-white text-black" : m.role === "system" ? "bg-cyan-500/10 text-cyan-100 border border-cyan-400/20" : "bg-white/8 text-white")}>{m.text}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="plans" className="mt-6 space-y-4">
                  <div className="grid gap-4 md:grid-cols-3">
                    <PlanCard name="Free" price="$0" features={["1 avatar", "Text sessions", "Short memory"]} active={plan === "free"} cta="Use Free" onClick={() => upgrade("free")} />
                    <PlanCard name="Plus" price="$19" features={["3 avatars", "Voice + portraits", "Persistent memory"]} active={plan === "plus"} cta="Choose Plus" highlight onClick={() => upgrade("plus")} />
                    <PlanCard name="Black Label" price="$39" features={["12 avatars", "Private 18+ mode", "Priority generation"]} active={plan === "black"} cta="Choose Black Label" onClick={() => upgrade("black")} />
                  </div>
                  <div className="rounded-3xl border border-white/10 bg-black/20 p-5">
                    <div className="flex flex-wrap items-center justify-between gap-4">
                      <div>
                        <div className="flex items-center gap-2 text-lg font-medium"><ShieldCheck className="h-5 w-5 text-emerald-300" /> Age verification</div>
                        <div className="mt-1 text-sm text-white/60">Private 18+ mode stays locked until plan + verification are both complete.</div>
                      </div>
                      <div className="flex items-center gap-3">
                        <Badge className={cn("rounded-full px-4 py-2", verified ? "bg-emerald-500/15 text-emerald-300" : "bg-white/5 text-white/70")}>{verified ? "Verified 18+" : "Not verified"}</Badge>
                        <Button variant="outline" className="rounded-2xl border-white/10 bg-white/5 text-white hover:bg-white/10" onClick={() => setShowAgeGate(true)}>
                          <UserCheck className="mr-2 h-4 w-4" /> Verify now
                        </Button>
                      </div>
                    </div>
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        </section>

        <section className="mt-10 grid gap-4 md:grid-cols-4">
          {[
            { icon: Brain, title: "Retention loop", text: "Memory anchors, saved preferences, and multi-avatar collections raise session return rates." },
            { icon: SlidersHorizontal, title: "Tasteful customization", text: "Users shape tone, style, voice, and pace without the product looking cheap or random." },
            { icon: CreditCard, title: "Clear monetization", text: "Free proves value. Plus unlocks multimodal features. Black Label unlocks private mode and more slots." },
            { icon: BadgeCheck, title: "Trust posture", text: "Private mode is gated, visually separated, and never confused with the core product experience." },
          ].map((item) => {
            const Icon = item.icon;
            return (
              <Card key={item.title} className="rounded-3xl border-white/10 bg-white/5">
                <CardContent className="p-5">
                  <Icon className="h-5 w-5 text-fuchsia-300" />
                  <div className="mt-4 text-lg font-medium">{item.title}</div>
                  <div className="mt-2 text-sm leading-6 text-white/65">{item.text}</div>
                </CardContent>
              </Card>
            );
          })}
        </section>
      </main>

      {showAgeGate && (
        <div className="fixed inset-0 z-50 grid place-items-center bg-black/75 p-6 backdrop-blur-sm">
          <Card className="w-full max-w-lg rounded-[32px] border-white/10 bg-neutral-950">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-2xl"><Lock className="h-5 w-5 text-rose-300" /> Private 18+ access</CardTitle>
              <CardDescription className="text-white/60">Tasteful gating for premium private interactions. This demo simulates the product flow without rendering explicit content.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-5">
              <div className="rounded-3xl border border-white/10 bg-white/5 p-4 text-sm leading-6 text-white/75">
                Requirements: Black Label subscription, authenticated account, and completed age verification.
              </div>
              <div className="grid gap-3 sm:grid-cols-3">
                <StatusPill ok={loggedIn} label="Signed in" />
                <StatusPill ok={plan === "black"} label="Black Label" />
                <StatusPill ok={verified} label="Verified 18+" />
              </div>
              <div className="flex flex-wrap gap-3">
                <Button className="rounded-2xl bg-white text-black hover:bg-white/90" onClick={() => { setLoggedIn(true); setPlan("black"); setVerified(true); setShowAgeGate(false); setMood("Private 18+"); }}>
                  Complete demo flow
                </Button>
                <Button variant="outline" className="rounded-2xl border-white/10 bg-white/5 text-white hover:bg-white/10" onClick={() => setShowAgeGate(false)}>
                  Close
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}

function Metric({ icon: Icon, label, value }: any) {
  return (
    <div className="rounded-3xl border border-white/10 bg-black/20 p-4">
      <div className="flex items-center gap-2 text-white/55"><Icon className="h-4 w-4" /> {label}</div>
      <div className="mt-2 text-lg font-semibold">{value}</div>
    </div>
  );
}

function PlanCard({ name, price, features, active, cta, onClick, highlight = false }: any) {
  return (
    <Card className={cn("rounded-3xl border-white/10 bg-white/5", highlight && "shadow-lg shadow-fuchsia-900/20") }>
      <CardContent className="p-5">
        <div className="flex items-center justify-between gap-3">
          <div className="text-lg font-semibold">{name}</div>
          {highlight ? <Badge className="rounded-full bg-amber-400/15 text-amber-300"><Star className="mr-1 h-3.5 w-3.5" /> Best starter</Badge> : null}
        </div>
        <div className="mt-2 text-3xl font-semibold">{price}<span className="text-sm font-normal text-white/50"> / mo</span></div>
        <div className="mt-4 space-y-2">
          {features.map((f: string) => (
            <div key={f} className="flex items-center gap-2 text-sm text-white/70"><Check className="h-4 w-4 text-emerald-300" /> {f}</div>
          ))}
        </div>
        <Button onClick={onClick} className={cn("mt-5 w-full rounded-2xl", active ? "bg-emerald-500 text-black hover:bg-emerald-400" : "bg-white text-black hover:bg-white/90")}>
          {active ? "Current plan" : cta}
        </Button>
      </CardContent>
    </Card>
  );
}

function ToggleRow({ label, helper, checked, onCheckedChange }: any) {
  return (
    <div className="flex items-start justify-between gap-4 rounded-2xl border border-white/10 bg-white/5 p-4">
      <div>
        <div className="font-medium">{label}</div>
        <div className="mt-1 text-xs text-white/55">{helper}</div>
      </div>
      <Switch checked={checked} onCheckedChange={onCheckedChange} />
    </div>
  );
}

function StatusPill({ ok, label }: any) {
  return <div className={cn("rounded-2xl border px-4 py-3 text-center text-sm", ok ? "border-emerald-400/30 bg-emerald-500/10 text-emerald-300" : "border-white/10 bg-white/5 text-white/65")}>{label}</div>;
}