// landing.jsx — main landing page. Composes nav, hero, capabilities, demo, about, process, contact.

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

// ── Theme presets ────────────────────────────────────────────────────────────
// Each style preset defines a set of CSS variables. The accent color is layered
// on top via a separate var so users can swap accent without changing the whole style.

const STYLES = {
  editorial: {
    "--bg":        "#f4ede0",
    "--bg-soft":   "#ede4d2",
    "--card":      "#fbf6ec",
    "--ink-1":     "#1a1813",
    "--ink-2":     "#736e60",
    "--ink-3":     "#a39c8a",
    "--rule":      "#e1d8c4",
    "--rule-strong":"#cbbfa6",
    "--app-bg":    "#fbf6ec",
    "--chrome":    "#f3ecdc",
    "--bg-danger": "#f4dccf",
    "--fg-danger": "#a43c1a",
    "--bg-warn":   "#f5e6c4",
    "--fg-warn":   "#8a6420",
    "--bg-ok":     "#dbe7d4",
    "--fg-ok":     "#3e6433",
    "--bg-info":   "#e0dbf1",
    "--fg-info":   "#544483",
    "--radius":    "4px",
    "--radius-lg": "8px",
  },
  studio: {
    "--bg":        "#ffffff",
    "--bg-soft":   "#fafafa",
    "--card":      "#ffffff",
    "--ink-1":     "#0a0a0a",
    "--ink-2":     "#525252",
    "--ink-3":     "#a3a3a3",
    "--rule":      "#e5e5e5",
    "--rule-strong":"#0a0a0a",
    "--app-bg":    "#ffffff",
    "--chrome":    "#f5f5f5",
    "--bg-danger": "#fff1eb",
    "--fg-danger": "#b03b15",
    "--bg-warn":   "#fff4d6",
    "--fg-warn":   "#8a6420",
    "--bg-ok":     "#e7f0e1",
    "--fg-ok":     "#3e6433",
    "--bg-info":   "#eee9f7",
    "--fg-info":   "#544483",
    "--radius":    "0px",
    "--radius-lg": "0px",
  },
  garden: {
    "--bg":        "#fbf7ee",
    "--bg-soft":   "#f4eedd",
    "--card":      "#ffffff",
    "--ink-1":     "#262320",
    "--ink-2":     "#75716a",
    "--ink-3":     "#a8a39a",
    "--rule":      "#ece4d2",
    "--rule-strong":"#d4c8aa",
    "--app-bg":    "#fffdf8",
    "--chrome":    "#f4eedd",
    "--bg-danger": "#fbe3d9",
    "--fg-danger": "#a43c1a",
    "--bg-warn":   "#fbeec6",
    "--fg-warn":   "#8a6420",
    "--bg-ok":     "#dde9d3",
    "--fg-ok":     "#3e6433",
    "--bg-info":   "#e5e0f1",
    "--fg-info":   "#544483",
    "--radius":    "14px",
    "--radius-lg": "20px",
  },
};

const FONT_PAIRS = {
  serif: {
    "--font-display": "'Instrument Serif', 'Noto Serif SC', Georgia, serif",
    "--font-body":    "'Geist', 'Noto Sans SC', -apple-system, sans-serif",
    "--font-mono":    "'JetBrains Mono', ui-monospace, monospace",
  },
  grotesk: {
    "--font-display": "'Space Grotesk', 'Noto Sans SC', sans-serif",
    "--font-body":    "'Space Grotesk', 'Noto Sans SC', sans-serif",
    "--font-mono":    "'JetBrains Mono', ui-monospace, monospace",
  },
  rounded: {
    "--font-display": "'Plus Jakarta Sans', 'Noto Sans SC', sans-serif",
    "--font-body":    "'Plus Jakarta Sans', 'Noto Sans SC', sans-serif",
    "--font-mono":    "'JetBrains Mono', ui-monospace, monospace",
  },
};

// Each style has a preferred default font pair, but users can override.
const STYLE_DEFAULT_FONT = { editorial: "serif", studio: "grotesk", garden: "rounded" };

