/* ============================================================
   Fynch AI — slides_open.jsx  (slides 1–6)  — v2, elevated
   ============================================================ */
(function () {
  const AGENDA = window.FYNCH_AGENDA;

  /* ---- Slide 1 — Cover ---- */
  const AGENDA_CHIPS = ["Workflow mapping", "Product proof", "Source trust", "Build, buy, or hybrid", "ROI & pilot path", "Exportable session brief"];
  function Cover() {
    return (
      <div className="slide-pad" style={{ justifyContent: "space-between" }}>
        <Reveal variant="fade" className="eyebrow-row" style={{ margin: 0 }}>
          <img src="assets/fynch-mark.png" alt="Fynch" style={{ width: 50, height: 50 }} />
          <span className="mono" style={{ fontSize: 20, letterSpacing: 1, color: "#aab6cc" }}>FYNCH&nbsp;AI&nbsp;&nbsp;·&nbsp;&nbsp;CRE Underwriting</span>
          <span style={{ marginLeft: "auto" }} className="mono faint">120-MIN INTERACTIVE WORKING SESSION</span>
        </Reveal>
        <div style={{ maxWidth: 1520 }}>
          <Reveal variant="up"><Kicker>Working session</Kicker></Reveal>
          <Reveal variant="up" delay={90} as="h1" style={{ fontSize: "var(--s-cover)", fontWeight: 600, letterSpacing: "-.03em", lineHeight: 0.97, margin: "20px 0 28px", color: "#f4f7fc" }}>
            Reimagining Institutional<br />CRE Underwriting
          </Reveal>
          <Reveal variant="up" delay={180} as="p" className="lead" style={{ fontSize: 33, maxWidth: 1150, color: "#aab6cc" }}>A working session with Wellington Management — Private Real Estate Credit.</Reveal>
          <Reveal variant="up" delay={260} style={{ display: "flex", gap: 11, flexWrap: "wrap", marginTop: 34 }}>
            {AGENDA_CHIPS.map((c) => <span key={c} style={{ fontSize: 18, fontWeight: 500, color: "#c4cfdf", border: "1px solid var(--navy-line)", background: "rgba(255,255,255,.03)", padding: "9px 18px", borderRadius: 9999 }}>{c}</span>)}
          </Reveal>
        </div>
        <Reveal variant="fade" delay={340}>
          <div className="label-meta" style={{ color: "#5b6b86", marginBottom: 12 }}>The operating layer</div>
          <FlowBand compact showDesc={false} />
        </Reveal>
      </div>
    );
  }

  /* ---- Slide 2 — Working session: principles + live 120-min timeline ---- */
  const AGREE = ["Start with your workflow", "Show the product early", "Map friction before prescribing", "Separate automation from judgment", "Be clear: live vs configurable", "End with one practical next step"];
  function WorkingSession() {
    return (
      <div className="slide-pad">
        <Reveal variant="up"><div className="eyebrow-row" style={{ marginBottom: 14 }}><Kicker>How today works</Kicker></div></Reveal>
        <Reveal variant="up" delay={70} as="h2" className="slide-h2" style={{ marginBottom: 34 }}>This is a working session — not a demo.</Reveal>
        <div className="cols c2 grow" style={{ gridTemplateColumns: "0.92fr 1.08fr", gap: 56, alignItems: "stretch" }}>
          <div className="stack" style={{ justifyContent: "center", gap: 18 }}>
            <div className="label-meta">Our agreement</div>
            {AGREE.map((t, i) => (
              <Reveal key={t} variant="left" delay={120 + i * 90} style={{ display: "flex", gap: 18, alignItems: "center" }}>
                <span style={{ width: 38, height: 38, 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="check" size={20} sw={2.6} /></span>
                <span style={{ fontSize: 27, color: "var(--ink-800)", fontWeight: 500 }}>{t}</span>
              </Reveal>
            ))}
          </div>
          <Reveal variant="right" delay={160} className="card" style={{ padding: "24px 30px", display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
              <div className="label-meta">The 120 minutes</div>
              <span className="mono" style={{ fontSize: 15, color: "var(--ink-400)" }}>4 workshops · 3 product proofs</span>
            </div>
            <div className="timeline-rail">
              {AGENDA.map((a, i) => (
                <div key={i} className="tl-item">
                  <div className="tl-dot" data-ws={/Workshop/.test(a.section) ? "1" : "0"}></div>
                  <div className="tl-time">{a.time}</div>
                  <div className="tl-body"><span className="tl-name">{a.section}</span><span className="tl-purpose">{a.purpose}</span></div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <Foot no={2} section="Opening" />
      </div>
    );
  }

  /* ---- Slide 3 — Bigger than PDF summaries: questions + provenance hero ---- */
  const Q3 = ["Review more deals without weakening discipline?", "Trust, cite, review & reuse key facts?", "Run credit policy earlier?", "Generate memos from approved evidence?", "Reconstruct the process later?"];
  function BiggerQuestion() {
    return (
      <div className="slide-pad">
        <Reveal variant="up"><div className="eyebrow-row" style={{ marginBottom: 10 }}><Kicker>The real question</Kicker></div></Reveal>
        <Reveal variant="up" delay={70} as="h2" className="slide-h2" style={{ marginBottom: 30 }}>It's bigger than PDF summaries.</Reveal>
        <div className="cols" style={{ gridTemplateColumns: "0.82fr 1.18fr", gap: 50, flex: 1, alignItems: "stretch", minHeight: 0 }}>
          <div className="stack" style={{ gap: 22, justifyContent: "center" }}>
            <div className="label-meta">The institutional questions</div>
            <ul className="q-list" style={{ gap: 18 }}>
              {Q3.map((q, i) => <Reveal key={q} variant="left" delay={140 + i * 90} as="li" style={{ fontSize: 25, lineHeight: 1.35, color: "var(--ink-700)", paddingLeft: 34, position: "relative" }}><span style={{ position: "absolute", left: 0, top: 0, fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--brand-500)" }}>?</span>{q}</Reveal>)}
            </ul>
            <Reveal variant="up" delay={620} style={{ marginTop: 8, paddingTop: 20, borderTop: "1px solid var(--line-200)", fontSize: 18, color: "var(--ink-500)", fontFamily: "var(--font-mono)" }}>
              <b style={{ color: "var(--ink-600)" }}>’23–’24</b> chat · summary &nbsp;→&nbsp; <b style={{ color: "var(--brand-600)" }}>’25–’26</b> operating models, evidence, governance
            </Reveal>
          </div>
          <div className="stack" style={{ minHeight: 0 }}>
            <Reveal variant="fade" delay={120} className="label-meta" style={{ marginBottom: 6 }}>The hard part isn't the summary — it's the provenance</Reveal>
            <div className="grow" style={{ minHeight: 0 }}><EvidenceProvenance /></div>
          </div>
        </div>
        <Foot no={3} section="Opening" />
      </div>
    );
  }

  /* ---- Slide 4 — Deliverables ---- */
  const DELIVERABLES = [["Current deal cycle map", "grid"], ["Friction & rework heatmap", "spark"], ["Source-to-fact trust map", "shield"], ["Product capability fit map", "layers"], ["Build, buy, or hybrid view", "doc"], ["ROI assumption model", "spark"], ["Sample deal review agenda", "calendar"]];
  function Deliverables() {
    return (
      <div className="slide-pad">
        <Reveal variant="up"><div className="eyebrow-row" style={{ marginBottom: 10 }}><Kicker>Output of today</Kicker></div></Reveal>
        <Reveal variant="up" delay={70} as="h2" className="slide-h2" style={{ marginBottom: 30 }}>You leave with a working document.</Reveal>
        <div className="cols" style={{ gridTemplateColumns: "1fr 1fr", gap: 50, flex: 1, alignItems: "stretch", minHeight: 0 }}>
          <div className="stack" style={{ gap: 12, justifyContent: "center" }}>
            {DELIVERABLES.map(([t, ic], i) => (
              <Reveal key={t} variant="left" delay={120 + i * 75} style={{ display: "flex", alignItems: "center", gap: 18, padding: "14px 18px", background: "var(--surface)", border: "1px solid var(--line-200)", borderRadius: 10 }}>
                <span style={{ width: 44, height: 44, borderRadius: 10, background: "var(--brand-50)", color: "var(--brand-600)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}><Icon name={ic} size={21} /></span>
                <span style={{ fontSize: 23, fontWeight: 600, color: "var(--ink-800)" }}>{t}</span>
                <span className="mono" style={{ marginLeft: "auto", color: "var(--ink-300)", fontSize: 15 }}>{String(i + 1).padStart(2, "0")}</span>
              </Reveal>
            ))}
          </div>
          <Reveal variant="right" delay={160} style={{ minHeight: 0 }}>
            <DocPreview file="diagnostic.pdf" title="CRE Underwriting Operating Model Diagnostic" sub="Prepared from this session · Wellington × Fynch AI"
              sections={[["01  Deal cycle map", ["12 mapped stages · owners, systems, outputs", "Manual handoff count · ownership gaps"]], ["02  Friction heatmap", ["Top-3 time-burden & rework stages", "Stakeholder disagreement view"]], ["03  Source-to-fact trust map", ["25–40 priority facts · evidence standard", "Quote / memo blockers · review owners"]], ["04  Build, buy, or hybrid", ["Strategic vs. commodity layers", "Complexity & maintenance bands"]], ["05  ROI assumptions", ["Capacity model · scenarios"]]]} />
          </Reveal>
        </div>
        <Foot no={4} section="Opening" />
      </div>
    );
  }

  /* ---- Slide 5 — Product in one sentence + operating stack ---- */
  function ProductSentence() {
    return (
      <div className="slide-pad">
        <Reveal variant="up"><div className="eyebrow-row" style={{ marginBottom: 14 }}><Kicker>The product in one sentence</Kicker></div></Reveal>
        <Reveal variant="up" delay={60} as="p" style={{ margin: "0 0 24px", fontSize: 36, fontWeight: 500, lineHeight: 1.28, letterSpacing: "-.01em", color: "var(--ink-900)", maxWidth: 1640, textWrap: "balance" }}>
          We turn messy CRE deal materials into <span style={{ color: "var(--brand-600)", fontWeight: 700 }}>evidence-backed underwriting facts</span> that feed policy, review, quoting, memos & audit.
        </Reveal>
        <div className="grow" style={{ minHeight: 0 }}><OperatingStack /></div>
        <Foot no={5} section="Product map" />
      </div>
    );
  }

  /* ---- Slide 6 — What is live today: capability map ---- */
  const LIVE_CORE = ["Deal workspace", "Package & checklist", "Email & doc intake", "PDF / Excel parsing", "CRE fact extraction", "Underwriting fact base", "Evidence & knowledge base", "Review queues", "Source coverage", "DSCR / LTV / debt yield", "Quoting & credit policy", "Screening memo", "Credit memo", "Template system", "Deal Q&A", "Audit & lineage"];
  const CONFIGURED = ["Credit policy", "Required fields", "Memo templates", "Document types", "Outside data providers", "Borrower & KYC", "Integrations", "Permission model"];
  function LiveToday() {
    return (
      <div className="slide-pad">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 26 }}>
          <div><Reveal variant="up"><Kicker>Maturity</Kicker></Reveal><Reveal variant="up" delay={70} as="h2" className="slide-h2" style={{ marginTop: 8 }}>This is a working product, not a deck.</Reveal></div>
          <Reveal variant="up" delay={120} style={{ display: "flex", gap: 10 }}><Maturity status="live" /><Maturity status="config" /></Reveal>
        </div>
        <div className="cols grow" style={{ gridTemplateColumns: "1.7fr 1fr", gap: 32, alignItems: "stretch", minHeight: 0 }}>
          <div className="card" style={{ padding: "22px 26px", display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}><span className="pill"><span className="dot"></span>Live core</span><span style={{ fontSize: 16, color: "var(--ink-400)" }}>shipping today</span></div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, flex: 1 }}>
              {LIVE_CORE.map((t, i) => (
                <Reveal key={t} variant="scale" delay={80 + i * 45} style={{ display: "flex", flexDirection: "column", gap: 9, justifyContent: "center", padding: "14px 16px", background: "var(--canvas)", border: "1px solid var(--line-200)", borderRadius: 10 }}>
                  <span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--approved-fg)", boxShadow: "0 0 0 4px var(--approved-bg)" }}></span>
                  <span style={{ fontSize: 17, fontWeight: 600, color: "var(--ink-800)", lineHeight: 1.2 }}>{t}</span>
                </Reveal>
              ))}
            </div>
          </div>
          <Reveal variant="right" delay={120} className="card" style={{ padding: "22px 26px", display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}><span className="pill" style={{ background: "var(--processing-bg)", color: "var(--processing-fg)", borderColor: "var(--processing-border)" }}><span className="dot"></span>Configured per client</span></div>
            <div className="stack" style={{ gap: 11, flex: 1 }}>
              {CONFIGURED.map((t) => <div key={t} style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 19, color: "var(--ink-700)", padding: "9px 14px", borderRadius: 8, background: "var(--canvas)" }}><Icon name="grid" size={16} style={{ color: "var(--processing-fg)" }} />{t}</div>)}
            </div>
            <div style={{ marginTop: 16, padding: "16px 18px", background: "var(--brand-500)", borderRadius: 10, color: "#fff" }}>
              <div style={{ fontSize: 20, fontWeight: 600 }}>The product is broad.</div>
              <div style={{ fontSize: 16, color: "rgba(255,255,255,.85)", marginTop: 3 }}>The workshop finds your best starting point.</div>
            </div>
          </Reveal>
        </div>
        <Foot no={6} section="Product map" />
      </div>
    );
  }

  /* shared doc-preview */
  function DocPreview({ file, title, sub, sections }) {
    return (
      <div className="doc-preview" style={{ height: "100%" }}>
        <div className="doc-bar"><span className="dot" style={{ background: "#f87171" }}></span><span className="dot" style={{ background: "#fbbf24" }}></span><span className="dot" style={{ background: "#34d399" }}></span><span className="fn">{file}</span></div>
        <div className="doc-body">
          <h3>{title}</h3><p className="doc-sub">{sub}</p>
          {sections.map(([h, items], i) => <div key={i}><div className="doc-sec">{h}</div><ul style={{ margin: 0, paddingLeft: 18, color: "var(--ink-600)", fontSize: 15, lineHeight: 1.7 }}>{items.map((it, j) => <li key={j}>{it}</li>)}</ul></div>)}
        </div>
      </div>
    );
  }
  window.DocPreview = DocPreview;

  window.registerSlides([
    { no: 1, section: "Opening", dark: true, Comp: Cover },
    { no: 2, section: "Opening", Comp: WorkingSession },
    { no: 3, section: "Opening", Comp: BiggerQuestion },
    { no: 4, section: "Opening", Comp: Deliverables },
    { no: 5, section: "Product map", Comp: ProductSentence },
    { no: 6, section: "Product map", Comp: LiveToday },
  ]);
})();