/* ============================================================
   Fynch AI — workshop4.jsx  (slides 29–31)
   Build / Buy / Hybrid matrix + the iceberg.
   Reads/writes FynchStore.ws4.votes (host pid 'host').
   ============================================================ */
(function () {
  const SEED = window.FYNCH_SEED;
  const OPTS = SEED.VOTE_OPTS; // Build, Buy, Hybrid, Not needed, Unknown
  const OPT_CLS = { Build: "build", Buy: "buy", Hybrid: "hybrid", "Not needed": "none", Unknown: "unk" };
  const SHORT = { Build: "Bld", Buy: "Buy", Hybrid: "Hyb", "Not needed": "N/A", Unknown: "?" };

  /* ---- Slide 29 — intro ---- */
  function Intro4() {
    return (
      <div className="slide-pad" style={{ justifyContent: "center" }}>
        <div className="ws-badge" data-rise style={{ color: "var(--brand-300)", marginBottom: 22 }}><span className="num">4</span>WORKSHOP FOUR</div>
        <h2 className="slide-h2" data-rise style={{ "--i": 1, fontSize: 64 }}>Build, buy, or hybrid.</h2>
        <p className="lead" data-rise style={{ "--i": 2, marginTop: 18, fontSize: 27, maxWidth: 1200 }}>The AI strategy question becomes an operating-layer decision. For each layer: built internally, bought, hybrid, not needed, or unknown.</p>
        <div data-rise style={{ "--i": 3, marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap", maxWidth: 1400 }}>
          {SEED.LAYERS.slice(0, 12).map((l) => (
            <span key={l.id} style={{ fontSize: 16, color: "#c4cfdf", border: "1px solid var(--navy-line)", background: "rgba(255,255,255,.03)", padding: "8px 14px", borderRadius: 8 }}>{l.layer}</span>
          ))}
          <span style={{ fontSize: 16, color: "#5b6b86", padding: "8px 6px" }}>+ {SEED.LAYERS.length - 12} more</span>
        </div>
        <Foot no={29} section="Build / Buy" />
      </div>
    );
  }

  /* ---- Slide 30 — matrix ---- */
  function Matrix() {
    const store = useStore();
    const locked = FynchStore.isLocked("ws4");
    const layers = SEED.LAYERS;
    function setHost(layerId, opt) { if (!locked) FynchStore.ws4Vote("host", layerId, opt); }
    const owned = layers.filter((l) => { const t = FynchStore.agg.ws4Tally(store, l.id); const top = Object.entries(t).sort((a, b) => b[1] - a[1])[0]; return top && top[1] > 0 && (top[0] === "Build" || top[0] === "Hybrid"); });
    const months = owned.reduce((s, l) => s + (l.complexity === "high" ? 6 : l.complexity === "med" ? 3 : 1), 0);
    const fte = owned.reduce((s, l) => s + (l.complexity === "high" ? 2 : l.complexity === "med" ? 1 : 0.5), 0);
    return (
      <div className="slide-pad">
        <div className="ws" style={{ gap: 14 }}>
          <WsHeader n="4" wsKey="ws4" title="Which layers should you own?" sub="An ownership decision, not a sales pitch — build is a valid answer. The room votes per layer on their phones."
            right={<div style={{ display: "flex", gap: 14, fontSize: 14, color: "var(--ink-500)" }}>{[["Low", "weeks"], ["Med", "quarters"], ["High", "ongoing"]].map(([a, b]) => <span key={a}><b style={{ color: "var(--ink-800)" }}>{a}</b> {b}</span>)}</div>} />
          <div className="cols grow" style={{ gridTemplateColumns: "1fr 332px", gap: 28, alignItems: "stretch", minHeight: 0 }}>
            <Reveal variant="up" delay={120} className="matrix-tbl" style={{ overflow: "auto", border: "1px solid var(--line-200)", borderRadius: 8, background: "var(--surface)" }}>
            <table>
              <thead>
                <tr><th className="rowhead" style={{ textAlign: "left" }}>Layer</th><th>Your vote</th><th>Room distribution</th><th>Strategic</th><th>Complexity</th></tr>
              </thead>
              <tbody>
                {layers.map((l) => {
                  const tally = FynchStore.agg.ws4Tally(store, l.id);
                  const total = Object.values(tally).reduce((a, b) => a + b, 0);
                  const hostVote = store.ws4.votes.host && store.ws4.votes.host[l.id];
                  return (
                    <tr key={l.id}>
                      <td className="layer">{l.layer}</td>
                      <td>
                        <div className="hv-pick">{OPTS.map((o) => <button key={o} className={"hv-btn" + (hostVote === o ? " on " + OPT_CLS[o] : "")} disabled={locked} onClick={() => setHost(l.id, o)} title={o}>{SHORT[o]}</button>)}</div>
                      </td>
                      <td>
                        <div className="dist-bar">
                          {total === 0 ? <span className="dist-empty">no votes yet</span> : OPTS.map((o) => tally[o] > 0 && <span key={o} className={"ds " + OPT_CLS[o]} style={{ width: (tally[o] / total) * 100 + "%" }} title={o + ": " + tally[o]}>{tally[o] / total > 0.12 ? tally[o] : ""}</span>)}
                        </div>
                      </td>
                      <td style={{ textAlign: "center" }}><span className="conf-pip">{[1, 2, 3, 4, 5].map((p) => <span key={p} className={"p" + (l.strategic >= p ? " on" : "")}></span>)}</span></td>
                      <td style={{ textAlign: "center" }}><span className={"complexity-band cb-" + l.complexity}>{l.complexity === "low" ? "Low" : l.complexity === "med" ? "Med" : "High"}</span></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            </Reveal>
            <div className="stack" style={{ gap: 18 }}>
              <QRJoin />
              <Reveal variant="right" delay={200} className="card" style={{ padding: "20px 22px", flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: 14 }}>
                <div><span className="bignum" style={{ fontSize: 56, color: "var(--brand-600)" }}><CountUp to={Object.keys(store.ws4.votes).filter((k) => k !== "host").length} /></span><div style={{ fontSize: 17, color: "var(--ink-500)" }}>participants voted</div></div>
                <div className="stack" style={{ gap: 8 }}>
                  <span className="label-meta">Vote key</span>
                  {[["Build", "build"], ["Buy", "buy"], ["Hybrid", "hybrid"], ["Not needed", "none"], ["Unknown", "unk"]].map(([o, c]) => (
                    <div key={o} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 15, color: "var(--ink-600)" }}><span className={"vf " + c} style={{ width: 22, height: 12, borderRadius: 3, display: "inline-block" }}></span>{o}</div>
                  ))}
                </div>
                <div style={{ marginTop: 4, paddingTop: 14, borderTop: "1px solid var(--line-200)" }}>
                  <span className="label-meta">If you owned the leaning layers</span>
                  <div style={{ display: "flex", gap: 18, marginTop: 8 }}>
                    <div><div style={{ fontSize: 30, fontWeight: 600, fontVariantNumeric: "tabular-nums", letterSpacing: "-.02em" }}>{owned.length ? Math.round(months * 0.6) + "–" + months : "—"}</div><div style={{ fontSize: 13, color: "var(--ink-500)" }}>months (parallelized)</div></div>
                    <div><div style={{ fontSize: 30, fontWeight: 600, fontVariantNumeric: "tabular-nums", letterSpacing: "-.02em" }}>{owned.length ? Math.ceil(fte * 0.7) + "–" + Math.ceil(fte) : "—"}</div><div style={{ fontSize: 13, color: "var(--ink-500)" }}>FTE est.</div></div>
                  </div>
                  <div style={{ fontSize: 12, color: "var(--ink-400)", fontFamily: "var(--font-mono)", marginTop: 6 }}>{owned.length} layers · illustrative, validate in follow-up</div>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
        <Foot no={30} section="Build / Buy" />
      </div>
    );
  }

  /* ---- Slide 31 — the iceberg ---- */
  const ABOVE = ["Chat with documents", "Extraction demo", "Memo draft"];
  const BELOW = ["CRE fact schema", "Evidence model", "Review workflow", "Extraction evaluation", "Permissions & security", "Policy engine", "Template governance", "Audit & lineage", "Monitoring & support", "Long-term maintenance"];
  const NEEDS = ["Product owner", "Underwriting domain owner", "Engineering team", "Document pipeline", "Extraction evaluation", "CRE fact model", "Evidence architecture", "Review workflows", "Policy configuration", "Template governance", "Permissions & security", "Monitoring & support", "Change management", "Long-term maintenance"];
  function Iceberg() {
    return (
      <div className="slide-pad">
        <SlideHead kicker="Workshop 4 · reframe" h2="The model call is the small part." />
        <div className="cols c2-wide-l grow" style={{ alignItems: "stretch" }}>
          <div className="iceberg" data-rise>
            <div className="ice-zone above"><div className="zlabel">Above the water — the demo</div>{ABOVE.map((c) => <span key={c} className="ice-chip">{c}</span>)}</div>
            <div className="waterline"><span className="lbl">WATERLINE</span></div>
            <div className="ice-zone below"><div className="zlabel">Below — the operating layer</div>{BELOW.map((c) => <span key={c} className="ice-chip">{c}</span>)}</div>
          </div>
          <div className="card pad" data-rise style={{ "--i": 1, display: "flex", flexDirection: "column" }}>
            <div className="label-meta" style={{ marginBottom: 14 }}>A serious internal build owns</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "9px 20px" }}>
              {NEEDS.map((t) => <div key={t} style={{ display: "flex", gap: 9, alignItems: "center", fontSize: 15, color: "var(--ink-700)" }}><span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--brand-500)", flex: "0 0 auto" }}></span>{t}</div>)}
            </div>
            <div style={{ marginTop: "auto", paddingTop: 20, fontSize: 17, color: "var(--ink-600)", lineHeight: 1.5 }}>
              Not "you can't build it." This is the <b>scope any serious internal build would own.</b>
            </div>
          </div>
        </div>
        <Foot no={31} section="Build / Buy" />
      </div>
    );
  }

  window.registerSlides([
    { no: 29, section: "Build / Buy", dark: true, Comp: Intro4 },
    { no: 30, section: "Build / Buy", ws: "ws4", Comp: Matrix },
    { no: 31, section: "Build / Buy", Comp: Iceberg },
  ]);
})();