// ── Stylesheet ───────────────────────────────────────────────────────────────
const CSS = `
:root {
  --section-pad-y: 110px;
  --container-w: 1240px;
  --container-pad: 32px;
  --cta-pad-x: 22px;
  --cta-pad-y: 13px;
  --card-pad: 28px;
}

html.density-compact { --section-pad-y: 72px; --card-pad: 20px; }
html.density-comfy   { --section-pad-y: 110px; --card-pad: 28px; }
html.density-loose   { --section-pad-y: 144px; --card-pad: 36px; }

html { background: var(--bg); color: var(--ink-1); font-family: var(--font-body); }

body { background: var(--bg); }

.container { max-width: var(--container-w); margin: 0 auto;
             padding-left: var(--container-pad); padding-right: var(--container-pad); }

.section { padding: var(--section-pad-y) 0; position: relative; }
.section + .section { border-top: 1px solid var(--rule); }

.eyebrow { font-family: var(--font-mono); font-size: 11.5px;
           letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; }

.h-display { font-family: var(--font-display); font-weight: 400;
             line-height: 1.02; letter-spacing: -0.01em; color: var(--ink-1);
             text-wrap: balance; }

.h-section { font-family: var(--font-display); font-weight: 400;
             font-size: clamp(40px, 4.4vw, 64px); line-height: 1.05;
             letter-spacing: -0.015em; color: var(--ink-1);
             max-width: 18ch; text-wrap: balance; }

/* style-mode adjustments */
html.style-studio .h-section,
html.style-studio .h-display { font-weight: 600; letter-spacing: -0.025em; }
html.style-studio .eyebrow { color: #0a0a0a; }

html.style-garden .h-section,
html.style-garden .h-display { font-weight: 600; letter-spacing: -0.02em; }

.mono { font-family: var(--font-mono); }
.tabnum { font-variant-numeric: tabular-nums; }

.accent { color: var(--accent); }

/* ── NAV ───────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50;
       background: color-mix(in oklab, var(--bg) 88%, transparent);
       backdrop-filter: blur(12px) saturate(140%);
       -webkit-backdrop-filter: blur(12px) saturate(140%);
       border-bottom: 1px solid var(--rule); }
.nav-inner { display: flex; align-items: center; justify-content: space-between;
             padding: 14px 0; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px;
         font-family: var(--font-display); font-size: 22px; font-weight: 500;
         letter-spacing: -0.01em; color: var(--ink-1); text-decoration: none; }
.brand-logo { width: 32px; height: 32px; object-fit: contain;
              display: block; flex-shrink: 0; }
html.style-studio .brand { font-weight: 700; }

.nav-links { display: flex; gap: 28px; }
.nav-link { color: var(--ink-2); text-decoration: none; font-size: 14px;
            transition: color .15s ease; }
.nav-link:hover { color: var(--ink-1); }
.nav-right { display: flex; align-items: center; gap: 18px; }
.lang-switch { display: inline-flex; border: 1px solid var(--rule-strong);
               border-radius: 999px; padding: 2px; font-size: 12px; }
.lang-switch button { background: transparent; border: none; padding: 4px 10px;
                       border-radius: 999px; cursor: pointer; color: var(--ink-2);
                       font-family: inherit; }
.lang-switch button.on { background: var(--ink-1); color: var(--bg); }
html.style-studio .lang-switch, html.style-studio .lang-switch button { border-radius: 0; }

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px;
       padding: var(--cta-pad-y) var(--cta-pad-x); font-size: 14.5px;
       border-radius: 999px; border: 1px solid transparent; cursor: pointer;
       text-decoration: none; transition: transform .15s ease, background .15s ease;
       font-family: inherit; font-weight: 500; }
html.style-studio .btn { border-radius: 0; }
html.style-garden .btn { border-radius: 12px; }
.btn-primary { background: var(--ink-1); color: var(--bg); }
.btn-primary:hover { background: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink-1);
             border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink-1); }
.btn-accent { background: var(--accent); color: var(--bg); }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero { padding-top: 80px; padding-bottom: 64px; }
.hero-stack { display: flex; flex-direction: column; align-items: center;
              text-align: center; }
.hero-stack .eyebrow { margin-bottom: 20px; }

/* Two-line title — each line ALWAYS on one line, regardless of viewport */
.hero-title { font-family: var(--font-display); font-weight: 400;
              color: var(--ink-1); margin: 0 0 26px;
              display: flex; flex-direction: column; align-items: center;
              gap: 8px; }
.hero-title .line1 { font-family: var(--font-body); font-weight: 400;
                     font-size: clamp(14px, 2.4vw, 22px);
                     letter-spacing: .04em; color: var(--ink-2);
                     text-transform: none; white-space: nowrap; }
.hero-title .line2 { font-size: clamp(26px, 8.6vw, 108px); line-height: 1.02;
                     letter-spacing: -0.025em; white-space: nowrap;
                     max-width: 100%; }
.hero-title .line2 em { font-style: italic; color: var(--accent);
                        font-family: var(--font-display); }
html.style-studio .hero-title .line2 { font-weight: 700; letter-spacing: -0.035em; }
html.style-studio .hero-title .line2 em { font-style: normal; }
html.style-garden .hero-title .line2 { font-weight: 700; letter-spacing: -0.025em; }
html.style-garden .hero-title .line2 em { font-style: normal; }

.hero-sub { font-size: clamp(15px, 1.05vw, 17px); color: var(--ink-2); line-height: 1.6;
            max-width: 52ch; margin: 0 auto 30px;
            text-wrap: balance; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px;
             justify-content: center; }
.hero-trust { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
              letter-spacing: .02em; }

/* ── AGENT FLOW (horizontal "how it works" strip below hero) ──────────── */
.agent-flow-wrap { padding-top: 56px; padding-bottom: 24px; }
.agent-flow-head { text-align: center; margin-bottom: 28px;
                   display: flex; flex-direction: column; align-items: center;
                   gap: 10px; }
.agent-flow-eye { font-family: var(--font-mono); font-size: 12px;
                  letter-spacing: .14em; text-transform: uppercase;
                  color: var(--accent); }
.agent-flow-foot { font-family: var(--font-display); font-weight: 400;
                   font-size: clamp(20px, 2.6vw, 30px); line-height: 1.35;
                   letter-spacing: -0.01em; color: var(--ink-1);
                   text-align: center; max-width: 56ch;
                   margin: 36px auto 0; text-wrap: balance; }
html.style-studio .agent-flow-foot,
html.style-garden .agent-flow-foot { font-weight: 500; }

.agent-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
              gap: 18px; align-items: stretch; }
@media (max-width: 840px) {
  .agent-flow { grid-template-columns: 1fr; gap: 14px; }
  .agent-flow-arrow { display: none; }
}
.agent-flow-card { background: var(--card); border: 1px solid var(--rule);
                   border-radius: var(--radius-lg); padding: 24px 22px 22px;
                   display: flex; flex-direction: column; gap: 12px;
                   position: relative; transition: border-color .2s ease, transform .2s ease; }
html.style-studio .agent-flow-card { border-radius: 0; }
.agent-flow-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.agent-flow-card-n { font-family: var(--font-mono); font-size: 11px;
                     letter-spacing: .12em; color: var(--accent);
                     text-transform: uppercase; }
.agent-flow-card-t { font-family: var(--font-display); font-weight: 500;
                     font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
                     color: var(--ink-1); margin: 0;
                     overflow-wrap: break-word; word-break: normal; hyphens: auto; }
html.style-studio .agent-flow-card-t,
html.style-garden .agent-flow-card-t { font-weight: 600; }
.agent-flow-card-d { font-size: 14px; color: var(--ink-2); line-height: 1.55;
                     margin: 0;
                     overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.agent-flow-arrow { display: flex; align-items: center; color: var(--accent);
                    opacity: 0.7; }
.agent-flow-arrow svg { width: 28px; height: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-ok);
            box-shadow: 0 0 0 0 var(--fg-ok); animation: pulse 2s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--fg-ok), transparent 30%); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--fg-ok), transparent 100%); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--fg-ok), transparent 100%); }
}

/* ── SECTION HEAD ──────────────────────────────────────────────────────── */
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
                margin-bottom: 64px; align-items: end; }
.section-head .sub { color: var(--ink-2); font-size: 16px; line-height: 1.55;
                     max-width: 50ch; }

/* ── CAPABILITY GRID ───────────────────────────────────────────────────── */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
            background: var(--rule); border: 1px solid var(--rule); }
.cap-cell { background: var(--bg); padding: var(--card-pad);
            display: flex; flex-direction: column; min-height: 280px;
            transition: background .2s ease; }
.cap-cell:hover { background: var(--card); }
.cap-head { display: flex; justify-content: space-between; align-items: flex-start;
            margin-bottom: 18px; }
.cap-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
           letter-spacing: .04em; }
.cap-status { font-family: var(--font-mono); font-size: 11px; padding: 3px 9px;
              border-radius: 999px; letter-spacing: .02em; }
html.style-studio .cap-status { border-radius: 0; }
.cap-status.live { background: var(--bg-ok); color: var(--fg-ok); }
.cap-status.deployed { background: var(--bg-ok); color: var(--fg-ok); }
.cap-status.beta { background: var(--bg-warn); color: var(--fg-warn); }
.cap-status.soon { background: var(--bg-info); color: var(--fg-info); }
.cap-status.plan { background: transparent; color: var(--ink-2);
                   border: 1px solid var(--rule-strong); }
.cap-status.custom { background: transparent; color: var(--ink-1);
                     border: 1px solid var(--ink-1); }
.cap-title { font-family: var(--font-display); font-size: 28px; line-height: 1.1;
             font-weight: 400; margin: 4px 0 14px; color: var(--ink-1);
             letter-spacing: -0.015em; }
html.style-studio .cap-title, html.style-garden .cap-title { font-weight: 600; }
.cap-desc { font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
            flex: 1; margin-bottom: 18px; }
.cap-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-tag { font-family: var(--font-mono); font-size: 11px; padding: 3px 9px;
           background: var(--bg-soft); color: var(--ink-2); border-radius: 999px; }
html.style-studio .cap-tag { border-radius: 0; }

/* ── RESTOCK SKILL OFFER ───────────────────────────────────────────────── */
.skill-offer { background: var(--bg-soft); }
.skill-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
                gap: 44px; align-items: stretch; }
.skill-price-panel { border: 1px solid var(--rule-strong); background: var(--card);
                     border-radius: var(--radius-lg); padding: 28px;
                     display: flex; flex-direction: column; gap: 20px; }
html.style-studio .skill-price-panel { border-radius: 0; }
.skill-badge { align-self: flex-start; font-family: var(--font-mono); font-size: 11px;
               letter-spacing: .05em; color: var(--accent); border: 1px solid var(--rule-strong);
               border-radius: 999px; padding: 5px 10px; background: var(--bg); }
html.style-studio .skill-badge { border-radius: 0; }
.skill-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.skill-price-main { font-family: var(--font-display); font-size: clamp(56px, 6vw, 86px);
                    line-height: .95; letter-spacing: -0.03em; color: var(--ink-1); }
.skill-price-usd { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
.skill-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.skill-actions .btn { white-space: nowrap; padding-left: 18px; padding-right: 18px; }
.skill-terms { border-top: 1px solid var(--rule); padding-top: 18px; }
.skill-terms h3, .skill-list-card h3 { margin: 0 0 10px; font-family: var(--font-display);
                                       font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
html.style-studio .skill-terms h3,
html.style-studio .skill-list-card h3,
html.style-garden .skill-terms h3,
html.style-garden .skill-list-card h3 { font-weight: 600; }
.skill-terms p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.skill-content { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
                 background: var(--rule); border: 1px solid var(--rule); }
.skill-list-card { background: var(--bg); padding: 24px; min-height: 210px; }
.skill-list-card.wide { grid-column: span 2; }
.skill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.skill-list li { position: relative; padding-left: 18px; color: var(--ink-2);
                 font-size: 14px; line-height: 1.5; }
.skill-list li::before { content: ''; position: absolute; left: 0; top: .72em;
                         width: 6px; height: 6px; border-radius: 999px;
                         background: var(--accent); }
html.style-studio .skill-list li::before { border-radius: 0; }
.skill-usecases { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-usecase { font-family: var(--font-mono); font-size: 11px; padding: 5px 9px;
                 border: 1px solid var(--rule-strong); color: var(--ink-1);
                 background: var(--card); border-radius: 999px; }
html.style-studio .skill-usecase { border-radius: 0; }

/* ── ABOUT ─────────────────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px;
              align-items: start; }
.about-portrait { aspect-ratio: 4 / 5;
                  background: var(--bg-soft);
                  border: 1px solid var(--rule);
                  border-radius: var(--radius);
                  position: relative; overflow: hidden;
                  display: flex; align-items: flex-end; padding: 24px; }
.about-portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  z-index: 0;
}
.about-portrait::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 50%; z-index: 1;
  background: linear-gradient(to top,
    rgba(20, 16, 10, .72) 0%,
    rgba(20, 16, 10, 0) 100%);
  pointer-events: none;
}
.about-portrait .corner {
  position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.92);
  letter-spacing: .08em; line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.about-bio p { font-size: 17px; line-height: 1.7; color: var(--ink-1);
               margin: 0 0 18px; max-width: 56ch; }
.creds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
              margin-top: 36px; border-top: 1px solid var(--rule); }
.cred { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.cred:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--rule); }
.cred:nth-child(even) { padding-left: 24px; }
.cred .lbl { font-family: var(--font-mono); font-size: 11px;
             color: var(--ink-2); letter-spacing: .04em;
             text-transform: uppercase; margin-bottom: 4px; }
.cred .val { font-family: var(--font-display); font-size: 22px;
             font-weight: 400; color: var(--ink-1); letter-spacing: -0.01em; }
html.style-studio .cred .val, html.style-garden .cred .val { font-weight: 600; }

/* ── PROCESS ───────────────────────────────────────────────────────────── */
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
             border-top: 1px solid var(--rule);
             border-bottom: 1px solid var(--rule); }
.proc-step { padding: 36px 28px 32px 0;
             border-right: 1px solid var(--rule); position: relative; }
.proc-step:last-child { border-right: none; }
.proc-num { font-family: var(--font-display); font-size: 64px; line-height: 1;
            color: var(--accent); font-weight: 400; letter-spacing: -0.02em;
            margin-bottom: 18px; }
html.style-studio .proc-num, html.style-garden .proc-num { font-weight: 700; }
.proc-t { font-family: var(--font-display); font-size: 22px; font-weight: 400;
          line-height: 1.2; margin: 0 0 10px; color: var(--ink-1);
          letter-spacing: -0.01em; }
html.style-studio .proc-t, html.style-garden .proc-t { font-weight: 600; }
.proc-d { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; max-width: 38ch; }

/* ── CONTACT ───────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px;
                align-items: start; }
.form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.purchase-note { border: 1px solid var(--rule); background: var(--bg-soft);
                 border-radius: var(--radius); padding: 14px 16px;
                 color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-family: var(--font-mono); font-size: 11.5px;
                color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;
  font-family: inherit; font-size: 15px; padding: 12px 14px;
  border: 1px solid var(--rule-strong); background: var(--card);
  color: var(--ink-1); border-radius: var(--radius);
  transition: border .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.channels { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.channel { background: var(--card); border: 1px solid var(--rule);
           border-radius: var(--radius-lg); padding: 20px 22px;
           display: flex; align-items: center; gap: 18px; }
.channel-icon { width: 44px; height: 44px; border-radius: var(--radius);
                background: var(--bg-soft); border: 1px solid var(--rule);
                display: grid; place-items: center; font-family: var(--font-mono);
                font-size: 16px; color: var(--ink-1); flex-shrink: 0; }
html.style-studio .channel, html.style-studio .channel-icon { border-radius: 0; }
.channel-body { flex: 1; min-width: 0; }
.channel-lbl { font-family: var(--font-mono); font-size: 11px;
               color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase;
               margin-bottom: 4px; }
.channel-val { font-size: 15px; color: var(--ink-1); font-weight: 500; }
.channel-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
                 margin-top: 6px; line-height: 1.5; }
.channel-cta { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent);
               text-decoration: none; }


/* ── CLIENTS ───────────────────────────────────────────────────────────── */
.clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
                border-top: 1px solid var(--rule); }
[data-style="bauhaus"] .clients-grid { border-top: 2px solid var(--ink); }
html.style-studio .clients-grid { border-top: 2px solid var(--ink-1); }
.client-card {
  padding: 32px 28px 28px 0; border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px; position: relative;
}
html.style-studio .client-card { border-right: 2px solid var(--ink-1); border-bottom: 2px solid var(--ink-1); }
.client-card:last-child { border-right: none; }
.client-card:nth-child(1) { padding-left: 0; }
.client-card:not(:first-child) { padding-left: 28px; }
.client-num {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
  letter-spacing: .08em;
}
.client-rev { display: flex; align-items: baseline; gap: 10px;
              margin-top: 4px; }
.client-rev-num {
  font-family: var(--font-display); font-size: clamp(48px, 5vw, 72px);
  font-weight: 400; line-height: .95; color: var(--accent);
  letter-spacing: -0.025em;
}
html.style-studio .client-rev-num,
html.style-garden .client-rev-num { font-weight: 700; }
.client-rev-unit {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  letter-spacing: .02em;
}
.client-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.client-tag {
  font-family: var(--font-mono); font-size: 11px; padding: 3px 9px;
  background: var(--bg-soft); color: var(--ink-1);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  letter-spacing: .02em;
}
html.style-studio .client-tag { border-radius: 0; border: 1.5px solid var(--ink-1); }
.client-cat { font-size: 14px; color: var(--ink-1); font-weight: 500; }
.client-desc { font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
                margin: 6px 0 12px; max-width: 36ch; }
.client-mods { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.client-mod {
  font-family: var(--font-mono); font-size: 11px; padding: 3px 8px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent); border-radius: 4px;
}
html.style-studio .client-mod { border-radius: 0; }
.clients-foot {
  padding-top: 22px; font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-2); letter-spacing: .02em;
}

@media (max-width: 900px) {
  .clients-grid { grid-template-columns: 1fr; }
  .client-card { border-right: none !important; padding-left: 0 !important;
                  padding-right: 0; }
  html.style-studio .client-card { border-right: none !important; }
}

/* ── PRODUCT SWITCHER ────────────────────────────────────────────────── */
.prod-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .prod-switcher { grid-template-columns: 1fr; } }
.prod-card { background: var(--card); border: 1px solid var(--rule);
             border-radius: var(--radius-lg); padding: 20px 22px;
             text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease;
             font-family: inherit; color: var(--ink-1); position: relative; }
.prod-card:hover { border-color: var(--rule-strong); }
.prod-card.on { border-color: var(--accent); border-width: 1px;
                box-shadow: 0 0 0 1px var(--accent) inset; }
.prod-card.on::after {
  content: '↓'; position: absolute; right: 18px; bottom: 14px;
  color: var(--accent); font-family: var(--font-mono); font-size: 18px;
}
.prod-card-row { display: flex; justify-content: space-between; align-items: center;
                  margin-bottom: 10px; }
.prod-card-num { font-family: var(--font-mono); font-size: 11.5px;
                  color: var(--ink-3); letter-spacing: .04em; }
.prod-card-status { font-family: var(--font-mono); font-size: 11px; padding: 3px 9px;
                     border-radius: 999px; letter-spacing: .02em;
                     background: var(--bg-ok); color: var(--fg-ok); }
.prod-card.on .prod-card-status { background: var(--accent); color: var(--bg); }
html.style-studio .prod-card, html.style-studio .prod-card-status { border-radius: 0; }
.prod-card-label { font-family: var(--font-display); font-size: 24px;
                    font-weight: 400; line-height: 1.15; margin-bottom: 4px;
                    letter-spacing: -0.015em; }
html.style-studio .prod-card-label,
html.style-garden .prod-card-label { font-weight: 600; }
.prod-card-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

.demo-block-label { display: flex; justify-content: center; margin: 4px 0 14px; }
.demo-block-label span { font-family: var(--font-mono); font-size: 11px;
                         letter-spacing: .16em; text-transform: uppercase;
                         color: var(--accent); border: 1px solid var(--rule-strong);
                         background: var(--bg); padding: 5px 12px;
                         border-radius: 999px; }
html.style-studio .demo-block-label span { border-radius: 0; }

/* ── VIDEO INTRO (above each product demo) ─────────────────────────────── */
.video-intro { background: var(--card); border: 1px solid var(--rule);
               border-radius: var(--radius-lg); padding: 22px 24px;
               margin-bottom: 24px; }
html.style-studio .video-intro { border-radius: 0; }
.video-intro-eyebrow { font-family: var(--font-mono); font-size: 11.5px;
                       letter-spacing: .06em; text-transform: uppercase;
                       color: var(--ink-2); margin-bottom: 16px;
                       display: flex; align-items: center; gap: 10px; }
.video-intro-eyebrow::after { content: ''; flex: 1; height: 1px;
                              background: var(--rule); }
.video-intro-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
                    gap: 28px; align-items: start; }
@media (max-width: 840px) {
  .video-intro-grid { grid-template-columns: 1fr; gap: 20px; }
}
.video-intro-frame { position: relative; padding: 8px; }
.video-intro-frame video,
.video-intro-poster { width: 100%; aspect-ratio: 16 / 9;
                      display: block; border-radius: 6px;
                      background: #0e0d0b; object-fit: cover;
                      border: 1px solid var(--rule); }
html.style-studio .video-intro-frame video,
html.style-studio .video-intro-poster { border-radius: 0; }
.video-intro-poster { position: relative; cursor: pointer; padding: 0;
                      overflow: hidden; background-size: cover;
                      background-position: center; font-family: inherit;
                      appearance: none; color: inherit; text-decoration: none; }
.video-intro-poster:not([style]) {
  background:
    linear-gradient(135deg, rgba(200,82,30,.28), rgba(14,13,11,.9)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px);
}
.video-intro-poster::before { content: ''; position: absolute; inset: 0;
                              background: linear-gradient(135deg, rgba(14,13,11,.36), rgba(14,13,11,.72)); }
.video-intro-poster::after { content: ''; position: absolute; inset: 18px;
                             border: 1px solid rgba(255,255,255,.2); }
.video-intro-play { position: absolute; left: 50%; top: 50%;
                    transform: translate(-50%, -50%); width: 62px; height: 62px;
                    border-radius: 999px; display: grid; place-items: center;
                    background: color-mix(in oklab, var(--card) 92%, transparent);
                    color: var(--ink-1); box-shadow: 0 16px 40px rgba(0,0,0,.28);
                    z-index: 1; transition: transform .18s ease, background .18s ease; }
html.style-studio .video-intro-play { border-radius: 0; }
.video-intro-play svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.video-intro-poster:hover .video-intro-play { transform: translate(-50%, -50%) scale(1.05);
                                               background: var(--accent); color: var(--bg); }
.video-intro-caption { position: absolute; left: 22px; bottom: 20px;
                       z-index: 1; color: #fff; font-family: var(--font-mono);
                       font-size: 12px; letter-spacing: .05em;
                       text-transform: uppercase; }
.video-intro-corner { position: absolute; width: 14px; height: 14px;
                      pointer-events: none; }
.video-intro-corner.tl { top: 0; left: 0;
                         border-top: 1.5px solid var(--accent);
                         border-left: 1.5px solid var(--accent); }
.video-intro-corner.br { bottom: 0; right: 0;
                         border-bottom: 1.5px solid var(--accent);
                         border-right: 1.5px solid var(--accent); }
.video-intro-meta { display: flex; flex-direction: column; gap: 12px;
                    padding-top: 4px; }
.video-intro-title { font-family: var(--font-display); font-weight: 400;
                     font-size: 26px; line-height: 1.2; letter-spacing: -0.012em;
                     color: var(--ink-1); margin: 0; }
html.style-studio .video-intro-title,
html.style-garden .video-intro-title { font-weight: 600; }
.video-intro-desc { font-size: 14px; color: var(--ink-2); line-height: 1.55;
                    margin: 0; }
.video-intro-rule { border: none; border-top: 1px solid var(--rule);
                    margin: 4px 0; width: 40px; }
.video-intro-metarow { font-family: var(--font-mono); font-size: 11.5px;
                       letter-spacing: .04em; color: var(--ink-2);
                       text-transform: uppercase; }
.video-intro-source { display: inline-flex; align-items: center; gap: 4px;
                      font-family: var(--font-mono); font-size: 12px;
                      letter-spacing: .03em; color: var(--accent);
                      text-decoration: none; align-self: flex-start;
                      padding-top: 4px; transition: opacity .15s ease; }
.video-intro-source:hover { opacity: 0.75; }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.footer { padding: 32px 0; border-top: 1px solid var(--rule);
          font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
          display: flex; justify-content: space-between; align-items: center;
          flex-wrap: wrap; gap: 12px; }
.footer-links { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink-1); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .section-head, .about-grid, .contact-grid, .skill-layout { grid-template-columns: 1fr; gap: 36px; }
  .about-portrait { aspect-ratio: auto; min-height: 280px; max-height: 360px; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .proc-grid { grid-template-columns: 1fr 1fr; }
  .proc-step:nth-child(2) { border-right: none; }
  .proc-step:nth-child(1), .proc-step:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .nav-links { display: none; }
  .creds-grid { grid-template-columns: 1fr; }
  .cred:nth-child(odd) { border-right: none; padding-right: 0; }
  .cred:nth-child(even) { padding-left: 0; }
}
@media (max-width: 640px) {
  .cap-grid { grid-template-columns: 1fr; }
  .skill-content { grid-template-columns: 1fr; }
  .skill-list-card.wide { grid-column: span 1; }
  .form-row { grid-template-columns: 1fr; }
  .proc-grid { grid-template-columns: 1fr; }
  .proc-step { border-right: none; border-bottom: 1px solid var(--rule); }
  .proc-step:last-child { border-bottom: none; }
  :root { --container-pad: 20px; }
}
`;

