/* global React */
/* Direction B — "Operator OS"
   Dark system / terminal aesthetic. All monospace. Role toggle reframes the
   content (engineer/operator/advisor). Live-typed hero. Keyboard shortcuts.
   Command bar. Scanlines toggle. */

const { useState, useEffect, useRef } = React;

const OPS_CSS = `
.ops {
  --bg: #0a0a0a;
  --panel: #111110;
  --panel-2: #161513;
  --ink: #e8e0d0;
  --ink-dim: #8a8270;
  --ink-faint: #4d4838;
  --accent: #ffb547;
  --glow: rgba(255,181,71,0.18);
  --line: rgba(232,224,208,0.08);
  --line-strong: rgba(232,224,208,0.18);
  background: var(--bg);
  color: var(--ink);
  font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
  font-weight: 400;
  min-height: 100vh;
  position: relative;
  letter-spacing: 0;
}

/* Scanlines */
.ops.--scan::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.ops::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--glow), transparent 60%);
  opacity: .55;
}

/* Top status bar — sticky */
.ops-bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,10,10,0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-strong);
  display: grid; grid-template-columns: 240px 1fr auto; gap: 24px;
  align-items: center;
  padding: 0 24px; height: 44px;
  font-size: 11px; color: var(--ink-dim);
}
.ops-bar-id { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.ops-bar-id .--dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); animation: opsPulse 2.4s ease-in-out infinite; }
.ops-bar-id b { font-weight: 500; letter-spacing: 0.04em; }
.ops-bar-cmd {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); padding: 4px 12px;
  border-radius: 4px; background: rgba(255,255,255,0.02);
  font-size: 11px; color: var(--ink-dim); max-width: 520px; justify-self: center; width: 100%;
}
.ops-bar-cmd b { color: var(--accent); font-weight: 500; }
.ops-bar-cmd kbd {
  font: inherit; padding: 1px 6px; border: 1px solid var(--line-strong);
  border-radius: 3px; background: rgba(255,255,255,0.04); color: var(--ink); font-size: 10px;
}
.ops-bar-r { display: flex; gap: 18px; align-items: center; font-size: 11px; }
.ops-bar-r b { color: var(--ink); font-weight: 500; }
.ops-bar-r .--sep { color: var(--ink-faint); }

@keyframes opsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Page shell */
.ops-shell { max-width: 1200px; margin: 0 auto; padding: 48px 24px 64px; position: relative; z-index: 2; }

/* Section banner — '## NN section_title' */
.ops-banner {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-left-width: 3px; border-left-color: var(--accent);
  background: rgba(255,181,71,0.04);
  margin: 56px 0 32px;
  font-size: 13px;
}
.ops-banner .--pre { color: var(--accent); font-weight: 500; }
.ops-banner .--num { color: var(--ink-dim); }
.ops-banner .--name { color: var(--ink); font-weight: 500; }
.ops-banner .--meta { margin-left: auto; color: var(--ink-faint); font-size: 11px; }

/* Hero */
.ops-hero { padding: 32px 0 48px; }
.ops-eyebrow {
  display: flex; gap: 14px; align-items: center;
  font-size: 11px; color: var(--ink-dim); margin-bottom: 32px;
}
.ops-eyebrow b { color: var(--accent); font-weight: 500; }
.ops-eyebrow i {
  display: inline-block; width: 24px; height: 1px; background: var(--accent);
  font-style: normal;
}
.ops-h1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(40px, 5.8vw, 84px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 32px;
  white-space: pre-wrap;
}
.ops-h1 em { font-style: normal; color: var(--accent); }
.ops-h1-cursor {
  display: inline-block; width: 0.5em; height: 0.85em;
  background: var(--accent); vertical-align: -0.05em; margin-left: 6px;
  animation: opsBlink 1s steps(1) infinite; box-shadow: 0 0 12px var(--accent);
}
@keyframes opsBlink { 50% { opacity: 0; } }

.ops-sub {
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6;
  color: var(--ink-dim); max-width: 64ch;
}
.ops-sub b { color: var(--ink); font-weight: 500; }
.ops-sub em { color: var(--accent); font-style: normal; }

.ops-hero-meta {
  margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ops-hero-meta > div {
  padding: 18px 20px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.ops-hero-meta > div:last-child { border-right: none; }
.ops-hero-meta dt {
  font-size: 10px; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase;
}
.ops-hero-meta dd { margin: 0; font-size: 13px; color: var(--ink); font-weight: 500; }
.ops-hero-meta dd b { color: var(--accent); font-weight: 500; }

/* Role tabs */
.ops-tabs {
  display: flex; gap: 0; margin: 32px 0 0;
  border: 1px solid var(--line-strong); background: var(--panel);
  padding: 4px; border-radius: 4px; max-width: 540px;
}
.ops-tab {
  flex: 1; appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 12px; padding: 10px 12px; color: var(--ink-dim);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 2px; transition: color .2s, background .2s;
  letter-spacing: 0.04em;
}
.ops-tab:hover { color: var(--ink); }
.ops-tab.--active { color: var(--bg); background: var(--accent); font-weight: 500; }
.ops-tab .--kbd { font-size: 10px; opacity: .6; }
.ops-tab.--active .--kbd { opacity: .8; }

/* Worlds (engineer/operator views) */
.ops-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.ops-card { background: var(--bg); padding: 32px; position: relative; }
.ops-card-tag {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; color: var(--ink-dim); margin-bottom: 24px;
}
.ops-card-tag b { color: var(--accent); font-weight: 500; }
.ops-card-tag i { display: inline-block; width: 20px; height: 1px; background: var(--ink-faint); font-style: normal; }

.ops-card-h {
  font-size: clamp(22px, 2.2vw, 30px); font-weight: 500;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 20px;
}
.ops-card-h em { color: var(--accent); font-style: normal; }
.ops-card-body { font-size: 14px; line-height: 1.65; color: var(--ink-dim); text-wrap: pretty; max-width: 50ch; }
.ops-card-body b { color: var(--ink); font-weight: 500; }

.ops-card-tags {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px;
}
.ops-card-tag-chip {
  font-size: 10px; padding: 4px 8px; border: 1px solid var(--line-strong);
  color: var(--ink-dim); letter-spacing: 0.04em; text-transform: lowercase;
}

.ops-card-corner {
  position: absolute; top: 16px; right: 20px;
  font-size: 10px; color: var(--ink-faint); letter-spacing: 0.1em;
}

/* POV — key/value lines */
.ops-pov { display: grid; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.ops-pov-row {
  display: grid; grid-template-columns: 56px 1fr; gap: 24px;
  background: var(--bg); padding: 28px 28px 28px 24px; align-items: baseline;
}
.ops-pov-row > .--n { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; }
.ops-pov-row > .--t {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45;
  color: var(--ink); letter-spacing: -0.005em; text-wrap: pretty;
}
.ops-pov-row > .--t em { color: var(--accent); font-style: normal; }
.ops-pov-row:hover { background: var(--panel-2); }

/* Cases — terminal-style with diff colors */
.ops-cases { display: grid; gap: 24px; }
.ops-case {
  border: 1px solid var(--line-strong); background: var(--panel);
}
.ops-case-head {
  padding: 14px 20px; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--line-strong); background: rgba(255,255,255,0.02);
}
.ops-case-dots { display: flex; gap: 6px; }
.ops-case-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); display: block; }
.ops-case-dots i:first-child { background: #ff5f57; }
.ops-case-dots i:nth-child(2) { background: #febc2e; }
.ops-case-dots i:nth-child(3) { background: #28c840; }
.ops-case-name { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.06em; }
.ops-case-name b { color: var(--ink); font-weight: 500; }
.ops-case-name .--sep { color: var(--ink-faint); margin: 0 8px; }
.ops-case-meta { margin-left: auto; font-size: 10px; color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; }

.ops-case-body { padding: 24px 24px 28px; }
.ops-case-line { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 8px 0; align-items: baseline; }
.ops-case-line > .--k { font-size: 11px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; padding-top: 2px; }
.ops-case-line > .--v { font-size: 14px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.ops-case-line.--in > .--v::before { content: '- '; color: #ff7a6e; }
.ops-case-line.--found > .--v::before { content: '~ '; color: #febc2e; }
.ops-case-line.--out > .--v::before { content: '+ '; color: #4cd964; }
.ops-case-line.--out > .--v { color: var(--accent); font-weight: 500; }

/* Background */
.ops-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-strong);
  border: 1px solid var(--line-strong);
}
.ops-stat { background: var(--bg); padding: 28px 24px; position: relative; }
.ops-stat-n {
  font-size: clamp(40px, 4vw, 60px); font-weight: 500;
  color: var(--accent); line-height: 1; letter-spacing: -0.04em;
  margin-bottom: 14px; font-feature-settings: 'tnum';
}
.ops-stat-n sup { font-size: 0.4em; vertical-align: top; opacity: .8; }
.ops-stat-l { font-size: 12px; line-height: 1.5; color: var(--ink-dim); text-wrap: pretty; max-width: 26ch; }
.ops-stat-tag {
  position: absolute; top: 16px; right: 16px; font-size: 10px;
  color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase;
}

/* Flow — numbered steps */
.ops-flow { display: grid; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.ops-flow-step { background: var(--bg); padding: 24px 28px; display: grid; grid-template-columns: 56px 1fr 1fr; gap: 28px; align-items: baseline; }
.ops-flow-step:hover { background: var(--panel-2); }
.ops-flow-n { color: var(--accent); font-size: 13px; font-weight: 500; }
.ops-flow-q { font-size: clamp(15px, 1.25vw, 17px); color: var(--ink); line-height: 1.4; text-wrap: pretty; letter-spacing: -0.005em; }
.ops-flow-a { font-size: 13px; color: var(--ink-dim); line-height: 1.6; text-wrap: pretty; }

/* Contact */
.ops-contact { margin-top: 64px; }
.ops-contact-h { font-size: clamp(34px, 4vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 16px; }
.ops-contact-h em { color: var(--accent); font-style: normal; }
.ops-contact-h-cursor {
  display: inline-block; width: 0.5em; height: 0.8em;
  background: var(--accent); vertical-align: -0.02em; margin-left: 6px;
  animation: opsBlink 1s steps(1) infinite;
}
.ops-contact-sub { font-size: 14px; line-height: 1.6; color: var(--ink-dim); max-width: 56ch; margin-bottom: 32px; }

.ops-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.ops-contact-card {
  background: var(--bg); padding: 24px 24px 20px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit; position: relative;
  transition: background .2s;
}
.ops-contact-card:hover { background: var(--panel-2); }
.ops-contact-card:hover .ops-contact-arrow { transform: translate(4px, -4px); color: var(--accent); }
.ops-contact-lbl { font-size: 10px; color: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; }
.ops-contact-cmd { font-size: 11px; color: var(--ink-dim); margin-top: -8px; }
.ops-contact-cmd b { color: var(--accent); font-weight: 500; }
.ops-contact-val { font-size: 16px; color: var(--ink); word-break: break-all; }
.ops-contact-arrow { position: absolute; top: 22px; right: 20px; font-size: 14px; color: var(--ink-faint); transition: transform .2s, color .2s; }

/* Footer */
.ops-foot {
  margin-top: 56px; padding: 18px 0; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint);
}
.ops-foot b { color: var(--ink-dim); font-weight: 500; }

/* Diff fades for role swap */
.ops-fade-in { animation: opsFade .35s ease both; }
@keyframes opsFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 980px) {
  .ops-grid-2, .ops-stats, .ops-contact-grid { grid-template-columns: 1fr; }
  .ops-flow-step { grid-template-columns: 40px 1fr; }
  .ops-flow-a { grid-column: 2; }
  .ops-hero-meta { grid-template-columns: 1fr 1fr; }
  .ops-bar { grid-template-columns: 1fr auto; }
  .ops-bar-cmd { display: none; }
}
@media (max-width: 580px) {
  .ops-shell { padding: 24px 16px 48px; }
  .ops-hero-meta { grid-template-columns: 1fr; }
  .ops-case-line { grid-template-columns: 1fr; gap: 4px; }
}
`;

