/* global React */
/* Direction A — "Manifesto"
   A confident, opinionated editorial. Cream/ink with one warm accent.
   Asymmetric grid, big serif display, marginalia, click-to-expand cases,
   reading progress, scroll-driven reveals. */

const { useState, useEffect, useRef } = React;

const MANIFESTO_CSS = `
.mfo {
  --bg: #f1ecdf;
  --ink: #1a1614;
  --accent: #b8451f;
  --muted: #7a6f5e;
  --line: rgba(26,22,20,0.12);
  --pad: 96px;
  --col-gap: 88px;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.mfo.--compact { --pad: 64px; --col-gap: 56px; }
.mfo.--airy    { --pad: 128px; --col-gap: 120px; }

.mfo::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 1; mix-blend-mode: multiply; opacity: .9;
}

/* Sticky reading progress rail (right edge) */
.mfo-rail {
  position: fixed; top: 0; bottom: 0; right: 28px; width: 1px;
  background: var(--line); z-index: 5; pointer-events: none;
}
.mfo-rail-fill {
  position: absolute; top: 0; left: -1px; width: 3px;
  background: var(--accent);
  transition: height .08s linear;
}
.mfo-rail-ticks {
  position: absolute; inset: 0; pointer-events: auto;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12vh 0;
}
.mfo-tick {
  display: block; width: 14px; height: 1px; background: var(--ink);
  opacity: .25; cursor: pointer; transform: translateX(-6px);
  transition: opacity .2s, width .2s, background .2s;
  border: 0; padding: 0;
}
.mfo-tick.--active { opacity: 1; width: 22px; background: var(--accent); }
.mfo-tick:hover { opacity: .7; }

.mfo-shell { max-width: 1240px; margin: 0 auto; padding: 56px var(--pad) 80px; position: relative; z-index: 2; }

/* Top bar */
.mfo-top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
  margin-bottom: 12vh;
}
.mfo-mark {
  display: flex; align-items: center; gap: 14px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.mfo-mark-dot {
  width: 9px; height: 9px; background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(184,69,31,0.12);
}
.mfo-top-meta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); text-align: right; line-height: 1.7;
}

/* Hero */
.mfo-hero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--col-gap); align-items: end; margin-bottom: 18vh; }
.mfo-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 14px; margin-bottom: 40px;
}
.mfo-eyebrow b { color: var(--ink); font-weight: 500; }
.mfo-eyebrow-line { display: inline-block; width: 32px; height: 1px; background: currentColor; opacity: .5; }

.mfo-h1 {
  font-family: 'Instrument Serif', 'Newsreader', serif;
  font-weight: 400; font-size: clamp(56px, 8.4vw, 132px);
  line-height: 0.94; letter-spacing: -0.035em;
  color: var(--ink); margin: 0 0 40px;
}
.mfo-h1 em {
  font-style: italic; color: var(--accent);
  font-feature-settings: 'ss01' on;
}
.mfo-h1 .--lift { display: inline-block; transform: translateY(-0.04em); }

.mfo-sub {
  font-family: 'Newsreader', 'Instrument Serif', serif;
  font-weight: 300; font-size: clamp(20px, 1.5vw, 24px);
  line-height: 1.45; color: var(--ink); max-width: 620px;
  text-wrap: pretty;
}
.mfo-sub em { color: var(--accent); font-style: italic; }

.mfo-aside {
  display: flex; flex-direction: column; gap: 18px;
  padding-left: 22px; border-left: 1px solid var(--line);
  padding-bottom: 12px;
}
.mfo-aside-lbl {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.mfo-aside-val {
  font-family: 'Newsreader', serif; font-size: 16px; line-height: 1.45;
  color: var(--ink);
}

/* Section scaffolding */
.mfo-sec { margin-bottom: 16vh; }
.mfo-sec-head {
  display: grid; grid-template-columns: 120px 1fr; gap: 32px;
  align-items: baseline; margin-bottom: 56px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.mfo-sec-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; color: var(--muted);
}
.mfo-sec-num b { color: var(--accent); font-weight: 500; margin-right: 6px; }
.mfo-sec-title {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(32px, 3vw, 44px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink);
}
.mfo-sec-title em { font-style: italic; color: var(--accent); }

/* Two worlds */
.mfo-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.mfo-world { position: relative; }
.mfo-world-tag {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 28px;
  display: flex; gap: 10px; align-items: center;
}
.mfo-world-tag i { width: 18px; height: 1px; background: currentColor; }
.mfo-world-h {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(34px, 3.4vw, 48px); line-height: 1.02;
  letter-spacing: -0.022em; color: var(--ink); margin: 0 0 24px;
}
.mfo-world-h em { font-style: italic; color: var(--accent); }
.mfo-world-body {
  font-size: 16px; line-height: 1.65; color: var(--ink); opacity: .82;
  text-wrap: pretty; max-width: 44ch;
}
.mfo-bridge {
  margin-top: 88px; padding: 48px 0 0; border-top: 1px solid var(--line);
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(28px, 2.6vw, 36px); line-height: 1.25;
  color: var(--ink); text-align: center; letter-spacing: -0.018em;
}
.mfo-bridge em { color: var(--accent); }
.mfo-bridge-mark {
  display: block; font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.25em; color: var(--muted);
  margin-bottom: 18px; text-transform: uppercase;
}

/* POV — three opinionated takes that flip on hover */
.mfo-pov { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.mfo-pov-card {
  position: relative; min-height: 240px; padding: 0;
  cursor: pointer; perspective: 1200px;
}
.mfo-pov-num {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.22em; color: var(--muted); margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.mfo-pov-num i { width: 16px; height: 1px; background: currentColor; }
.mfo-pov-q {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(50px, 4.2vw, 64px); line-height: 0.6;
  color: var(--accent); margin-bottom: 18px; height: 0.3em;
  font-style: italic;
}
.mfo-pov-text {
  font-family: 'Instrument Serif', serif; font-style: normal;
  font-size: clamp(22px, 1.8vw, 26px); line-height: 1.28;
  color: var(--ink); letter-spacing: -0.012em;
  text-wrap: pretty;
}
.mfo-pov-text em { font-style: italic; color: var(--accent); }

.mfo-pov-rejoin {
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line);
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--muted); letter-spacing: 0.04em; line-height: 1.5;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .35s ease, transform .35s ease;
}
.mfo-pov-card:hover .mfo-pov-rejoin,
.mfo-pov-card.--open .mfo-pov-rejoin { opacity: 1; transform: translateY(0); }
.mfo-pov-rejoin b { color: var(--ink); font-weight: 500; }

/* Cases — click to expand */
.mfo-cases { display: flex; flex-direction: column; gap: 20px; }
.mfo-case {
  border: 1px solid var(--line); border-radius: 0;
  background: rgba(255,255,255,0.35);
  padding: 36px 40px;
  transition: border-color .25s, background .25s;
  cursor: pointer;
}
.mfo-case:hover { border-color: rgba(26,22,20,0.28); }
.mfo-case.--open { border-color: var(--accent); background: rgba(255,255,255,0.6); }

.mfo-case-head {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 32px;
  align-items: baseline;
}
.mfo-case-label {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase;
  font-weight: 500;
}
.mfo-case-quote {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.25;
  color: var(--ink); letter-spacing: -0.015em;
}
.mfo-case-toggle {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase;
  transition: color .2s;
  user-select: none;
}
.mfo-case.--open .mfo-case-toggle { color: var(--accent); }

.mfo-case-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(.4,0,.2,1);
}
.mfo-case.--open .mfo-case-body { grid-template-rows: 1fr; }
.mfo-case-body-inner {
  min-height: 0; overflow: hidden;
}
.mfo-case-detail {
  margin-top: 32px; padding-top: 28px; border-top: 1px dashed var(--line);
  display: grid; grid-template-columns: 120px 1fr; gap: 32px 32px;
  row-gap: 18px;
}
.mfo-case-key {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase;
  padding-top: 4px;
}
.mfo-case-val { font-size: 16px; line-height: 1.55; color: var(--ink); }
.mfo-case-val.--outcome {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(20px, 1.7vw, 24px); line-height: 1.35;
  color: var(--accent); letter-spacing: -0.01em;
}

/* Background stats */
.mfo-creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mfo-cred { border-top: 1px solid var(--ink); padding: 24px 0 0; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; }
.mfo-cred-num {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(60px, 6vw, 96px); line-height: 0.9;
  color: var(--ink); letter-spacing: -0.04em;
}
.mfo-cred-num sup { font-size: 0.35em; color: var(--accent); vertical-align: top; margin-left: 4px; font-style: italic; }
.mfo-cred-lbl {
  font-size: 14px; line-height: 1.45; color: var(--muted);
  text-wrap: pretty; max-width: 26ch;
}

/* How it goes — numbered list */
.mfo-flow { display: flex; flex-direction: column; }
.mfo-flow-item {
  display: grid; grid-template-columns: 120px 1fr 1fr; gap: 32px;
  padding: 36px 0; border-top: 1px solid var(--line);
  align-items: baseline;
}
.mfo-flow-item:last-child { border-bottom: 1px solid var(--line); }
.mfo-flow-num {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(36px, 3.4vw, 48px); line-height: 1; color: var(--accent);
}
.mfo-flow-q {
  font-family: 'Instrument Serif', serif; font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2; color: var(--ink); letter-spacing: -0.015em;
}
.mfo-flow-a {
  font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty;
  font-family: 'Geist', sans-serif;
}

/* Contact */
.mfo-contact { margin-top: 18vh; }
.mfo-contact-h {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(60px, 7vw, 108px); line-height: 0.96;
  letter-spacing: -0.035em; color: var(--ink); margin: 0 0 32px;
}
.mfo-contact-h em { font-style: italic; color: var(--accent); }
.mfo-contact-sub {
  font-family: 'Newsreader', serif; font-size: 19px; line-height: 1.5;
  color: var(--ink); opacity: .75; max-width: 580px; margin-bottom: 64px;
}
.mfo-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mfo-contact-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px 28px 24px;
  border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: border-color .25s, background .25s, transform .25s;
  position: relative; overflow: hidden;
}
.mfo-contact-card:hover {
  border-color: var(--accent); background: rgba(184,69,31,0.04);
}
.mfo-contact-lbl {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase;
}
.mfo-contact-val {
  font-family: 'Instrument Serif', serif; font-size: 24px;
  letter-spacing: -0.015em; color: var(--ink); word-break: break-all;
}
.mfo-contact-card:hover .mfo-contact-val { color: var(--accent); }
.mfo-contact-arrow {
  position: absolute; top: 24px; right: 24px; font-family: 'Geist Mono', monospace;
  font-size: 14px; color: var(--muted); transition: transform .25s, color .25s;
}
.mfo-contact-card:hover .mfo-contact-arrow { transform: translate(4px, -4px); color: var(--accent); }

/* Footer */
.mfo-foot {
  margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase;
}

/* Reveals — progressive: visible by default, only fade in if JS marks ready */
.mfo.is-jsready .mfo-reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.mfo.is-jsready .mfo-reveal.--in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1000px) {
  .mfo-hero { grid-template-columns: 1fr; gap: 48px; }
  .mfo-worlds, .mfo-pov, .mfo-creds, .mfo-contact-grid { grid-template-columns: 1fr; }
  .mfo-flow-item, .mfo-sec-head { grid-template-columns: 80px 1fr; }
  .mfo-flow-a { grid-column: 2; }
  .mfo-case-head { grid-template-columns: 1fr auto; }
  .mfo-case-label { grid-column: 1 / -1; margin-bottom: 8px; }
  .mfo-rail { display: none; }
}
@media (max-width: 640px) {
  .mfo-shell { padding: 32px 24px 56px; }
  .mfo-hero, .mfo-sec { margin-bottom: 12vh; }
}
`;

