// Kernel deep-dive — AI-native data platform
// Capabilities: governance · workflow automation · data modeling · insight generation
function Kernel({ tweaks }) {
  const ref = useRef(null);
  const progress = useScrollProgress(ref);
  const [activeCap, setActiveCap] = useState(0);

  const capabilities = [
    {
      k: "GOVERNANCE",
      t: "AI-native data governance",
      short: "Governance",
      d: "Policies as code, not PDFs. {name} classifies every column, watches every query, and enforces row-, column-, and purpose-level access in real time. Lineage is automatic; consent is traceable; audits take minutes.",
      bullets: ["Auto-classification · PII, PHI, PCI", "Policy-as-code with Git workflows", "Row / column / purpose access", "Lineage, consent, and audit log"],
    },
    {
      k: "WORKFLOW",
      t: "Workflow automation",
      short: "Automation",
      d: "Describe the pipeline in plain language; {name} plans the steps, provisions the resources, and runs them on a schedule with retries, SLAs, and circuit breakers. Pipelines self-repair when upstream schemas drift.",
      bullets: ["Natural-language pipeline authoring", "Self-healing on schema drift", "SLA-aware scheduling & retries", "Hand-off gates for humans"],
    },
    {
      k: "MODELING",
      t: "Semantic data modeling",
      short: "Modeling",
      d: "One ontology across warehouses, lakes, and apps. Business concepts — customer, order, margin — get a single definition, versioned in Git, consumable by BI, APIs, and agents alike.",
      bullets: ["Governed metric layer", "Auto-mapped schemas via AI", "Versioned in Git with reviews", "Consumed by BI, API, and agents"],
    },
    {
      k: "INSIGHT",
      t: "Agentic insight generation",
      short: "Insight",
      d: "Deploy analytical agents that ask questions of the data and bring answers back with receipts. {name} runs them on schedule or on demand, grounds them in your semantic layer, and logs every step.",
      bullets: ["Scheduled & on-demand agents", "Grounded in your ontology", "Every answer cites rows", "Human checkpoints built in"],
    },
  ];

  const cap = capabilities[activeCap];

  return (
    <section ref={ref} id="kernel" style={{
      padding: "160px 0", position: "relative",
      background: "linear-gradient(180deg, transparent, rgba(122,107,255,0.04), transparent)",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start", marginBottom: 100 }}
             className="deepdive-header">
          <Reveal>
            <KernelTerminal progress={progress} name={tweaks.product2_name} />
          </Reveal>
          <div>
            <Reveal>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
                <div style={{ width: 14, height: 14, borderRadius: 3, background: "var(--indigo)" }} />
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--indigo)" }}>
                  02 — {tweaks.product2_name.toUpperCase()}
                </span>
              </div>
            </Reveal>
            <Reveal delay={100}>
              <h2 className="serif" style={{ fontSize: "clamp(56px, 7vw, 104px)", lineHeight: 1.02, marginBottom: 36 }}>
                An <span style={{ color: "var(--indigo)", fontStyle: "italic" }}>AI-native</span> platform<br/>
                for enterprise data.
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <p style={{ fontSize: 18, color: "var(--ink-dim)", maxWidth: 520, lineHeight: 1.55 }}>
                {tweaks.product2_name} brings four capabilities together in a single runtime —
                <strong style={{ color: "var(--ink)", fontWeight: 500 }}> governance, workflow automation, data modeling, and insight generation</strong> —
                all powered by AI from the ground up, not bolted on.
              </p>
            </Reveal>
            <Reveal delay={300}>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 28 }}>
                {["Snowflake", "Databricks", "BigQuery", "Postgres", "S3", "Kafka", "Salesforce", "+272 more"].map((c) => (
                  <span key={c} className="mono" style={{
                    fontSize: 11, padding: "6px 10px",
                    border: "1px solid var(--line-strong)", borderRadius: 6,
                    color: "var(--ink-dim)",
                  }}>{c}</span>
                ))}
              </div>
            </Reveal>
          </div>
        </div>

        {/* Capability tabs */}
        <Reveal>
          <div style={{ marginBottom: 40 }}>
            <Eyebrow color="var(--indigo)">Four capabilities · one platform</Eyebrow>
            <h3 className="serif" style={{ fontSize: "clamp(36px, 4.5vw, 60px)", marginTop: 16, lineHeight: 1.05, maxWidth: "18ch" }}>
              Everything an enterprise data team does — <span style={{ fontStyle: "italic", color: "var(--ink-dim)" }}>rebuilt with AI inside.</span>
            </h3>
          </div>
        </Reveal>

        <Reveal>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 4,
            borderBottom: "1px solid var(--line)", marginBottom: 40,
          }} className="capability-tabs">
            {capabilities.map((c, i) => (
              <button key={c.k} onClick={() => setActiveCap(i)}
                style={{
                  textAlign: "left", padding: "20px 4px 20px 4px",
                  borderBottom: activeCap === i ? "2px solid var(--indigo)" : "2px solid transparent",
                  marginBottom: -1, position: "relative",
                  transition: "border-color 300ms",
                }}>
                <div className="mono" style={{
                  fontSize: 10, letterSpacing: "0.18em",
                  color: activeCap === i ? "var(--indigo)" : "var(--ink-mute)",
                  transition: "color 300ms",
                }}>
                  0{i + 1} / {c.k}
                </div>
                <div className="serif" style={{
                  fontSize: 26, marginTop: 8,
                  color: activeCap === i ? "var(--ink)" : "var(--ink-dim)",
                  transition: "color 300ms",
                  lineHeight: 1.1,
                }}>
                  {c.short}
                </div>
              </button>
            ))}
          </div>
        </Reveal>

        <Reveal>
          <div key={activeCap} style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center", minHeight: 360,
            animation: "kernel-fade 500ms cubic-bezier(.2,.7,.1,1)",
          }} className="capability-body">
            <div>
              <h4 className="serif" style={{ fontSize: 42, lineHeight: 1.05, marginBottom: 20 }}>
                {cap.t}
              </h4>
              <p style={{ fontSize: 16, color: "var(--ink-dim)", lineHeight: 1.6, marginBottom: 28, maxWidth: 520 }}>
                {cap.d.replace(/\{name\}/g, tweaks.product2_name)}
              </p>
              <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                {cap.bullets.map((b) => (
                  <li key={b} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 14 }}>
                    <span style={{
                      marginTop: 7, width: 5, height: 5, borderRadius: 999,
                      background: "var(--indigo)", boxShadow: "0 0 6px var(--indigo)",
                      flexShrink: 0,
                    }} />
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
            <CapabilityVisual which={activeCap} progress={progress} />
          </div>
        </Reveal>

        {/* Architecture */}
        <div style={{ marginTop: 120 }}>
          <Reveal>
            <div style={{
              padding: "60px 40px", borderRadius: 20,
              background: "var(--bg-2)", border: "1px solid var(--line)",
              position: "relative", overflow: "hidden",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, flexWrap: "wrap", gap: 20 }}>
                <div>
                  <Eyebrow color="var(--indigo)">Architecture</Eyebrow>
                  <h3 className="serif" style={{ fontSize: 44, marginTop: 16, maxWidth: "18ch", lineHeight: 1.05 }}>
                    One platform. Deploy where your data lives.
                  </h3>
                </div>
                <div style={{ display: "flex", gap: 8 }}>
                  {["Cloud", "On-prem", "Air-gapped"].map((m, i) => (
                    <span key={m} className="mono" style={{
                      fontSize: 11, padding: "8px 14px",
                      border: "1px solid var(--line-strong)", borderRadius: 999,
                      color: i === 0 ? "var(--indigo)" : "var(--ink-dim)",
                      background: i === 0 ? "rgba(122,107,255,0.08)" : "transparent",
                    }}>{m}</span>
                  ))}
                </div>
              </div>
              <Architecture progress={progress} />
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        @keyframes kernel-fade {
          0% { opacity: 0; transform: translateY(12px); }
          100% { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

// One visual per capability
function CapabilityVisual({ which, progress }) {
  const Wrap = ({ children }) => (
    <div style={{
      background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 16,
      padding: 24, minHeight: 340, position: "relative", overflow: "hidden",
      animation: "kernel-fade 500ms cubic-bezier(.2,.7,.1,1)",
    }}>{children}</div>
  );

  if (which === 0) return <Wrap><GovernanceVisual /></Wrap>;
  if (which === 1) return <Wrap><WorkflowVisual progress={progress} /></Wrap>;
  if (which === 2) return <Wrap><ModelingVisual /></Wrap>;
  return <Wrap><InsightVisual /></Wrap>;
}

// 0. Governance — table with classification tags and access rules
function GovernanceVisual() {
  const cols = [
    { n: "email", type: "string", tag: "PII", redact: "row" },
    { n: "ssn", type: "string", tag: "PII · RESTRICTED", redact: "col" },
    { n: "order_total", type: "numeric", tag: "FINANCIAL", redact: null },
    { n: "ip_address", type: "string", tag: "PII", redact: "purpose" },
    { n: "diagnosis_code", type: "string", tag: "PHI", redact: "col" },
    { n: "campaign_id", type: "string", tag: "—", redact: null },
  ];
  const color = (tag) => tag.includes("PII") ? "var(--indigo)" : tag.includes("PHI") ? "#e06658" : tag.includes("FIN") ? "var(--amber)" : "var(--ink-mute)";
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.14em" }}>TABLE · customers</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--indigo)" }}>◉ POLICY ACTIVE · v14</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {cols.map((c) => (
          <div key={c.n} style={{
            display: "grid", gridTemplateColumns: "1.4fr 0.8fr 1fr auto", gap: 10, alignItems: "center",
            padding: "10px 12px", background: "var(--bg-3)", borderRadius: 8,
            border: "1px solid var(--line)",
          }}>
            <span className="mono" style={{ fontSize: 12 }}>{c.n}</span>
            <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)" }}>{c.type}</span>
            <span className="mono" style={{
              fontSize: 10, letterSpacing: "0.1em",
              color: color(c.tag),
              padding: "2px 6px", borderRadius: 4,
              background: `${color(c.tag)}1a`,
              display: "inline-block", width: "fit-content",
            }}>{c.tag}</span>
            <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)" }}>
              {c.redact === "col" ? "mask(col)" : c.redact === "row" ? "filter(row)" : c.redact === "purpose" ? "if(purpose)" : "allow"}
            </span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, padding: "10px 12px", background: "rgba(122,107,255,0.08)", border: "1px dashed rgba(122,107,255,0.35)", borderRadius: 8 }}>
        <span className="mono" style={{ fontSize: 11, color: "var(--indigo)" }}>
          policy.yml → 6 columns classified, 3 rules enforced, 2,148 queries audited today
        </span>
      </div>
    </div>
  );
}

