// Beat renderers — one per direction, each split into a .beat-lead (text) and
// .beat-aside (feature) zone. On phone widths the zones are display:contents
// (so the column layout is unchanged); on desktop they become two columns and
// the card reads as a wide landscape slide.

/* =========================================================
   DIRECTION A — FINDINGS
   ========================================================= */

function FindingsBeat({ beat, mascotsEnabled }) {
  switch (beat.type) {
    case "open":return <FindingsOpen beat={beat} mascotsEnabled={mascotsEnabled} />;
    case "frame":return <FindingsFrame beat={beat} />;
    case "stat":return <FindingsStat beat={beat} />;
    case "chart":return <FindingsChart beat={beat} />;
    case "compare":return <FindingsCompare beat={beat} />;
    case "quote":return <FindingsQuote beat={beat} />;
    case "list":return <FindingsList beat={beat} />;
    case "close":return <FindingsClose beat={beat} mascotsEnabled={mascotsEnabled} />;
    case "explore":return <ExploreBeat beat={beat} />;
    case "scenario":return <ScenarioBeat beat={beat} />;
    case "walker":return <WalkerBeat beat={beat} />;
    case "visual":return <VisualBeat beat={beat} />;
    case "fanout":return <FanOutBeat beat={beat} />;
    case "passage":return <PassageBeat beat={beat} />;
    case "centroid":return <CentroidBeat beat={beat} />;
    case "graph":return <GraphBeat beat={beat} />;
    case "influencemap":return <InfluenceMapBeat beat={beat} />;
    case "distribute":return <DistributeBeat beat={beat} />;
    default:return null;
  }
}

function MomoMascot({ variant = "main", className = "mascot" }) {
  switch (variant) {
    case "main":return <img className={className} src="assets/momo-main.svg" alt="" />;
    case "secondary":return <img className={className} src="assets/momo-secondary.svg" alt="" />;
    case "intro":return <img className={className} src="assets/momo-intro.svg" alt="" />;
    case "proposal":return <img className={className} src="assets/momo-proposal.svg" alt="" />;
    case "kickoff":return <img className={className} src="assets/momo-kickoff.svg" alt="" />;
    case "discover":return <img className={className} src="assets/momo-discover.svg" alt="" />;
    default:return <img className={className} src="assets/momo-main.svg" alt="" />;
  }
}

function FindingsOpen({ beat, mascotsEnabled }) {
  return (
    <div className="beat beat-open">
      <div className="beat-lead">
        <div className="open-title-col">
          <div className="beat-eyebrow">{beat.eyebrow}</div>
          <h1 className="beat-title">{beat.title}</h1>
        </div>
        <p className="beat-body">{beat.body}</p>
      </div>
      <div className="beat-aside open-aside">
        {mascotsEnabled && beat.mascot ? <MomoMascot variant={beat.mascot} className="open-mascot" /> : null}
      </div>
    </div>);

}

function FindingsFrame({ beat }) {
  return (
    <div className="beat beat-frame no-aside">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="beat-body">{beat.body}</p>
      </div>
    </div>);

}

function FindingsStat({ beat }) {
  const { stat, supports, source } = beat;
  return (
    <div className="beat beat-stat">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title" style={{ fontSize: 30, maxWidth: "20ch" }}>{beat.title}</h2>
        <p className="beat-body" style={{ marginTop: 18, fontSize: 14 }}>{beat.body}</p>
        {source ? <div className="beat-source">{source}</div> : null}
      </div>
      <div className="beat-aside">
        <BigStat value={stat.number} suffix={stat.suffix} />
        {stat.caption ? <div className="stat-caption">{stat.caption}</div> : null}
        {supports ?
        <div className="stat-supports">
            {supports.map((s, i) =>
          <div className="stat-support" key={i}>
                <div className="v">{s.value}{s.unit || ""}</div>
                <div className="l">{s.label}</div>
              </div>
          )}
          </div> :
        null}
      </div>
    </div>);

}

