// Manifesto — brutalist concrete-poetry web. Type AS the design.
// Three copy variants × three palettes, all driven by props.

const MF_PALETTES = {
  hot:      { bg: '#F5F2ED', ink: '#0B0B0B', a: '#FF2E63', b: '#08D9D6', name: 'Hot' },
  voltage:  { bg: '#F2EFE6', ink: '#0B0B0B', a: '#1E3FF7', b: '#FFE600', name: 'Voltage' },
  concrete: { bg: '#EDE7D8', ink: '#161412', a: '#C7522A', b: '#7A8B6F', name: 'Concrete' },
};

const MF_COPY = {
  operator: {
    label: { en: 'Final',  cs: 'Finál' },
    p1Tag: { en: 'MANIFESTO', cs: 'MANIFEST' },
    word:  'PUNGE',
    p1Words: ['VALIDATE IT.', 'SOLVE IT.', 'SHIP IT.', 'OWN IT.'],
    p1Sub: {
      en: 'AI systems. No demos. No decks. Just code, infra, runbook — and a signature on the invoice.',
      cs: 'AI systémy. Žádná dema. Žádné slidy. Pouze kód, infra, runbook — a podpis pod fakturu.',
    },
    p1Solutions: { en: 'Solutions.', cs: 'Solutions.' },
    p2Title: { en: 'WHAT I BUILD', cs: 'CO STAVÍM' },
    p2Words: [
      { en: 'AGENTS.',        cs: 'Agenti.' },
      { en: 'WORKFLOWS.',     cs: 'Workflows.' },
      { en: 'LEADS.',         cs: 'Leady.' },
      { en: 'AUDITS.',        cs: 'Audity.' },
      { en: 'ARCHITECTURES.', cs: 'Systémy.' },
      { en: 'CUSTOM MODELS.', cs: 'Custom modely.' },
    ],
    p2Descriptions: [
      { en: 'autonomous AI that does the work — not just talks about it.', cs: 'autonomní AI, která dělá práci — ne že o ní jen mluví.' },
      { en: 'end-to-end automations that connect what you already use.',    cs: 'end-to-end automatizace propojující to, co už používáte.' },
      { en: 'qualified leads sourced from real signal, not bought lists.',  cs: 'kvalifikované leady ze signálů, ne z koupených seznamů.' },
      { en: 'structured week-long review of your existing AI stack.', cs: 'strukturovaná týdenní revize vašeho stávajícího AI stacku.' },
      { en: 'complete system design delivered with the runbook.',           cs: 'kompletní návrh systému dodaný s runbookem.' },
      { en: 'domain models — fine-tuned, distilled, deployed.',             cs: 'doménové modely — doladěné, destilované, nasazené.' },
    ],
    p2Rows: [
      { k: { en: 'AGENTS',        cs: 'AGENTI' },        v: { en: '4–8 wk · quote', cs: '4–8 týd · na vyžádání' } },
      { k: { en: 'WORKFLOWS',     cs: 'WORKFLOWS' },     v: { en: '2–4 wk · quote', cs: '2–4 týd · na vyžádání' } },
      { k: { en: 'LEADS',         cs: 'LEADY' },         v: { en: '1–3 wk · quote', cs: '1–3 týd · na vyžádání' } },
      { k: { en: 'AUDITS',        cs: 'AUDITY' },        v: { en: '1 wk · quote',   cs: '1 týd · na vyžádání' } },
      { k: { en: 'ARCHITECTURES', cs: 'SYSTÉMY' },       v: { en: '2–3 wk · quote', cs: '2–3 týd · na vyžádání' } },
      { k: { en: 'CUSTOM',        cs: 'CUSTOM' },        v: { en: '6–12 wk · quote', cs: '6–12 týd · na vyžádání' } },
    ],
    p3Title: { en: "WHO IT'S FOR", cs: 'PRO KOHO' },
    p3Big: {
      en: ['OPERATORS', 'WHO', 'MEASURE', 'REVENUE.'],
      cs: ['OPERÁTOŘI', 'KTEŘÍ', 'MĚŘÍ', 'TRŽBY.'],
    },
    p3BigAltWord: { en: 'RESULTS', cs: 'VÝSLEDKY' },
    p3Small: {
      en: ['NOT DEMOS', 'OR DECKS'],
      cs: ['ŽÁDNÁ DEMA', 'ANI SLIDY'],
    },
    p3Body: {
      en: 'B2B teams in CZ and EU with a real problem and a real budget. Solo or embedded. Short engagements, signed scope, delivered runbooks.',
      cs: 'B2B týmy v ČR a EU s reálným problémem a reálným rozpočtem. Sólově nebo jako součást týmu. Krátké zakázky, podepsaný scope, dodané runbooky.',
    },
    p4Title: { en: 'CURRENTLY INVOLVED IN', cs: 'AKTUÁLNÍ PROJEKTY' },
    p4Items: [
      { name: 'LAWSTACK', url: 'https://lawstack.cz' },
      { name: 'MORTIGO',  url: 'https://mortigo.app' },
      { name: 'RMIND',    url: 'https://rmind.ai' },
    ],
    pFwTitle: { en: 'HOW I SOLVE PROBLEMS', cs: 'JAK ŘEŠÍM PROBLÉMY' },
    pFwHeadline: {
      en: ['ONE EQUATION.', 'FOUR PARTS.'],
      cs: ['JEDNA ROVNICE.', 'ČTYŘI ČÁSTI.'],
    },
    pFwBoxes: [
      {
        natural: { en: 'what I build',         cs: 'co stavím' },
        desc:    { en: 'n process domains where AI takes action', cs: 'n procesních domén, kde AI zasahuje' },
      },
      {
        natural: { en: 'your readiness',       cs: 'vaše připravenost' },
        desc:    { en: 'm constraints — data, buy-in, digital, regulation, …',  cs: 'm omezení — data, ochota, digitalizace, regulace, …' },
      },
      {
        natural: { en: "what we don't know",   cs: 'co zatím nevíme' },
        desc:    { en: 'everything left to analyze',           cs: 'všechno, co zbývá zanalyzovat' },
      },
      {
        natural: { en: 'real value',           cs: 'reálná hodnota' },
        desc:    { en: 'what actually lands in production',     cs: 'to, co skutečně doputuje do produkce' },
        invert:  true,
      },
    ],
    pFwOps: ['×', '÷', '='],
    pFwPhilosophy: {
      en: "any system's realizable AI value is the sum of its opportunities, filtered through the product of its constraints, discounted by what you don't yet know.",
      cs: 'realizovatelná hodnota AI v jakémkoliv systému je součtem jeho příležitostí, filtrovaným součinem jeho omezení a sníženým o to, co zatím nevíme.',
    },
    pFwMeta: {
      en: 'the business analysis is always the same move regardless of the client — measure n, measure m, score each ωⱼ, and shrink ε toward zero.',
      cs: 'business analýza je vždy stejný postup bez ohledu na klienta — změřit n a m, ohodnotit každé ωⱼ a snížit ε co nejblíž k nule.',
    },
    pFwFootnote: {
      en: 'without analysis, ε grows. value drops to zero.',
      cs: 'bez analýzy ε roste a hodnota klesá k nule.',
    },
    p5Title: { en: 'CONTACT',   cs: 'KONTAKT' },
    p5Big:        { en: ['BRING', 'A PROBLEM'], cs: ['PŘINESTE', 'PROBLÉM'] },
    p5BigAltWord: { en: 'CHALLENGE',            cs: 'VÝZVU' },
    p5Title: { en: 'BRING IT', cs: 'PŘINESTE TO' },
  },

  principles: {
    label: { en: 'Principles', cs: 'Principy' },
    p1Tag: { en: 'PRINCIPLES', cs: 'PRINCIPY' },
    word:  'PUNGE',
    p1Sub: {
      en: 'Five tenets. Held in production, paid for in shipped systems.',
      cs: 'Pět tezí. Drženo v produkci, placeno doručenými systémy.',
    },
    p2Title: { en: 'THE TENETS', cs: 'TEZE' },
    p2Words: ['VALIDATE.', 'SHIP.', 'OWN IT.', 'GO DEEP.', 'SURVIVE.'],
    p2Rows: [
      { k: '01', v: { en: 'Validate before you build', cs: 'Validuj, než stavíš' } },
      { k: '02', v: { en: 'Ship, don\'t demo',          cs: 'Doruč, nedemonstruj' } },
      { k: '03', v: { en: 'Own the architecture',       cs: 'Vlastni architekturu' } },
      { k: '04', v: { en: 'Hand-calc the math',          cs: 'Počítej matiku ručně' } },
      { k: '05', v: { en: 'Survivable downside first',  cs: 'Nejdřív přežitelná spodní hranice' } },
    ],
    p3Title: { en: 'THE METHOD', cs: 'METODA' },
    p3Big: {
      en: ['PATIENT', 'ACCUMULATION.', 'DECISIVE', 'STRIKE.'],
      cs: ['TRPĚLIVÉ', 'AKUMULACE.', 'ROZHODNÝ', 'ÚDER.'],
    },
    p3Small: {
      en: ['NO', 'HEROICS.', 'NO', 'PANIC.'],
      cs: ['ŽÁDNÉ', 'HRDINSTVÍ.', 'ŽÁDNÁ', 'PANIKA.'],
    },
    p3Body: {
      en: 'Move slowly until the asymmetry is clear, then commit fully. Most weeks look boring. The good ones look obvious in retrospect.',
      cs: 'Pohybuj se pomalu, dokud není asymetrie jasná, pak se zavaž plně. Většina týdnů vypadá nudně. Ty dobré dávají smysl zpětně.',
    },
    p4Title: { en: 'IN PRACTICE', cs: 'V PRAXI' },
    p4Items: [
      { num: '38→96', unit: '%', en: 'CZ Gov · validated, then rebuilt',  cs: 'CZ Gov · validováno, pak přestavěno' },
      { num: '15→4',  unit: 'h', en: 'Mortigo · scoped, then shipped',    cs: 'Mortigo · scoped, pak dodáno' },
      { num: '7',     unit: '',  en: 'Agents in one production loop',     cs: 'Agentů v jedné produkční smyčce' },
      { num: '0',     unit: '',  en: 'Demos sold without a system behind', cs: 'Dem prodaných bez systému za nimi' },
    ],
    p5Title: { en: 'TEST IT',  cs: 'OVĚŘ TO' },
    p5Big:   { en: ['BRING', 'A PROBLEM.'], cs: ['PŘINES', 'PROBLÉM.'] },
  },

  ledger: {
    label: { en: 'Ledger', cs: 'Účetní kniha' },
    p1Tag: { en: 'LEDGER', cs: 'KNIHA' },
    word:  '2024–26',
    p1Sub: {
      en: 'Two years, condensed. Numbers. Names. Deliverables. The rest is footnote.',
      cs: 'Dva roky, zhuštěné. Čísla. Jména. Deliverables. Zbytek je poznámka.',
    },
    p2Title: { en: 'TOTALS', cs: 'CELKEM' },
    p2Words: ['06 SHIPPED.', '03 ACTIVE.', '02 PARKED.', '01 LESSON.', '00 EXCUSES.'],
    p2Rows: [
      { k: 'SHIPPED', v: '06 systems' },
      { k: 'ACTIVE',  v: '03 engagements' },
      { k: 'PARKED',  v: '02 ventures' },
      { k: 'LESSON',  v: 'validate before build' },
      { k: 'EXCUSES', v: '00' },
    ],
    p3Title: { en: 'BY NAME', cs: 'PO JMÉNU' },
    p3Big: {
      en: ['LAWSTACK.', 'RMIND.', 'MORTIGO.', 'CZ-GOV.'],
      cs: ['LAWSTACK.', 'RMIND.', 'MORTIGO.', 'CZ-GOV.'],
    },
    p3Small: {
      en: ['LIVE.', 'CLOSING.', 'CLOSED.', 'SHIPPED.'],
      cs: ['ŽIVÝ.', 'KONČÍ.', 'UZAVŘEN.', 'DODÁN.'],
    },
    p3Body: {
      en: 'Each name is a contract. Each contract is a system. Each system is in production or in a runbook handed to someone else.',
      cs: 'Každé jméno je smlouva. Každá smlouva je systém. Každý systém běží v produkci nebo je v runbooku předaném někomu jinému.',
    },
    p4Title: { en: 'NUMBERS', cs: 'ČÍSLA' },
    p4Items: [
      { num: '+58',   unit: 'pp', en: 'Accuracy lift · CZ Gov RAG',         cs: 'Nárůst přesnosti · CZ Gov RAG' },
      { num: '4×',    unit: '',   en: 'Throughput · Mortigo pipeline',     cs: 'Průchodnost · Mortigo pipeline' },
      { num: '1042',  unit: '',   en: 'Leads · CZ Bar registry',           cs: 'Leadů · CZ Bar registr' },
      { num: '15%',   unit: '',   en: 'Revshare · advisor pipelines',     cs: 'Revshare · poradenské pipeliny' },
    ],
    p5Title: { en: 'LINE 06', cs: 'ŘÁDEK 06' },
    p5Big:   { en: ['ADD', 'YOURS.'], cs: ['PŘIDEJ', 'SVŮJ.'] },
  },
};

