/* eslint-disable */
const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "indigo",
  "density": "comfortable",
  "showProgressBar": true,
  "showLineNumbers": true
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  indigo:  { primary: "#6B47ED", primaryDeep: "#4B2BC8", primarySoft: "#EDE7FE", ring: "rgba(107,71,237,.18)" },
  teal:    { primary: "#0E8E7B", primaryDeep: "#0A6E60", primarySoft: "#DCF1ED", ring: "rgba(14,142,123,.18)" },
  amber:   { primary: "#B45309", primaryDeep: "#7C3F08", primarySoft: "#FBEFD9", ring: "rgba(180,83,9,.18)" },
  graphite:{ primary: "#2C2C32", primaryDeep: "#0E0E11", primarySoft: "#E9E9EC", ring: "rgba(44,44,50,.18)" },
};

// ---------- Atoms ----------
function Kicker({ children }) {
  return <div className="kicker">{children}</div>;
}

function StepNumber({ n }) {
  return <span className="step-num">{String(n).padStart(2,"0")}</span>;
}

function Code({ children }) {
  return <code className="ic">{children}</code>;
}

function Cmd({ lines, t }) {
  return (
    <pre className="cmd" aria-label="terminal command">
      {lines.map((l, i) => (
        <span key={i} className="cmd-line">
          <span className="cmd-gutter">{String(i+1).padStart(2,"0")}</span>
          <span className="cmd-prompt">$</span>
          <span className="cmd-text">{l}</span>
        </span>
      ))}
    </pre>
  );
}

function Callout({ kind, title, children }) {
  return (
    <div className={`callout callout-${kind}`}>
      <div className="callout-tag">{title}</div>
      <div className="callout-body">{children}</div>
    </div>
  );
}

function ScreenshotSlot({ id, label, caption, t, aspect = "16/10", src, fit }) {
  return (
    <figure className={`ss-figure ${src ? "ss-has-image" : ""}`} style={{ "--aspect": aspect }}>
      <image-slot
        id={id}
        shape="rounded"
        radius="14"
        placeholder={t.ui.screenshotPlaceholder}
        {...(fit ? { fit } : {})}
        {...(src ? { src } : {})}
      ></image-slot>
      <figcaption className="ss-caption">
        <span className="ss-marker">{src ? "SCREENSHOT" : "PLACEHOLDER"}</span>
        <span className="ss-label">{label}</span>
        {caption && <span className="ss-hint">{caption}</span>}
      </figcaption>
    </figure>
  );
}

function ScreenshotPair({ children }) {
  return <div className="ss-pair">{children}</div>;
}

// ---------- Diagram ----------
function ArchitectureDiagram({ t }) {
  const d = t.diagram;
  return (
    <div className="diagram">
      <div className="diagram-title">{d.title}</div>
      <svg viewBox="0 0 880 380" className="diagram-svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
            <path d="M0 0 L10 5 L0 10 z" fill="currentColor" />
          </marker>
        </defs>

        {/* Left zone: laptop */}
        <rect x="20" y="40" width="200" height="300" rx="14" className="zone zone-laptop" />
        <text x="34" y="64" className="zone-label">{d.youSub}</text>

        {/* Right zone: workspace */}
        <rect x="540" y="40" width="320" height="300" rx="14" className="zone zone-cloud" />
        <text x="554" y="64" className="zone-label">{d.ec2Sub}</text>

        {/* You */}
        <g transform="translate(40, 130)">
          <rect width="160" height="90" rx="10" className="node node-you" />
          <text x="80" y="40" className="node-title">{d.youLabel}</text>
          <text x="80" y="62" className="node-sub">{d.browserLabel}</text>
        </g>

        {/* Coder proxy — center column */}
        <g transform="translate(280, 130)">
          <rect width="180" height="90" rx="10" className="node node-proxy" />
          <text x="90" y="40" className="node-title">{d.coderLabel}</text>
          <text x="90" y="62" className="node-sub">{d.coderSub}</text>
        </g>

        {/* EC2 + EBS — right zone, well clear of proxy */}
        <g transform="translate(560, 88)">
          <rect width="280" height="232" rx="12" className="node node-ec2-frame" />
          <text x="18" y="28" className="node-frame-label">{d.ec2Label}</text>

          <rect x="20" y="50" width="240" height="60" rx="8" className="node node-claude" />
          <text x="140" y="76" className="node-title">{d.claudeLabel}</text>
          <text x="140" y="95" className="node-sub">{d.claudeSub}</text>

          <rect x="20" y="126" width="240" height="60" rx="8" className="node node-ebs" />
          <text x="140" y="152" className="node-title">{d.ebsLabel}</text>
          <text x="140" y="171" className="node-sub">{d.ebsSub}</text>
        </g>

        {/* arrows: you → proxy, proxy → workspace */}
        <g className="arrow">
          <line x1="204" y1="175" x2="276" y2="175" markerEnd="url(#arrowhead)" />
          <text x="240" y="165" className="arrow-label">{d.arrow1}</text>
        </g>
        <g className="arrow">
          <line x1="464" y1="175" x2="556" y2="175" markerEnd="url(#arrowhead)" />
          <text x="510" y="165" className="arrow-label">{d.arrow2}</text>
        </g>
      </svg>
      <p className="diagram-caption">{d.caption}</p>
    </div>
  );
}