function FindingsChart({ beat }) {
  return (
    <div className="beat beat-chart">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="beat-body" style={{ fontSize: 14 }}>{beat.body}</p>
        {beat.source ? <div className="beat-source">{beat.source}</div> : null}
      </div>
      <div className="beat-aside">
        <div className="chart-wrap">
          <BarsChart series={beat.chart.series} max={beat.chart.max} unit={beat.chart.unit} />
        </div>
      </div>
    </div>);

}

function FindingsCompare({ beat }) {
  const { left, right } = beat.compare;
  return (
    <div className="beat beat-compare">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="beat-body" style={{ fontSize: 14, marginTop: 18 }}>{beat.body}</p>
        {beat.source ? <div className="beat-source">{beat.source}</div> : null}
      </div>
      <div className="beat-aside">
        <div className="compare-pair">
          <div className="compare-cell">
            <div className="label">{left.label}</div>
            <div className="value">{left.value}</div>
            <p className="cap">{left.caption}</p>
          </div>
          <div className="compare-cell">
            <div className="label">{right.label}</div>
            <div className="value">{right.value}</div>
            <p className="cap">{right.caption}</p>
          </div>
        </div>
      </div>
    </div>);

}

function FindingsQuote({ beat }) {
  return (
    <div className="beat beat-quote no-aside">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">“{beat.title}”</h2>
        <p className="beat-body">{beat.body}</p>
        <div className="attribution">— {beat.attribution}</div>
      </div>
    </div>);

}