const ROLE_HERO = {
  engineer: {
    eyebrow: "ananto.wibisono.eng",
    h1Parts: [
      "I ship the code. ",
      "Then I ", { em: "ship" }, " the ",
      "company that uses it."
    ],
    sub: <React.Fragment>Started as a developer. Grew into engineering management. Then took the operator's chair — at a billing platform doing <em>millions</em> of daily transactions. Now back to the keyboard, building AI agent systems at Avatara Labs.</React.Fragment>
  },
  operator: {
    eyebrow: "ananto.wibisono.op",
    h1Parts: [
      "The conversation about AI ",
      "most companies are ", { em: "not" }, " ",
      "having."
    ],
    sub: <React.Fragment>An honest read on what AI can — and <em>cannot</em> — do for your organization. From someone who has <b>built the systems</b>, <b>run the company</b>, and sat on both sides of the table.</React.Fragment>
  },
  advisor: {
    eyebrow: "ananto.wibisono.adv",
    h1Parts: [
      "Before we talk solutions, ",
      "I want to understand ",
      "your ", { em: "flow." }
    ],
    sub: <React.Fragment>A first conversation isn't a pitch. It's a careful read of what you're trying to do, where it's actually breaking, and how your team thinks about AI today — <em>before</em> anyone mentions a platform.</React.Fragment>
  }
};