window.MF_PALETTES = MF_PALETTES;
window.MF_COPY = MF_COPY;

const MFToggle = ({ options, value, onChange, P }) => (
  <div style={{
    display: 'inline-flex',
    border: `1px solid ${P.ink}`,
    borderRadius: 999,
    overflow: 'hidden',
    fontFamily: 'JetBrains Mono, monospace',
    fontSize: 10,
    letterSpacing: '0.16em',
    textTransform: 'uppercase',
  }}>
    {options.map(opt => {
      const active = opt.value === value;
      return (
        <button
          key={opt.value}
          onClick={() => onChange(opt.value)}
          style={{
            background: active ? P.ink : 'transparent',
            color: active ? P.bg : P.ink,
            border: 0,
            padding: '6px 14px',
            cursor: 'none',
            fontFamily: 'inherit',
            fontSize: 'inherit',
            letterSpacing: 'inherit',
            textTransform: 'inherit',
            outline: 'none',
          }}
        >{opt.label}</button>
      );
    })}
  </div>
);

const MFWordMorph = ({ from, to, hovered }) => {
  const [display, setDisplay] = React.useState(from);
  React.useEffect(() => {
    const target = hovered ? to : from;
    if (target === display) return;
    const SYMBOLS = '?!#@$%&/<>+=*~^';
    const total = 12;
    let frame = 0;
    const id = setInterval(() => {
      frame++;
      const reveal = Math.floor((frame / total) * target.length);
      let out = '';
      for (let i = 0; i < target.length; i++) {
        if (i < reveal) out += target[i];
        else if (target[i] === ' ') out += ' ';
        else out += SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)];
      }
      setDisplay(out);
      if (frame >= total) {
        clearInterval(id);
        setDisplay(target);
      }
    }, 35);
    return () => clearInterval(id);
  }, [hovered, from, to]);
  return display;
};