const POV = [
  { n: "i.", text: <React.Fragment>The goal isn't to <em>spend less</em> on AI. It's to make sure every dollar buys the most value possible.</React.Fragment>,
    rejoin: <React.Fragment><b>So I ask:</b> what is one dollar of AI worth in your business today — and where could it be worth ten?</React.Fragment> },
  { n: "ii.", text: <React.Fragment>Most leaders understand AI on the <em>surface.</em> The wrong strategy usually starts there — buying platforms they don't actually need.</React.Fragment>,
    rejoin: <React.Fragment><b>So I ask:</b> what would change tomorrow if we deleted the AI tool you just bought?</React.Fragment> },
  { n: "iii.", text: <React.Fragment>Before talking about solutions, I want to understand your <em>flow</em>, your <em>pain points</em>, and how your team thinks about AI today.</React.Fragment>,
    rejoin: <React.Fragment><b>So I ask:</b> walk me through a Tuesday. Where does the friction live, and who feels it first?</React.Fragment> }
];

const CASES = [
  {
    label: "Case 01 · Customer-care platform",
    quote: "\u201CHelp us cut our AI token spend.\u201D",
    found: "A customer-care platform with unused range — built for one thing, capable of doing far more for the same dollar.",
    move: "Repurposed the platform as a value-added service for adjacent partners. Re-scoped the prompts and the retrieval layer.",
    outcome: "Spend went up. Value went up more.",
    metric: "Same model, broader surface."
  },
  {
    label: "Case 02 · Internal-team bottleneck",
    quote: "\u201CWe want to build a chatbot.\u201D",
    found: "The real problem wasn't customer-facing. It was an internal team buried in repetitive triage. The chatbot would have shipped pain to users.",
    move: "Built an internal automation that watched the inbox and pre-resolved 60% of tickets before a human ever saw them.",
    outcome: "Faster team. Less wasted spend on the wrong product.",
    metric: "No customer interface needed."
  }
];