const ROLE_LABEL = {
  engineer: "Engineer",
  operator: "Operator",
  advisor: "Advisor"
};

const WORLDS = [
  {
    tag: "BEFORE_AI",
    h: <React.Fragment>Engineer.<br/>Then <em>operator.</em></React.Fragment>,
    body: <React.Fragment>Started as a developer. Grew into an engineering manager. Then took the operator's chair — strategy, operations, marketing, partnerships. At <b>Alterra</b>, that meant a billing ecosystem with millions of daily transactions and 200+ partners. Big data, integrations, the messy real world.</React.Fragment>,
    chips: ["dev", "eng-mgmt", "ceo", "alterra", "fintech-infra"]
  },
  {
    tag: "NOW",
    h: <React.Fragment>Operator who came <em>back to build.</em></React.Fragment>,
    body: <React.Fragment>When AI arrived I went back to the keyboard. Now I run <b>Avatara Labs</b> — 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 still sit in the operator's chair.</React.Fragment>,
    chips: ["agents", "rag", "multi-persona", "operator-tooling", "avatara"]
  }
];

const POV_OPS = [
  { n: "$01", text: <React.Fragment>The question isn't <em>how much</em> to spend on AI. It's how much value each dollar brings back.</React.Fragment> },
  { n: "$02", 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> },
  { n: "$03", 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> }
];