function FindingsList({ beat }) {
  return (
    <div className="beat beat-list">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
      </div>
      <div className="beat-aside">
        <div className="list-items">
          {beat.items.map((it, i) =>
          <div className="list-item" key={i}>
              <div className="n">0{i + 1}</div>
              <div>{it}</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function FindingsClose({ beat, mascotsEnabled }) {
  return (
    <div className="beat beat-close">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="beat-body">{beat.body}</p>
        <div className="cta-row">
          <a className="cta" href={beat.cta?.href} target="_top">{beat.cta?.label} <span>↗</span></a>
        </div>
      </div>
      <div className="beat-aside close-aside">
        {mascotsEnabled && beat.mascot ? <MomoMascot variant={beat.mascot} className="close-mascot" /> : <span />}
      </div>
    </div>);

}

/* =========================================================
   DIRECTION B — NOTEBOOK
   ========================================================= */

function NotebookBeat({ beat, mascotsEnabled }) {
  switch (beat.type) {
    case "open":return <NotebookOpen beat={beat} mascotsEnabled={mascotsEnabled} />;
    case "frame":return <NotebookFrame beat={beat} />;
    case "stat":return <NotebookStat beat={beat} />;
    case "chart":return <NotebookChart beat={beat} />;
    case "compare":return <NotebookCompare beat={beat} />;
    case "quote":return <NotebookQuote beat={beat} />;
    case "list":return <NotebookList beat={beat} />;
    case "close":return <NotebookClose beat={beat} mascotsEnabled={mascotsEnabled} />;
    case "explore":return <ExploreBeat beat={beat} />;
    case "scenario":return <ScenarioBeat beat={beat} />;
    case "walker":return <WalkerBeat beat={beat} />;
    case "visual":return <VisualBeat beat={beat} />;
    case "fanout":return <FanOutBeat beat={beat} />;
    case "passage":return <PassageBeat beat={beat} />;
    case "centroid":return <CentroidBeat beat={beat} />;
    case "graph":return <GraphBeat beat={beat} />;
    case "influencemap":return <InfluenceMapBeat beat={beat} />;
    case "distribute":return <DistributeBeat beat={beat} />;
    default:return null;
  }
}

function NotebookOpen({ beat, mascotsEnabled }) {
  const meta = window.STORY_DATA?.meta || {};
  return (
    <div className="beat beat-open">
      <div className="beat-lead">
        <div className="open-title-col">
          <div className="beat-eyebrow">{beat.eyebrow}</div>
          <h1 className="beat-title">{beat.title}</h1>
        </div>
        <p className="beat-body">{beat.body}</p>
        <div className="meta-block">
          <div><div className="lbl">Edition</div><div className="val">{meta.year}</div></div>
          <div><div className="lbl">Author</div><div className="val">{meta.author}</div></div>
          <div><div className="lbl">EXPERIENCE TIME</div><div className="val">~8 minutes</div></div>
          <div><div className="lbl">NOTABLE ITEMS</div><div className="val">{(window.STORY_DATA?.beats?.length || 0) - 2}</div></div>
        </div>
      </div>
      <div className="beat-aside open-aside" style={{ width: "260px", alignItems: "center" }}>
        {mascotsEnabled && beat.mascot ? <MomoMascot variant={beat.mascot} className="open-mascot" /> : null}
      </div>
    </div>);

}

function NotebookFrame({ beat }) {
  return (
    <div className="beat beat-frame no-aside">
      <div className="beat-lead" style={{ width: "1200px" }}>
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="beat-body">{beat.body}</p>
      </div>
    </div>);

}

function NotebookStat({ beat }) {
  return (
    <div className="beat beat-stat">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="beat-body">{beat.body}</p>
        {beat.source ? <div className="beat-source">{beat.source}</div> : null}
      </div>
      <div className="beat-aside">
        <div className="stat-grid">
          <div><BigStat value={beat.stat.number} suffix={beat.stat.suffix} /></div>
          <div>
            <div className="stat-caption">{beat.stat.caption}</div>
            {beat.supports ?
            <div style={{ marginTop: 12 }}>
                {beat.supports.map((s, i) =>
              <div className="stat-support-row" key={i}>
                    <span>{s.label}</span>
                    <span className="v">{s.value}{s.unit || ""}</span>
                  </div>
              )}
              </div> :
            null}
          </div>
        </div>
      </div>
    </div>);

}

function NotebookChart({ beat }) {
  return (
    <div className="beat beat-chart">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="beat-body">{beat.body}</p>
        {beat.source ? <div className="beat-source">{beat.source}</div> : null}
      </div>
      <div className="beat-aside">
        <div className="chart-wrap">
          <BarsChart series={beat.chart.series} max={beat.chart.max} unit={beat.chart.unit} />
        </div>
      </div>
    </div>);

}

function NotebookCompare({ beat }) {
  const { left, right } = beat.compare;
  return (
    <div className="beat beat-compare">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="beat-body">{beat.body}</p>
        {beat.source ? <div className="beat-source">{beat.source}</div> : null}
      </div>
      <div className="beat-aside">
        <div className="compare-pair">
          <div className="compare-cell">
            <div className="label">{left.label}</div>
            <div className="value">{left.value}</div>
            <p className="cap">{left.caption}</p>
          </div>
          <div className="compare-cell">
            <div className="label">{right.label}</div>
            <div className="value">{right.value}</div>
            <p className="cap">{right.caption}</p>
          </div>
        </div>
      </div>
    </div>);

}

function NotebookQuote({ beat }) {
  return (
    <div className="beat beat-quote no-aside">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">“{beat.title}”</h2>
        <p className="beat-body">{beat.body}</p>
        <div className="attribution">— {beat.attribution}</div>
      </div>
    </div>);

}

function NotebookList({ beat }) {
  return (
    <div className="beat beat-list">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
      </div>
      <div className="beat-aside">
        <div className="list-items">
          {beat.items.map((it, i) =>
          <div className="list-item" key={i}>
              <div className="n">0{i + 1}</div>
              <div>{it}</div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function NotebookClose({ beat, mascotsEnabled }) {
  return (
    <div className="beat beat-close">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="beat-body">{beat.body}</p>
        <div className="cta-row">
          <a className="cta" href={beat.cta?.href} target="_top">{beat.cta?.label} <span>↗</span></a>
        </div>
      </div>
      <div className="beat-aside close-aside">
        {mascotsEnabled && beat.mascot ? <MomoMascot variant={beat.mascot} className="close-mascot" /> : <span />}
      </div>
    </div>);

}

/* =========================================================
   INTERACTIVE BEATS (shared by both directions)
   ========================================================= */

const { useState: useStateInt } = React;

function ExploreBeat({ beat }) {
  const opts = beat.explore.options;
  const [pick, setPick] = useStateInt(beat.explore.defaultIndex ?? 0);
  const current = opts[pick];
  return (
    <div className="beat beat-explore">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="explore-explain">{beat.body}</p>
        {beat.source ? <div className="beat-source">{beat.source}</div> : null}
      </div>
      <div className="beat-aside">
        <div className="explore-chips">
          {opts.map((o, i) =>
          <button key={o.label} className={"explore-chip " + (i === pick ? "active" : "")} onClick={() => setPick(i)}>{o.label}</button>
          )}
        </div>
        <div className="explore-readout">
          <span className="stat-big" key={pick}>{current.value}{current.unit || ""}</span>
          <p className="readout-cap">{current.caption}</p>
        </div>
      </div>
    </div>);

}

function ScenarioBeat({ beat }) {
  const sc = beat.scenario;
  const [v, setV] = useStateInt(sc.default ?? sc.min);
  const outputs = sc.outputs.map((o) => ({ label: o.label, value: o.compute(v), unit: o.unit || "" }));
  return (
    <div className="beat beat-scenario">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <p className="explore-explain">{beat.body}</p>
        {beat.source ? <div className="beat-source">{beat.source}</div> : null}
      </div>
      <div className="beat-aside">
        <div className="scenario-slider">
          <div className="scenario-meta"><span>{sc.label}</span><span className="v">{v}{sc.unit || ""}</span></div>
          <input type="range" min={sc.min} max={sc.max} step={sc.step || 1} value={v} onChange={(e) => setV(Number(e.target.value))} />
        </div>
        <div className="scenario-output">
          {outputs.map((o, i) =>
          <div className="cell" key={i}><div className="l">{o.label}</div><div className="v">{o.value}{o.unit}</div></div>
          )}
        </div>
      </div>
    </div>);

}

function WalkerBeat({ beat }) {
  const w = beat.walker;
  const branchKeys = Object.keys(w.branches);
  const [branch, setBranch] = useStateInt(w.default || branchKeys[0]);
  const [i, setI] = useStateInt(0);
  const seq = [...w.shared, ...w.branches[branch].steps];
  const n = seq.length;
  const idx = Math.min(i, n - 1);
  const cur = seq[idx];
  const inShared = idx < w.shared.length;
  const phase = inShared ? "Retrieval · shared by both" : w.branches[branch].label + " path";
  const pad = (x) => String(x).padStart(2, "0");
  const switchBranch = (b) => {setBranch(b);setI((p) => Math.min(p, w.shared.length + w.branches[b].steps.length - 1));};
  return (
    <div className="beat beat-walker">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title">{beat.title}</h2>
        <div className="walker-tabs">
          {branchKeys.map((k) =>
          <button key={k} className={"walker-tab " + (branch === k ? "on" : "")} onClick={() => switchBranch(k)}>
              {w.branches[k].label}
            </button>
          )}
        </div>
        <div className="walker-count">Step {pad(idx + 1)} <span>/ {n}</span></div>
        <div className="walker-segs">
          {seq.map((s, k) =>
          <div key={k} className={"walker-seg " + (k <= idx ? "done " : "") + (k >= w.shared.length ? "branch" : "shared") + (k === w.shared.length ? " fork" : "")} />
          )}
        </div>
      </div>
      <div className="beat-aside">
        <div className="walker-body">
          <div className="walker-step-num">{phase}</div>
          <h3 className="walker-step-title">{cur.title}</h3>
          <p className="walker-step-body">{cur.body}</p>
        </div>
        <div className="walker-nav">
          <button className="walker-back" onClick={() => setI(Math.max(0, idx - 1))} disabled={idx === 0}>← Back</button>
          <button className="walker-next" onClick={() => setI(Math.min(n - 1, idx + 1))} disabled={idx === n - 1}>
            {idx === n - 1 ? branch === "ai" ? "Answer sent" : "Links sent" : "Next step"} <span>→</span>
          </button>
        </div>
      </div>
    </div>);

}

Object.assign(window, { FindingsBeat, NotebookBeat, ExploreBeat, ScenarioBeat, WalkerBeat });