const FLOW = [
  { n: "i.", q: "What are you actually trying to achieve?", a: "Before we discuss AI at all. The framing is everything — half of bad AI projects are well-built answers to the wrong question." },
  { n: "ii.", q: "Where does friction live in your current flow?", a: "Map the operation. What already works. Where the team is taping things together. Where time is leaking." },
  { n: "iii.", q: "How does your team currently think about AI?", a: "So I know how to explain what's possible in a way that fits — not in vendor language, in your language." },
  { n: "iv.", q: "Only then: what should AI actually do?", a: "Sometimes the answer is a workflow. Sometimes it's an agent. Sometimes it's nothing, and that's a real answer too." }
];

const SECTIONS = [
  { id: "what", num: "01", title: <React.Fragment>What I <em>do</em></React.Fragment> },
  { id: "pov", num: "02", title: <React.Fragment>How I <em>see it</em></React.Fragment> },
  { id: "cases", num: "03", title: <React.Fragment>Reframes I've <em>helped with</em></React.Fragment> },
  { id: "bg", num: "04", title: <React.Fragment>Background</React.Fragment> },
  { id: "flow", num: "05", title: <React.Fragment>First <em>conversation</em></React.Fragment> },
  { id: "talk", num: "06", title: <React.Fragment>Let's talk</React.Fragment> }
];

function Manifesto({ theme, density }) {
  const [progress, setProgress] = useState(0);
  const [active, setActive] = useState("hero");
  const [openCases, setOpenCases] = useState(() => new Set([0])); // first case open by default
  const caseRefs = useRef([]);

  const toggleCase = (i) => {
    setOpenCases(prev => {
      const next = new Set(prev);
      const willOpen = !next.has(i);
      if (willOpen) next.add(i); else next.delete(i);
      if (willOpen) {
        // wait for the expand transition to start, then bring the card into view
        requestAnimationFrame(() => {
          const el = caseRefs.current[i];
          if (!el) return;
          const rect = el.getBoundingClientRect();
          const target = window.scrollY + rect.top - 80;
          window.scrollTo({ top: target, behavior: "smooth" });
        });
      }
      return next;
    });
  };
  const rootRef = useRef(null);

  // Inject palette as inline CSS vars (so tweak swaps are live)
  const themeStyle = theme ? {
    "--bg": theme.bg, "--ink": theme.ink, "--accent": theme.accent,
    "--muted": theme.muted, "--line": theme.line
  } : {};

  // Scroll progress + active section
  useEffect(() => {
    const onScroll = () => {
      const doc = document.documentElement;
      const h = doc.scrollHeight - window.innerHeight;
      setProgress(h > 0 ? Math.min(1, window.scrollY / h) : 0);

      // active section
      const mid = window.scrollY + window.innerHeight * 0.35;
      let cur = "hero";
      for (const s of SECTIONS) {
        const el = document.getElementById("mfo-" + s.id);
        if (el && el.offsetTop <= mid) cur = s.id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Reveal on scroll (with safety fallback so cards never get stuck at opacity 0)
  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const els = Array.from(root.querySelectorAll(".mfo-reveal"));
    const reveal = (el) => el.classList.add("--in");

    // Switch ON the reveal-hiding rules now that JS is running
    root.classList.add("is-jsready");

    // Anything already in viewport on mount: reveal immediately
    els.forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight && r.bottom > 0) reveal(el);
    });

    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => { if (en.isIntersecting) reveal(en.target); });
    }, { threshold: 0.01, rootMargin: "0px 0px -2% 0px" });
    els.forEach(el => io.observe(el));

    // Safety: anything still hidden after 1.2s gets revealed unconditionally
    const fallback = setTimeout(() => els.forEach(reveal), 1200);

    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById("mfo-" + id);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };

  return (
    <div ref={rootRef} className={"mfo --" + (density || "regular")} style={themeStyle} data-screen-label="Manifesto">
      <style>{MANIFESTO_CSS}</style>

      {/* reading rail */}
      <div className="mfo-rail" aria-hidden="false">
        <div className="mfo-rail-fill" style={{ height: (progress * 100).toFixed(2) + "%" }} />
        <div className="mfo-rail-ticks">
          {SECTIONS.map(s => (
            <button key={s.id} className={"mfo-tick" + (active === s.id ? " --active" : "")}
              title={s.num} onClick={() => scrollTo(s.id)} />
          ))}
        </div>
      </div>

      <div className="mfo-shell">
        {/* top */}
        <div className="mfo-top">
          <div className="mfo-mark">
            <span className="mfo-mark-dot" />
            Avatara&nbsp;Labs · Jakarta
          </div>
          <div className="mfo-top-meta">
            Available · Q2&nbsp;2026<br/>
            EN · ID
          </div>
        </div>

        {/* hero */}
        <div className="mfo-hero">
          <div>
            <div className="mfo-eyebrow">
              <span className="mfo-eyebrow-line" />
              Ananto Wibisono &nbsp;·&nbsp; <b>AI&nbsp;consultant, engineer, operator</b>
            </div>
            <h1 className="mfo-h1">
              The conversation<br/>
              about <em>AI</em><br/>
              most companies<br/>
              are <em>not</em> <span className="--lift">having.</span>
            </h1>
            <p className="mfo-sub">
              An honest read on what AI can — and <em>cannot</em> — do for your organization. From someone who has built the systems, run the company, and sat on both sides of the table.
            </p>
          </div>
          <div className="mfo-aside">
            <div>
              <div className="mfo-aside-lbl">Today</div>
              <div className="mfo-aside-val">Co-founder & CEO,<br/>Avatara Labs</div>
            </div>
            <div>
              <div className="mfo-aside-lbl">Also</div>
              <div className="mfo-aside-val">Co-founder & Board,<br/>Alterra</div>
            </div>
            <div>
              <div className="mfo-aside-lbl">Based</div>
              <div className="mfo-aside-val">Jakarta, ID</div>
            </div>
          </div>
        </div>

        {/* 01 — What I do */}
        <section id="mfo-what" className="mfo-sec">
          <div className="mfo-sec-head mfo-reveal">
            <div className="mfo-sec-num"><b>01</b>·What I do</div>
            <div className="mfo-sec-title">{SECTIONS[0].title}</div>
          </div>
          <div className="mfo-worlds">
            <div className="mfo-world mfo-reveal">
              <div className="mfo-world-tag"><i/>Before AI</div>
              <h3 className="mfo-world-h">Engineer.<br/>Then <em>operator.</em></h3>
              <p className="mfo-world-body">Started as a developer. Grew into an engineering manager. Then took the operator's chair — running strategy, operations, marketing, partnerships. At Alterra, that meant a billing ecosystem processing millions of daily transactions across 200+ partners. Big data, integrations, the messy real world.</p>
            </div>
            <div className="mfo-world mfo-reveal">
              <div className="mfo-world-tag"><i/>Now</div>
              <h3 className="mfo-world-h">Operator who came <em>back to build.</em></h3>
              <p className="mfo-world-body">When AI arrived I went back to the keyboard. Now I run Avatara Labs — building AI agent systems, multi-persona content platforms, and the operational tooling I wish I'd had as a CEO. I ship the code. I also still sit in the operator's chair.</p>
            </div>
          </div>
          <div className="mfo-bridge mfo-reveal">
            <span className="mfo-bridge-mark">— the difference —</span>
            Most AI advisors live in <em>one world.</em><br/>I live in both.
          </div>
        </section>

        {/* 02 — POV */}
        <section id="mfo-pov" className="mfo-sec">
          <div className="mfo-sec-head mfo-reveal">
            <div className="mfo-sec-num"><b>02</b>·POV</div>
            <div className="mfo-sec-title">{SECTIONS[1].title}</div>
          </div>
          <div className="mfo-pov">
            {POV.map((p, i) => (
              <PovCard key={i} pov={p} />
            ))}
          </div>
        </section>

        {/* 03 — Cases */}
        <section id="mfo-cases" className="mfo-sec">
          <div className="mfo-sec-head mfo-reveal">
            <div className="mfo-sec-num"><b>03</b>·Cases</div>
            <div className="mfo-sec-title">{SECTIONS[2].title}</div>
          </div>
          <div className="mfo-cases">
            {CASES.map((c, i) => {
              const open = openCases.has(i);
              return (
                <div key={i}
                  ref={(el) => { caseRefs.current[i] = el; }}
                  className={"mfo-case mfo-reveal" + (open ? " --open" : "")}
                  onClick={() => toggleCase(i)}>
                  <div className="mfo-case-head">
                    <div className="mfo-case-label">{c.label}</div>
                    <div className="mfo-case-quote">{c.quote}</div>
                    <div className="mfo-case-toggle">{open ? "Close —" : "Read +"}</div>
                  </div>
                  <div className="mfo-case-body">
                    <div className="mfo-case-body-inner">
                      <div className="mfo-case-detail">
                        <div className="mfo-case-key">Found</div>
                        <div className="mfo-case-val">{c.found}</div>
                        <div className="mfo-case-key">Move</div>
                        <div className="mfo-case-val">{c.move}</div>
                        <div className="mfo-case-key">Outcome</div>
                        <div className="mfo-case-val --outcome">{c.outcome} <span style={{ color: "var(--muted)", fontStyle: "normal", fontFamily: "'Geist Mono', monospace", fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", marginLeft: 8 }}>— {c.metric}</span></div>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </section>

        {/* 04 — Background */}
        <section id="mfo-bg" className="mfo-sec">
          <div className="mfo-sec-head mfo-reveal">
            <div className="mfo-sec-num"><b>04</b>·Background</div>
            <div className="mfo-sec-title">{SECTIONS[3].title}</div>
          </div>
          <div className="mfo-creds">
            <div className="mfo-cred mfo-reveal">
              <div className="mfo-cred-num">200<sup>+</sup></div>
              <div className="mfo-cred-lbl">Partners on the Alterra billing ecosystem.</div>
            </div>
            <div className="mfo-cred mfo-reveal">
              <div className="mfo-cred-num">M<sup>+</sup></div>
              <div className="mfo-cred-lbl">Daily bill-payment transactions processed across that ecosystem.</div>
            </div>
            <div className="mfo-cred mfo-reveal">
              <div className="mfo-cred-num">HBS</div>
              <div className="mfo-cred-lbl">Owner / President Management — Harvard Business School Executive Ed.</div>
            </div>
            <div className="mfo-cred mfo-reveal">
              <div className="mfo-cred-num">ID</div>
              <div className="mfo-cred-lbl">Native fluency in Bahasa Indonesia, culture, and the local AI market.</div>
            </div>
          </div>
        </section>

        {/* 05 — Flow */}
        <section id="mfo-flow" className="mfo-sec">
          <div className="mfo-sec-head mfo-reveal">
            <div className="mfo-sec-num"><b>05</b>·Flow</div>
            <div className="mfo-sec-title">{SECTIONS[4].title}</div>
          </div>
          <div className="mfo-flow">
            {FLOW.map((f, i) => (
              <div key={i} className="mfo-flow-item mfo-reveal">
                <div className="mfo-flow-num">{f.n}</div>
                <div className="mfo-flow-q">{f.q}</div>
                <div className="mfo-flow-a">{f.a}</div>
              </div>
            ))}
          </div>
        </section>

        {/* 06 — Contact */}
        <section id="mfo-talk" className="mfo-contact">
          <div className="mfo-sec-head mfo-reveal" style={{ borderBottom: "none", marginBottom: 0, paddingBottom: 0 }}>
            <div className="mfo-sec-num"><b>06</b>·Contact</div>
            <div />
          </div>
          <h2 className="mfo-contact-h mfo-reveal">Let's <em>talk.</em></h2>
          <p className="mfo-contact-sub mfo-reveal">
            A general conversation about AI. A specific situation you're navigating. A second opinion on something you've already started. All welcome.
          </p>
          <div className="mfo-contact-grid">
            <a href="mailto:ananto@avataralabs.ai" className="mfo-contact-card mfo-reveal">
              <span className="mfo-contact-lbl">Email</span>
              <span className="mfo-contact-val">ananto@avataralabs.ai</span>
              <span className="mfo-contact-arrow">↗</span>
            </a>
            <a href="https://wa.me/628111677999" className="mfo-contact-card mfo-reveal">
              <span className="mfo-contact-lbl">WhatsApp</span>
              <span className="mfo-contact-val">+62 8111 677 999</span>
              <span className="mfo-contact-arrow">↗</span>
            </a>
            <a href="https://www.linkedin.com/in/ananto/" className="mfo-contact-card mfo-reveal">
              <span className="mfo-contact-lbl">LinkedIn</span>
              <span className="mfo-contact-val">/in/ananto</span>
              <span className="mfo-contact-arrow">↗</span>
            </a>
          </div>

          <div className="mfo-foot">
            <div>© Ananto Wibisono · Avatara Labs</div>
            <div>Jakarta — Southeast Asia · 2026</div>
          </div>
        </section>
      </div>
    </div>
  );
}

function PovCard({ pov }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={"mfo-pov-card mfo-reveal" + (open ? " --open" : "")}
      onClick={() => setOpen(o => !o)}>
      <div className="mfo-pov-num"><i/>{pov.n}</div>
      <div className="mfo-pov-q">"</div>
      <div className="mfo-pov-text">{pov.text}</div>
      <div className="mfo-pov-rejoin">{pov.rejoin}</div>
    </div>
  );
}

window.Manifesto = Manifesto;