const CASES_OPS = [
  {
    name: "case_01_billing_care_platform.md",
    meta: "fintech · 2025",
    incoming: "\u201CHelp us cut our AI token spend.\u201D",
    found: "Customer-care platform with unused range — built for one thing, capable of doing far more for the same dollar.",
    move: "Re-scoped prompts and retrieval. Repurposed the platform as a value-added service for adjacent partners.",
    outcome: "Spend went up. Value went up more."
  },
  {
    name: "case_02_chatbot_to_internal.md",
    meta: "ops · 2025",
    incoming: "\u201CWe want to build a chatbot.\u201D",
    found: "The real bottleneck wasn't customer-facing. It was an internal team buried in repetitive triage.",
    move: "Built internal automation watching the inbox; pre-resolved ~60% of tickets before a human saw them.",
    outcome: "Faster team. No bad chatbot. Less waste on the wrong product."
  }
];

const FLOW_OPS = [
  { n: "01", q: "what are you actually trying to achieve?", a: "before we discuss AI at all. half of bad AI projects are well-built answers to the wrong question." },
  { n: "02", q: "where does friction live in your current flow?", a: "map the operation. what works. where the team is taping things together. where time is leaking." },
  { n: "03", q: "how does your team currently think about AI?", a: "so I can explain what's possible in a way that fits — in your language, not vendor language." },
  { n: "04", q: "only then: what should AI actually do?", a: "sometimes a workflow. sometimes an agent. sometimes nothing — and that's a real answer too." }
];

