// Shared components used across all three redesign directions.
// AnimatedChat, ProcessFlow, IndustryRotator, StripeBox, etc.

const { useState, useEffect, useRef, useMemo } = React;

// ─────────────────────────────────────────────────────────────
// AnimatedChat — types user prompt, then types assistant reply.
// Loops every ~12s. Brand-agnostic; receives palette via props.
// ─────────────────────────────────────────────────────────────
const CHAT_SCRIPTS = [
  {
    user: "Reschedule the Patel walkthrough to Thursday and tell the seller.",
    assistant: "Done. Walkthrough moved to Thu 2:30pm. Email sent to the seller; I noted it on the listing record.",
    label: "real estate · ops"
  },
  {
    user: "Pull last week's no-shows and draft a re-engagement email.",
    assistant: "12 no-shows last week. Draft is in your inbox: three variants by reason. Approve to send.",
    label: "healthcare · clinic"
  },
  {
    user: "How many tables open Saturday at 7pm? Block the patio if rain.",
    assistant: "8 open tables at 7pm. Forecast: 60% rain. Patio blocked, guests on the patio waitlist notified.",
    label: "restaurant · floor"
  },
  {
    user: "Summarize the Mercer contract redlines for Friday's call.",
    assistant: "Three material changes. Two favor us; one shifts liability. Brief in your Notion under 'Mercer'.",
    label: "legal · contracts"
  },
];

