// app.jsx, TEE explainer page v2
// new visual lang (light cool grey + navy + orange) + ELI5/Technical detail toggle

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "de",
  "level": "eli5",
  "deepOpen": false
}/*EDITMODE-END*/;

const L_LABEL = {
  en: { eli5: "ELI5", tech: "Technical" },
  de: { eli5: "Einfach", tech: "Technisch" },
};

// ── Title with orange accent for emphasis. parts: ["plain", "accent", "plain", …]
function Title({ parts, className = "h1" }) {
  return (
    <h2 className={className}>
      {parts.map((p, i) => (
        i % 2 === 1
          ? <span key={i} className="accent">{p}</span>
          : <React.Fragment key={i}>{p}</React.Fragment>
      ))}
    </h2>
  );
}

// ── Merge ELI5 overrides into a section base
function leveled(base, eli5Block, level) {
  if (level === "eli5" && eli5Block && eli5Block.eli5) {
    return { ...base, ...eli5Block.eli5 };
  }
  return base;
}

// ── Stack two contents: one visible, one hidden but kept for height.
// Use inline style for opacity so the visible/hidden state stays consistent
// across re-renders even if a host environment style override interferes.
function LvlStack({ active, children }) {
  const tech = children.tech;
  const eli5 = children.eli5;
  const techShown = active === "tech";
  const eli5Shown = active === "eli5";
  const cell = (shown) => ({
    gridArea: "1 / 1",
    opacity: shown ? 1 : 0,
    visibility: shown ? "visible" : "hidden",
    pointerEvents: shown ? "auto" : "none",
    transition: "opacity 0.22s ease",
  });
  return (
    <div className="lvl-stack">
      <div style={cell(techShown)} aria-hidden={!techShown}>{tech}</div>
      <div style={cell(eli5Shown)} aria-hidden={!eli5Shown}>{eli5}</div>
    </div>
  );
}

// ── Level toggle (segmented control)
function LevelToggle({ value, onChange, lang, size = "sm" }) {
  const lbl = L_LABEL[lang];

  const eli5Ico = (
    <svg className="ico" viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.4"/>
      <path d="M5 9.5 Q 8 12 11 9.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" fill="none"/>
      <circle cx="6" cy="6.5" r="0.9" fill="currentColor"/>
      <circle cx="10" cy="6.5" r="0.9" fill="currentColor"/>
    </svg>
  );
  const techIco = (
    <svg className="ico" viewBox="0 0 16 16" fill="none">
      <path d="M5 4 L1 8 L5 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" fill="none"/>
      <path d="M11 4 L15 8 L11 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" fill="none"/>
      <path d="M9.5 3 L6.5 13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" fill="none"/>
    </svg>
  );

  return (
    <div className="level-switch" role="tablist" aria-label="Detail level">
      <button onClick={() => onChange("eli5")} className={value === "eli5" ? "active" : ""} role="tab" aria-selected={value === "eli5"}>
        {eli5Ico}{lbl.eli5}
      </button>
      <button onClick={() => onChange("tech")} className={value === "tech" ? "active" : ""} role="tab" aria-selected={value === "tech"}>
        {techIco}{lbl.tech}
      </button>
    </div>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <span className="nav__lang" aria-label="Language">
      <button onClick={() => setLang("de")} className={`lang-btn${lang === "de" ? " lang-btn--active" : ""}`}>DE</button>
      {" · "}
      <button onClick={() => setLang("en")} className={`lang-btn${lang === "en" ? " lang-btn--active" : ""}`}>EN</button>
    </span>
  );
}