// ---------- Step block ----------
function StepBlock({ id, n, data, t, screenshotSlot, children }) {
  return (
    <section id={id} className="step" data-screen-label={`${String(n).padStart(2,"0")} ${id}`}>
      <header className="step-head">
        <div className="step-meta">
          <StepNumber n={n} />
          <span className="kicker">{data.kicker}</span>
          <span className="step-time">{data.time}</span>
        </div>
        <h2 className="step-title">{data.title}</h2>
        <p className="step-why">{data.why}</p>
      </header>

      <ol className="step-list">
        {data.items.map((it, i) => (
          <li key={i} className="step-item">
            <span className="step-bullet">{i+1}</span>
            <div className="step-item-body">
              <h4>{it.h}</h4>
              <p>{it.b}</p>
            </div>
          </li>
        ))}
      </ol>

      {children}

      {screenshotSlot}
    </section>
  );
}

// ---------- TOC ----------
function TOC({ t, active, onJump }) {
  return (
    <nav className="toc" aria-label={t.ui.contents}>
      <div className="toc-label">{t.ui.contents}</div>
      <ol className="toc-list">
        {t.toc.map(([id, label]) => (
          <li key={id} className={active === id ? "is-active" : ""}>
            <a href={`#${id}`} onClick={(e)=>{ e.preventDefault(); onJump(id); }}>{label}</a>
          </li>
        ))}
      </ol>
    </nav>
  );
}

// ---------- Header ----------
function Header({ lang, setLang, t }) {
  return (
    <header className="page-head">
      <div className="page-head-inner">
        <div className="brand">
          <div className="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22"><path fill="currentColor" d="M9.5 6.5L4 12l5.5 5.5 1.4-1.4L6.8 12l4.1-4.1L9.5 6.5zm5 11l5.5-5.5L14.5 6.5l-1.4 1.4 4.1 4.1-4.1 4.1 1.4 1.4z"/></svg>
          </div>
          <div className="brand-text">
            <div className="brand-name">Milton Coder</div>
            <div className="brand-sub">{t.hero.eyebrow}</div>
          </div>
        </div>
        <div className="head-right">
          <LangToggle lang={lang} setLang={setLang} t={t} />
        </div>
      </div>
    </header>
  );
}

