/* ============================================================
   Finance — Slides. Same two-pane shell as the Model page, but the
   source file is a PRESENTATION and its items are SLIDES. Rebuilt to
   mirror the real deck: Slides/CFO_Board_Presentation_Deck.pptx
   (5 slides). Each slide renders off a Finance data product.
   ============================================================ */
(function () {
  const DECK = 'CFO_Board_Presentation_Deck.pptx';
  const POR = '#B7B0A8', LEB = '#1F3B2C', BAR = '#1F3B2C';

  const SLIDES = [
    { title: 'FY2026 Interim Review & Three-Year Outlook', built: 'Executive Summary · Three-Statement Model',
      cover: true, meta: ['Cascade Ridge Foods · Board of Directors · July 2026', 'Prepared by the Chief Financial Officer · Actuals through June 2026'],
      kpis: [['FY2026E Revenue', '$160.0M', '+12.7% vs FY2025'], ['FY2026E EBITDA', '$16.3M', '10.2% margin'],
        ['FY2026E Net Income', '$9.2M', 'vs $2.9M in FY2025'], ['FY2026E Ending Cash', '$19.2M', '0.9x net leverage']],
      data: [['FY2026E revenue', '$160.0M'], ['FY2026E EBITDA', '$16.3M'], ['FY2026E net income', '$9.2M']] },

    { title: 'Revenue Performance & Growth Outlook', built: 'P&L & Margin Bridge · Three-Statement Model',
      chart: { unit: 'Revenue, $ millions', bars: [['FY2024', 128.0], ['FY2025', 142.0], ['FY2026E', 160.0], ['FY2027E', 176.0], ['FY2028E', 191.8]] },
      notes: [['H1-2026 revenue $78.0M, +13.4%', 'June the strongest month on record at $16.4M'],
        ['Forecast +12% through H2', 'then +10% FY2027 and +9% FY2028 on committed line volume'],
        ['Mix holds ~84% turnkey', 'tolling grows in line with the book']],
      data: [['FY2026E revenue', '$160.0M'], ['H1-2026', '$78.0M (+13.4%)'], ['FY2028E', '$191.8M']] },

    { title: 'Margin Recovery & Profitability', built: 'P&L & Margin Bridge',
      chart: { unit: 'EBITDA, $ millions', bars: [['FY2024', 12.0, '9.4%'], ['FY2025', 8.2, '5.8%'], ['FY2026E', 16.3, '10.2%'], ['FY2027E', 17.9, '10.2%'], ['FY2028E', 19.6, '10.2%']] },
      notes: [['FY2025 gross margin 18.2%', 'compressed by ingredient inflation + a $1.8M bad-debt write-off'],
        ['H1-2026 gross margin 20.9%', 'pricing actions and freight recovery holding'],
        ['Forecast GM 21.2% (FY26E–28E)', 'no repeat write-off; DSO tightened to 48 days']],
      data: [['FY2025 EBITDA', '$8.2M (5.8%)'], ['FY2026E EBITDA', '$16.3M (10.2%)'], ['FY2025 gross margin', '18.2%']] },

    { title: 'Cash Flow, Debt & Distributions', built: 'Three-Statement Model',
      chart: { unit: 'Ending cash, year-end $ millions', bars: [['FY24', 7.6], ['FY25', 9.5], ['FY26E', 19.2], ['FY27E', 25.3], ['FY28E', 32.7]] },
      notes: [['Term debt $15.2M → $11.6M', 'FY2025 → FY2028E · net leverage 0.6x by FY2028E'],
        ['Principal $1.2M/yr · Capex $3.5M/yr', 'owner distributions $2.0M/yr from FY2027'],
        ['All uses funded from operations', 'no new borrowing assumed through FY2028']],
      data: [['FY2026E ending cash', '$19.2M'], ['FY2028E ending cash', '$32.7M'], ['Term debt FY28E', '$11.6M']] },

    { title: 'Capacity & Utilization', built: 'Capacity & Utilization',
      chart: { unit: 'FY2026E utilization by line', pct: true, byPlant: true,
        bars: [['POR-L1', 78, POR], ['POR-L2', 71, POR], ['POR-L3', 75, POR], ['POR-L4', 69, POR],
          ['LEB-L1', 88, LEB], ['LEB-L2', 87, LEB], ['LEB-L3', 86, LEB], ['LEB-L4', 90, LEB], ['LEB-L5', 83, LEB]] },
      notes: [['Network utilization 76% → 93%', '88.7M units FY2026E on 106.0M practical capacity'],
        ['LEB-L5 upgrade landed April', '+20% line capacity (~2.7M units/yr), within the $3.5M capex'],
        ['Expansion case due H1-FY2027', 'Lebanon reaches 96–100% by FY2028; Portland holds low-80s headroom']],
      data: [['Network util FY2026E', '~85%'], ['Units / capacity', '88.7M / 106.0M'], ['LEB-L5 add', '+20%']] },
  ];

  function Bars({ chart }) {
    const bars = chart.bars, pct = chart.pct;
    const W = 660, H = 196, padT = 22, padB = 30;
    const max = pct ? 100 : Math.max.apply(null, bars.map((b) => b[1])) * 1.15;
    const plotH = H - padT - padB, band = W / bars.length, bw = Math.min(58, band * 0.5);
    const yOf = (v) => padT + plotH - (v / max) * plotH;
    const fmt = (v) => pct ? v + '%' : v.toFixed(v >= 100 ? 0 : 1);
    return (
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
        <line x1="0" y1={padT + plotH} x2={W} y2={padT + plotH} stroke="rgba(38,24,17,0.18)" strokeWidth="1" />
        {bars.map((b, i) => {
          const x = i * band + (band - bw) / 2, y = yOf(b[1]), h = padT + plotH - y;
          const color = b[2] && /^#/.test(b[2]) ? b[2] : BAR;
          return (
            <g key={b[0]}>
              <rect x={x} y={y} width={bw} height={h} rx="3" fill={color} />
              <text x={x + bw / 2} y={y - 6} textAnchor="middle" fontSize="12" fontWeight="600" fill="#171412">{fmt(b[1])}</text>
              <text x={x + bw / 2} y={padT + plotH + 16} textAnchor="middle" fontSize="11" fill="#615D5A">{b[0]}</text>
              {b[2] && !/^#/.test(b[2]) && <text x={x + bw / 2} y={padT + plotH + 28} textAnchor="middle" fontSize="10" fill="#A09792">{b[2]}</text>}
            </g>
          );
        })}
      </svg>
    );
  }

  function SlideSurface({ s }) {
    const green = '#1F3B2C';
    // Slide typography scales with the canvas width (cqw = 1% of the
    // .mdl__canvas container) and caps at the original desktop sizes, so the
    // fixed 16:9 surface never clips its content on tablet/phone panes.
    const fs = (px) => `clamp(${Math.max(6, Math.round(px * 0.55))}px, ${(px / 7).toFixed(2)}cqw, ${px}px)`;
    return (
      <div style={{ width: '100%', aspectRatio: '16 / 9',
        border: '1px solid #EFEBE7', borderRadius: 10, background: '#FFFFFF', boxShadow: '0 1px 4px rgba(23,20,18,0.05)',
        overflow: 'hidden', padding: s.cover ? '0 min(7.5cqw, 52px)' : 'min(3.7cqw, 26px) min(4.9cqw, 34px)',
        display: 'flex', flexDirection: 'column',
        justifyContent: s.cover ? 'center' : 'flex-start' }}>
        {s.cover ? (
          <div>
            <div style={{ width: 34, height: 4, background: green, borderRadius: 2, marginBottom: 'min(2.3cqw, 16px)' }}></div>
            <div style={{ fontSize: fs(26), fontWeight: 600, color: '#171412', letterSpacing: '-0.02em', lineHeight: 1.12 }}>{s.title}</div>
            <div style={{ fontSize: fs(12.5), color: '#615D5A', margin: 'min(1.1cqw, 8px) 0 min(2.6cqw, 18px)' }}>{s.meta[0]}<br />{s.meta[1]}</div>
            <div style={{ display: 'flex', gap: 'min(1.4cqw, 10px)' }}>
              {s.kpis.map((k) => (
                <div key={k[0]} style={{ flex: '1 1 0', minWidth: 0, border: '1px solid #EFEBE7', borderRadius: 8, padding: 'min(1.3cqw, 9px) min(1.6cqw, 11px)' }}>
                  <div style={{ fontSize: fs(10), color: '#615D5A' }}>{k[0]}</div>
                  <div style={{ fontSize: fs(18), fontWeight: 600, color: '#171412', margin: '2px 0 1px', letterSpacing: '-0.01em' }}>{k[1]}</div>
                  <div style={{ fontSize: fs(10), color: '#A09792' }}>{k[2]}</div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <React.Fragment>
            <div style={{ fontSize: fs(10.5), fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: green }}>Cascade Ridge Foods</div>
            <div style={{ fontSize: fs(19), fontWeight: 600, color: '#171412', letterSpacing: '-0.01em', margin: '2px 0 2px' }}>{s.title}</div>
            {s.chart && <div style={{ fontSize: fs(10.5), color: '#A09792', marginBottom: 2 }}>{s.chart.unit}</div>}
            {s.chart && <Bars chart={s.chart} />}
            {s.notes && (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'min(2cqw, 14px)', marginTop: 'min(1.7cqw, 12px)' }}>
                {s.notes.map((n, i) => (
                  <div key={i}>
                    <div style={{ fontSize: fs(11.5), fontWeight: 600, color: '#171412', lineHeight: 1.35 }}>{n[0]}</div>
                    <div style={{ fontSize: fs(10.5), color: '#615D5A', lineHeight: 1.4, marginTop: 2 }}>{n[1]}</div>
                  </div>
                ))}
              </div>
            )}
          </React.Fragment>
        )}
      </div>
    );
  }

  function FaceMenu({ face, setFace, faces }) {
    const [open, setOpen] = React.useState(false);
    const ref = React.useRef(null);
    React.useEffect(() => {
      if (!open) return;
      const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
      document.addEventListener('mousedown', onDoc);
      return () => document.removeEventListener('mousedown', onDoc);
    }, [open]);
    const current = faces.find((f) => f[0] === face);
    return (
      <div ref={ref} style={{ position: 'relative' }}>
        <button onClick={() => setOpen((o) => !o)} aria-haspopup="menu" aria-expanded={open}
          style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: '#fff', border: '1px solid #E7E1DF',
            borderRadius: 8, padding: '6px 10px', fontFamily: 'inherit', fontSize: 12, fontWeight: 500, color: '#171412',
            cursor: 'pointer', boxShadow: '0 1px 3px rgba(23,20,18,0.06)' }}>
          <span>{current ? current[1] : 'View'}</span>
          <IconChevronD size={13} />
        </button>
        {open && (
          <div role="menu" style={{ position: 'absolute', top: 'calc(100% + 5px)', right: 0, minWidth: 150, background: '#fff',
            border: '1px solid #E7E1DF', borderRadius: 8, boxShadow: '0 10px 28px rgba(23,20,18,0.16)', padding: 4, zIndex: 20 }}>
            {faces.map(([k, label]) => (
              <button key={k} role="menuitem" onClick={() => { setFace(k); setOpen(false); }}
                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, width: '100%',
                  textAlign: 'left', border: 'none', background: face === k ? 'rgba(38,24,17,0.05)' : 'transparent',
                  borderRadius: 6, padding: '7px 10px', fontFamily: 'inherit', fontSize: 12.5,
                  color: '#33302E', cursor: 'pointer' }}>
                {label}{face === k && <IconCheck size={13} />}
              </button>
            ))}
          </div>
        )}
      </div>
    );
  }

  function FinanceSlidesCanvas() {
    const [sel, setSel] = React.useState(0);
    const [open, setOpen] = React.useState(true);
    const [canvasOpen, setCanvasOpen] = React.useState(false);
    const s = SLIDES[sel];
    // Standard DP shell — the deck's slides are the DP picker (left rail); each
    // slide renders in DPShell with the Slide / Data / Control / Context faces.
    const faces = [
      { key: 'artifact', label: 'Slide', render: () => <SlideSurface s={s} /> },
      { key: 'data', label: 'Data', render: () => <window.WorksheetGrid cols={['Metric', 'Value']} rows={s.data} /> },
      { key: 'control', label: 'Control', render: () => (
        <div className="mdl-face">
          <div className="mdl-face__label">Sync</div>
          <p className="mdl-face__p"><span className="mdl__sync-dot"></span>In sync with <strong>{DECK}</strong> · rebuilt from the model at the Jul-2026 close</p>
          <div className="mdl-face__label">Renders off</div>
          <p className="mdl-face__p">{s.built}</p>
          <div className="mdl-face__label">Reconciliation</div>
          <p className="mdl-face__p">Every figure pulls from a data product — change the model and the slide updates. Nothing is typed by hand.</p>
        </div>
      ) },
      { key: 'context', label: 'Context', render: () => (
        <div className="mdl-face">
          <div className="mdl-face__label">What this is</div>
          <p className="mdl-face__p">Slide {sel + 1} of the CFO board deck — a presentation view that renders off the Finance model.</p>
          <div className="mdl-face__label">Built from</div>
          <p className="mdl-face__p">{s.built}</p>
          <div className="mdl-face__label">Why it&rsquo;s here</div>
          <p className="mdl-face__p">The deck is an artifact of the model, not a separate document. Same data as the hub — presented for the board.</p>
        </div>
      ) },
    ];

    return (
      <div className="mdl">
        <div className="mdl__body">
          <aside className="mdl__menu" role="tablist" aria-label="Slides">
            <div className="mdl__sec mdl__sec--file">
              <button className="mdl__filechip" onClick={() => setOpen((o) => !o)} aria-expanded={open}>
                <IconSlides size={15} />
                <span className="mdl__filechip-name" title={DECK}>{DECK}</span>
                <span className="mdl__sync-dot" title="In sync with the model"></span>
                <span className="mdl__filechip-chev">{open ? <IconChevronD size={13} /> : <IconChevronR size={13} />}</span>
              </button>
              {open && SLIDES.map((sl, i) => (
                <button key={i} type="button" role="tab" aria-selected={i === sel}
                  className={`mdl__tab ${i === sel ? 'is-active' : ''}`}
                  onClick={() => { setSel(i); setCanvasOpen(true); }}>
                  {i + 1} · {sl.title}
                </button>
              ))}
            </div>
          </aside>

          <window.MdlCanvas title={s.title} open={canvasOpen} onClose={() => setCanvasOpen(false)} ariaLabel={s.title}>
            <window.DPShell key={sel} name={s.title} initial="artifact" faces={faces} />
          </window.MdlCanvas>
        </div>
      </div>
    );
  }

  window.FinanceSlidesCanvas = FinanceSlidesCanvas;
})();