/* ============================================================
   Fynch AI — ui.jsx  (shared primitives + recurring visuals)
   Exports to window for the other babel scripts.
   ============================================================ */
const { useState, useEffect, useRef, useReducer, useMemo, useCallback } = React;

/* ---- icon set (stroke, 24-box) ---- */
const ICONS = {
  check: "M20 6 9 17l-5-5",
  arrow: "M5 12h14M13 6l6 6-6 6",
  arrowR: "M5 12h14M13 6l6 6-6 6",
  plus: "M12 5v14M5 12h14",
  lock: "M5 11h14v9H5zM8 11V7a4 4 0 0 1 8 0v4",
  unlock: "M5 11h14v9H5zM8 11V7a4 4 0 0 1 7.5-2",
  doc: "M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM14 3v6h6",
  mail: "M3 6h18v12H3zM3 6l9 7 9-7",
  grid: "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  people: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8",
  spark: "M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18",
  calendar: "M3 5h18v16H3zM3 9h18M8 3v4M16 3v4",
  download: "M12 4v12M7 11l5 5 5-5M5 20h14",
  layers: "M12 3 2 9l10 6 10-6zM2 15l10 6 10-6",
  shield: "M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z",
  eye: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6",
  flag: "M4 21V4M4 4h12l-2 4 2 4H4",
  search: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14M21 21l-4.3-4.3",
  table: "M3 3h18v18H3zM3 9h18M3 15h18M9 3v18",
  present: "M3 4h18M4 4v10h16V4M12 14v4M8 21l4-3 4 3",
  cloud: "M7 18a4 4 0 0 1 .8-7.95A5 5 0 0 1 18 9.2 3.5 3.5 0 0 1 17.5 18z",
  database: "M12 3c4.4 0 8 1.3 8 3s-3.6 3-8 3-8-1.3-8-3 3.6-3 8-3M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3",
  bank: "M3 21h18M5 21V10M9 21V10M15 21V10M19 21V10M3 10l9-6 9 6z",
  window: "M3 5h18v14H3zM3 9h18M6.5 7h.01",
  bulb: "M9 18h6M10 21h4M8.5 15a5.5 5.5 0 1 1 7 0c-.7.55-1 1.2-1 2H9.5c0-.8-.3-1.45-1-2z",
};
function Icon({ d, name, size = 18, sw = 2, style }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw}
      strokeLinecap="round" strokeLinejoin="round"
      style={{ width: size, height: size, flex: "0 0 auto", ...style }}>
      <path d={d || ICONS[name]} />
    </svg>
  );
}

/* ---- store subscription hook ---- */
function useStore() {
  const [, force] = useReducer((x) => x + 1, 0);
  useEffect(() => FynchStore.subscribe(() => force()), []);
  return FynchStore.get();
}

/* ---- recurring flow band: Documents → Evidence → Facts → Policy → Outputs → Audit ---- */
const FLOW_STEPS = [
  { t: "Documents", d: "Emails, PDFs, spreadsheets, broker & borrower files" },
  { t: "Evidence", d: "Linked to page, cell, table, API result, or metric" },
  { t: "Facts", d: "Structured CRE underwriting fact base" },
  { t: "Policy", d: "DSCR, LTV, debt yield, credit policy, review" },
  { t: "Outputs", d: "Screening & credit memos, templates, Q&A" },
  { t: "Audit", d: "Lineage, retention, reconstruction" },
];
function FlowBand({ compact, showDesc = true, active = -1 }) {
  return (
    <div className={"flowband" + (compact ? " compact" : "")}>
      {FLOW_STEPS.map((s, i) => (
        <React.Fragment key={s.t}>
          <div className="step" style={active === i ? { borderColor: "var(--brand-500)", boxShadow: "var(--ring)" } : null}>
            <div className="n">{String(i + 1).padStart(2, "0")}</div>
            <div className="t">{s.t}</div>
            {showDesc && !compact && <div className="d">{s.d}</div>}
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

/* inline word pipeline */
function WordFlow({ words }) {
  return (
    <div className="wordflow">
      {words.map((w, i) => (
        <React.Fragment key={w}>
          {i > 0 && <span className="sep">→</span>}
          <b>{w}</b>
        </React.Fragment>
      ))}
    </div>
  );
}

/* ---- product slide tag: Solves / Status ---- */
const MAT = {
  live: { c: "s-live", label: "Live today" },
  config: { c: "s-config", label: "Configurable" },
  provider: { c: "s-provider", label: "Provider-dependent" },
  road: { c: "s-road", label: "Roadmap" },
};
function SolvesTag({ solves, status = "live", statusLabel }) {
  const m = MAT[status] || MAT.live;
  return (
    <div className="solves-tag">
      <div className="col">
        <div className="k">Solves</div>
        <div className="v">{solves}</div>
      </div>
      <div className="col">
        <div className="k">Status</div>
        <div className="v"><span className={"sdot " + m.c}></span>{statusLabel || m.label}</div>
      </div>
    </div>
  );
}
function Maturity({ status = "live", children }) {
  const cls = { live: "live", config: "config", provider: "provider", road: "road" }[status] || "live";
  return <span className={"maturity " + cls}><span className="dot"></span>{children || MAT[status].label}</span>;
}

function Chip({ kind = "missing", children, sm }) {
  return <span className={"chip " + kind + (sm ? " sm" : "")}><span className="dot"></span>{children}</span>;
}
function NumBadge({ n, big, ghost }) {
  return <span className={"numbadge" + (big ? " big" : "") + (ghost ? " ghost" : "")}>{n}</span>;
}
function TickList({ items, tight }) {
  return (
    <ul className={"tick-list" + (tight ? " tight" : "")}>
      {items.map((t, i) => (
        <li key={i} style={{ "--i": i }} data-rise>
          <span className="mk"><Icon name="check" size={tight ? 18 : 22} /></span>
          <span>{t}</span>
        </li>
      ))}
    </ul>
  );
}

/* ---- slide chrome helpers ---- */
function Kicker({ children, muted }) {
  return <div className={"kicker" + (muted ? " muted" : "")}>{children}</div>;
}
function SlideHead({ kicker, title, h2, sub }) {
  return (
    <div className="stack gap-s" style={{ marginBottom: 36 }} data-rise>
      {kicker && <Kicker>{kicker}</Kicker>}
      {h2 ? <h2 className="slide-h2">{h2}</h2> : <h1 className="slide-title">{title}</h1>}
      {sub && <p className="lead" style={{ marginTop: 8 }}>{sub}</p>}
    </div>
  );
}
function Foot({ no, section }) {
  return (
    <div className="slide-foot">
      <span className="client-foot"><img src="assets/fynch-mark.png" alt="" />Prepared for Wellington Management · Private Real Estate Credit</span>
      <span>{section ? section + "  ·  " : ""}{String(no).padStart(2, "0")} / 36</span>
    </div>
  );
}

Object.assign(window, {
  useState, useEffect, useRef, useReducer, useMemo, useCallback,
  Icon, ICONS, useStore, FlowBand, FLOW_STEPS, WordFlow, SolvesTag, Maturity,
  Chip, NumBadge, TickList, Kicker, SlideHead, Foot,
});