function LangToggle({ lang, setLang, t }) {
  const opts = [
    { id: "en",   label: "EN",   sub: "English" },
    { id: "zhCN", label: "简体", sub: "简体中文" },
    { id: "zhTW", label: "繁體", sub: "繁體中文" },
  ];
  return (
    <div className="lang" role="radiogroup" aria-label={t.ui.languageLabel}>
      <span className="lang-label">{t.ui.languageLabel}</span>
      <div className="lang-segments">
        {opts.map(o => (
          <button
            key={o.id}
            role="radio"
            aria-checked={lang === o.id}
            className={`lang-seg ${lang === o.id ? "is-on" : ""}`}
            onClick={() => setLang(o.id)}
            title={o.sub}
          >
            <span className="lang-seg-label">{o.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

// ---------- Hero ----------
function Hero({ t }) {
  return (
    <section className="hero" id="overview" data-screen-label="00 overview">
      <div className="hero-grid">
        <div className="hero-text">
          <div className="hero-meta">
            <span className="badge">{t.hero.eyebrow}</span>
            <span className="hero-time">⏱ {t.ui.time}</span>
            <span className="hero-aud">· {t.ui.audience}</span>
          </div>
          <h1 className="hero-title">{t.hero.title}</h1>
          <p className="hero-lede">{t.hero.lede}</p>

          <div className="hero-progress">
            {t.toc.slice(1, 9).map((row, i) => (
              <a key={row[0]} href={`#${row[0]}`} className="hero-pill">
                <span className="hero-pill-n">{String(i+1).padStart(2,"0")}</span>
                <span className="hero-pill-l">{row[1].replace(/^\d+\.\s*/, "")}</span>
              </a>
            ))}
          </div>
        </div>

        <div className="hero-art">
          <ArchitectureDiagram t={t} />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// HOW IT WORKS — Tools / Saving / GitHub / Workflow / Rules / Commands / Setup
// ─────────────────────────────────────────────────────────────

function SectionHeader({ kicker, title, lede }) {
  return (
    <div className="block-head">
      <Kicker>{kicker}</Kicker>
      <h2>{title}</h2>
      {lede && <p className="block-lede">{lede}</p>}
    </div>
  );
}

function ToolsBlock({ t }) {
  const d = t.tools;
  return (
    <section id="tools" className="block hiw-block" data-screen-label="11 tools">
      <SectionHeader kicker={d.kicker} title={d.title} lede={d.lede} />

      <div className="tools-groups">
        {d.groups.map((g, gi) => (
          <div key={gi} className="tools-group">
            <div className="tools-group-name">{g.name}</div>
            <div className="tools-grid">
              {g.items.map((it, i) => (
                <div key={i} className="tool-card">
                  <div className="tool-glyph" aria-hidden="true">{it.glyph}</div>
                  <div className="tool-meta">
                    <div className="tool-name">{it.name}</div>
                    <div className="tool-role">{it.role}</div>
                  </div>
                  <div className="tool-desc">{it.desc}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="claude-ways">
        <h3 className="ways-title">{d.claudeWaysTitle}</h3>
        <div className="claude-ways-grid">
          {d.claudeWays.map((w, i) => (
            <div key={i} className="claude-way">
              <div className="claude-way-glyph" aria-hidden="true">{w.glyph}</div>
              <div className="claude-way-name">{w.name}</div>
              <div className="claude-way-desc">{w.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SavingBlock({ t }) {
  const d = t.saving;
  return (
    <section id="saving" className="block hiw-block" data-screen-label="12 saving">
      <SectionHeader kicker={d.kicker} title={d.title} lede={d.lede} />

      <div className="two-kinds">
        {d.twoKinds.map((k, i) => (
          <div key={i} className={`two-kind two-kind-${i}`}>
            <div className="two-kind-tag">{k.tag}</div>
            <div className="two-kind-trigger">{k.trigger}</div>
            <p className="two-kind-desc">{k.desc}</p>
          </div>
        ))}
      </div>

      <div className="analogy-box">
        <div className="analogy-mark">↪</div>
        <p>{d.analogy}</p>
      </div>

      <h3 className="sub-h">{d.flowTitle}</h3>
      <div className="save-flow">
        {d.flow.map((s, i) => (
          <React.Fragment key={i}>
            <div className={`save-flow-node save-flow-node-${i}`}>
              <div className="save-flow-i">{String(i+1).padStart(2,"0")}</div>
              <div className="save-flow-tag">{s.tag}</div>
              <div className="save-flow-note">{s.note}</div>
            </div>
            {i < d.flow.length - 1 && <div className="save-flow-arrow">→</div>}
          </React.Fragment>
        ))}
      </div>

      <Callout kind="warn" title={t.ui.callout_warning}>{d.warning}</Callout>
      <Callout kind="tip"  title={t.ui.callout_tip}>{d.tip}</Callout>
    </section>
  );
}

function GhBlock({ t }) {
  const d = t.gh;
  return (
    <section id="gh" className="block hiw-block" data-screen-label="13 github">
      <SectionHeader kicker={d.kicker} title={d.title} lede={d.lede} />

      <h3 className="sub-h">{d.vsTitle}</h3>
      <div className="vs-row">
        {d.vs.map((v, i) => (
          <React.Fragment key={i}>
            <div className={`vs-card vs-card-${i}`}>
              <div className="vs-card-tag">{v.tag}</div>
              <p>{v.desc}</p>
            </div>
            {i === 0 && <div className="vs-divider"><span>vs</span></div>}
          </React.Fragment>
        ))}
      </div>

      <h3 className="sub-h">{d.branchesTitle}</h3>
      <div className="branches-card">
        <svg viewBox="0 0 700 200" xmlns="http://www.w3.org/2000/svg" className="branches-svg" preserveAspectRatio="xMidYMid meet">
          {/* main — top, production */}
          <line x1="40" y1="40" x2="660" y2="40" className="branch-main"/>
          <text x="40" y="22" className="branch-label main">main</text>
          <text x="40" y="14" className="branch-sub" style={{fontSize:"9px"}}>production</text>
          <circle cx="100" cy="40" r="5" className="branch-dot main"/>
          <circle cx="640" cy="40" r="7" className="branch-dot main merge"/>

          {/* staging — middle, integration trunk */}
          <line x1="40" y1="110" x2="660" y2="110" className="branch-main staging"/>
          <text x="40" y="135" className="branch-label staging">staging</text>
          <text x="40" y="150" className="branch-sub">pre-production trunk</text>
          <circle cx="100" cy="110" r="5" className="branch-dot staging"/>
          <circle cx="540" cy="110" r="6" className="branch-dot staging merge"/>

          {/* release PR: staging → main */}
          <path d="M540 110 Q600 75 640 40" fill="none" className="branch-release"/>
          <text x="595" y="78" className="branch-sub" textAnchor="middle">release PR</text>

          {/* feature branch off staging */}
          <path d="M200 110 Q260 175 320 175" fill="none" className="branch-feature"/>
          <line x1="320" y1="175" x2="480" y2="175" className="branch-feature"/>
          <path d="M480 175 Q520 145 540 110" fill="none" className="branch-feature"/>
          <circle cx="200" cy="110" r="5" className="branch-dot staging"/>
          <circle cx="360" cy="175" r="5" className="branch-dot feature"/>
          <circle cx="430" cy="175" r="5" className="branch-dot feature"/>
          <text x="400" y="195" textAnchor="middle" className="branch-label feature">your/MIL-123-thing</text>
          <text x="510" y="155" className="branch-sub">PR → staging</text>
        </svg>
      </div>
      <div className="analogy-box">
        <div className="analogy-mark">⌥</div>
        <p>{d.branchesAnalogy}</p>
      </div>

      <h3 className="sub-h">{d.whenTitle}</h3>
      <div className="when-row">
        {d.when.map((w, i) => (
          <div key={i} className={`when-card when-card-${i}`}>
            <div className="when-card-tag">{w.tag}</div>
            <p>{w.desc}</p>
          </div>
        ))}
      </div>

      {d.ruleTitle && (
        <>
          <h3 className="sub-h">{d.ruleTitle}</h3>
          <Callout kind="warn" title="">{d.rule}</Callout>
        </>
      )}
    </section>
  );
}

function WorkflowBlock({ t }) {
  const d = t.workflow;
  let stepIdx = 0;
  return (
    <section id="workflow" className="block hiw-block" data-screen-label="14 workflow">
      <SectionHeader kicker={d.kicker} title={d.title} lede={d.lede} />

      <div className="wf-pipeline">
        {d.groups.map((g, gi) => (
          <div key={gi} className={`wf-group wf-group-${g.color}`}>
            <div className="wf-group-rail" aria-hidden="true">
              <div className="wf-group-label">{g.label}</div>
            </div>
            <div className="wf-steps">
              {g.steps.map((s, si) => {
                stepIdx += 1;
                return (
                  <div key={si} className="wf-step">
                    <div className="wf-step-n">{String(stepIdx).padStart(2,"0")}</div>
                    <div className="wf-step-body">
                      <h4>{s.h}</h4>
                      <p>{s.b}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <div className="wf-strip">
        <div className="wf-strip-title">{d.stripTitle}</div>
        <div className="wf-strip-rail">
          {d.strip.map((s, i) => (
            <React.Fragment key={i}>
              <div className="wf-strip-cell">{s}</div>
              {i < d.strip.length - 1 && <div className="wf-strip-arrow">→</div>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function RulesBlock({ t }) {
  const d = t.rules;
  return (
    <section id="rules" className="block hiw-block" data-screen-label="15 rules">
      <SectionHeader kicker={d.kicker} title={d.title} lede={d.lede} />
      <div className="rules-grid">
        {d.items.map((it, i) => (
          <div key={i} className={`rule rule-${it.accent}`}>
            <div className="rule-glyph">{it.glyph}</div>
            <div className="rule-body">
              <h4>{it.h}</h4>
              <p>{it.b}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CmdBlock({ lines, t }) {
  // accept arbitrary lines: lines starting with "#" are comments,
  // lines starting with ">" are interactive prompts, others are shell.
  return (
    <pre className="cmd cmd-rich" aria-label="terminal command">
      {lines.map((l, i) => {
        const isComment = l.trimStart().startsWith("#");
        const isPrompt  = l.trimStart().startsWith(">");
        return (
          <span key={i} className={`cmd-line ${isComment ? "is-comment" : ""} ${isPrompt ? "is-prompt" : ""}`}>
            <span className="cmd-gutter">{String(i+1).padStart(2,"0")}</span>
            <span className="cmd-prompt">
              {isComment ? "#" : isPrompt ? ">" : "$"}
            </span>
            <span className="cmd-text">{isComment ? l.replace(/^\s*#\s?/, "") : isPrompt ? l.replace(/^\s*>\s?/, "") : l}</span>
          </span>
        );
      })}
    </pre>
  );
}

function CheatsheetBlock({ t }) {
  const d = t.cheatsheet;
  return (
    <section id="cheatsheet" className="block hiw-block" data-screen-label="16 cheatsheet">
      <SectionHeader kicker={d.kicker} title={d.title} lede={d.lede} />
      <div className="cheats">
        {d.groups.map((g, i) => (
          <div key={i} className="cheat">
            <div className="cheat-name">{g.name}</div>
            <CmdBlock lines={g.lines} t={t} />
          </div>
        ))}
      </div>
    </section>
  );
}

function SetupBlock({ t }) {
  const d = t.setup;
  return (
    <section id="setup" className="block hiw-block" data-screen-label="17 setup">
      <SectionHeader kicker={d.kicker} title={d.title} lede={d.lede} />

      <div className="analogy-box">
        <div className="analogy-mark">≡</div>
        <p>{d.analogy}</p>
      </div>

      <Callout kind="info" title={t.ui.callout_workspace}>{d.coderNote}</Callout>

      <h3 className="sub-h">{d.twoTypesTitle}</h3>
      <div className="rule-types">
        {d.twoTypes.map((r, i) => (
          <div key={i} className={`rule-type rule-type-${i}`}>
            <div className="rule-type-tag">{r.tag}</div>
            <code className="rule-type-path">{r.path}</code>
            <p>{r.desc}</p>
          </div>
        ))}
      </div>

      <h3 className="sub-h">{d.installTitle}</h3>
      <p className="block-lede">{d.installLede}</p>
      <CmdBlock lines={d.installCmd} t={t} />
      <Callout kind="tip" title={t.ui.callout_tip}>{d.installTip}</Callout>

      <h3 className="sub-h">{d.doesTitle}</h3>
      <div className="does-grid">
        {d.does.map((it, i) => (
          <div key={i} className="does">
            <div className="does-tag">{it.tag}</div>
            <p>{it.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- Daily / stop / trouble / donts / contacts ----------
function DailyBlock({ t }) {
  const d = t.daily;
  return (
    <section id="daily" className="block" data-screen-label="06 daily">
      <div className="block-head">
        <Kicker>{d.kicker}</Kicker>
        <h2>{d.title}</h2>
        <p className="block-lede">{d.lede}</p>
      </div>
      <div className="ways">
        {d.ways.map((w, i) => (
          <div key={i} className="way">
            <div className="way-num">{String(i+1).padStart(2,"0")}</div>
            <div className="way-name">{w.name}</div>
            <div className="way-role">{w.role}</div>
            <div className="way-desc">{w.desc}</div>
          </div>
        ))}
      </div>
      <div className="git-config">
        <h4>{d.gitConfig.title}</h4>
        <p>{d.gitConfig.body}</p>
        <Cmd t={t} lines={[
          'git config --global user.name "Your Name"',
          'git config --global user.email "you@milton.co"',
          'gh auth login',
        ]} />
      </div>
    </section>
  );
}

function StopBlock({ t }) {
  const s = t.stop;
  return (
    <section id="stop" className="block" data-screen-label="07 stop">
      <div className="block-head">
        <Kicker>{s.kicker}</Kicker>
        <h2>{s.title}</h2>
        <p className="block-lede">{s.lede}</p>
      </div>
      <div className="stop-flow">
        {s.flowLabels.map((l, i) => (
          <React.Fragment key={i}>
            <div className={`stop-node ${i === 0 ? "is-running" : ""} ${i === 2 ? "is-stopped" : ""} ${i === 4 ? "is-resumed" : ""}`}>
              <span className="stop-node-i">{String(i+1).padStart(2,"0")}</span>
              <span className="stop-node-l">{l}</span>
            </div>
            {i < s.flowLabels.length - 1 && <div className="stop-arrow">→</div>}
          </React.Fragment>
        ))}
      </div>
      <ul className="bullets">
        {s.bullets.map((b, i) => <li key={i}>{b}</li>)}
      </ul>
      <ScreenshotSlot id="ss-stop" label="Workspace dashboard with Stop button" t={t} aspect="16/8" />
    </section>
  );
}

function TroubleBlock({ t }) {
  const tb = t.trouble;
  return (
    <section id="trouble" className="block" data-screen-label="08 trouble">
      <div className="block-head">
        <Kicker>{tb.kicker}</Kicker>
        <h2>{tb.title}</h2>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>{t.ui.tableHeading_symptom}</th>
            <th>{t.ui.tableHeading_fix}</th>
          </tr>
        </thead>
        <tbody>
          {tb.rows.map((r, i) => (
            <tr key={i}>
              <td>{r[0]}</td>
              <td>{r[1]}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  );
}

function DontsBlock({ t }) {
  const d = t.donts;
  return (
    <section id="donts" className="block" data-screen-label="09 donts">
      <div className="block-head">
        <Kicker>{d.kicker}</Kicker>
        <h2>{d.title}</h2>
      </div>
      <div className="donts">
        {d.items.map((it, i) => (
          <div key={i} className="dont">
            <div className="dont-x">✕</div>
            <div className="dont-body">
              <h4>{it.h}</h4>
              <p>{it.b}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ContactsBlock({ t }) {
  const c = t.contacts;
  return (
    <section id="contacts" className="block contacts-block" data-screen-label="10 contacts">
      <div className="block-head">
        <Kicker>{c.kicker}</Kicker>
        <h2>{c.title}</h2>
        {c.lede && <p className="block-lede">{c.lede}</p>}
      </div>
      {c.contact && (
        <div className="contact-card">
          <div className="contact-card-name">{c.contact.name}</div>
          <div className="contact-card-meta">
            <span className="contact-card-handle">{c.contact.handle}</span>
            <span className="contact-card-dot">·</span>
            <span className="contact-card-channel">{c.contact.channel}</span>
          </div>
        </div>
      )}
      <div className="contacts">
        {c.rows.map((r, i) => (
          <div key={i} className="contact">
            <div className="contact-q">{r[0]}</div>
            <div className="contact-a">{r[1]}</div>
          </div>
        ))}
      </div>
      <p className="footer-note">{t.ui.footerNote}</p>
    </section>
  );
}

// ---------- App ----------
function App() {
  const [lang, setLang] = useState(() => {
    return localStorage.getItem("guide-lang") || "en";
  });
  useEffect(() => { localStorage.setItem("guide-lang", lang); }, [lang]);

  const t = useMemo(() => {
    const L = (k) => {
      const obj = window.GUIDE_I18N[k];
      if (!obj) return null;
      return obj[lang] || obj.en;
    };
    return {
      meta: L("meta"),
      ui: L("ui"),
      hero: L("hero"),
      diagram: L("diagram"),
      tools: L("tools"),
      saving: L("saving"),
      gh: L("gh"),
      workflow: L("workflow"),
      rules: L("rules"),
      cheatsheet: L("cheatsheet"),
      setup: L("setup"),
      daily: L("daily"),
      stop: L("stop"),
      trouble: L("trouble"),
      donts: L("donts"),
      contacts: L("contacts"),
      toc: window.GUIDE_I18N.toc[lang] || window.GUIDE_I18N.toc.en,
      steps: {
        github:     window.GUIDE_I18N.steps.github[lang]     || window.GUIDE_I18N.steps.github.en,
        signin:     window.GUIDE_I18N.steps.signin[lang]     || window.GUIDE_I18N.steps.signin.en,
        create:     window.GUIDE_I18N.steps.create[lang]     || window.GUIDE_I18N.steps.create.en,
        firstrun:   window.GUIDE_I18N.steps.firstrun[lang]   || window.GUIDE_I18N.steps.firstrun.en,
        outlook:    window.GUIDE_I18N.steps.outlook[lang]    || window.GUIDE_I18N.steps.outlook.en,
        claudeai:   window.GUIDE_I18N.steps.claudeai[lang]   || window.GUIDE_I18N.steps.claudeai.en,
        claudecode: window.GUIDE_I18N.steps.claudecode[lang] || window.GUIDE_I18N.steps.claudecode.en,
        linear:     window.GUIDE_I18N.steps.linear[lang]     || window.GUIDE_I18N.steps.linear.en,
      },
    };
  }, [lang]);

  // doc title + lang attribute
  useEffect(() => {
    document.title = t.meta.title;
    document.documentElement.lang = t.meta.lang;
  }, [t]);

  // Active section tracker via IntersectionObserver
  const [active, setActive] = useState("overview");
  useEffect(() => {
    const ids = t.toc.map(([id]) => id);
    const els = ids.map(id => document.getElementById(id)).filter(Boolean);
    if (!els.length) return;
    const obs = new IntersectionObserver((entries) => {
      const visible = entries
        .filter(e => e.isIntersecting)
        .sort((a, b) => a.target.getBoundingClientRect().top - b.target.getBoundingClientRect().top);
      if (visible[0]) setActive(visible[0].target.id);
    }, { rootMargin: "-25% 0px -55% 0px", threshold: [0, 0.2, 0.6] });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, [t]);

  const onJump = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 92;
    window.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
  };

  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} />

      <Hero t={t} />

      <div className="page-grid">
        <aside className="sidebar">
          <TOC t={t} active={active} onJump={onJump} />
        </aside>

        <main className="main">
          <StepBlock
            id="github" n={1} t={t}
            data={t.steps.github}
            screenshotSlot={
              <ScreenshotPair>
                <ScreenshotSlot id="ss-github-invite" label="GitHub invite email" t={t} aspect="726/1040" fit="contain" src="screenshots/github-invite-email.png" />
                <ScreenshotSlot id="ss-github-people" label="Milton-Group → People (your row should appear here)" t={t} aspect="16/9" fit="contain" src="screenshots/github-milton-people.png" />
              </ScreenshotPair>
            }
          >
            <Callout kind="warn" title={t.steps.github.warningTitle}>{t.steps.github.warning}</Callout>
          </StepBlock>

          <StepBlock
            id="signin" n={2} t={t}
            data={t.steps.signin}
            screenshotSlot={
              <ScreenshotPair>
                <ScreenshotSlot id="ss-signin-page" label="Coder sign-in page" t={t} aspect="16/9" fit="contain" src="screenshots/coder-signin.png" />
                <ScreenshotSlot id="ss-signin-empty" label="Empty dashboard after first login" t={t} aspect="16/9" fit="contain" src="screenshots/coder-empty-workspace.png" />
              </ScreenshotPair>
            }
          >
            <Callout kind="warn" title={t.steps.signin.warningTitle}>{t.steps.signin.warning}</Callout>
          </StepBlock>

          <StepBlock
            id="create" n={3} t={t}
            data={t.steps.create}
            screenshotSlot={
              <ScreenshotPair>
                <ScreenshotSlot id="ss-create-form" label="Create Workspace form" t={t} aspect="16/9" fit="contain" src="screenshots/coder-create-workspace.png" />
                <ScreenshotSlot id="ss-create-running" label="Workspace in Running state" t={t} aspect="16/9" fit="contain" src="screenshots/coder-workspace-running.png" />
              </ScreenshotPair>
            }
          >
            <Callout kind="tip" title={t.steps.create.tipTitle}>{t.steps.create.tip}</Callout>
          </StepBlock>

          <StepBlock
            id="firstrun" n={4} t={t}
            data={t.steps.firstrun}
            screenshotSlot={<ScreenshotSlot id="ss-firstrun" label={t.steps.firstrun.screenshot} t={t} aspect="16/9" fit="contain" src="screenshots/step-4-1password-signin.png" />}
          >
            <Callout kind="tip"  title={t.steps.firstrun.tipTitle}>{t.steps.firstrun.tip}</Callout>
            <Callout kind="warn" title={t.steps.firstrun.warningTitle}>{t.steps.firstrun.warning}</Callout>
          </StepBlock>

          <StepBlock
            id="outlook" n={5} t={t}
            data={t.steps.outlook}
            screenshotSlot={<ScreenshotSlot id="ss-outlook" label={t.steps.outlook.screenshot} t={t} aspect="16/9" fit="contain" src="screenshots/step-5-outlook-inbox.png" />}
          />

          <StepBlock
            id="claudeai" n={6} t={t}
            data={t.steps.claudeai}
            screenshotSlot={
              <ScreenshotPair>
                <ScreenshotSlot id="ss-claudeai-login" label="claude.ai login — sign in with your @almalabs.app email" t={t} aspect="16/9" fit="contain" src="screenshots/step-6-claudeai-login.png" />
                <ScreenshotSlot id="ss-claudeai-signedin" label="Signed in — confirm the workspace switcher shows almalabs" t={t} aspect="16/9" fit="contain" src="screenshots/step-6-claudeai-signedin.png" />
              </ScreenshotPair>
            }
          />

          <StepBlock
            id="claudecode" n={7} t={t}
            data={t.steps.claudecode}
            screenshotSlot={
              <ScreenshotPair>
                <ScreenshotSlot id="ss-claudecode-prompt" label="`claude` running — auth URL printed and code pasted at the prompt" t={t} aspect="16/9" fit="contain" src="screenshots/step-7-claude-login-prompt.png" />
                <ScreenshotSlot id="ss-claudecode-signedin" label="Signed in — Claude Code prompt with Sonnet 4.6 · Claude Team" t={t} aspect="16/9" fit="contain" src="screenshots/step-7-claude-signed-in.png" />
              </ScreenshotPair>
            }
          >
            <Callout kind="warn" title={t.ui.callout_warning}>{t.steps.claudecode.warning}</Callout>
            <Callout kind="tip" title={t.ui.callout_tip}>{t.steps.claudecode.bottomTip}</Callout>
            <div className="trouble-mini">
              <Cmd lines={t.steps.claudecode.wrongUserCmd.split("\n")} t={t} />
            </div>
          </StepBlock>

          <StepBlock
            id="linear" n={8} t={t}
            data={t.steps.linear}
          />

          <ToolsBlock t={t} />
          <SavingBlock t={t} />
          <GhBlock t={t} />
          <WorkflowBlock t={t} />
          <RulesBlock t={t} />
          <CheatsheetBlock t={t} />
          <SetupBlock t={t} />

          <DailyBlock t={t} />
          <StopBlock t={t} />
          <TroubleBlock t={t} />
          <DontsBlock t={t} />
          <ContactsBlock t={t} />
        </main>
      </div>
    </>
  );
}

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