// Inject stylesheet once
(function injectStyles() {
  if (document.getElementById('atlas-css')) return;
  const s = document.createElement('style');
  s.id = 'atlas-css';
  s.textContent = CSS;
  document.head.appendChild(s);
})();

// ── Theme applier ────────────────────────────────────────────────────────────
function applyTheme({ style, accent, fontPair, density }) {
  const root = document.documentElement;
  const themeVars = { ...STYLES[style], ...FONT_PAIRS[fontPair] };
  for (const [k, v] of Object.entries(themeVars)) root.style.setProperty(k, v);
  root.style.setProperty('--accent', accent);
  root.classList.remove('style-editorial', 'style-studio', 'style-garden');
  root.classList.add(`style-${style}`);
  root.classList.remove('density-compact', 'density-comfy', 'density-loose');
  root.classList.add(`density-${density}`);
}

// ── Components ───────────────────────────────────────────────────────────────

function Nav({ t, lang, setLang, brand }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a className="brand" href="#top">
          <img className="brand-logo" src="assets/logo.png" alt="" />
          {brand}
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#cap">{t.nav.capabilities}</a>
          <a className="nav-link" href="#restock-skill">{t.nav.skill}</a>
          <a className="nav-link" href="#demo">{t.nav.demo}</a>
          <a className="nav-link" href="#clients">{lang_is_zh(t) ? '服务客户' : 'Clients'}</a>
          <a className="nav-link" href="#about">{t.nav.about}</a>
          <a className="nav-link" href="#process">{t.nav.process}</a>
          <a className="nav-link" href="#contact">{t.nav.contact}</a>
        </div>
        <div className="nav-right">
          <div className="lang-switch">
            <button className={lang === 'zh' ? 'on' : ''} onClick={() => setLang('zh')}>中</button>
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <a className="btn btn-primary" href="#contact">{t.nav.cta}</a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ t, heroVariant, onConsult }) {
  const [l1, l2] = t.hero.titles[heroVariant % t.hero.titles.length];
  return (
    <section className="section hero" id="top">
      <div className="container">
        <div className="hero-stack">
          <div className="eyebrow">{t.hero.eyebrow}</div>
          <h1 className="hero-title">
            <span className="line1">{l1}</span>
            <span className="line2"><em>{l2}</em></span>
          </h1>
          <p className="hero-sub">{t.hero.sub}</p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#contact" onClick={onConsult}>{t.hero.ctaPrimary}</a>
            <a className="btn btn-ghost" href="#restock-skill">{t.hero.ctaSecondary}</a>
          </div>
          <div className="hero-trust">{t.hero.trust}</div>
        </div>

        <div className="agent-flow-wrap">
          <div className="agent-flow-head">
            <span className="agent-flow-eye">{t.hero.agent.title}</span>
          </div>
          <AgentFlow steps={t.hero.agent.steps} />
          <p className="agent-flow-foot">{t.hero.agent.sub}</p>
        </div>
      </div>
    </section>
  );
}

