/* ============================================================
   Fynch AI — workshop5.jsx  (slides 32–34)
   ROI / capacity calculator + pilot scope.
   Reads/writes FynchStore.ws5.
   ============================================================ */
(function () {
  const SEED = window.FYNCH_SEED;
  const SCN = SEED.ROI_SCENARIOS;

  function compute(v) {
    const annual = v.dealsScreened * v.hrsScreen + v.dealsUnderwritten * (v.hrsUnderwrite + v.hrsSeniorReview + v.hrsMemo + v.hrsRework);
    const cats = {
      triage: v.dealsScreened * v.hrsScreen * 0.6,
      extraction: v.dealsUnderwritten * v.hrsUnderwrite * 0.4,
      memo: v.dealsUnderwritten * v.hrsMemo * 0.6,
      rework: v.dealsUnderwritten * v.hrsRework * 0.8,
    };
    const addressable = cats.triage + cats.extraction + cats.memo + cats.rework;
    const factor = SCN[v.scenario] || SCN.base;
    const saved = Math.round(addressable * factor);
    return {
      annual: Math.round(annual),
      saved,
      fte: (saved / 1800).toFixed(1),
      cycle: Math.round(factor * 70),
      addlDeals: Math.round(saved / Math.max(v.hrsScreen, 1)),
      value: Math.round(saved * v.loadedCost),
      byCat: Object.fromEntries(Object.entries(cats).map(([k, h]) => [k, Math.round(h * factor)])),
    };
  }

  const FIELDS = [
    ["dealsScreened", "Deals screened / year", "", 0, 600, 10], ["dealsUnderwritten", "Deals fully underwritten / year", "", 0, 250, 5],
    ["hrsScreen", "Analyst hrs / initial screen", "hrs", 1, 24, 1], ["hrsUnderwrite", "Analyst hrs / full underwriting", "hrs", 4, 120, 2],
    ["hrsSeniorReview", "Senior review hrs / deal", "hrs", 0, 40, 1], ["hrsMemo", "Memo creation hrs / deal", "hrs", 0, 40, 1],
    ["hrsRework", "Rework hrs / deal", "hrs", 0, 30, 1], ["loadedCost", "Avg loaded cost / hour", "$", 50, 500, 5],
  ];

  /* ---- Slide 32 — ROI starts with friction ---- */
  const BUCKETS = ["Faster document triage", "Less manual data entry", "Faster missing-item detection", "Less rework", "Earlier policy screening", "Faster quote readiness", "Faster memo creation", "Better senior review leverage", "More deals screened, same team"];
  function RoiIntro() {
    const store = useStore();
    const top = store.ws1.stages.map((st) => ({ st, sc: FynchStore.agg.ws2StageScore(store, st.id) })).filter((x) => x.sc > 0).sort((a, b) => b.sc - a.sc).slice(0, 5);
    return (
      <div className="slide-pad">
        <SlideHead kicker="ROI & pilot" h2="ROI starts with the friction you identified." sub="We model the highest-friction areas — using your numbers, not invented ones." />
        <div className="cols c2 grow" style={{ alignItems: "stretch" }}>
          <div className="card pad" data-rise>
            <div className="label-meta" style={{ marginBottom: 16 }}>Your top friction (from Workshop 2)</div>
            {top.length === 0 ? <div className="muted" style={{ fontSize: 16 }}>Score the heatmap and these populate from the room's votes.</div> : (
              <div className="stack" style={{ gap: 12 }}>
                {top.map((x, i) => (
                  <div key={x.st.id} style={{ display: "flex", alignItems: "center", gap: 14 }}>
                    <span className="numbadge" style={{ width: 32, height: 32, fontSize: 15 }}>{i + 1}</span>
                    <span style={{ fontSize: 18, fontWeight: 600 }}>{x.st.name}</span>
                    <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", color: "var(--brand-600)", fontWeight: 600 }}>{x.sc.toFixed(1)}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
          <div className="card pad" data-rise style={{ "--i": 1 }}>
            <div className="label-meta" style={{ marginBottom: 16 }}>Value buckets we can model</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "11px 20px" }}>
              {BUCKETS.map((b) => <div key={b} style={{ display: "flex", gap: 9, alignItems: "center", fontSize: 16, color: "var(--ink-700)" }}><Icon name="check" size={16} style={{ color: "var(--approved-fg)" }} />{b}</div>)}
            </div>
          </div>
        </div>
        <Foot no={32} section="ROI & pilot" />
      </div>
    );
  }

  /* ---- Slide 33 — capacity calculator ---- */
  function Calculator() {
    const store = useStore();
    const locked = FynchStore.isLocked("ws5");
    const v = store.ws5;
    const r = compute(v);
    function set(k, val) { FynchStore.update((s) => { s.ws5[k] = val; }); }
    return (
      <div className="slide-pad">
        <div className="ws" style={{ gap: 16 }}>
          <WsHeader n="5" wsKey="ws5" title="Underwriting capacity model" sub="Every input is an assumption to validate against one real deal — enter ranges you believe"
            right={<div className="scenario-tabs">{["conservative", "base", "aggressive"].map((s) => <button key={s} className={v.scenario === s ? "on" : ""} onClick={() => set("scenario", s)}>{s[0].toUpperCase() + s.slice(1)}</button>)}</div>} />
          <div className="cols c2" style={{ flex: 1, gap: 40, alignItems: "stretch", minHeight: 0 }}>
            <div data-rise>
              <div className="label-meta" style={{ marginBottom: 14 }}>Your assumptions — drag to set ranges you believe</div>
              <div className="roi-form">
                {FIELDS.map(([k, label, unit, min, max, step]) => {
                  const val = v[k]; const pct = ((val - min) / (max - min)) * 100;
                  return (
                    <div key={k} className="roi-srow">
                      <div className="rl"><span className="nm">{label}</span><span className="vv">{unit === "$" ? "$" : ""}{val.toLocaleString()}{unit && unit !== "$" ? " " + unit : ""}</span></div>
                      <input className="roi-range" type="range" min={min} max={max} step={step} value={val} disabled={locked}
                        onChange={(e) => set(k, parseFloat(e.target.value))}
                        style={{ background: `linear-gradient(90deg, var(--brand-500) ${pct}%, var(--line-200) ${pct}%)` }} />
                      <div className="roi-cap"><span>{unit === "$" ? "$" + min : min}</span><span>{unit === "$" ? "$" + max : max}{unit && unit !== "$" ? " " + unit : ""}</span></div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="roi-out" data-rise style={{ "--i": 1 }}>
              <div className="roi-metric hero"><span className="ml">Potential analyst hours released / year</span><span className="mv">{r.saved.toLocaleString()}</span></div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div className="roi-metric"><span className="ml">Annual UW hours</span><span className="mv" style={{ fontSize: 24 }}>{r.annual.toLocaleString()}</span></div>
                <div className="roi-metric"><span className="ml">Capacity released</span><span className="mv" style={{ fontSize: 24 }}>{r.fte} FTE</span></div>
                <div className="roi-metric"><span className="ml">Added screening capacity</span><span className="mv" style={{ fontSize: 24 }}>+{r.addlDeals}</span></div>
                <div className="roi-metric"><span className="ml">Cycle-time reduction</span><span className="mv" style={{ fontSize: 24 }}>~{r.cycle}%</span></div>
              </div>
              <div className="card" style={{ padding: "16px 20px", flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 10 }}><div className="label-meta">Where the hours come from</div><div style={{ fontSize: 13, color: "var(--ink-400)", fontFamily: "var(--font-mono)" }}>{v.scenario} scenario</div></div>
                {(() => {
                  const cats = [["triage", "Document triage"], ["extraction", "Manual extraction"], ["memo", "Memo prep"], ["rework", "Rework"]];
                  const maxCat = Math.max(...cats.map((c) => r.byCat[c[0]]), 1);
                  return (
                    <div className="roi-bars" style={{ flex: 1 }}>
                      {cats.map(([k, label]) => (
                        <div key={k} className="b">
                          <div className="num tnum">{r.byCat[k].toLocaleString()}</div>
                          <div className="col" style={{ height: (r.byCat[k] / maxCat) * 100 + "%", minHeight: 4, background: "var(--brand-500)" }}></div>
                          <div className="cap">{label}</div>
                        </div>
                      ))}
                    </div>
                  );
                })()}
              </div>
              <div style={{ fontSize: 13, color: "var(--ink-400)", fontFamily: "var(--font-mono)" }}>illustrative · hours-first · ${r.value.toLocaleString()} loaded-cost value · validate on a real package</div>
            </div>
          </div>
        </div>
        <Foot no={33} section="ROI & pilot" />
      </div>
    );
  }

  /* ---- Slide 34 — narrow pilot ---- */
  function PilotScope() {
    const scope = [["One asset class or deal type", "layers"], ["One representative deal package", "doc"], ["Required document checklist", "grid"], ["25–40 priority facts", "shield"], ["Evidence review workflow", "eye"], ["Credit policy constraints", "lock"], ["Screening or credit memo template", "doc"], ["Defined success metrics", "spark"]];
    const metrics = [["Package → initial screen", "time"], ["Package → quote readiness", "time"], ["Required facts extracted", "count"], ["Material facts with evidence", "count"], ["Conflicts surfaced", "count"], ["Memo drafting time", "time"], ["Senior review rework", "time"]];
    const wedge = [["Narrow wedge", "One workflow, one deal type — small enough to finish.", 1], ["Credible proof", "Real package, real facts, measured against your metrics.", 1.5], ["Expansion path", "Extend to more asset classes once the layer is trusted.", 2.1]];
    return (
      <div className="slide-pad">
        <Reveal variant="up"><div className="eyebrow-row" style={{ marginBottom: 8 }}><Kicker>ROI &amp; pilot</Kicker></div></Reveal>
        <Reveal variant="up" delay={70} as="h2" className="slide-h2" style={{ marginBottom: 6 }}>A practical pilot is narrow.</Reveal>
        <Reveal variant="up" delay={130} as="p" className="lead" style={{ marginBottom: 24, fontSize: 24 }}>Don't automate the whole firm — prove the operating layer on one important workflow.</Reveal>
        <div className="stack grow" style={{ gap: 22, minHeight: 0 }}>
          <div className="cols" style={{ gridTemplateColumns: "1fr 1fr", gap: 32, flex: 1, minHeight: 0 }}>
            <Reveal variant="up" delay={170} className="card" style={{ padding: "24px 28px", display: "flex", flexDirection: "column" }}>
              <div className="label-meta" style={{ marginBottom: 18 }}>Pilot scope</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 24px", flex: 1, alignContent: "center" }}>
                {scope.map(([t, ic]) => (
                  <div key={t} style={{ display: "flex", gap: 13, alignItems: "center" }}>
                    <span style={{ width: 40, height: 40, borderRadius: 10, background: "var(--brand-50)", border: "1px solid var(--brand-200)", color: "var(--brand-600)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}><Icon name={ic} size={19} /></span>
                    <span style={{ fontSize: 17, fontWeight: 600, color: "var(--ink-800)", lineHeight: 1.2 }}>{t}</span>
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal variant="up" delay={230} className="card" style={{ padding: "24px 28px", display: "flex", flexDirection: "column" }}>
              <div className="label-meta" style={{ marginBottom: 18 }}>Success metrics — measured on the sample deal</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, flex: 1, alignContent: "center" }}>
                {metrics.map(([t, kind]) => (
                  <div key={t} style={{ display: "flex", flexDirection: "column", gap: 6, padding: "14px 16px", background: "var(--canvas)", border: "1px solid var(--line-200)", borderRadius: 10 }}>
                    <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".5px", textTransform: "uppercase", color: kind === "time" ? "var(--processing-fg)" : "var(--approved-fg)" }}>{kind === "time" ? "Cycle time" : "Coverage"}</span>
                    <span style={{ fontSize: 16, fontWeight: 600, color: "var(--ink-800)", lineHeight: 1.25 }}>{t}</span>
                  </div>
                ))}
                <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "14px 16px", background: "var(--brand-50)", border: "1px solid var(--brand-200)", borderRadius: 10, fontSize: 14, color: "var(--brand-700)", fontWeight: 600, textAlign: "center" }}>Uses the Workshop 3 pilot fact list</div>
              </div>
            </Reveal>
          </div>
          <Reveal variant="up" delay={300} style={{ display: "flex", alignItems: "stretch", gap: 14, height: 168 }}>
            {wedge.map(([t, d, fl], i, a) => (
              <React.Fragment key={t}>
                <div style={{ flex: fl, display: "flex", flexDirection: "column", justifyContent: "center", gap: 8, padding: "0 30px", borderRadius: 12, background: i === 0 ? "var(--canvas)" : i === 1 ? "var(--brand-50)" : "var(--brand-500)", border: "1px solid " + (i === 2 ? "var(--brand-500)" : i === 1 ? "var(--brand-200)" : "var(--line-200)"), color: i === 2 ? "#fff" : "var(--ink-900)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}><span style={{ fontFamily: "var(--font-mono)", fontSize: 15, fontWeight: 600, color: i === 2 ? "rgba(255,255,255,.7)" : "var(--brand-500)" }}>{String(i + 1).padStart(2, "0")}</span><span style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-.01em" }}>{t}</span></div>
                  <div style={{ fontSize: 16, color: i === 2 ? "rgba(255,255,255,.85)" : "var(--ink-500)", lineHeight: 1.4 }}>{d}</div>
                </div>
                {i < a.length - 1 && <span style={{ alignSelf: "center", color: "var(--brand-400)", flex: "0 0 auto" }}><Icon name="arrowR" size={26} /></span>}
              </React.Fragment>
            ))}
          </Reveal>
        </div>
        <Foot no={34} section="ROI & pilot" />
      </div>
    );
  }

  window.registerSlides([
    { no: 32, section: "ROI & pilot", Comp: RoiIntro },
    { no: 33, section: "ROI & pilot", ws: "ws5", Comp: Calculator },
    { no: 34, section: "ROI & pilot", Comp: PilotScope },
  ]);
})();