// 1. Workflow — DAG with running animation
function WorkflowVisual({ progress }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 800);
    return () => clearInterval(id);
  }, []);
  const steps = [
    { id: "extract", label: "Extract · CRM", x: 40, y: 60, status: "done" },
    { id: "extract2", label: "Extract · Billing", x: 40, y: 140, status: "done" },
    { id: "clean", label: "Clean & validate", x: 200, y: 100, status: "done" },
    { id: "model", label: "Model · Customer 360", x: 360, y: 100, status: "running" },
    { id: "score", label: "AI score · churn", x: 520, y: 60, status: "queued" },
    { id: "load", label: "Load · Warehouse", x: 520, y: 140, status: "queued" },
  ];
  const edges = [["extract","clean"],["extract2","clean"],["clean","model"],["model","score"],["model","load"]];
  const color = (s) => s === "done" ? "var(--indigo)" : s === "running" ? "var(--amber)" : "var(--ink-mute)";
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.14em" }}>PIPELINE · customer_360</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--amber)" }}>◉ RUNNING · step 4/6</span>
      </div>
      <svg viewBox="0 0 620 220" width="100%" height="260">
        {edges.map(([a, b], i) => {
          const A = steps.find((s) => s.id === a), B = steps.find((s) => s.id === b);
          const phase = ((tick + i) % 5) / 5;
          const isHot = A.status === "done" && (B.status === "running" || B.status === "done");
          return (
            <g key={i}>
              <line x1={A.x + 60} y1={A.y} x2={B.x - 60} y2={B.y}
                stroke="var(--line-strong)" strokeWidth="1" />
              {isHot && (
                <circle
                  cx={A.x + 60 + (B.x - 60 - A.x - 60) * phase}
                  cy={A.y + (B.y - A.y) * phase}
                  r="2.5" fill="var(--indigo)" />
              )}
            </g>
          );
        })}
        {steps.map((s) => (
          <g key={s.id}>
            <rect x={s.x - 60} y={s.y - 16} width="120" height="32" rx="6"
              fill="var(--bg-3)" stroke={color(s.status)} strokeWidth={s.status === "running" ? "1.5" : "1"} />
            <circle cx={s.x - 48} cy={s.y} r="3" fill={color(s.status)}>
              {s.status === "running" && <animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite" />}
            </circle>
            <text x={s.x - 38} y={s.y + 3} fontSize="10" fill="var(--ink)" fontFamily="Geist, sans-serif">
              {s.label}
            </text>
          </g>
        ))}
      </svg>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10, marginTop: 8 }}>
        {[{ l: "SLA", v: "< 15m" }, { l: "Self-heals", v: "3 today" }, { l: "Cost", v: "$0.42/run" }].map((x) => (
          <div key={x.l} style={{ padding: "8px 10px", background: "var(--bg-3)", borderRadius: 8, border: "1px solid var(--line)" }}>
            <div className="mono" style={{ fontSize: 9, color: "var(--ink-mute)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{x.l}</div>
            <div className="mono" style={{ fontSize: 13, color: "var(--ink)", marginTop: 2 }}>{x.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// 2. Modeling — entity / relationship diagram
function ModelingVisual() {
  const entities = [
    { n: "Customer", x: 70, y: 60, attrs: ["id", "tier", "ltv"] },
    { n: "Order", x: 260, y: 50, attrs: ["id", "total", "ts"] },
    { n: "Product", x: 450, y: 60, attrs: ["sku", "price", "cat"] },
    { n: "Invoice", x: 260, y: 200, attrs: ["id", "status", "due"] },
  ];
  const rels = [
    { from: 0, to: 1, label: "places", card: "1:N" },
    { from: 1, to: 2, label: "contains", card: "N:M" },
    { from: 1, to: 3, label: "bills", card: "1:1" },
  ];
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.14em" }}>ONTOLOGY · commerce</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--indigo)" }}>v2.14 · reviewed by @elena</span>
      </div>
      <svg viewBox="0 0 560 300" width="100%" height="280">
        {rels.map((r, i) => {
          const A = entities[r.from], B = entities[r.to];
          const mx = (A.x + B.x) / 2, my = (A.y + B.y) / 2;
          return (
            <g key={i}>
              <line x1={A.x} y1={A.y} x2={B.x} y2={B.y} stroke="var(--line-strong)" strokeDasharray="3 3" />
              <rect x={mx - 22} y={my - 8} width="44" height="16" rx="3" fill="var(--bg-2)" stroke="var(--line-strong)" />
              <text x={mx} y={my + 3} fontSize="9" textAnchor="middle" fill="var(--ink-dim)" fontFamily="Geist Mono, monospace">{r.label}</text>
              <text x={mx} y={my - 12} fontSize="8" textAnchor="middle" fill="var(--indigo)" fontFamily="Geist Mono, monospace">{r.card}</text>
            </g>
          );
        })}
        {entities.map((e) => (
          <g key={e.n}>
            <rect x={e.x - 60} y={e.y - 20} width="120" height={24 + e.attrs.length * 14} rx="6"
              fill="var(--bg-3)" stroke="var(--line-strong)" />
            <rect x={e.x - 60} y={e.y - 20} width="120" height="20" rx="6"
              fill="rgba(122,107,255,0.12)" />
            <text x={e.x} y={e.y - 6} fontSize="11" textAnchor="middle" fill="var(--ink)" fontFamily="Instrument Serif, serif">{e.n}</text>
            {e.attrs.map((a, i) => (
              <text key={a} x={e.x - 54} y={e.y + 10 + i * 14} fontSize="9" fill="var(--ink-dim)" fontFamily="Geist Mono, monospace">
                · {a}
              </text>
            ))}
          </g>
        ))}
      </svg>
    </div>
  );
}

// 3. Insight — AI-generated analytical insight card
function InsightVisual() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.14em" }}>AGENT · weekly_margin</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--indigo)" }}>◉ RAN 4m AGO</span>
      </div>

      <div style={{
        padding: 18, background: "var(--bg-3)", border: "1px solid var(--line)", borderRadius: 10,
      }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--indigo)", letterSpacing: "0.14em", marginBottom: 8 }}>
          ▲ INSIGHT · CONFIDENCE 0.92
        </div>
        <p className="serif" style={{ fontSize: 22, lineHeight: 1.3, marginBottom: 14 }}>
          Margin on Tier-3 accounts dropped <span style={{ color: "var(--indigo)" }}>4.2pts</span> this week, driven by a shift in product mix toward lower-margin SKUs in EMEA.
        </p>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {["grounded in fact_sales", "3 queries", "6 sources cited"].map((c) => (
            <span key={c} className="mono" style={{
              fontSize: 10, padding: "3px 8px", borderRadius: 4,
              border: "1px solid var(--line-strong)", color: "var(--ink-dim)",
            }}>{c}</span>
          ))}
        </div>
      </div>

      <div style={{ padding: 14, background: "var(--bg-3)", border: "1px solid var(--line)", borderRadius: 10 }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.14em", marginBottom: 10 }}>
          SUGGESTED ACTIONS
        </div>
        {["Adjust Q2 forecast for EMEA Tier-3", "Notify account leads · 11 accounts", "Flag for revenue review"].map((a, i) => (
          <div key={a} style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "8px 0", borderTop: i === 0 ? "none" : "1px solid var(--line)",
            fontSize: 13,
          }}>
            <span style={{ width: 14, height: 14, borderRadius: 3, border: "1px solid var(--line-strong)" }} />
            <span style={{ flex: 1 }}>{a}</span>
            <span className="mono" style={{ fontSize: 10, color: "var(--indigo)" }}>→</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// Animated terminal / chat for Kernel hero
function KernelTerminal({ progress, name }) {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setStep((s) => (s + 1) % 5), 2200);
    return () => clearInterval(id);
  }, []);
  const lines = [
    { who: "user", t: "Why did margin drop in EMEA this week?" },
    { who: "sys", t: "Checking governance · purpose=analysis · OK" },
    { who: "sys", t: "Querying ontology: margin, region, tier · 142ms" },
    { who: "ai",  t: "Tier-3 mix shifted toward low-margin SKUs." },
    { who: "ai",  t: "Top contributors:", chart: true },
  ];
  return (
    <div style={{
      background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 16,
      overflow: "hidden", position: "relative",
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 10, padding: "14px 18px",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ display: "flex", gap: 6 }}>
          <div style={{ width: 10, height: 10, borderRadius: 999, background: "#3a3a3d" }} />
          <div style={{ width: 10, height: 10, borderRadius: 999, background: "#3a3a3d" }} />
          <div style={{ width: 10, height: 10, borderRadius: 999, background: "#3a3a3d" }} />
        </div>
        <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.14em", marginLeft: 8 }}>
          {name.toUpperCase()} / WORKBENCH
        </span>
        <div style={{ marginLeft: "auto", display: "flex", gap: 6, alignItems: "center" }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--indigo)", boxShadow: "0 0 6px var(--indigo)" }} />
          <span className="mono" style={{ fontSize: 10, color: "var(--indigo)" }}>GROUNDED · 4.2k CTX</span>
        </div>
      </div>

      <div style={{ padding: 24, minHeight: 360, display: "flex", flexDirection: "column", gap: 14 }} className="mono">
        {lines.map((l, i) => (
          <div key={i} style={{
            opacity: step >= i ? 1 : 0,
            transform: step >= i ? "translateY(0)" : "translateY(10px)",
            transition: "all 400ms cubic-bezier(.2,.7,.1,1)",
            fontSize: 13, lineHeight: 1.6,
            color: l.who === "user" ? "var(--ink)" : l.who === "ai" ? "var(--ink)" : "var(--ink-mute)",
          }}>
            <span style={{
              display: "inline-block", width: 60,
              color: l.who === "user" ? "var(--ink-mute)" : l.who === "ai" ? "var(--indigo)" : "var(--ink-mute)",
            }}>
              {l.who === "user" ? "> you" : l.who === "ai" ? "▲ ai" : "· sys"}
            </span>
            <span>{l.t}</span>
            {l.chart && step >= i && (
              <div style={{ marginTop: 16, marginLeft: 60, display: "grid", gridTemplateColumns: "110px 1fr 60px", rowGap: 10, columnGap: 12, alignItems: "center" }}>
                {[["EMEA · Tier 3", 420], ["EMEA · Tier 2", 180], ["APAC · Tier 3", 90]].map(([r, v]) => (
                  <React.Fragment key={r}>
                    <span style={{ fontSize: 11, color: "var(--ink-dim)" }}>{r}</span>
                    <div style={{ height: 6, background: "var(--bg-3)", borderRadius: 999, overflow: "hidden" }}>
                      <div style={{
                        height: "100%", width: `${(v / 420) * 100}%`, background: "var(--indigo)",
                        transition: "width 1.2s cubic-bezier(.2,.7,.1,1)",
                      }} />
                    </div>
                    <span style={{ fontSize: 11, color: "var(--ink-dim)", textAlign: "right" }}>-{v}bps</span>
                  </React.Fragment>
                ))}
              </div>
            )}
          </div>
        ))}

        {step === lines.length - 1 && (
          <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ color: "var(--ink-mute)" }}>&gt;</span>
            <span style={{ color: "var(--ink-dim)" }}>Ask {name} anything…</span>
            <span style={{ animation: "blink 1s infinite", color: "var(--indigo)" }}>▌</span>
          </div>
        )}
      </div>
      <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
    </div>
  );
}