const MFDescription = ({ text, active, color }) => {
  const [display, setDisplay] = React.useState('');
  React.useEffect(() => {
    if (!active || !text) { setDisplay(''); return; }
    const SYMBOLS = '?!#@$%&/<>+=*~^';
    const total = 18;
    let frame = 0;
    const id = setInterval(() => {
      frame++;
      const reveal = Math.floor((frame / total) * text.length);
      let out = '';
      for (let i = 0; i < text.length; i++) {
        if (i < reveal) out += text[i];
        else if (text[i] === ' ') out += ' ';
        else out += SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)];
      }
      setDisplay(out);
      if (frame >= total) {
        clearInterval(id);
        setDisplay(text);
      }
    }, 30);
    return () => clearInterval(id);
  }, [active, text]);
  return (
    <span style={{
      fontFamily: 'JetBrains Mono, ui-monospace, monospace',
      fontSize: 'clamp(11px, 0.95vw, 14px)',
      letterSpacing: '0.06em',
      fontWeight: 500,
      textTransform: 'uppercase',
      color,
      pointerEvents: 'none',
      whiteSpace: 'nowrap',
      opacity: active ? 1 : 0,
      transition: 'opacity 0.18s ease',
    }}>{display}</span>
  );
};

const Manifesto = ({ lang, variant = 'operator', palette = 'hot', onLangChange }) => {
  const D = window.SITE_DATA;
  const T = (v) => window.t(v, lang);
  const C = MF_COPY[variant] || MF_COPY.operator;
  const P = { ...(MF_PALETTES[palette] || MF_PALETTES.hot) };
  P.altBg    = P.ink;
  P.altInk   = P.bg;
  P.bandInk  = P.ink;
  P.mute     = 'rgba(0,0,0,0.18)';
  P.muteSoft = 'rgba(0,0,0,0.05)';

  const [hoveredP2, setHoveredP2] = React.useState(null);
  const [pungeHover, setPungeHover] = React.useState(false);
  const [ctaHover, setCtaHover] = React.useState(false);
  const [revenueHover, setRevenueHover] = React.useState(false);
  const [fwView, setFwView] = React.useState('words');
  const [showExplain, setShowExplain] = React.useState(false);

  const big = lang === 'cs' ? C.p3Big.cs : C.p3Big.en;
  const small = lang === 'cs' ? C.p3Small.cs : C.p3Small.en;
  const cta = lang === 'cs' ? C.p5Big.cs : C.p5Big.en;

  return (
    <div className={`sp-artboard sp-scroll${lang === 'cs' ? ' mf-cs' : ''}`} style={{
      background: P.bg, color: P.ink,
      fontFamily: '"Helvetica Neue", "Inter", Arial, sans-serif',
      overflowY: 'auto', padding: 0,
    }}>
      <style>{`
        .mf-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: 'tnum'; font-weight: 700; }
        .mf-h { font-weight: 900; letter-spacing: -0.045em; line-height: 0.86; text-transform: uppercase; }
        /* CS: looser line-height so diacritics (Ř, Ž, Š, Ý, Á, Č, Ě, …)
           don't overlap the line above. */
        .mf-cs .mf-h { line-height: 1.0; }

        .mf-word {
          padding-left: var(--mf-pad);
          transition: padding-left 0.55s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;
        }
        .mf-words:hover .mf-word { opacity: 0.28; }
        .mf-words:hover .mf-word:hover {
          opacity: 1;
          padding-left: calc(var(--mf-pad) + 5%);
        }

        /* Panel-1 words: subtle dim-others / lift-self on hover. */
        .mf-p1-word {
          transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1);
          display: inline-block;
        }
        .mf-p1-words:hover .mf-p1-word { opacity: 0.4; }
        .mf-p1-words:hover .mf-p1-word:hover {
          opacity: 1;
          transform: translateY(-3px);
        }

        /* Project cards (panel 4): lift + arrow shift on hover. */
        .mf-project { transition: transform 0.3s cubic-bezier(.2,.8,.2,1); }
        .mf-project:hover { transform: translateY(-4px); }
        .mf-project span[aria-hidden] { transition: transform 0.3s cubic-bezier(.2,.8,.2,1); display: inline-block; }
        .mf-project:hover span[aria-hidden] { transform: translate(4px, -4px); }

        /* Framework boxes (panel 5 words view): subtle scale + lift on hover. */
        .mf-fw-box:hover { transform: translateY(-3px) scale(1.02); }

        /* ─── Responsive: mobile/small screens ───────────────────────── */
        @media (max-width: 900px) {
          .mf-section { padding-left: 20px !important; padding-right: 20px !important; }

          /* Panel 2 bottom rows: 6 cols → 2 cols */
          .mf-p2-rows { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

          /* Panel 3 split: 2 cols → stack */
          .mf-p3-split { grid-template-columns: 1fr !important; }
          .mf-p3-split > div:nth-child(2) {
            padding-left: 0 !important;
            border-left: none !important;
            margin-top: 28px;
            padding-top: 28px;
            border-top: 2px solid currentColor;
          }

          /* Panel 4 projects: 3 cols → stack */
          .mf-p4-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

          /* Framework row: horizontal flow → vertical stack */
          .mf-fw-row { flex-direction: column !important; align-items: stretch !important; }
          .mf-fw-box { max-width: none !important; }
          .mf-fw-op { justify-content: center !important; padding: 4px 0 !important; }

          /* Section 5 framework boxes shouldn't lift on touch — also avoid hover stuck on mobile */
          .mf-fw-box:hover { transform: none; }
        }
        @media (max-width: 480px) {
          .mf-section { padding-left: 16px !important; padding-right: 16px !important; }
        }

      `}</style>

      {/* Panel 1 — masthead */}
      <section
        className="mf-section mf-p1"
        style={{ padding: '28px 48px 36px', borderBottom: `2px solid ${P.ink}`, position: 'relative', overflow: 'hidden' }}
      >
        <div style={{ position: 'relative', zIndex: 2 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 14, fontWeight: 700, letterSpacing: '0.2em', color: P.ink, opacity: 0.65 }}>01</span>
            <MFToggle
              options={[{ value: 'en', label: 'EN' }, { value: 'cs', label: 'CS' }]}
              value={lang}
              onChange={onLangChange || (() => {})}
              P={P}
            />
          </div>
          <h1 className="mf-h" style={{ fontSize: 'clamp(56px, 12vw, 180px)', margin: '24px 0 0' }}>
            <span
              onMouseEnter={() => setPungeHover(true)}
              onMouseLeave={() => setPungeHover(false)}
              style={{ display: 'inline-block' }}
            >
              <MFWordMorph from={C.word} to="SAMUEL" hovered={pungeHover} />
              <span style={{ color: P.a }}>.</span>
            </span>
          </h1>
          <div style={{
            fontFamily: 'JetBrains Mono, ui-monospace, monospace',
            fontSize: 'clamp(11px, 1.1vw, 14px)',
            fontWeight: 700,
            letterSpacing: '0.24em',
            textTransform: 'uppercase',
            color: P.a,
            marginTop: 10,
          }}>
            {T(C.p1Solutions)}
          </div>
          {C.p1Words ? (
            <div className="mf-h mf-p1-words" style={{ fontSize: 'clamp(36px, 5vw, 64px)', marginTop: 18, display: 'flex', flexWrap: 'wrap', gap: '0.4em 0.7em' }}>
              {C.p1Words.map((w, i) => (
                <span key={i} className="mf-p1-word" style={{ color: i % 2 === 1 ? P.a : P.ink }}>{w}</span>
              ))}
            </div>
          ) : null}
        </div>
      </section>

      {/* Panel 2 — giant words */}
      <section className="mf-section mf-p2" style={{ padding: '40px 48px', background: P.altBg, color: P.altInk, position: 'relative', overflow: 'hidden' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, textTransform: 'uppercase', marginBottom: 22 }}>
          <span style={{ fontSize: 14, letterSpacing: '0.2em', color: P.altInk, opacity: 0.65 }}>02</span>
          <span style={{ fontSize: 16, letterSpacing: '0.22em', color: P.b }}>{T(C.p2Title)}</span>
        </div>
        <div className="mf-h mf-words" style={{ fontSize: 'clamp(44px, 9vw, 128px)' }}>
          {C.p2Words.map((w, i) => (
            <div
              key={i}
              className="mf-word"
              onMouseEnter={() => setHoveredP2(i)}
              onMouseLeave={() => setHoveredP2(prev => (prev === i ? null : prev))}
              style={{
                color: (i === 1 || i === 4) ? P.a : (i === 3) ? P.b : P.altInk,
                '--mf-pad': ['0%', '12%', '4%', '20%', '8%', '16%'][i],
                display: 'flex',
                alignItems: 'baseline',
                gap: '0.4em 0.6em',
                flexWrap: 'wrap',
                maxWidth: '100%',
              }}
            >
              <span>{T(w)}</span>
              <MFDescription
                text={C.p2Descriptions?.[i] ? T(C.p2Descriptions[i]) : ''}
                active={hoveredP2 === i}
                color={P.b}
              />
            </div>
          ))}
        </div>
        <div className="mf-p2-rows" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, marginTop: 32, fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>
          {C.p2Rows.map((x, i) => (
            <div key={i} style={{ borderTop: `1px solid rgba(255,255,255,0.3)`, paddingTop: 8 }}>
              <div style={{ color: P.b, letterSpacing: '0.16em' }}>{T(x.k)}</div>
              <div style={{ marginTop: 4, opacity: 0.85 }}>{T(x.v)}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Panel 3 — split asymmetric */}
      <section className="mf-section mf-p3" style={{ padding: '48px 48px', borderBottom: `2px solid ${P.ink}`, position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, textTransform: 'uppercase', marginBottom: 12 }}>
          <span style={{ fontSize: 14, letterSpacing: '0.2em', color: P.ink, opacity: 0.65 }}>03</span>
          <span style={{ fontSize: 16, letterSpacing: '0.22em', color: P.a }}>{T(C.p3Title)}</span>
        </div>
        <div className="mf-p3-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
          <div>
            <div className="mf-h" style={{ fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 1.1 }}>
              {big.map((line, i) => {
                const style = { paddingTop: i === 0 ? 0 : 10 };
                if (i === 1) return <div key={i} style={{ color: P.a, ...style }}>{line}</div>;
                if (i === big.length - 1) {
                  const trailing = line.endsWith('.') ? '.' : '';
                  const word = trailing ? line.slice(0, -1) : line;
                  const altWord = T(C.p3BigAltWord) || word;
                  return (
                    <div key={i} style={style}>
                      <span
                        onMouseEnter={() => setRevenueHover(true)}
                        onMouseLeave={() => setRevenueHover(false)}
                        style={{ background: P.ink, color: P.bg, padding: '0 12px', display: 'inline-block' }}
                      >
                        <MFWordMorph from={word} to={altWord} hovered={revenueHover} />
                        {trailing}
                      </span>
                    </div>
                  );
                }
                return <div key={i} style={style}>{line}</div>;
              })}
            </div>
          </div>
          <div style={{ paddingLeft: 32, borderLeft: `2px solid ${P.ink}`, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div className="mf-h" style={{ fontSize: 'clamp(48px, 6.5vw, 88px)', color: P.mute }}>
              {small.map((line, i) => <div key={i}>{line}</div>)}
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.55, maxWidth: 360, marginTop: 16 }}>
              {T(C.p3Body)}
            </div>
          </div>
        </div>
      </section>

      {/* Panel 4 — receipts in cyan/b band */}
      <section className="mf-section mf-p4" style={{ padding: '40px 48px', background: P.b, color: P.bandInk, borderBottom: `2px solid ${P.bandInk}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, textTransform: 'uppercase', marginBottom: 16 }}>
          <span style={{ fontSize: 14, letterSpacing: '0.2em', color: P.bandInk, opacity: 0.7 }}>04</span>
          <span style={{ fontSize: 16, letterSpacing: '0.22em', color: P.bandInk }}>{T(C.p4Title)}</span>
        </div>
        <div className="mf-p4-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {C.p4Items.map((x, i) => (
            <a
              key={i}
              href={x.url}
              target="_blank"
              rel="noopener noreferrer"
              className="mf-project"
              style={{
                borderTop: `2px solid ${P.bandInk}`,
                paddingTop: 14,
                color: P.bandInk,
                textDecoration: 'none',
                display: 'block',
              }}
            >
              <div className="mf-h" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 0.95 }}>
                {x.name}
              </div>
              <div style={{ fontSize: 12, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span>{x.url.replace(/^https?:\/\//, '').replace(/\/$/, '')}</span>
                <span aria-hidden>↗</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* Panel 5 — Framework as a visual flow diagram */}
      <section className="mf-section mf-p5" style={{ padding: '64px 48px 72px', background: P.altBg, color: P.altInk, position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, textTransform: 'uppercase', marginBottom: 28 }}>
          <span style={{ fontSize: 14, letterSpacing: '0.2em', color: P.altInk, opacity: 0.65 }}>05</span>
          <span style={{ fontSize: 16, letterSpacing: '0.22em', color: P.b }}>{T(C.pFwTitle)}</span>
        </div>

        {/* Bold brutalist headline */}
        <div className="mf-h" style={{ fontSize: 'clamp(44px, 6.5vw, 100px)', marginBottom: 44 }}>
          {T(C.pFwHeadline).map((line, i) => (
            <div key={i}>
              {line.endsWith('.') ? line.slice(0, -1) : line}
              <span style={{ color: P.a }}>.</span>
            </div>
          ))}
        </div>

        {/* View toggle: WORDS vs MATH */}
        <div style={{ marginBottom: 28 }}>
          <MFToggle
            options={[{ value: 'words', label: 'Words' }, { value: 'math', label: 'Math' }]}
            value={fwView}
            onChange={setFwView}
            P={{ ink: P.altInk, bg: P.altBg }}
          />
        </div>

        {fwView === 'words' ? (
          /* Words view: 4 boxes + operators, centered */
          <div data-no-scramble className="mf-fw-row" style={{ display: 'flex', alignItems: 'stretch', justifyContent: 'center', gap: 14, flexWrap: 'wrap', marginBottom: 36 }}>
            {C.pFwBoxes.map((box, i) => (
              <React.Fragment key={i}>
                <div
                  className="mf-fw-box"
                  style={{
                    flex: '1 1 200px',
                    minWidth: 180,
                    maxWidth: 280,
                    padding: '20px 18px 22px',
                    border: `2px solid ${P.altInk}`,
                    background: box.invert ? P.altInk : 'transparent',
                    color: box.invert ? P.altBg : P.altInk,
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 16,
                    transition: 'transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease',
                  }}
                >
                  <div style={{
                    fontFamily: '"EB Garamond", Garamond, "Times New Roman", serif',
                    fontStyle: 'italic',
                    fontSize: 'clamp(24px, 2.8vw, 38px)',
                    lineHeight: 1.1,
                    color: box.invert ? P.altBg : P.b,
                  }}>
                    {T(box.natural)}
                  </div>
                  <div style={{ fontSize: 13, lineHeight: 1.45, marginTop: 'auto', opacity: 0.85 }}>
                    {T(box.desc)}
                  </div>
                </div>
                {i < C.pFwBoxes.length - 1 && (
                  <div className="mf-fw-op" style={{
                    display: 'flex',
                    alignItems: 'center',
                    fontFamily: '"EB Garamond", Garamond, serif',
                    fontStyle: 'italic',
                    fontSize: 'clamp(34px, 3.5vw, 56px)',
                    fontWeight: 400,
                    color: P.a,
                    flexShrink: 0,
                    padding: '0 4px',
                  }}>
                    {C.pFwOps[i]}
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        ) : (
          /* Math view: I = (Σ xᵢ · Π ωⱼ) / (1 + ε), centered */
          <div data-no-scramble style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '0.32em',
            fontFamily: '"EB Garamond", Garamond, "Times New Roman", serif',
            fontStyle: 'italic',
            fontSize: 'clamp(32px, 5.5vw, 88px)',
            fontWeight: 400,
            color: P.altInk,
            lineHeight: 1,
            padding: '40px 0 48px',
            flexWrap: 'wrap',
          }}>
            <span>I</span>
            <span style={{ fontStyle: 'normal' }}>=</span>
            <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1, fontSize: '0.92em' }}>
              <span style={{ borderBottom: `2px solid currentColor`, padding: '0 0.35em', display: 'flex', gap: '0.18em', alignItems: 'center' }}>
                {/* Σ with bounds */}
                <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1, fontStyle: 'normal' }}>
                  <span style={{ fontSize: '0.32em' }}>n</span>
                  <span>Σ</span>
                  <span style={{ fontSize: '0.28em' }}>i=1</span>
                </span>
                <span>x<sub style={{ fontSize: '0.5em', verticalAlign: 'sub', fontStyle: 'italic' }}>i</sub></span>
                <span style={{ fontStyle: 'normal' }}>·</span>
                {/* Π with bounds */}
                <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1, fontStyle: 'normal' }}>
                  <span style={{ fontSize: '0.32em' }}>m</span>
                  <span>Π</span>
                  <span style={{ fontSize: '0.28em' }}>j=1</span>
                </span>
                <span>ω<sub style={{ fontSize: '0.5em', verticalAlign: 'sub', fontStyle: 'italic' }}>j</sub></span>
              </span>
              <span style={{ padding: '0.08em 0.35em 0', display: 'flex', gap: '0.18em', justifyContent: 'center' }}>
                <span style={{ fontStyle: 'normal' }}>1 +</span>
                <span>ε</span>
              </span>
            </span>
          </div>
        )}

        {/* Explain button — centered, opens popup */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
          <button
            onClick={() => setShowExplain(true)}
            style={{
              background: 'transparent',
              border: `1px solid ${P.altInk}`,
              borderRadius: 999,
              padding: '10px 24px',
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: '0.22em',
              textTransform: 'uppercase',
              color: P.altInk,
              cursor: 'none',
              transition: 'background 0.2s ease, color 0.2s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = P.altInk; e.currentTarget.style.color = P.altBg; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = P.altInk; }}
          >
            Explain
          </button>
        </div>

        {/* Explain popup */}
        {showExplain && (
          <div
            onClick={() => setShowExplain(false)}
            style={{
              position: 'fixed',
              inset: 0,
              background: 'rgba(0,0,0,0.7)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              zIndex: 9000,
              padding: 24,
              backdropFilter: 'blur(2px)',
            }}
          >
            <div
              onClick={(e) => e.stopPropagation()}
              data-no-scramble
              style={{
                background: P.bg,
                border: `2px solid ${P.ink}`,
                color: P.ink,
                padding: '36px 40px 36px',
                maxWidth: 640,
                width: '100%',
                position: 'relative',
                fontFamily: '"EB Garamond", Garamond, "Times New Roman", serif',
              }}
            >
              <button
                onClick={() => setShowExplain(false)}
                aria-label="Close"
                style={{
                  position: 'absolute',
                  top: 10,
                  right: 14,
                  background: 'transparent',
                  border: 0,
                  fontSize: 28,
                  lineHeight: 1,
                  cursor: 'none',
                  color: P.ink,
                  fontFamily: 'inherit',
                  padding: 4,
                }}
              >×</button>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: '0.22em',
                textTransform: 'uppercase',
                color: P.a,
                marginBottom: 16,
              }}>
                The philosophy
              </div>
              <div style={{
                fontStyle: 'italic',
                fontSize: 'clamp(17px, 1.5vw, 22px)',
                lineHeight: 1.55,
              }}>
                {T(C.pFwPhilosophy)}
              </div>
              <div style={{
                fontStyle: 'italic',
                fontSize: 'clamp(15px, 1.3vw, 18px)',
                lineHeight: 1.55,
                marginTop: 18,
                opacity: 0.7,
              }}>
                {T(C.pFwMeta)}
              </div>
              <div style={{
                fontStyle: 'italic',
                fontSize: 'clamp(15px, 1.3vw, 18px)',
                lineHeight: 1.55,
                marginTop: 22,
                paddingTop: 18,
                borderTop: `1px solid ${P.ink}`,
                color: P.a,
              }}>
                {T(C.pFwFootnote)}
              </div>
            </div>
          </div>
        )}
      </section>

      {/* Panel 6 — CTA */}
      <section className="mf-section mf-p6" style={{ padding: '48px 48px 64px', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, textTransform: 'uppercase', marginBottom: 18 }}>
          <span style={{ fontSize: 14, letterSpacing: '0.2em', color: P.ink, opacity: 0.65 }}>06</span>
          <span style={{ fontSize: 16, letterSpacing: '0.22em', color: P.a }}>{T(C.p5Title)}</span>
        </div>
        <div className="mf-h" style={{ fontSize: 'clamp(44px, 8vw, 112px)' }}>
          {cta.map((line, i) => {
            if (i !== cta.length - 1) return <div key={i}>{line}</div>;
            const lastSpace = line.lastIndexOf(' ');
            const prefix = lastSpace >= 0 ? line.slice(0, lastSpace + 1) : '';
            const fromWord = lastSpace >= 0 ? line.slice(lastSpace + 1) : line;
            const toWord = T(C.p5BigAltWord) || fromWord;
            return (
              <div key={i}>
                {prefix}
                <span
                  onMouseEnter={() => setCtaHover(true)}
                  onMouseLeave={() => setCtaHover(false)}
                  style={{ display: 'inline-block' }}
                >
                  <MFWordMorph from={fromWord} to={toWord} hovered={ctaHover} />
                  <span style={{ color: P.a }}>.</span>
                </span>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 24 }}>
          <a href={`mailto:${D.contact.email}`} className="mf-email" style={{ fontSize: 'clamp(20px, 3.4vw, 36px)', color: P.ink, textDecoration: 'underline', textDecorationColor: P.a, textDecorationThickness: 4, textUnderlineOffset: 8, fontFamily: 'JetBrains Mono, monospace', wordBreak: 'break-all' }}>
            {D.contact.email}
          </a>
        </div>
      </section>
    </div>
  );
};

window.Manifesto = Manifesto;