const STATS_OPS = [
  { n: "200", sup: "+", tag: "PARTNERS", l: "On the Alterra billing ecosystem I helped build." },
  { n: "M", sup: "+", tag: "DAILY_TX", l: "Bill-payment transactions processed across that ecosystem." },
  { n: "HBS", sup: "",  tag: "OPM_EDU", l: "Owner / President Management — Harvard Business School Executive Ed." },
  { n: "ID", sup: "/EN", tag: "FLUENCY", l: "Native fluency in Bahasa Indonesia, culture, and the local AI market." }
];

function useTyped(target, speed = 24) {
  const [out, setOut] = useState("");
  useEffect(() => {
    setOut("");
    let i = 0;
    let cancelled = false;
    const tick = () => {
      if (cancelled) return;
      i++;
      setOut(target.slice(0, i));
      if (i < target.length) setTimeout(tick, speed + (Math.random() * 30 - 15));
    };
    const start = setTimeout(tick, 200);
    return () => { cancelled = true; clearTimeout(start); };
  }, [target, speed]);
  return out;
}

function renderH1Parts(parts) {
  const out = [];
  parts.forEach((p, i) => {
    if (typeof p === "string") {
      // newline -> <br>
      const segs = p.split("\n");
      segs.forEach((s, j) => {
        out.push(<React.Fragment key={"s" + i + "-" + j}>{s}{j < segs.length - 1 ? <br/> : null}</React.Fragment>);
      });
    } else if (p && p.em) {
      out.push(<em key={"e" + i}>{p.em}</em>);
    }
  });
  return out;
}