function Architecture({ progress }) {
  const layers = [
    { name: "Sources", items: ["Warehouse", "Lake", "SaaS", "Streams"], color: "var(--ink-dim)" },
    { name: "Governance", items: ["Classify", "Policy", "Lineage", "Audit"], color: "var(--indigo)" },
    { name: "AI Runtime", items: ["Modeling", "Workflows", "Agents", "Eval"], color: "var(--indigo)" },
    { name: "Surfaces", items: ["Chat", "API", "BI", "Apps"], color: "var(--ink)" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${layers.length}, 1fr)`, gap: 14, alignItems: "stretch" }}>
      {layers.map((L, li) => (
        <div key={L.name} style={{
          padding: 20, background: "var(--bg-3)", borderRadius: 12,
          border: `1px solid ${li === 1 || li === 2 ? "rgba(122,107,255,0.35)" : "var(--line)"}`,
          position: "relative",
        }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.14em", marginBottom: 16 }}>
            0{li + 1} / {L.name.toUpperCase()}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {L.items.map((it) => (
              <div key={it} style={{
                padding: "10px 12px",
                border: "1px solid var(--line)",
                borderRadius: 8,
                background: "var(--bg-2)",
                fontSize: 13,
                display: "flex", alignItems: "center", justifyContent: "space-between",
              }}>
                <span>{it}</span>
                <span style={{
                  width: 5, height: 5, borderRadius: 999, background: L.color,
                  boxShadow: L.color === "var(--indigo)" ? "0 0 6px var(--indigo)" : "none",
                }} />
              </div>
            ))}
          </div>
          {li < layers.length - 1 && (
            <div style={{
              position: "absolute", top: "50%", right: -14, width: 14, height: 1,
              background: "var(--line-strong)", zIndex: 1,
            }}>
              <div style={{
                position: "absolute", right: 0, top: -2, width: 5, height: 5,
                borderTop: "1px solid var(--line-strong)",
                borderRight: "1px solid var(--line-strong)",
                transform: "rotate(45deg)",
              }} />
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Kernel });