function TopBar({ lang, setLang, level, setLevel, t }) {
  return (
    <nav className="nav" id="tee-nav">
      <div className="container nav__inner">
        <a href="/" className="nav__logo" aria-label="brainbot home">
          <img src="/assets/logos/brainbot-orange.svg" alt="brainbot" />
        </a>
        <div className="nav__links">
          <a href="#what">{t.nav.what}</a>
          <a href="#compare">{t.nav.compare}</a>
          <a href="#attest">{t.nav.attest}</a>
          <a href="#tech">{t.nav.tech}</a>
        </div>
        <div className="nav__right">
          <LangToggle lang={lang} setLang={setLang} />
          <LevelToggle value={level} onChange={setLevel} lang={lang} />
        </div>
      </div>
    </nav>
  );
}

function Hero({ t, L, level, setLevel, lang }) {
  return (
    <section className="hero" id="top">
      <div className="page">
        <div className="hero-meta">
          <span>{t.hero.meta1}</span>
          <span className="acc">{t.hero.meta2}</span>
          <span>{t.hero.meta3}</span>
        </div>
        <div className="hero-grid">
          <div>
            <h1 className="h-display">
              {t.hero.title[0]}<br />
              {t.hero.title[1]}<span className="accent">{t.hero.title[2]}</span>{t.hero.title[3]}
            </h1>
            <p className="lede" style={{ marginTop: 28, fontSize: "clamp(18px, 1.4vw, 22px)" }}>{t.hero.lede}</p>
            <div style={{
              marginTop: 40, display: "flex", gap: 24, fontSize: 13,
              color: "var(--ink-3)", borderTop: "1px solid var(--line)",
              paddingTop: 20, flexWrap: "wrap",
            }}>
              <span>{t.hero.bottomLeft}</span>
              <span style={{ marginLeft: "auto", color: "var(--ink-2)", fontSize: 14, maxWidth: "40ch", textAlign: "right" }}>
                {t.hero.bottomRight}
              </span>
            </div>
          </div>
          <div className="hero-vis">
            <LvlStack active={level}>
              {{
                tech: <HeroDiagram L={L} />,
                eli5: <HeroDiagramELI5 L={L} />,
              }}
            </LvlStack>
          </div>
        </div>
      </div>

      <div className="level-switch-band">
        <span className="level-switch-label">{lang === "de" ? "Wähle deine Tiefe" : "Choose your depth"}</span>
        <LevelToggle value={level} onChange={setLevel} lang={lang} size="lg" />
      </div>
    </section>
  );
}

function PromiseSection({ t, level }) {
  const sec = leveled(t.promise, window.CONTENT_ELI5[t._lang]?.promise, level);
  return (
    <section id="promise">
      <div className="page">
        <div className="section-head">
          <span className="eyebrow">{t.promise.eyebrow}</span>
          <Title parts={t.promise.title} className="h1" />
        </div>

        <LvlStack active={level}>
          {{
            tech: (
              <div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(30px, 5vw, 60px)" }}>
                  <div className="body" style={{ fontSize: 17, lineHeight: 1.55 }}>
                    {t.promise.body.slice(0, 2).map((p, i) => <p key={i}>{p}</p>)}
                  </div>
                  <div className="body" style={{ fontSize: 17, lineHeight: 1.55 }}>
                    {t.promise.body.slice(2).map((p, i) => <p key={i}>{p}</p>)}
                  </div>
                </div>
                <div style={{ marginTop: 64, display: "flex", justifyContent: "center" }}>
                  <blockquote className="pull">
                    “{t.promise.pull}”
                  </blockquote>
                </div>
              </div>
            ),
            eli5: (
              <div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(30px, 5vw, 60px)" }}>
                  <div className="body" style={{ fontSize: 18, lineHeight: 1.55, color: "var(--ink)" }}>
                    {sec.body && sec.body.slice(0, 2).map((p, i) => <p key={i}>{p}</p>)}
                  </div>
                  <div className="body" style={{ fontSize: 18, lineHeight: 1.55, color: "var(--ink)" }}>
                    {sec.body && sec.body.slice(2).map((p, i) => <p key={i}>{p}</p>)}
                  </div>
                </div>
                <div style={{ marginTop: 64, display: "flex", justifyContent: "center" }}>
                  <blockquote className="pull">
                    “{sec.pull}”
                  </blockquote>
                </div>
              </div>
            ),
          }}
        </LvlStack>
      </div>
    </section>
  );
}