function AnimatedChat({ palette = {}, mono = "JetBrains Mono", body = "Inter Tight", compact = false }) {
  const [scriptIdx, setScriptIdx] = useState(0);
  const [phase, setPhase] = useState("typing-user"); // typing-user → user → typing-asst → asst → idle
  const [userText, setUserText] = useState("");
  const [asstText, setAsstText] = useState("");
  const script = CHAT_SCRIPTS[scriptIdx];

  useEffect(() => {
    let timer;
    if (phase === "typing-user") {
      if (userText.length < script.user.length) {
        timer = setTimeout(() => setUserText(script.user.slice(0, userText.length + 1)), 22 + Math.random() * 30);
      } else {
        timer = setTimeout(() => setPhase("user-pause"), 600);
      }
    } else if (phase === "user-pause") {
      timer = setTimeout(() => setPhase("typing-asst"), 500);
    } else if (phase === "typing-asst") {
      if (asstText.length < script.assistant.length) {
        timer = setTimeout(() => setAsstText(script.assistant.slice(0, asstText.length + 1)), 14 + Math.random() * 20);
      } else {
        timer = setTimeout(() => setPhase("idle"), 3500);
      }
    } else if (phase === "idle") {
      timer = setTimeout(() => {
        setUserText("");
        setAsstText("");
        setScriptIdx((i) => (i + 1) % CHAT_SCRIPTS.length);
        setPhase("typing-user");
      }, 200);
    }
    return () => clearTimeout(timer);
  }, [phase, userText, asstText, script]);

  const bg = palette.chatBg || "#fff";
  const fg = palette.chatFg || "#1a1a1a";
  const muted = palette.chatMuted || "rgba(0,0,0,.5)";
  const accent = palette.chatAccent || "#1B2A4A";
  const userBg = palette.chatUserBg || "rgba(0,0,0,.04)";
  const asstBg = palette.chatAsstBg || "transparent";
  const border = palette.chatBorder || "rgba(0,0,0,.08)";

  return (
    <div style={{
      background: bg, color: fg, border: `1px solid ${border}`,
      borderRadius: palette.radius ?? 0,
      padding: compact ? "18px" : "24px",
      fontFamily: body, fontSize: compact ? 14 : 15, lineHeight: 1.55,
      display: "flex", flexDirection: "column", gap: compact ? 14 : 18,
      minHeight: compact ? 280 : 340,
    }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontFamily: mono, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase",
        color: muted, paddingBottom: 12, borderBottom: `1px solid ${border}`,
      }}>
        <span>ClawdKnit · Live Demo</span>
        <span style={{ color: accent }}>● {script.label}</span>
      </div>

      <div style={{
        background: userBg, padding: "12px 14px",
        fontFamily: mono, fontSize: 13, lineHeight: 1.5,
        borderLeft: `2px solid ${muted}`,
      }}>
        <div style={{ fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: muted, marginBottom: 6 }}>You</div>
        {userText}
        {phase === "typing-user" && <span style={{ display: "inline-block", width: 7, height: 14, background: fg, marginLeft: 2, verticalAlign: "middle", animation: "ck-blink 1s step-end infinite" }}></span>}
      </div>

      <div style={{
        background: asstBg, padding: phase === "typing-asst" || asstText ? "12px 14px" : "12px 14px",
        opacity: userText === script.user ? 1 : 0.3,
        transition: "opacity .3s",
        borderLeft: `2px solid ${accent}`,
      }}>
        <div style={{ fontSize: 10, letterSpacing: ".1em", textTransform: "uppercase", color: accent, marginBottom: 6, fontFamily: mono }}>Assistant</div>
        <span>{asstText}</span>
        {phase === "typing-asst" && <span style={{ display: "inline-block", width: 7, height: 14, background: accent, marginLeft: 2, verticalAlign: "middle", animation: "ck-blink 1s step-end infinite" }}></span>}
      </div>

      <style>{`@keyframes ck-blink { 50% { opacity: 0; } }`}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ProcessFlow — animated dots traveling through 4-step path.
// Geometric, monospace labels.
// ─────────────────────────────────────────────────────────────
function ProcessFlow({ palette = {}, mono = "JetBrains Mono", display = "Newsreader" }) {
  const steps = [
    { n: "01", title: "Free Consultation", body: "Tell us about your business. We'll show you exactly where AI fits, what it'll cost, and what you'll get back." },
    { n: "02", title: "Tailored Plan", body: "We design a solution matched to your industry, workflows, and budget." },
    { n: "03", title: "We Set Everything Up", body: "Full deployment, integrations, and testing. One-time $999 setup." },
    { n: "04", title: "You Use It", body: "Your assistant is live. We keep it running, updated, optimized." },
  ];
  const fg = palette.fg || "#0e0e0e";
  const muted = palette.muted || "rgba(0,0,0,.55)";
  const accent = palette.accent || "#1B2A4A";
  const line = palette.line || "rgba(0,0,0,.2)";

  return (
    <div style={{ position: "relative" }}>
      {/* Animated rail */}
      <div style={{ position: "absolute", left: 0, right: 0, top: 36, height: 1, background: line }} />
      <div style={{
        position: "absolute", left: 0, top: 35, height: 3, width: "30%",
        background: accent,
        animation: "ck-rail 8s linear infinite",
      }} />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, position: "relative" }}>
        {steps.map((s, i) => (
          <div key={s.n} style={{ position: "relative" }}>
            <div style={{
              width: 14, height: 14, background: fg, borderRadius: "50%",
              marginTop: 30, marginBottom: 18, position: "relative", zIndex: 1,
              animation: `ck-pulse 8s ${i * 2}s infinite`,
            }} />
            <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".1em", color: muted, marginBottom: 6 }}>STEP / {s.n}</div>
            <div style={{ fontFamily: display, fontSize: 22, fontWeight: 500, color: fg, marginBottom: 8, lineHeight: 1.2 }}>{s.title}</div>
            <div style={{ fontSize: 14, color: muted, lineHeight: 1.55 }}>{s.body}</div>
          </div>
        ))}
      </div>

      <style>{`
        @keyframes ck-rail {
          0% { left: 0; width: 0; }
          25% { left: 0; width: 25%; }
          50% { left: 25%; width: 25%; }
          75% { left: 50%; width: 25%; }
          100% { left: 100%; width: 0; }
        }
        @keyframes ck-pulse {
          0%, 100% { box-shadow: 0 0 0 0 ${accent}40; }
          50% { box-shadow: 0 0 0 12px ${accent}00; }
        }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Industry list — condensed (5 visible + "see all").
// ─────────────────────────────────────────────────────────────
const INDUSTRIES = [
  { name: "Restaurants & Hospitality", body: "Reservations, supplier ordering, menu optimization, customer feedback." },
  { name: "Real Estate", body: "Lead follow-ups, listing copy, market analysis, scheduling." },
  { name: "Legal", body: "Document drafting, client intake, deadline tracking, billing." },
  { name: "Healthcare", body: "Appointment reminders, patient follow-ups, intake, referrals." },
  { name: "Trades & Construction", body: "Estimates, project scheduling, permit tracking, invoicing." },
  { name: "Retail & E-commerce", body: "Inventory alerts, customer service, product copy, reviews." },
  { name: "Finance & Accounting", body: "Data entry, report generation, client comms, deadlines." },
  { name: "Marketing & Creative", body: "Content generation, campaign analytics, reporting, SEO." },
  { name: "Fitness & Wellness", body: "Class scheduling, member engagement, payment reminders." },
  { name: "Automotive", body: "Service reminders, inventory, follow-ups, estimates." },
];

// ─────────────────────────────────────────────────────────────
// PricingComparison — sticky table for cloud + hardware.
// ─────────────────────────────────────────────────────────────
function PricingComparison({ palette = {}, mono = "JetBrains Mono", display = "Newsreader" }) {
  const [tab, setTab] = useState("cloud");
  const fg = palette.fg || "#0e0e0e";
  const bg = palette.bg || "#fafaf7";
  const muted = palette.muted || "rgba(0,0,0,.55)";
  const accent = palette.accent || "#1B2A4A";
  const line = palette.line || "rgba(0,0,0,.15)";

  const cloud = [
    { name: "Starter", price: "$15/mo", ram: "1–4 GB", channels: "Up to 3", support: "Standard", priority: false },
    { name: "Pro", price: "$29/mo", ram: "4–8 GB", channels: "Unlimited", support: "Standard", priority: false, featured: true },
    { name: "Business", price: "$59/mo", ram: "8–16 GB", channels: "Unlimited", support: "Priority", priority: true },
  ];
  const hardware = [
    { name: "Mini Server", price: "$659", spec: "AMD Ryzen 7 6800U · 24GB · 500GB SSD", form: "Compact, silent", own: "Lifetime ownership" },
    { name: "Mac Mini", price: "$799", spec: "Apple M4 · 16GB · 256GB SSD", form: "Premium build", own: "Lifetime ownership", featured: true },
    { name: "Custom Build", price: "Consultation", spec: "BYO PC or we spec it for you", form: "Tailored to use case", own: "Local AI option" },
  ];

  const cellPad = "18px 20px";

  return (
    <div>
      <div style={{ display: "flex", gap: 0, borderBottom: `1px solid ${line}`, marginBottom: 0 }}>
        {[
          { id: "cloud", label: "Cloud Hosting", note: "+ $999 setup" },
          { id: "hardware", label: "Hardware", note: "lifetime ownership" }
        ].map((t) => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            background: tab === t.id ? fg : "transparent",
            color: tab === t.id ? bg : fg,
            border: "none", padding: "16px 24px", cursor: "pointer",
            fontFamily: mono, fontSize: 12, letterSpacing: ".08em", textTransform: "uppercase",
            transition: "all .2s",
          }}>
            {t.label} <span style={{ opacity: .6, marginLeft: 8 }}>{t.note}</span>
          </button>
        ))}
      </div>

      {tab === "cloud" && (
        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "inherit" }}>
          <thead>
            <tr style={{ borderBottom: `1px solid ${line}` }}>
              <th style={{ padding: cellPad, textAlign: "left", fontFamily: mono, fontSize: 11, letterSpacing: ".08em", color: muted, textTransform: "uppercase", fontWeight: 500 }}>Plan</th>
              <th style={{ padding: cellPad, textAlign: "left", fontFamily: mono, fontSize: 11, letterSpacing: ".08em", color: muted, textTransform: "uppercase", fontWeight: 500 }}>Memory</th>
              <th style={{ padding: cellPad, textAlign: "left", fontFamily: mono, fontSize: 11, letterSpacing: ".08em", color: muted, textTransform: "uppercase", fontWeight: 500 }}>Channels</th>
              <th style={{ padding: cellPad, textAlign: "left", fontFamily: mono, fontSize: 11, letterSpacing: ".08em", color: muted, textTransform: "uppercase", fontWeight: 500 }}>Support</th>
              <th style={{ padding: cellPad, textAlign: "right", fontFamily: mono, fontSize: 11, letterSpacing: ".08em", color: muted, textTransform: "uppercase", fontWeight: 500 }}>Price</th>
            </tr>
          </thead>
          <tbody>
            {cloud.map((p) => (
              <tr key={p.name} style={{
                borderBottom: `1px solid ${line}`,
                background: p.featured ? `${accent}08` : "transparent",
                transition: "background .2s",
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = `${accent}14`}
              onMouseLeave={(e) => e.currentTarget.style.background = p.featured ? `${accent}08` : "transparent"}
              >
                <td style={{ padding: cellPad, fontFamily: display, fontSize: 22, fontWeight: 500 }}>
                  {p.name}
                  {p.featured && <span style={{ marginLeft: 10, fontFamily: mono, fontSize: 10, padding: "2px 8px", background: accent, color: bg, letterSpacing: ".08em", textTransform: "uppercase", verticalAlign: "middle" }}>Most Popular</span>}
                </td>
                <td style={{ padding: cellPad, fontFamily: mono, fontSize: 14 }}>{p.ram}</td>
                <td style={{ padding: cellPad, fontFamily: mono, fontSize: 14 }}>{p.channels}</td>
                <td style={{ padding: cellPad, fontFamily: mono, fontSize: 14 }}>{p.support}</td>
                <td style={{ padding: cellPad, fontFamily: display, fontSize: 24, fontWeight: 500, textAlign: "right" }}>{p.price}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      {tab === "hardware" && (
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead>
            <tr style={{ borderBottom: `1px solid ${line}` }}>
              <th style={{ padding: cellPad, textAlign: "left", fontFamily: mono, fontSize: 11, letterSpacing: ".08em", color: muted, textTransform: "uppercase", fontWeight: 500 }}>Option</th>
              <th style={{ padding: cellPad, textAlign: "left", fontFamily: mono, fontSize: 11, letterSpacing: ".08em", color: muted, textTransform: "uppercase", fontWeight: 500 }}>Specs</th>
              <th style={{ padding: cellPad, textAlign: "left", fontFamily: mono, fontSize: 11, letterSpacing: ".08em", color: muted, textTransform: "uppercase", fontWeight: 500 }}>Form factor</th>
              <th style={{ padding: cellPad, textAlign: "right", fontFamily: mono, fontSize: 11, letterSpacing: ".08em", color: muted, textTransform: "uppercase", fontWeight: 500 }}>Investment</th>
            </tr>
          </thead>
          <tbody>
            {hardware.map((p) => (
              <tr key={p.name} style={{
                borderBottom: `1px solid ${line}`,
                background: p.featured ? `${accent}08` : "transparent",
              }}>
                <td style={{ padding: cellPad, fontFamily: display, fontSize: 22, fontWeight: 500 }}>
                  {p.name}
                  {p.featured && <span style={{ marginLeft: 10, fontFamily: mono, fontSize: 10, padding: "2px 8px", background: accent, color: bg, letterSpacing: ".08em", textTransform: "uppercase", verticalAlign: "middle" }}>Premium</span>}
                </td>
                <td style={{ padding: cellPad, fontFamily: mono, fontSize: 13 }}>{p.spec}</td>
                <td style={{ padding: cellPad, fontFamily: mono, fontSize: 13 }}>{p.form}<br/><span style={{ color: muted }}>{p.own}</span></td>
                <td style={{ padding: cellPad, fontFamily: display, fontSize: 24, fontWeight: 500, textAlign: "right" }}>{p.price}<br/><span style={{ fontFamily: mono, fontSize: 11, color: muted, fontWeight: 400 }}>+ $999 setup</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ — minimal accordion
// ─────────────────────────────────────────────────────────────
const FAQS = [
  { q: "What does the $999 setup actually cover?", a: "Installation, configuration, integrations with your existing tools (Slack, Microsoft 365, Google Workspace, Notion, your CRM), API key setup, two weeks of hands-on guidance, and training your team. You're up and running in under a day." },
  { q: "Do I need any technical knowledge?", a: "No. We do all the technical work. You use a chat interface. That's it. We're available 24/7 if you have questions." },
  { q: "What's the difference between cloud hosting and hardware?", a: "Cloud hosting is monthly: easy, no upfront device cost, we handle infrastructure. Hardware is a one-time purchase that pays for itself after roughly 12–18 months and runs locally for full data privacy." },
  { q: "Can I cancel anytime?", a: "Yes. Cloud plans are month-to-month with no contracts. Hardware is yours forever. You can keep using it after our service relationship ends." },
  { q: "Whose API keys are these, yours or mine?", a: "Yours. You own the keys, the data, and the assistant. We help you set them up; you're never locked into us." },
  { q: "What if I need changes later?", a: "$75 optimization sessions whenever you need them. Most clients book one every 2–3 months as their workflows evolve." },
];

function FAQ({ palette = {}, mono = "JetBrains Mono", display = "Newsreader" }) {
  const [open, setOpen] = useState(0);
  const fg = palette.fg || "#0e0e0e";
  const muted = palette.muted || "rgba(0,0,0,.55)";
  const line = palette.line || "rgba(0,0,0,.15)";
  return (
    <div>
      {FAQS.map((f, i) => (
        <div key={i} style={{ borderBottom: `1px solid ${line}` }}>
          <button onClick={() => setOpen(open === i ? -1 : i)} style={{
            width: "100%", textAlign: "left", padding: "22px 0", background: "transparent", border: "none", cursor: "pointer",
            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24,
            color: fg,
          }}>
            <span style={{ fontFamily: display, fontSize: 22, fontWeight: 500, lineHeight: 1.3 }}>{f.q}</span>
            <span style={{ fontFamily: mono, fontSize: 14, color: muted, flexShrink: 0 }}>{open === i ? "[ − ]" : "[ + ]"}</span>
          </button>
          <div style={{
            maxHeight: open === i ? 400 : 0, overflow: "hidden",
            transition: "max-height .35s ease, opacity .25s",
            opacity: open === i ? 1 : 0,
          }}>
            <div style={{ paddingBottom: 24, fontSize: 16, color: muted, lineHeight: 1.65, maxWidth: 720 }}>
              {f.a}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

// Striped placeholder for image slots
function StripeBox({ label = "image", w = "100%", h = 200, style = {} }) {
  return (
    <div style={{
      width: w, height: h,
      background: `repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 6px, transparent 6px 12px), rgba(0,0,0,.025)`,
      border: "1px solid rgba(0,0,0,.1)",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: ".1em",
      color: "rgba(0,0,0,.5)", textTransform: "uppercase",
      ...style,
    }}>
      [ {label} ]
    </div>
  );
}

// Atrium-style asymmetric industry showcase. Sticky left detail, clickable list right.
function IndustryShowcase({ palette = {}, mono = "JetBrains Mono", display = "Newsreader", body = "Inter Tight" }) {
  const fg = palette.fg || "#0e0e0e";
  const muted = palette.muted || "rgba(0,0,0,.55)";
  const accent = palette.accent || "#a23b1f";
  const line = palette.line || "rgba(0,0,0,.15)";
  const soft = palette.soft || "rgba(0,0,0,.04)";
  const [active, setActive] = useState(0);
  const ind = INDUSTRIES[active];

  // Per-industry sample prompts to make the detail feel concrete.
  const SAMPLES = [
    ["Reservations + waitlist sync", "Supplier ordering on autopilot", "Menu performance digest"],
    ["Lead follow-up sequences", "Listing copy + market briefs", "Showing schedule + reminders"],
    ["Document drafting + redlines", "Client intake triage", "Deadline + billing nudges"],
    ["Appointment reminders", "Patient follow-up notes", "Intake + referral routing"],
    ["Estimate generation", "Permit + project tracking", "Invoice + payment reminders"],
    ["Inventory alerts", "Customer service triage", "Product copy + review summaries"],
    ["Data entry automation", "Report generation", "Client comms + deadlines"],
    ["Content drafts at scale", "Campaign analytics digests", "SEO + reporting"],
    ["Class scheduling", "Member engagement notes", "Payment reminders"],
    ["Service reminders", "Inventory follow-ups", "Estimate generation"],
  ];

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "start" }}>
      {/* Sticky detail rail */}
      <div style={{ position: "sticky", top: 96, alignSelf: "start" }}>
        <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".12em", color: accent, textTransform: "uppercase", marginBottom: 18, display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 28, height: 1, background: accent }} />
          Sector {String(active + 1).padStart(2, "0")} / {String(INDUSTRIES.length).padStart(2, "0")}
        </div>
        <h3 key={ind.name} style={{
          fontFamily: display, fontSize: "clamp(40px, 4.5vw, 64px)", fontWeight: 400,
          letterSpacing: "-.022em", lineHeight: 1.02, margin: 0, color: fg,
          animation: "ck-fadeUp .45s cubic-bezier(.2,.7,.2,1) both",
        }}>
          {ind.name}
        </h3>
        <p key={ind.body} style={{
          marginTop: 24, fontFamily: body, fontSize: 18, lineHeight: 1.55, color: muted, maxWidth: 480,
          animation: "ck-fadeUp .55s .05s cubic-bezier(.2,.7,.2,1) both",
        }}>
          {ind.body}
        </p>

        <div style={{ marginTop: 36, paddingTop: 24, borderTop: `1px solid ${line}` }}>
          <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".15em", color: muted, textTransform: "uppercase", marginBottom: 16 }}>What we'd build first</div>
          <ul key={active} style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
            {SAMPLES[active].map((s, i) => (
              <li key={s} style={{
                display: "flex", alignItems: "baseline", gap: 14,
                fontFamily: body, fontSize: 15, color: fg,
                animation: `ck-fadeUp .5s ${0.08 + i * 0.06}s cubic-bezier(.2,.7,.2,1) both`,
              }}>
                <span style={{ fontFamily: mono, fontSize: 11, color: accent, minWidth: 24 }}>{String(i + 1).padStart(2, "0")}</span>
                <span>{s}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Vertical list */}
      <div style={{ borderTop: `1px solid ${line}` }}>
        {INDUSTRIES.map((it, i) => {
          const isActive = i === active;
          return (
            <button
              key={it.name}
              onClick={() => setActive(i)}
              onMouseEnter={() => setActive(i)}
              style={{
                width: "100%", textAlign: "left", cursor: "pointer",
                background: isActive ? soft : "transparent",
                border: "none", borderBottom: `1px solid ${line}`,
                padding: "22px 4px 22px 24px",
                display: "grid", gridTemplateColumns: "44px 1fr 28px", gap: 16, alignItems: "center",
                color: fg, transition: "background .25s, padding .25s",
                paddingLeft: isActive ? 32 : 24,
              }}
            >
              <span style={{ fontFamily: mono, fontSize: 11, color: isActive ? accent : muted, letterSpacing: ".06em" }}>
                {String(i + 1).padStart(2, "0")}
              </span>
              <span style={{ fontFamily: display, fontSize: isActive ? 24 : 22, fontWeight: 500, letterSpacing: "-.012em", lineHeight: 1.2, transition: "font-size .25s" }}>
                {it.name}
              </span>
              <span style={{ fontFamily: mono, fontSize: 14, color: isActive ? accent : muted, transition: "transform .25s, color .25s", transform: isActive ? "translateX(0)" : "translateX(-4px)", textAlign: "right" }}>
                {isActive ? "→" : "·"}
              </span>
            </button>
          );
        })}
      </div>

      <style>{`
        @keyframes ck-fadeUp {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { AnimatedChat, ProcessFlow, INDUSTRIES, IndustryShowcase, PricingComparison, FAQ, StripeBox });