function AgentFlow({ steps }) {
  const Arrow = (
    <div className="agent-flow-arrow" aria-hidden="true">
      <svg viewBox="0 0 28 12" fill="none">
        <line x1="0" y1="6" x2="22" y2="6" stroke="currentColor" strokeWidth="1.4" strokeDasharray="3 3" />
        <polyline points="20,1 27,6 20,11" fill="none" stroke="currentColor" strokeWidth="1.4"
                  strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
  return (
    <div className="agent-flow">
      {steps.map((s, i) => (
        <React.Fragment key={s.n}>
          <article className="agent-flow-card">
            <div className="agent-flow-card-n">Step {s.n}</div>
            <h3 className="agent-flow-card-t">{s.t}</h3>
            <p className="agent-flow-card-d">{s.d}</p>
          </article>
          {i < steps.length - 1 && Arrow}
        </React.Fragment>
      ))}
    </div>
  );
}

function lang_is_zh(t) {
  // small detection - returns true if running zh
  return t && t.nav && t.nav.cta && /预约|联系/.test(t.nav.cta);
}

function SectionHead({ eyebrow, title, sub }) {
  return (
    <div className="section-head">
      <div>
        <div className="eyebrow" style={{ marginBottom: 18 }}>{eyebrow}</div>
        <h2 className="h-section">{title}</h2>
      </div>
      {sub && <p className="sub">{sub}</p>}
    </div>
  );
}

function Capabilities({ t }) {
  const statusLabel = {
    live: t.cap.statusLive,
    deployed: t.cap.statusDeployed,
    beta: t.cap.statusBeta,
    soon: t.cap.statusSoon,
    plan: t.cap.statusPlan,
    custom: t.cap.statusCustom,
  };
  return (
    <section className="section" id="cap">
      <div className="container">
        <SectionHead eyebrow={t.cap.eyebrow} title={t.cap.title} sub={t.cap.sub} />
        <div className="cap-grid">
          {t.cap.modules.map((m) => (
            <div className="cap-cell" key={m.n}>
              <div className="cap-head">
                <span className="cap-num">{m.n}</span>
                <span className={`cap-status ${m.status}`}>{statusLabel[m.status]}</span>
              </div>
              <h3 className="cap-title">{m.title}</h3>
              <p className="cap-desc">{m.desc}</p>
              <div className="cap-tags">
                {m.tags.map((tag) => <span className="cap-tag" key={tag}>{tag}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RestockSkillOffer({ t, onPurchase, onConsult }) {
  const s = t.restockSkill;
  return (
    <section className="section skill-offer" id="restock-skill">
      <div className="container">
        <SectionHead eyebrow={s.eyebrow} title={s.title} sub={s.sub} />
        <div className="skill-layout">
          <aside className="skill-price-panel">
            <div className="skill-badge">{s.badge}</div>
            <div className="skill-price">
              <span className="skill-price-main">{s.price}</span>
              <span className="skill-price-usd">{s.usd}</span>
            </div>
            <div className="skill-actions">
              <a className="btn btn-primary" href="#contact" onClick={onPurchase}>{s.cta}</a>
              <a className="btn btn-ghost" href="#contact" onClick={onConsult}>{s.consultCta}</a>
              <a className="btn btn-ghost" href={s.tutorialHref} target="_blank" rel="noopener noreferrer">
                {s.tutorialCta} ↗
              </a>
            </div>
            <div className="skill-terms">
              <h3>{s.termsTitle}</h3>
              <p>{s.terms}</p>
            </div>
          </aside>
          <div className="skill-content">
            <article className="skill-list-card wide">
              <h3>{s.includesTitle}</h3>
              <ul className="skill-list">
                {s.includes.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </article>
            <article className="skill-list-card">
              <h3>{s.useCasesTitle}</h3>
              <div className="skill-usecases">
                {s.useCases.map((item) => <span className="skill-usecase" key={item}>{item}</span>)}
              </div>
            </article>
            <article className="skill-list-card">
              <h3>{s.goodTitle}</h3>
              <ul className="skill-list">
                {s.good.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </article>
            <article className="skill-list-card wide">
              <h3>{s.badTitle}</h3>
              <ul className="skill-list">
                {s.bad.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </article>
          </div>
        </div>
      </div>
    </section>
  );
}

function Demo({ t, lang }) {
  const [product, setProduct] = useState('restock');
  return (
    <section className="section" id="demo" style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        <SectionHead eyebrow={t.demo.eyebrow} title={t.demo.title} sub={t.demo.sub} />

        {/* Product switcher */}
        <div className="prod-switcher" style={{ marginBottom: 28 }}>
          {t.demo.products.map((p) => (
            <button key={p.id}
              className={'prod-card ' + (product === p.id ? 'on' : '')}
              onClick={() => setProduct(p.id)}>
              <div className="prod-card-row">
                <span className="prod-card-num">
                  {p.id === 'restock' ? '01' : '02'}
                </span>
                <span className="prod-card-status">
                  {p.id === 'restock' ? t.cap.statusDeployed : t.cap.statusSoon}
                </span>
              </div>
              <div className="prod-card-label">{p.label}</div>
              <div className="prod-card-desc">{p.desc}</div>
            </button>
          ))}
        </div>

        {product === 'restock' && (
          <>
            <DemoBlockLabel label="Video" />
            <VideoIntro
              data={t.videoIntro.restock}
              src="assets/videos/restock-demo.mp4"
              poster="assets/videos/restock-poster.svg" />
            <DemoBlockLabel label="Demo" />
            <RestockDemo lang={lang} />
          </>
        )}
        {product === 'listing' && (
          <>
            <DemoBlockLabel label="Video" />
            <VideoIntro
              data={t.videoIntro.listing}
              src="assets/videos/listing-demo.mp4"
              poster="assets/videos/listing-poster.svg" />
            <DemoBlockLabel label="Demo" />
            <ListingDemo lang={lang} />
          </>
        )}
      </div>
    </section>
  );
}

function DemoBlockLabel({ label }) {
  return (
    <div className="demo-block-label" aria-hidden="true">
      <span>{label}</span>
    </div>
  );
}

function VideoIntro({ data, src, poster }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const videoRef = useRef(null);
  const posterStyle = poster
    ? { backgroundImage: `url("${poster}")` }
    : undefined;

  useEffect(() => {
    if (!isLoaded || !videoRef.current) return;
    videoRef.current.play().catch(() => {});
  }, [isLoaded]);

  return (
    <section className="video-intro">
      <div className="video-intro-eyebrow">— {data.eyebrow}</div>
      <div className="video-intro-grid">
        <div className="video-intro-frame">
          <span className="video-intro-corner tl" />
          <span className="video-intro-corner br" />
          {data.href ? (
            <a
              className="video-intro-poster"
              href={data.href}
              target="_blank"
              rel="noopener noreferrer"
              style={posterStyle}
              aria-label={`${data.actionLabel || 'Watch on Xiaohongshu'}: ${data.title}`}>
              <span className="video-intro-play" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </span>
              <span className="video-intro-caption">{data.actionLabel || data.duration}</span>
            </a>
          ) : isLoaded ? (
            <video ref={videoRef} controls preload="none" playsInline poster={poster} src={src} />
          ) : (
            <button
              className="video-intro-poster"
              type="button"
              style={posterStyle}
              onClick={() => setIsLoaded(true)}
              aria-label={`Play ${data.title}`}>
              <span className="video-intro-play" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </span>
              <span className="video-intro-caption">{data.duration}</span>
            </button>
          )}
        </div>
        <div className="video-intro-meta">
          <h3 className="video-intro-title">{data.title}</h3>
          <p className="video-intro-desc">{data.desc}</p>
          <hr className="video-intro-rule" />
          <div className="video-intro-metarow">
            {data.duration} · {data.date}
          </div>
          {data.href && (
            <a className="video-intro-source" href={data.href}
               target="_blank" rel="noopener noreferrer">
              {data.sourceLabel} {data.sourceHandle} ↗
            </a>
          )}
        </div>
      </div>
    </section>
  );
}

function Clients({ t }) {
  const c = t.clients;
  return (
    <section className="section" id="clients">
      <div className="container">
        <SectionHead eyebrow={c.eyebrow} title={c.title} sub={c.sub} />
        <div className="clients-grid">
          {c.cards.map((card, i) => (
            <div className="client-card" key={i}>
              <div className="client-num">{String(i + 1).padStart(2, '0')}</div>
              <div className="client-rev">
                <span className="client-rev-num">{card.revenue}</span>
                <span className="client-rev-unit">{card.revenueUnit}</span>
              </div>
              <div className="client-meta">
                <span className="client-tag">{card.tag}</span>
                <span className="client-cat">{card.category}</span>
              </div>
              <p className="client-desc">{card.desc}</p>
              <div className="client-mods">
                {card.mods.map((m) => <span key={m} className="client-mod">{m}</span>)}
              </div>
            </div>
          ))}
        </div>
        <div className="clients-foot">— {c.footnote}</div>
      </div>
    </section>
  );
}

function AgentDiagram({ a }) {
  // viewBox 400 × 260 — fits hero card column comfortably
  const W = 400, H = 260;
  const cx = W / 2, cy = H / 2;
  // 4 input pills on left, 4 output pills on right, agent block in middle
  const leftX = 8, leftW = 110;
  const rightX = W - leftW - 8, rightW = 110;
  const inputs = a.inputs.slice(0, 4);
  const outputs = a.outputs.slice(0, 4);
  const pillH = 30, pillGap = 14;
  const colH = inputs.length * pillH + (inputs.length - 1) * pillGap;
  const colYStart = cy - colH / 2;
  const yFor = (i) => colYStart + i * (pillH + pillGap);

  // central agent block
  const agW = 130, agH = 96;
  const agX = cx - agW / 2, agY = cy - agH / 2;

  // animated dash for flow lines
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto' }}
         role="img" aria-label="AI Agent flow diagram">
      <defs>
        <linearGradient id="agentFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="var(--accent)" stopOpacity="0.92" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.78" />
        </linearGradient>
      </defs>

      {/* connection lines */}
      {inputs.map((_, i) => {
        const y1 = yFor(i) + pillH / 2;
        const y2 = agY + (agH / (inputs.length + 1)) * (i + 1);
        return (
          <g key={`l${i}`}>
            <path d={`M ${leftX + leftW} ${y1} C ${leftX + leftW + 30} ${y1}, ${agX - 30} ${y2}, ${agX} ${y2}`}
                  stroke="var(--ink-3)" strokeWidth="1" fill="none" opacity="0.5" />
            <path d={`M ${leftX + leftW} ${y1} C ${leftX + leftW + 30} ${y1}, ${agX - 30} ${y2}, ${agX} ${y2}`}
                  stroke="var(--accent)" strokeWidth="1.4" fill="none"
                  strokeDasharray="3 6"
                  style={{ animation: `flow 3s linear infinite`, animationDelay: `${i * 0.4}s` }} />
          </g>
        );
      })}
      {outputs.map((_, i) => {
        const y1 = agY + (agH / (outputs.length + 1)) * (i + 1);
        const y2 = yFor(i) + pillH / 2;
        return (
          <g key={`r${i}`}>
            <path d={`M ${agX + agW} ${y1} C ${agX + agW + 30} ${y1}, ${rightX - 30} ${y2}, ${rightX} ${y2}`}
                  stroke="var(--ink-3)" strokeWidth="1" fill="none" opacity="0.5" />
            <path d={`M ${agX + agW} ${y1} C ${agX + agW + 30} ${y1}, ${rightX - 30} ${y2}, ${rightX} ${y2}`}
                  stroke="var(--accent)" strokeWidth="1.4" fill="none"
                  strokeDasharray="3 6"
                  style={{ animation: `flow 3s linear infinite`, animationDelay: `${i * 0.4 + 1.4}s` }} />
            {/* arrowhead at output */}
            <polygon points={`${rightX - 3},${y2} ${rightX - 8},${y2 - 3} ${rightX - 8},${y2 + 3}`}
                     fill="var(--accent)" />
          </g>
        );
      })}

      {/* input pills */}
      {inputs.map((label, i) => (
        <g key={`ip${i}`}>
          <rect x={leftX} y={yFor(i)} width={leftW} height={pillH} rx="4"
                fill="var(--card)" stroke="var(--rule-strong)" strokeWidth="1" />
          <text x={leftX + leftW / 2} y={yFor(i) + pillH / 2 + 3.5}
                fontSize="10" textAnchor="middle"
                fill="var(--ink-1)" fontFamily="var(--font-mono)">{label}</text>
        </g>
      ))}
      <text x={leftX + leftW / 2} y={colYStart - 12} fontSize="9"
            textAnchor="middle" fill="var(--ink-3)"
            fontFamily="var(--font-mono)" letterSpacing="1">INPUT</text>

      {/* output pills */}
      {outputs.map((label, i) => (
        <g key={`op${i}`}>
          <rect x={rightX} y={yFor(i)} width={rightW} height={pillH} rx="4"
                fill="var(--card)" stroke="var(--accent)" strokeWidth="1" />
          <text x={rightX + rightW / 2} y={yFor(i) + pillH / 2 + 3.5}
                fontSize="10" textAnchor="middle"
                fill="var(--ink-1)" fontFamily="var(--font-mono)">{label}</text>
        </g>
      ))}
      <text x={rightX + rightW / 2} y={colYStart - 12} fontSize="9"
            textAnchor="middle" fill="var(--accent)"
            fontFamily="var(--font-mono)" letterSpacing="1">ACTION</text>

      {/* central agent block */}
      <rect x={agX} y={agY} width={agW} height={agH} rx="6"
            fill="url(#agentFill)" stroke="var(--accent)" strokeWidth="1.2" />
      <text x={cx} y={agY + 18} fontSize="9.5"
            textAnchor="middle" fill="rgba(255,255,255,.85)"
            fontFamily="var(--font-mono)" letterSpacing="1.2">AI AGENT</text>
      {/* pulsing core */}
      <circle cx={cx} cy={agY + 38} r="6" fill="white" opacity="0.95">
        <animate attributeName="r" values="5;9;5" dur="2.4s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.95;0.6;0.95" dur="2.4s" repeatCount="indefinite" />
      </circle>
      <circle cx={cx} cy={agY + 38} r="3" fill="var(--accent)" />
      {/* reasoning labels */}
      {a.agent.map((label, i) => (
        <text key={i} x={cx} y={agY + 56 + i * 12}
              fontSize="9" textAnchor="middle"
              fill="rgba(255,255,255,.92)"
              fontFamily="var(--font-mono)">{label}</text>
      ))}
    </svg>
  );
}

function About({ t }) {
  return (
    <section className="section" id="about">
      <div className="container">
        <SectionHead eyebrow={t.about.eyebrow} title={t.about.title} />
        <div className="about-grid">
          <div className="about-portrait">
            <img src="assets/portrait.png" alt="Founder portrait" />
            <div className="corner">
              FOUNDER<br/>
              SILICON&nbsp;VALLEY · AMAZON&nbsp;US
            </div>
          </div>
          <div className="about-bio">
            {t.about.bio.map((p, i) => <p key={i}>{p}</p>)}
            <div className="creds-grid">
              {t.about.creds.map(([lbl, val]) => (
                <div className="cred" key={lbl}>
                  <div className="lbl">{lbl}</div>
                  <div className="val">{val}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process({ t }) {
  return (
    <section className="section" id="process" style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        <SectionHead eyebrow={t.process.eyebrow} title={t.process.title} />
        <div className="proc-grid">
          {t.process.steps.map((s) => (
            <div className="proc-step" key={s.n}>
              <div className="proc-num">{s.n}</div>
              <h3 className="proc-t">{s.t}</h3>
              <p className="proc-d">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ t, intent }) {
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const f = t.contact.form;
  const c = t.contact.channels;
  const isPurchase = intent === 'restock_skill_purchase';
  const subject = isPurchase
    ? '多宝鱼AI / Turbot AI — 补货 Skill 购买意向'
    : '多宝鱼AI / Turbot AI — 新询盘';
  return (
    <section className="section" id="contact">
      <div className="container">
        <SectionHead eyebrow={t.contact.eyebrow} title={t.contact.title} sub={t.contact.sub} />
        <div className="contact-grid">
          <form className="form" onSubmit={async (e) => {
            e.preventDefault();
            const form = e.currentTarget;
            const email = form.elements.email.value.trim();
            const phone = form.elements.phone.value.trim();
            if (!email && !phone) {
              form.elements.email.focus();
              alert(f.contactNote);
              return;
            }
            setSending(true);
            try {
              const res = await fetch('https://api.web3forms.com/submit', {
                method: 'POST',
                body: new FormData(form),
              });
              const data = await res.json();
              if (data.success) {
                setSubmitted(true);
              } else {
                alert((data && data.message) || 'Submit failed, please try again or email directly.');
              }
            } catch (err) {
              alert('Network error, please try again or email directly.');
            } finally {
              setSending(false);
            }
          }}>
            <input type="hidden" name="access_key" value="67e4fab6-e3d6-49b7-bbe1-b984a2e81716" />
            <input type="hidden" name="subject" value={subject} />
            <input type="hidden" name="from_name" value="duobaoyu.ai 官网表单" />
            <input type="hidden" name="intent" value={intent} />
            {isPurchase && <input type="hidden" name="product" value="restock_skill" />}
            <input type="checkbox" name="botcheck" style={{ display: 'none' }} tabIndex="-1" autoComplete="off" />
            {isPurchase && <div className="purchase-note">{f.purchaseNote}</div>}
            {!isPurchase && (
              <>
                <div className="form-row">
                  <div className="field">
                    <label>{f.company}</label>
                    <input type="text" name="company" required />
                  </div>
                  <div className="field">
                    <label>{f.scale}</label>
                    <select name="scale" defaultValue="">
                      <option value="" disabled></option>
                      {f.scaleOptions.map((o) => <option key={o}>{o}</option>)}
                    </select>
                  </div>
                </div>
                <div className="field">
                  <label>{f.pain}</label>
                  <textarea name="pain" placeholder={f.painPlaceholder}></textarea>
                </div>
              </>
            )}
            {isPurchase && (
              <div className="field">
                <label>{f.purchaseMemo}</label>
                <textarea name="purchase_note" placeholder={f.purchaseMemoPlaceholder}></textarea>
              </div>
            )}
            <div>
              <div className="form-row">
                <div className="field">
                  <label>{f.email}</label>
                  <input type="email" name="email" />
                </div>
                <div className="field">
                  <label>{f.phone}</label>
                  <input type="tel" name="phone" placeholder={f.phonePlaceholder} />
                </div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5,
                            color: 'var(--ink-2)', marginTop: 8, letterSpacing: '.02em' }}>
                — {f.contactNote}
              </div>
            </div>
            <div className="field">
              <label>{f.wechatField}</label>
              <input type="text" name="other_contact" placeholder={f.wechatPlaceholder} />
            </div>
            <div>
              <button className="btn btn-primary" type="submit" disabled={submitted || sending}>
                {submitted ? f.submitted : (sending ? '...' : f.submit)}
              </button>
            </div>
          </form>
          <div className="channels">
            <div className="channel">
              <div className="channel-icon">@</div>
              <div className="channel-body">
                <div className="channel-lbl">{c.email.label}</div>
                <div className="channel-val">
                  <a href={`mailto:${c.email.value}`} style={{ textDecoration: 'none', color: 'inherit' }}>
                    {c.email.value}
                  </a>
                </div>
                <div className="channel-note">{c.email.note}</div>
              </div>
            </div>
            <div className="channel">
              <div className="channel-icon" style={{ fontSize: 13, lineHeight: 1.1 }}>小红</div>
              <div className="channel-body">
                <div className="channel-lbl">{c.xhs.label}</div>
                <div className="channel-val">{c.xhs.value}</div>
                <div className="channel-note">{c.xhs.note}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="container" style={{ display: 'flex', justifyContent: 'space-between',
                                          alignItems: 'center', width: '100%', flexWrap: 'wrap', gap: 12 }}>
        <span>— {t.footer.tag}</span>
        <div className="footer-links">
          <a href="privacy.html">{t.footer.privacy}</a>
          <a href="#top">{t.footer.back}</a>
        </div>
      </div>
    </footer>
  );
}

// ── Tweaks panel ─────────────────────────────────────────────────────────────

function TweaksUI({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakSlider, TweakText } = window;
  const tCN = "warm-editorial / studio / garden";
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Language" />
      <TweakRadio label="Lang" value={tweaks.lang}
        options={[
          { value: 'zh', label: '中' },
          { value: 'en', label: 'EN' },
        ]}
        onChange={(v) => setTweak('lang', v)} />

      <TweakSection label="Visual style" />
      <TweakSelect label="Mode" value={tweaks.style}
        options={[
          { value: 'editorial', label: '01. Warm editorial' },
          { value: 'studio',    label: '02. Studio / Bauhaus' },
          { value: 'garden',    label: '03. Garden / Soft' },
        ]}
        onChange={(v) => {
          setTweak({ style: v, fontPair: STYLE_DEFAULT_FONT[v] });
        }} />

      <TweakColor label="Accent" value={tweaks.accent}
        options={['#c8521e', '#d97757', '#1f5d4c', '#3a4f8a', '#8a4a8a', '#b88a3a']}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSelect label="Type" value={tweaks.fontPair}
        options={[
          { value: 'serif',   label: 'Instrument Serif + Geist' },
          { value: 'grotesk', label: 'Space Grotesk' },
          { value: 'rounded', label: 'Plus Jakarta Sans' },
        ]}
        onChange={(v) => setTweak('fontPair', v)} />

      <TweakRadio label="Density" value={tweaks.density}
        options={[
          { value: 'compact', label: 'Compact' },
          { value: 'comfy',   label: 'Comfy' },
          { value: 'loose',   label: 'Loose' },
        ]}
        onChange={(v) => setTweak('density', v)} />

      <TweakSection label="Hero copy" />
      <TweakRadio label="Variant" value={String(tweaks.heroVariant)}
        options={[
          { value: '0', label: 'A' },
          { value: '1', label: 'B' },
          { value: '2', label: 'C' },
        ]}
        onChange={(v) => setTweak('heroVariant', Number(v))} />
    </TweaksPanel>
  );
}

// ── App ──────────────────────────────────────────────────────────────────────
function App() {
  const { useTweaks } = window;
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [contactIntent, setContactIntent] = useState('custom_agent_consult');

  useEffect(() => {
    applyTheme({
      style: tweaks.style,
      accent: tweaks.accent,
      fontPair: tweaks.fontPair,
      density: tweaks.density,
    });
  }, [tweaks.style, tweaks.accent, tweaks.fontPair, tweaks.density]);

  const lang = tweaks.lang === 'en' ? 'en' : 'zh';
  const t = (window.I18N || I18N)[lang];

  // keep <title> in sync with lang
  useEffect(() => {
    document.title = t.seoTitle || `${t.brand} — AI agents for cross-border sellers`;
    document.documentElement.lang = lang === 'en' ? 'en' : 'zh-CN';
  }, [t.seoTitle, t.brand, lang]);

  return (
    <React.Fragment>
      <Nav t={t} lang={lang} setLang={(v) => setTweak('lang', v)} brand={t.brand} />
      <Hero
        t={t}
        heroVariant={tweaks.heroVariant || 0}
        onConsult={() => setContactIntent('custom_agent_consult')}
      />
      <Capabilities t={t} />
      <RestockSkillOffer
        t={t}
        onPurchase={() => setContactIntent('restock_skill_purchase')}
        onConsult={() => setContactIntent('custom_agent_consult')}
      />
      <Demo t={t} lang={lang} />
      <Clients t={t} />
      <About t={t} />
      <Process t={t} />
      <Contact t={t} intent={contactIntent} />
      <Footer t={t} />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);