function WhatSection({ t, L, level }) {
  const sec = leveled(t.what, window.CONTENT_ELI5[t._lang]?.what, level);

  const renderBody = (lede, lede2, bullets, fontBigger) => (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(30px, 5vw, 60px)" }}>
      <div className="body" style={{ fontSize: fontBigger ? 18 : 17, lineHeight: 1.55, color: fontBigger ? "var(--ink)" : "var(--ink-2)" }}>
        <p>{lede}</p>
        {lede2 && <p>{lede2}</p>}
      </div>
      <ul className="tee-list">
        {bullets.map((b, i) => (
          <li key={i}>
            <span className="marker acc">◆</span>
            <div>
              <div style={{ color: "var(--ink)", fontWeight: 600, marginBottom: 3 }}>{b.k}</div>
              <div>{b.v}</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );

  return (
    <section id="what">
      <div className="page">
        <div className="section-head">
          <span className="eyebrow">{t.what.eyebrow}</span>
          <Title parts={t.what.title} className="h1" />
        </div>

        <LvlStack active={level}>
          {{
            tech: renderBody(t.what.lede, t.what.lede2, t.what.bullets, false),
            eli5: renderBody(sec.lede, sec.lede2, sec.bullets, true),
          }}
        </LvlStack>

        <div className="panel" style={{ marginTop: 56 }}>
          <div style={{
            padding: "14px 22px",
            borderBottom: "1px solid var(--line)",
            display: "flex", justifyContent: "space-between", alignItems: "center",
            fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.1em",
            color: "var(--ink-3)", textTransform: "uppercase",
          }}>
            <span>FIG. 02, {level === "eli5" ? sec.figLabel : t.what.figLabel}</span>
            <span style={{ display: "flex", gap: 10 }}>
              <span className="pill cipher" style={{ fontSize: 9.5, padding: "2px 8px" }}>
                <span className="dot"></span>{t.what.figCipher}
              </span>
              <span className="pill trusted" style={{ fontSize: 9.5, padding: "2px 8px" }}>
                <span className="dot"></span>{t.what.figPlain}
              </span>
            </span>
          </div>
          <div style={{ padding: 24 }}>
            <LvlStack active={level}>
              {{
                tech: <TEEDiagram L={L} />,
                eli5: <TEEDiagramELI5 L={L} />,
              }}
            </LvlStack>
          </div>
        </div>
      </div>
    </section>
  );
}

function CompareSection({ t, L, level }) {
  const sec = leveled(t.compare, window.CONTENT_ELI5[t._lang]?.compare, level);
  const modeKey = ["onprem", "cloud", "tee"];

  const renderTable = (modes, stateLabels) => (
    <div className="compare">
      {modes.map((m, i) => (
        <div className="col" key={i}>
          <div className="col-head">
            <div className="label">{m.label}</div>
            <div className="name">{m.name}</div>
            <span className={`pill ${m.tagClass}`} style={{ marginTop: 10 }}>
              <span className="dot"></span>{m.tag}
            </span>
          </div>
          <div className="col-body">
            <ul className="tee-list" style={{ padding: "0 24px" }}>
              {m.rows.map((r, j) => {
                const cls =
                  r.state === "no" || r.state === "no*" ? "yes" :
                  r.state === "operator" || r.state === "maybe" ? "no" :
                  "mid";
                const sym =
                  r.state === "no" || r.state === "no*" ? "✓" :
                  r.state === "operator" ? "✕" :
                  r.state === "maybe" ? "?" :
                  r.state === "yes" ? "●" :
                  r.state === "you" ? "◆" :
                  "-";
                return (
                  <li key={j} style={{ flexWrap: "wrap" }}>
                    <span className={`marker ${cls}`}>{sym}</span>
                    <div style={{ display: "flex", justifyContent: "space-between", flex: 1, gap: 10, minWidth: 0, alignItems: "baseline" }}>
                      <span style={{ flex: "1 1 auto", minWidth: 0 }}>{r.layer}</span>
                      <span style={{
                        color: "var(--ink-3)", fontFamily: "var(--font-mono)",
                        fontSize: 10, letterSpacing: "0.03em", textTransform: "uppercase",
                        flexShrink: 0, textAlign: "right", whiteSpace: "nowrap",
                      }}>
                        {stateLabels[r.state]}
                      </span>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="col-foot">{m.foot}</div>
        </div>
      ))}
    </div>
  );

  return (
    <section id="compare">
      <div className="page">
        <div className="section-head">
          <span className="eyebrow">{t.compare.eyebrow}</span>
          <Title parts={t.compare.title} className="h1" />
          <p className="lede" style={{ marginTop: 8 }}>{level === "eli5" ? sec.lede : t.compare.lede}</p>
        </div>

        {/* animated 3-panel diagram */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
          gap: 14, marginBottom: 28,
        }} className="compare-anim">
          {(level === "eli5" ? sec.modes : t.compare.modes).map((m, i) => (
            <div key={i} className="card" style={{ padding: 14 }}>
              <LvlStack active={level}>
                {{
                  tech: <ComparisonPanel L={L} mode={modeKey[i]} modeLabel={t.compare.modes[i].name.toUpperCase()} />,
                  eli5: <ComparisonPanelELI5 L={L} mode={modeKey[i]} modeLabel={(sec.modes ? sec.modes[i].name : t.compare.modes[i].name).toUpperCase()} />,
                }}
              </LvlStack>
            </div>
          ))}
        </div>

        <LvlStack active={level}>
          {{
            tech: renderTable(t.compare.modes, t.compare.stateLabels),
            eli5: sec.modes ? renderTable(sec.modes, sec.stateLabels) : null,
          }}
        </LvlStack>

        <p className="fine" style={{ marginTop: 16 }}>
          {level === "eli5" ? sec.footnote : t.compare.footnote}
        </p>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .compare-anim { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function AttestSection({ t, L, level }) {
  const sec = leveled(t.attest, window.CONTENT_ELI5[t._lang]?.attest, level);

  const renderSteps = (steps) => (
    <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 18 }}>
      {steps.map((s, i) => (
        <li key={i} style={{
          paddingLeft: 70, position: "relative", paddingBottom: 18,
          borderBottom: i < steps.length - 1 ? "1px solid var(--line)" : "0",
        }}>
          <span style={{
            position: "absolute", left: 0, top: 1,
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em",
            color: "var(--accent)", fontWeight: 600,
          }}>{s.n}</span>
          <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4, letterSpacing: "-0.005em" }}>
            {s.k}
          </div>
          <div style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.5 }}>{s.v}</div>
        </li>
      ))}
    </ol>
  );

  return (
    <section id="attest">
      <div className="page">
        <div className="section-head">
          <span className="eyebrow">{t.attest.eyebrow}</span>
          <Title parts={t.attest.title} className="h1" />
          <p className="lede" style={{ marginTop: 8 }}>
            {level === "eli5" ? sec.lede : t.attest.lede}
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1.35fr 1fr",
          gap: "clamp(20px, 3vw, 36px)", alignItems: "start",
        }} className="attest-grid">
          <LvlStack active={level}>
            {{
              tech: <AttestationFlow L={L} />,
              eli5: <AttestationFlowELI5 L={L} />,
            }}
          </LvlStack>

          <LvlStack active={level}>
            {{
              tech: renderSteps(t.attest.steps),
              eli5: renderSteps(sec.steps),
            }}
          </LvlStack>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .attest-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function TechSection({ t, level }) {
  const sec = leveled(t.tech, window.CONTENT_ELI5[t._lang]?.tech, level);
  return (
    <section id="tech">
      <div className="page">
        <div className="section-head">
          <span className="eyebrow">{t.tech.eyebrow}</span>
          <Title parts={t.tech.title} className="h1" />
          <p className="lede" style={{ marginTop: 8 }}>{level === "eli5" ? sec.lede : t.tech.lede}</p>
        </div>

        <div className="tech-grid">
          {t.tech.cards.map((c, i) => (
            <div className="tech-card" key={i}>
              <div className="top">
                <div className="logo">{c.logo}</div>
                <div className="meta">
                  {c.tags.map((tag, j) => <span key={j} className="pill">{tag}</span>)}
                </div>
              </div>
              <h3>{c.title}</h3>
              <div className="desc">{c.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ChallengesSection({ t, level }) {
  const sec = leveled(t.challenges, window.CONTENT_ELI5[t._lang]?.challenges, level);

  const renderItems = (items) => (
    <div className="challenges">
      {items.map((c, i) => (
        <div className="challenge" key={i}>
          <span className="num">{c.n}</span>
          <h4>{c.k}</h4>
          <p>{c.v}</p>
        </div>
      ))}
    </div>
  );

  return (
    <section id="challenges">
      <div className="page">
        <div className="section-head">
          <span className="eyebrow">{t.challenges.eyebrow}</span>
          <Title parts={t.challenges.title} className="h1" />
          <p className="lede" style={{ marginTop: 8 }}>{level === "eli5" ? sec.lede : t.challenges.lede}</p>
        </div>

        <LvlStack active={level}>
          {{
            tech: renderItems(t.challenges.items),
            eli5: renderItems(sec.items),
          }}
        </LvlStack>
      </div>
    </section>
  );
}

function DeepSection({ t, open, setOpen, level, lang }) {
  // In ELI5, this section reduces to a small teaser of similar height.
  return (
    <section id="deep">
      <div className="page">
        <div className="section-head">
          <span className="eyebrow">{t.deep.eyebrow}</span>
          <Title parts={t.deep.title} className="h1" />
          <p className="lede" style={{ marginTop: 8 }}>
            {level === "eli5"
              ? (lang === "de"
                  ? "Diese Sektion ist nur im Technisch‑Modus sichtbar. Wechseln Sie oben rechts, wenn Sie Register, Quotes und Schlüssel‑Freigabe sehen möchten."
                  : "This section is only shown in Technical mode. Flip the switch at the top to see registers, quotes, and key‑release patterns.")
              : t.deep.lede}
          </p>
        </div>

        {level === "tech" ? (
          <div className="nerd-block">
            <button className={`nerd-toggle ${open ? "open" : ""}`} onClick={() => setOpen(!open)}>
              <span style={{ fontWeight: 500, fontSize: 15, letterSpacing: "-0.005em" }}>
                {open ? t.deep.toggleClose : t.deep.toggleOpen}
              </span>
              <span className="chev">+</span>
            </button>
            {open && (
              <div className="nerd-body">
                {t.deep.sections.map((s, i) => (
                  <div key={i}>
                    <h5>{s.h}</h5>
                    <p dangerouslySetInnerHTML={{ __html: s.p }}></p>
                  </div>
                ))}
              </div>
            )}
          </div>
        ) : (
          <div className="nerd-block">
            <div className="nerd-toggle" style={{ cursor: "default", opacity: 0.55 }}>
              <span style={{ fontWeight: 500, fontSize: 15, letterSpacing: "-0.005em", color: "var(--ink-3)" }}>
                {lang === "de" ? "Im Einfach‑Modus ausgeblendet" : "Hidden in ELI5 mode"}
              </span>
              <span className="chev" style={{ color: "var(--ink-4)" }}>+</span>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function FutureSection({ t, level }) {
  const sec = leveled(t.future, window.CONTENT_ELI5[t._lang]?.future, level);
  return (
    <section id="future">
      <div className="page">
        <div className="section-head">
          <span className="eyebrow">{t.future.eyebrow}</span>
          <Title parts={t.future.title} className="h1" />
        </div>

        <LvlStack active={level}>
          {{
            tech: (
              <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "clamp(30px, 5vw, 60px)", alignItems: "center" }} className="future-grid">
                <p className="lede" style={{ fontSize: 19 }}>{t.future.lede}</p>
                <blockquote className="pull">“{t.future.pull}”</blockquote>
              </div>
            ),
            eli5: (
              <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "clamp(30px, 5vw, 60px)", alignItems: "center" }} className="future-grid">
                <p className="lede" style={{ fontSize: 19, color: "var(--ink)" }}>{sec.lede}</p>
                <blockquote className="pull">“{sec.pull}”</blockquote>
              </div>
            ),
          }}
        </LvlStack>

        <div className="panel" style={{ marginTop: 60 }}>
          <div style={{
            padding: "14px 22px", borderBottom: "1px solid var(--line)",
            fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.1em",
            color: "var(--ink-3)", textTransform: "uppercase",
          }}>
            FIG. 04, TEE TODAY · FHE TOMORROW
          </div>
          <div style={{ padding: 24 }}>
            <FHEDiagram />
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .future-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function FHEDiagram() {
  return (
    <svg viewBox="0 0 1100 280" className="diagram" preserveAspectRatio="xMidYMid meet">
      <defs>
        <marker id="arr-bf" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M0 0 L10 5 L0 10 z" fill="#2f4a6b"/>
        </marker>
      </defs>
      <text x="20" y="22" fontSize="10" fill="#6c7585" letterSpacing="0.12em">A · TEE: DECRYPTED INSIDE SILICON</text>
      <text x="20" y="160" fontSize="10" fill="#6c7585" letterSpacing="0.12em">B · FHE: NEVER DECRYPTED AT ALL</text>

      <g transform="translate(0 30)">
        <rect x="20" y="20" width="120" height="60" rx="6" fill="#ffffff" stroke="#131a26" strokeOpacity="0.25"/>
        <text x="80" y="44" textAnchor="middle" fontSize="10" fill="#131a26" fontWeight="600" letterSpacing="0.06em">CLIENT</text>
        <text x="80" y="62" textAnchor="middle" fontSize="11" fontFamily="ui-sans-serif" fill="#131a26" fontWeight="500" letterSpacing="0">prompt</text>

        <path d="M 140 50 L 460 50" stroke="#2f4a6b" strokeDasharray="3 4" strokeWidth="1.4" fill="none" markerEnd="url(#arr-bf)"/>
        <text x="300" y="42" textAnchor="middle" fontSize="9.5" fill="#2f4a6b" letterSpacing="0.08em">CIPHERTEXT</text>

        <rect x="460" y="10" width="200" height="80" rx="6" className="enclave-fill"/>
        <text x="476" y="32" fontSize="10" fill="#1f5a37" fontWeight="600" letterSpacing="0.06em">◆ TEE</text>
        <text x="560" y="56" textAnchor="middle" fontSize="11" fontFamily="ui-sans-serif" fill="#131a26" fontWeight="500" letterSpacing="0">plaintext + compute</text>
        <text x="560" y="74" textAnchor="middle" fontSize="9.5" fill="#1f5a37">decrypt → infer → re‑encrypt</text>

        <path d="M 660 50 L 1080 50" stroke="#2f4a6b" strokeDasharray="3 4" strokeWidth="1.4" fill="none" markerEnd="url(#arr-bf)"/>
        <text x="870" y="42" textAnchor="middle" fontSize="9.5" fill="#2f4a6b" letterSpacing="0.08em">CIPHERTEXT</text>

        <text x="1080" y="100" textAnchor="end" fontSize="11" fill="#6c7585" letterSpacing="0.06em">
          ↳ trusts the silicon
        </text>
      </g>

      <g transform="translate(0 165)">
        <rect x="20" y="20" width="120" height="60" rx="6" fill="#ffffff" stroke="#131a26" strokeOpacity="0.25"/>
        <text x="80" y="44" textAnchor="middle" fontSize="10" fill="#131a26" fontWeight="600" letterSpacing="0.06em">CLIENT</text>
        <text x="80" y="62" textAnchor="middle" fontSize="11" fontFamily="ui-sans-serif" fill="#131a26" fontWeight="500" letterSpacing="0">prompt</text>

        <path d="M 140 50 L 460 50" stroke="#2f4a6b" strokeDasharray="3 4" strokeWidth="1.4" fill="none" markerEnd="url(#arr-bf)"/>
        <text x="300" y="42" textAnchor="middle" fontSize="9.5" fill="#2f4a6b" letterSpacing="0.08em">CIPHERTEXT</text>

        <rect x="460" y="10" width="200" height="80" rx="6" fill="#d6dde6" stroke="#2f4a6b"/>
        <text x="476" y="32" fontSize="10" fill="#1f3450" fontWeight="600" letterSpacing="0.06em">FHE</text>
        <text x="560" y="56" textAnchor="middle" fontSize="11" fontFamily="ui-sans-serif" fill="#1f3450" fontWeight="500" letterSpacing="0">ciphertext × ciphertext</text>
        <text x="560" y="74" textAnchor="middle" fontSize="9.5" fill="#1f3450">never sees a single token</text>

        <path d="M 660 50 L 1080 50" stroke="#2f4a6b" strokeDasharray="3 4" strokeWidth="1.4" fill="none" markerEnd="url(#arr-bf)"/>
        <text x="870" y="42" textAnchor="middle" fontSize="9.5" fill="#2f4a6b" letterSpacing="0.08em">CIPHERTEXT</text>

        <text x="1080" y="100" textAnchor="end" fontSize="11" fill="#6c7585" letterSpacing="0.06em">
          ↳ trusts only math
        </text>
      </g>
    </svg>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="page" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 30, flexWrap: "wrap", width: "100%", maxWidth: "var(--maxw)" }}>
        <a href="/" aria-label="brainbot home">
          <img src="/assets/logos/brainbot-white.svg" alt="brainbot" style={{ height: 26, width: "auto", display: "block" }} />
        </a>
        <div style={{ display: "flex", flexDirection: "column", gap: 4, textAlign: "right" }}>
          <a href={`mailto:${t.foot.contact}`} className="link">{t.foot.contact}</a>
          <span style={{ fontSize: 11.5, letterSpacing: "0.04em" }}>{t.foot.legal}</span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tw.lang;
  const level = tw.level || "eli5";
  const setLang = (v) => setTweak("lang", v);
  const setLevel = (v) => setTweak("level", v);
  const [deepOpen, setDeepOpen] = useState(tw.deepOpen);

  useEffect(() => { document.documentElement.lang = lang; }, [lang]);
  useEffect(() => { setDeepOpen(tw.deepOpen); }, [tw.deepOpen]);

  // Attach _lang so child components can look up overlays
  const t = useMemo(() => {
    const base = window.CONTENT[lang];
    return { ...base, _lang: lang };
  }, [lang]);
  const L = t.diagram;

  return (
    <>
      <TopBar lang={lang} setLang={setLang} level={level} setLevel={setLevel} t={t} />
      <main>
        <Hero t={t} L={L} level={level} setLevel={setLevel} lang={lang} />
        <PromiseSection t={t} level={level} />
        <WhatSection t={t} L={L} level={level} />
        <CompareSection t={t} L={L} level={level} />
        <AttestSection t={t} L={L} level={level} />
        <TechSection t={t} level={level} />
        <ChallengesSection t={t} level={level} />
        <DeepSection t={t} open={deepOpen} setOpen={(v) => { setDeepOpen(v); setTweak("deepOpen", v); }} level={level} lang={lang} />
        <FutureSection t={t} level={level} />
      </main>
      <Footer t={t} />
    </>
  );
}

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