function OperatorOS({ accent, role, scanlines, setRole }) {
  const safeRole = role && ROLE_HERO[role] ? role : "operator";
  const hero = ROLE_HERO[safeRole];
  const [time, setTime] = useState(() => fmtTime(new Date()));
  const [heroKey, setHeroKey] = useState(0);

  // bump hero animation key on role change
  useEffect(() => { setHeroKey(k => k + 1); }, [safeRole]);

  useEffect(() => {
    const t = setInterval(() => setTime(fmtTime(new Date())), 1000 * 30);
    return () => clearInterval(t);
  }, []);

  // Keyboard shortcuts: 1/2/3 to switch role
  useEffect(() => {
    const onKey = (e) => {
      if (e.target && (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")) return;
      if (e.metaKey || e.ctrlKey || e.altKey) return;
      const map = { "1": "engineer", "2": "operator", "3": "advisor" };
      if (map[e.key] && setRole) {
        e.preventDefault();
        setRole(map[e.key]);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [setRole]);

  const accentStyle = accent ? {
    "--accent": accent.hex,
    "--glow": accent.glow
  } : {};

  // typed eyebrow
  const typed = useTyped(hero.eyebrow);

  return (
    <div className={"ops" + (scanlines ? " --scan" : "")} style={accentStyle} data-screen-label="Operator OS">
      <style>{OPS_CSS}</style>

      <div className="ops-bar">
        <div className="ops-bar-id">
          <span className="--dot" />
          <b>ananto</b>@<span style={{ color: "var(--ink-dim)" }}>avatara-labs</span>
          <span style={{ color: "var(--ink-faint)" }}>:~/profile</span>
        </div>
        <div className="ops-bar-cmd">
          <b>view</b>&nbsp;as&nbsp;:&nbsp;
          {["engineer", "operator", "advisor"].map((r, i) => (
            <React.Fragment key={r}>
              {i > 0 && <span style={{ color: "var(--ink-faint)" }}>·</span>}
              <span style={{ color: r === safeRole ? "var(--accent)" : "var(--ink-dim)" }}>{r}</span>
            </React.Fragment>
          ))}
          <span style={{ marginLeft: "auto", color: "var(--ink-faint)" }}>press</span>
          <kbd>1</kbd><kbd>2</kbd><kbd>3</kbd>
        </div>
        <div className="ops-bar-r">
          <span>JKT&nbsp;<b>{time}</b></span>
          <span className="--sep">·</span>
          <span>STATUS&nbsp;<b style={{ color: "var(--accent)" }}>● Q2&nbsp;Open</b></span>
        </div>
      </div>

      <div className="ops-shell">
        {/* hero */}
        <div className="ops-hero" key={heroKey}>
          <div className="ops-eyebrow ops-fade-in">
            <i/>
            <span>Ananto&nbsp;Wibisono</span>
            <span style={{ color: "var(--ink-faint)" }}>—</span>
            <span style={{ color: "var(--ink-faint)" }}>$&nbsp;whoami&nbsp;&gt;&nbsp;</span>
            <b>{typed}</b>
            <span className="ops-h1-cursor" style={{ width: "0.5em", height: "1em" }} />
          </div>
          <h1 className="ops-h1 ops-fade-in">
            {renderH1Parts(hero.h1Parts)}
            <span className="ops-h1-cursor" />
          </h1>
          <p className="ops-sub ops-fade-in">{hero.sub}</p>

          <dl className="ops-hero-meta ops-fade-in">
            <div><dt>// today</dt><dd>Co-founder & CEO<br/><b>Avatara Labs</b></dd></div>
            <div><dt>// also</dt><dd>Co-founder & Board<br/><b>Alterra</b></dd></div>
            <div><dt>// based</dt><dd>Jakarta, ID</dd></div>
            <div><dt>// stack</dt><dd>code · ops · advise</dd></div>
          </dl>

          <div className="ops-tabs">
            {["engineer", "operator", "advisor"].map((r, i) => (
              <button key={r}
                className={"ops-tab" + (safeRole === r ? " --active" : "")}
                onClick={() => setRole && setRole(r)}>
                <span>{ROLE_LABEL[r].toLowerCase()}_view</span>
                <span className="--kbd">[{i + 1}]</span>
              </button>
            ))}
          </div>
        </div>

        {/* 01 worlds */}
        <Banner num="01" name="what_i_do" meta="// two_worlds.md" />
        <div className="ops-grid-2">
          {WORLDS.map((w, i) => (
            <div className="ops-card" key={i}>
              <div className="ops-card-corner">{String(i + 1).padStart(2, "0")} / 02</div>
              <div className="ops-card-tag"><i/><b>{w.tag}</b></div>
              <h3 className="ops-card-h">{w.h}</h3>
              <p className="ops-card-body">{w.body}</p>
              <div className="ops-card-tags">
                {w.chips.map(c => <span key={c} className="ops-card-tag-chip">#{c}</span>)}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 32, padding: "20px 24px",
          border: "1px solid var(--line-strong)", borderLeft: "3px solid var(--accent)",
          background: "rgba(255,181,71,0.04)",
          fontSize: 14, color: "var(--ink)", lineHeight: 1.5
        }}>
          <span style={{ color: "var(--accent)", marginRight: 8 }}>&gt;</span>
          Most AI advisors live in <em style={{ color: "var(--accent)", fontStyle: "normal" }}>one world</em>. I live in <em style={{ color: "var(--accent)", fontStyle: "normal" }}>both</em>.
        </div>

        {/* 02 POV */}
        <Banner num="02" name="how_i_see_it" meta="// 3 takes" />
        <div className="ops-pov">
          {POV_OPS.map((p, i) => (
            <div className="ops-pov-row" key={i}>
              <div className="--n">{p.n}</div>
              <div className="--t">{p.text}</div>
            </div>
          ))}
        </div>

        {/* 03 cases */}
        <Banner num="03" name="reframes" meta="// receipts" />
        <div className="ops-cases">
          {CASES_OPS.map((c, i) => (
            <div className="ops-case" key={i}>
              <div className="ops-case-head">
                <div className="ops-case-dots"><i/><i/><i/></div>
                <div className="ops-case-name">
                  <b>{c.name}</b>
                  <span className="--sep">·</span>
                  <span>{c.meta}</span>
                </div>
                <div className="ops-case-meta">case_{String(i + 1).padStart(2, "0")}</div>
              </div>
              <div className="ops-case-body">
                <div className="ops-case-line --in"><div className="--k">came_in</div><div className="--v">{c.incoming}</div></div>
                <div className="ops-case-line --found"><div className="--k">found</div><div className="--v">{c.found}</div></div>
                <div className="ops-case-line --found"><div className="--k">move</div><div className="--v">{c.move}</div></div>
                <div className="ops-case-line --out"><div className="--k">outcome</div><div className="--v">{c.outcome}</div></div>
              </div>
            </div>
          ))}
        </div>

        {/* 04 stats */}
        <Banner num="04" name="background" meta="// numbers" />
        <div className="ops-stats">
          {STATS_OPS.map((s, i) => (
            <div className="ops-stat" key={i}>
              <div className="ops-stat-tag">{s.tag}</div>
              <div className="ops-stat-n">{s.n}<sup>{s.sup}</sup></div>
              <div className="ops-stat-l">{s.l}</div>
            </div>
          ))}
        </div>

        {/* 05 flow */}
        <Banner num="05" name="first_conversation" meta="// the 4 questions" />
        <div className="ops-flow">
          {FLOW_OPS.map((f, i) => (
            <div className="ops-flow-step" key={i}>
              <div className="ops-flow-n">{f.n}</div>
              <div className="ops-flow-q">{f.q}</div>
              <div className="ops-flow-a">{f.a}</div>
            </div>
          ))}
        </div>

        {/* 06 contact */}
        <Banner num="06" name="contact" meta="// open" />
        <div className="ops-contact">
          <h2 className="ops-contact-h">
            let's talk<em>.</em>
            <span className="ops-contact-h-cursor" />
          </h2>
          <p className="ops-contact-sub">
            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="ops-contact-grid">
            <a className="ops-contact-card" href="mailto:ananto@avataralabs.ai">
              <span className="ops-contact-lbl">→ email</span>
              <span className="ops-contact-cmd">$ <b>mail</b>&nbsp;ananto</span>
              <span className="ops-contact-val">ananto@avataralabs.ai</span>
              <span className="ops-contact-arrow">↗</span>
            </a>
            <a className="ops-contact-card" href="https://www.linkedin.com/in/ananto/">
              <span className="ops-contact-lbl">→ linkedin</span>
              <span className="ops-contact-cmd">$ <b>open</b>&nbsp;/in/ananto</span>
              <span className="ops-contact-val">linkedin.com/in/ananto</span>
              <span className="ops-contact-arrow">↗</span>
            </a>
          </div>
        </div>

        <div className="ops-foot">
          <div><b>©</b>&nbsp;ananto.wibisono / avatara&nbsp;labs</div>
          <div>jakarta · southeast&nbsp;asia · <b>2026</b></div>
        </div>
      </div>
    </div>
  );
}

function Banner({ num, name, meta }) {
  return (
    <div className="ops-banner">
      <span className="--pre">##</span>
      <span className="--num">{num}</span>
      <span className="--name">{name}</span>
      <span className="--meta">{meta}</span>
    </div>
  );
}

function fmtTime(d) {
  const h = String(d.getHours()).padStart(2, "0");
  const m = String(d.getMinutes()).padStart(2, "0");
  return `${h}:${m}`;
}

window.OperatorOS = OperatorOS;