// Collection (overview dashboard) page — Cedar Narrows Water Supply Tunnel.
// Built from awst_gp_meeting_13_overview.json. Pure Proxa DS.

const { useState: useStateCol } = React;

// Special prompt: when a user submits this from the empty-record state we
// simulate the agent generating the Cedar Narrows WST Project Overview dashboard.
window.DASHBOARD_GEN_PROMPT = 'Create a project dashboard from hub knowledge base';
window.DASHBOARD_GEN_STAGES = [
  'Scanning sources in this hub\u2026',
  'Reading Monthly Report No. 50 \u00b7 March 2026\u2026',
  'Extracting data points: safety, progress, finance\u2026',
  'Validating numbers against weekly + daily reports\u2026',
  'Structuring sections and KPI tiles\u2026',
  'Composing the interactive dashboard\u2026',
];

/* ===== Top bar ===== */
function CollTopBar({ onBack, onOpenRecord, onOpenGraph }) {
  const [menuOpen, setMenuOpen] = useStateCol(false);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    if (!menuOpen) return;
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setMenuOpen(false);
    };
    const onKey = (e) => {if (e.key === 'Escape') setMenuOpen(false);};
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  const handleGraph = () => {setMenuOpen(false);if (onOpenGraph) onOpenGraph();};

  return (
    <header className="coll-top">
      <button className="iconbtn coll-top__nav" onClick={onBack} aria-label="Back to Hub">
        <IconChevronL size={16} />
      </button>
      <div className="coll-top__mark" style={{ backgroundColor: "rgb(254, 252, 250)", borderColor: "rgb(231, 225, 223)" }}><IconLayers2 size={20} /></div>
      <div className="coll-top__heading">
        <div className="coll-top__kicker">Traylor Bros., Inc. · Content Library</div>
        <div className="coll-top__title">Cedar Narrows Water Supply Tunnel</div>
      </div>
      <div className="coll-top__spacer"></div>
      <div className="coll-top__meta desktop-only">
        <span className="coll-top__owner">James Anderson · Marketing Team</span>
        <span className="coll-top__sep">·</span>
        <span className="coll-top__time">4 min ago</span>
      </div>
      <button className="tag-status desktop-only" type="button">Need review</button>
      <div className="rec-top__menu-wrap rec-top__menu-wrap--right" ref={wrapRef}>
        <button
          className="iconbtn"
          title="More"
          aria-label="More"
          aria-haspopup="menu"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}>
          <IconMoreH size={16} />
        </button>
        {menuOpen &&
        <div className="rec-menu" role="menu">
            <button className="rec-menu__item" role="menuitem" onClick={handleGraph}>
              <span className="rec-menu__ico">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="2" /><circle cx="18" cy="6" r="2" /><circle cx="12" cy="18" r="2" /><path d="M7.5 7.5l3 8.5M16.5 7.5l-3 8.5M8 6h8" /></svg>
              </span>
              Open context graph
            </button>
            <button className="rec-menu__item" role="menuitem" onClick={() => setMenuOpen(false)}>
              <span className="rec-menu__ico">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><path d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98" /></svg>
              </span>
              Share collection
            </button>
            <button className="rec-menu__item" role="menuitem" onClick={() => setMenuOpen(false)}>
              <span className="rec-menu__ico">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>
              </span>
              Collection comments
            </button>
            <div className="rec-menu__rule"></div>
            <button className="rec-menu__item" role="menuitem" onClick={() => setMenuOpen(false)}>
              <span className="rec-menu__ico">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
              </span>
              Export collection
            </button>
          </div>
        }
      </div>
    </header>);

}

/* ===== Sidebar — sections nav ===== */
const SECTIONS = [
{ num: 1, key: 'overview', label: 'Overview' },
{ num: 2, key: 'monthly', label: 'Monthly reports', sub: '3 items' },
{ num: 3, key: 'weekly', label: 'Weekly reports', sub: '3 items' },
{ num: 4, key: 'daily', label: 'Daily reports', sub: '438 items' },
{ num: 5, key: 'photos', label: 'Photos', sub: '6 items' },
{ key: 'all', label: 'All items', sub: '526 items' }];

function CollSidebar({ active, onPick }) {
  return (
    <aside className="coll-side desktop-only">
      <div className="coll-side__head">
        <span className="coll-side__title">Sections</span>
        <div className="coll-side__actions">
          <button className="iconbtn" aria-label="Add section"><IconPlus size={14} /></button>
          <button className="iconbtn" aria-label="Toggle sidebar"><IconSidebar size={14} /></button>
        </div>
      </div>
      <nav className="coll-side__nav">
        {SECTIONS.map((s) =>
        <button
          key={s.key}
          type="button"
          className={`coll-side__item ${active === s.key ? 'is-active' : ''}`}
          onClick={() => onPick(s.key)}>
            <span className="coll-side__num">{s.num != null ? s.num : ''}</span>
            <span className="coll-side__label">
              {s.label}
              {s.sub && <span className="coll-side__sub">{s.sub}</span>}
            </span>
          </button>
        )}
      </nav>
    </aside>);

}

/* ===== Inline charts ===== */
function AreaChart({ values, labels, tone = 'neutral', height = 120 }) {
  const w = 280;
  const h = height;
  const pad = { top: 12, right: 8, bottom: 22, left: 8 };
  const max = Math.max(...values, 1);
  const min = Math.min(...values, 0);
  const range = max - min || 1;
  const xs = values.map((_, i) => pad.left + i * (w - pad.left - pad.right) / Math.max(values.length - 1, 1));
  const ys = values.map((v) => pad.top + (h - pad.top - pad.bottom) * (1 - (v - min) / range));
  const line = xs.map((x, i) => `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${ys[i].toFixed(1)}`).join(' ');
  const area = `${line} L ${xs[xs.length - 1].toFixed(1)} ${(h - pad.bottom).toFixed(1)} L ${xs[0].toFixed(1)} ${(h - pad.bottom).toFixed(1)} Z`;
  const stroke = tone === 'pos' ? '#52B26E' : tone === 'neg' ? '#D04A3F' : '#A09792';
  const fill = tone === 'pos' ? 'rgba(82,178,110,0.18)' : tone === 'neg' ? 'rgba(208,74,63,0.16)' : 'rgba(160,151,146,0.18)';
  return (
    <svg className="ac" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet">
      <path d={area} fill={fill} />
      <path d={line} stroke={stroke} strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      {labels &&
      <g className="ac__labels">
          {labels.map((lbl, i) =>
        <text key={i} x={xs[i]} y={h - 6} textAnchor="middle">{lbl}</text>
        )}
        </g>
      }
    </svg>);

}

function BarChart({ values, labels, highlightedIndices = [], height = 140 }) {
  const w = 320;
  const h = height;
  const pad = { top: 12, right: 4, bottom: 24, left: 4 };
  const max = Math.max(...values, 1);
  const n = values.length;
  const slot = (w - pad.left - pad.right) / n;
  const barW = Math.min(slot * 0.6, 26);
  const innerH = h - pad.top - pad.bottom;
  return (
    <svg className="bc" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet">
      {values.map((v, i) => {
        const x = pad.left + i * slot + (slot - barW) / 2;
        const bh = v / max * innerH;
        const y = pad.top + (innerH - bh);
        const hi = highlightedIndices.includes(i);
        return (
          <g key={i}>
            <rect x={x} y={y} width={barW} height={bh}
            fill={hi ? '#33302E' : '#A09792'} rx="1" />
          </g>);

      })}
      {labels &&
      <g className="bc__labels">
          {labels.map((lbl, i) =>
        <text key={i} x={pad.left + i * slot + slot / 2} y={h - 8} textAnchor="middle">{lbl}</text>
        )}
        </g>
      }
    </svg>);

}

function GroupedBarChart({ groups, series, height = 160 }) {
  // groups: ['Original estimate', ...]; series: [{key,label,values,tone}]
  const w = 320;
  const h = height;
  const pad = { top: 12, right: 4, bottom: 26, left: 4 };
  const max = Math.max(...series.flatMap((s) => s.values), 1);
  const groupCount = groups.length;
  const groupSlot = (w - pad.left - pad.right) / groupCount;
  const seriesCount = series.length;
  const barW = Math.min(groupSlot * 0.7 / seriesCount, 16);
  const innerH = h - pad.top - pad.bottom;
  const tones = { base: '#33302E', muted: '#A09792', lightMuted: '#D5CFCB' };
  return (
    <svg className="bc bc--grouped" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet">
      {groups.map((g, gi) => {
        const groupX = pad.left + gi * groupSlot;
        const cluster = barW * seriesCount + (seriesCount - 1) * 2;
        const startX = groupX + (groupSlot - cluster) / 2;
        return (
          <g key={gi}>
            {series.map((s, si) => {
              const v = s.values[gi] || 0;
              const bh = v / max * innerH;
              const x = startX + si * (barW + 2);
              const y = pad.top + (innerH - bh);
              return <rect key={si} x={x} y={y} width={barW} height={bh} fill={tones[s.tone] || tones.base} rx="1" />;
            })}
            <text className="bc__label" x={groupX + groupSlot / 2} y={h - 8} textAnchor="middle">{g}</text>
          </g>);

      })}
    </svg>);

}

/* ===== Headline with a single colored accent phrase ===== */
function HeadlineText({ text, accent, color }) {
  if (!accent || !text || !text.includes(accent)) return text || null;
  const idx = text.indexOf(accent);
  return (
    <React.Fragment>
      {text.slice(0, idx)}
      <span style={{ color }}>{accent}</span>
      {text.slice(idx + accent.length)}
    </React.Fragment>);
}

/* ===== Rich trend chart (gridlines, right axis, goal band, annotations) ===== */
function RichTrendChart({
  values, xLabels, yMax, yTicks, color = '#D04A3F',
  fill = 'rgba(208,74,63,0.12)', area = false,
  goal = null, goalLabel = '', zoneFill = null,
  annotations = [], height = 280 }) {
  const W = 460, H = height;
  const pad = { top: 22, right: 42, bottom: 30, left: 14 };
  const innerW = W - pad.left - pad.right;
  const innerH = H - pad.top - pad.bottom;
  const n = values.length;
  const x = (i) => pad.left + (n <= 1 ? innerW / 2 : i * innerW / (n - 1));
  const y = (v) => pad.top + innerH * (1 - Math.max(0, Math.min(v, yMax)) / yMax);
  const linePath = values.map((v, i) => `${i === 0 ? 'M' : 'L'} ${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(' ');
  const areaPath = `${linePath} L ${x(n - 1).toFixed(1)} ${y(0).toFixed(1)} L ${x(0).toFixed(1)} ${y(0).toFixed(1)} Z`;
  return (
    <svg className="rtc" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet" role="img">
      <g className="rtc__grid">
        {yTicks.map((t, i) =>
          <g key={i}>
            <line x1={pad.left} x2={pad.left + innerW} y1={y(t)} y2={y(t)} />
            <text className="rtc__ytick" x={pad.left + innerW + 8} y={y(t) + 4}>{t}</text>
          </g>
        )}
      </g>
      {zoneFill && goal != null &&
        <rect x={pad.left} y={y(goal)} width={innerW} height={Math.max(0, y(0) - y(goal))} fill={zoneFill} />}
      {area && <path d={areaPath} fill={fill} />}
      {goal != null &&
        <g className="rtc__goal">
          <line x1={pad.left} x2={pad.left + innerW} y1={y(goal)} y2={y(goal)} strokeDasharray="4 4" />
          {goalLabel && <text className="rtc__goal-lbl" x={pad.left + 4} y={y(goal) - 6}>{goalLabel}</text>}
        </g>}
      <path d={linePath} fill="none" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
      {values.map((v, i) =>
        <circle key={i} cx={x(i)} cy={y(v)} r={i === n - 1 ? 4.5 : 3} fill="#FFFCFA" stroke={color} strokeWidth="2" />
      )}
      <g className="rtc__xlabels">
        {xLabels.map((lbl, i) => <text key={i} x={x(i)} y={H - 10} textAnchor="middle">{lbl}</text>)}
      </g>
      {annotations.map((a, i) => {
        const px = x(a.i), py = y(values[a.i]);
        const below = a.place === 'below';
        const v1 = below ? py + 26 : py - 30;
        const t1 = v1 + 14;
        const cFrom = below ? py + 7 : py - 7;
        const cTo = below ? py + 17 : py - 19;
        const anchor = px > pad.left + innerW - 70 ? 'end' : (px < pad.left + 70 ? 'start' : 'middle');
        return (
          <g key={i} className="rtc__anno">
            <line x1={px} y1={cFrom} x2={px} y2={cTo} stroke={a.color || color} strokeWidth="1.3" />
            <text className="rtc__anno-v" x={px} y={v1} textAnchor={anchor} fill={a.color || color}>{a.value}</text>
            <text className="rtc__anno-t" x={px} y={t1} textAnchor={anchor}>{a.title}</text>
          </g>);
      })}
    </svg>);
}

/* ===== Analytical chart card (bold headline intro + chart + legend) ===== */
function AnalysisCard({ headline, accent, accentColor, sub, children, legend }) {
  return (
    <div className="an-card">
      <div className="an-card__headline"><HeadlineText text={headline} accent={accent} color={accentColor} /></div>
      {sub && <div className="an-card__sub">{sub}</div>}
      <div className="an-card__chart">{children}</div>
      {legend &&
        <div className="an-card__legend">
          {legend.map((l, i) =>
            <span key={i} className="an-card__legend-item">
              <span className="an-card__swatch" style={{ background: l.color }} />{l.label}
            </span>
          )}
        </div>}
    </div>);
}

/* ===== KPI Edit Side Panel ===== */
function KpiEditPanel({ open, kpi, onClose, onChange }) {
  if (!open || !kpi) return null;
  const update = (k, v) => onChange({ ...kpi, [k]: v });

  return (
    <React.Fragment>
      <div className="side-panel__scrim" onClick={onClose} />
      <aside className="side-panel" role="dialog" aria-label="Edit KPI">
        <header className="side-panel__head">
          <div className="side-panel__title">Edit metric</div>
          <button className="iconbtn" onClick={onClose} aria-label="Close">
            <IconX size={16} />
          </button>
        </header>
        <div className="side-panel__body">
          <div className="ds-field">
            <label className="ds-field__label">Label</label>
            <div className="ds-input">
              <input
                value={kpi.label}
                onChange={(e) => update('label', e.target.value)}
                placeholder="Metric name" />
            </div>
          </div>
          <div className="ds-field">
            <label className="ds-field__label">Value</label>
            <div className="ds-input">
              <input
                value={kpi.value}
                onChange={(e) => update('value', e.target.value)}
                placeholder="e.g. 67.3%" />
            </div>
          </div>
          <div className="ds-field">
            <label className="ds-field__label">Caption</label>
            <div className="ds-input">
              <input
                value={kpi.sub}
                onChange={(e) => update('sub', e.target.value)}
                placeholder="Supporting detail" />
            </div>
          </div>
          <div className="ds-field">
            <label className="ds-field__label">Notes</label>
            <div className="ds-textarea">
              <textarea
                rows={4}
                value={kpi.notes || ''}
                onChange={(e) => update('notes', e.target.value)}
                placeholder="Optional context for this metric" />
            </div>
          </div>
        </div>
      </aside>
    </React.Fragment>);

}

/* ===== Section: Overview (live dashboard) ===== */
function StatTile({ label, value, sub, tone }) {
  return (
    <div className={`stat-tile ${tone ? `stat-tile--${tone}` : ''}`}>
      <div className="stat-tile__label">{label}</div>
      <div className="stat-tile__value">{value}</div>
      {sub && <div className="stat-tile__sub">{sub}</div>}
    </div>);

}

function ProgressBar({ value, total, label }) {
  const pct = Math.round(value / total * 100);
  return (
    <div className="pbar">
      <div className="pbar__row">
        <span className="pbar__label">{label}</span>
        <span className="pbar__count"><strong>{value}</strong> / {total} <span className="pbar__pct">· {pct}%</span></span>
      </div>
      <div className="pbar__track">
        <div className="pbar__fill" style={{ width: pct + '%' }} />
      </div>
    </div>);

}

/* ===== Sources for the Overview dashboard (AI-extracted) ===== */
const OV_SRC_SAFETY_KPI = {
  kind: 'xlsx',
  file: 'Safety-Stats-March-2026.xlsx',
  pages: 'Sheet: KPI',
  by: 'Reu De Los Santos',
  ago: '3 d ago',
  agent: 'spreadsheet agent',
  extractedAgo: '3 days ago',
  excerpts: [
  {
    label: 'KPI sheet — March 2026',
    kind: 'table',
    headers: ['Metric', 'March', 'YTD', 'PTD'],
    rows: [
    ['Lost-time incidents', 0, 0, 0],
    ['Hours worked', '20,407', '60,118', '792,145'],
    ['NLTI rate', 0.00, 14.3, '—'],
    ['Environmental incidents', 2, 3, 48]]

  }]

};

const OV_SRC_MONTHLY = {
  kind: 'pdf',
  file: '2026-03 Monthly Report-R0.pdf',
  pages: 'p.2,3',
  by: 'Sarah Chen',
  ago: '3h ago',
  agent: 'node agent',
  extractedAgo: '3 days ago',
  excerpts: [
  { label: 'Page 2 — Safety', text: 'No lost-time incidents recorded in March. Zero LTI YTD. Total hours worked this period: 20,407 (792,145 project-to-date). NLTI rate for the period is 0.00 against a project goal of 3.9 (2026 YTD 14.3).' },
  { label: 'Page 3 — Environmental', text: 'Two environmental incidents recorded in March — both minor hydrocarbon releases on the south site, contained and remediated within the shift. YTD 3, project-to-date 48.' }]

};

const OV_SRC_WEEKLY = {
  kind: 'pdf',
  file: 'AWST_Weekly Report_220_29Mar2026.pdf',
  pages: 'p.4,6',
  by: 'Mike Reyes',
  ago: '1 d ago',
  agent: 'node agent',
  extractedAgo: '1 day ago',
  excerpts: [
  { label: 'Section 1 — Status', text: 'Tunneling complete. Focus is on steel pipe installation, cellular grout backfill (4.5% complete with 647 m³ placed this week), South Valve Chamber dewatering and excavation prep, and North Valve Chamber East Wall Lift 2 concrete.' },
  { label: 'Section 2 — Ground improvement', text: 'Stone columns SC15, SC16, SC26 installed by Menard remediating SVC SOE non-conformance flagged in Weekly 218. CFA pre-drill by Henry continues.' }]

};

const OV_SRC_MANPOWER = {
  kind: 'xlsx',
  file: 'AWST_Manpower_Week_220.xlsx',
  pages: 'Sheet: Headcount',
  by: 'Mike Reyes',
  ago: '1 d ago',
  agent: 'spreadsheet agent',
  extractedAgo: '1 day ago',
  excerpts: [
  {
    label: 'Headcount — week 220',
    kind: 'table',
    headers: ['Role', 'Count'],
    rows: [
    ['Laborers', 28],
    ['Operators', 3],
    ['Electricians', 2],
    ['Welders / Mechanics', 3],
    ['Blue Max Drilling (sub)', 4],
    ['ILP Archaeology (sub)', 4]]

  },
  {
    label: 'Totals',
    kind: 'table',
    headers: ['Bucket', 'Count'],
    rows: [
    ['Indirect / Overhead', 36],
    ['Staff', 23],
    ['Direct craft', 44]]

  }]

};

const OV_SRC_DAILY = {
  kind: 'xlsx',
  file: 'AWST_Pipe_Install_Tracker.xlsx',
  pages: 'Sheet: Joints',
  by: 'Don Hayes',
  ago: '2 d ago',
  agent: 'spreadsheet agent',
  extractedAgo: '2 days ago',
  excerpts: [
  {
    label: 'Pipe install progress — 191 total',
    kind: 'table',
    headers: ['Stage', 'Count', '%'],
    rows: [
    ['Pipe delivered', 191, '100%'],
    ['Transferred to yard', 191, '100%'],
    ['Set in tunnel', 183, '95.8%'],
    ['Capped', 164, '85.9%'],
    ['Weld QC accepted', 144, '75.4%']]

  }]

};

const OV_SRC_COMMERCIAL = {
  kind: 'xlsx',
  file: 'AWST_Commercial_Register.xlsx',
  pages: 'Sheet: Open items',
  by: 'Mike Reyes',
  ago: '1 d ago',
  agent: 'spreadsheet agent',
  extractedAgo: '1 day ago',
  excerpts: [
  {
    label: 'Open commercial items — Weekly 220',
    kind: 'table',
    headers: ['ID', 'Value', 'Status'],
    rows: [
    ['PCO-008', '$5.1M', 'Disputed'],
    ['PCO-010', '—', 'Disputed'],
    ['PCO-052', '—', 'Disputed'],
    ['CO-028', '—', 'Executed'],
    ['CO-029', '—', 'Executed']]

  }]

};

function SectionOverview({ editable = false, hideTitle = false }) {
  // EB — local helper that conditionally wraps a block in EditableBlock.
  const EB = ({ fields, render, sources = {}, className = '' }) => {
    const init = Object.fromEntries(fields.map((f) => [f.id, f.default]));
    if (!editable) return render(init);
    return (
      <EditableBlock
        fields={fields}
        initialValues={init}
        sources={sources}
        className={className}>
        {(v) => render(v)}
      </EditableBlock>);

  };

  const KPI_TILES = [
  { updateId: 'u-lti', defaults: { label: 'Lost-time incidents (March)', value: '0', sub: 'Goal · 0 · 0 YTD' }, tone: 'ok', source: OV_SRC_SAFETY_KPI },
  { updateId: 'u-hrs', defaults: { label: 'Hours worked (March)', value: '20,407', sub: '792,145 hrs project to date' }, source: OV_SRC_SAFETY_KPI },
  { updateId: 'u-nlti', defaults: { label: 'NLTI rate (March)', value: '0.00', sub: '2026 YTD · 14.3 · Goal 3.9' }, tone: 'warn', source: OV_SRC_SAFETY_KPI },
  { defaults: { label: 'Environmental incidents', value: '2', sub: 'March · 3 YTD · 48 PTD' }, source: OV_SRC_SAFETY_KPI }];


  const WORKFRONTS = [
  { site: 'South site', t: 'SVC dewatering & excavation', s: 'Pump test complete · Well #11 added at −18 m · Wells #1 and #4 to be removed · Prep for Lift 1 excavation', tag: 'On track' },
  { site: 'Tunnel', t: 'Cellular grout backfill', s: '647 m³ placed this week · 4.5% complete · Slag mix in place of fly ash', tag: 'In progress' },
  { site: 'North site', t: 'NVC East Wall Lift 2 concrete', s: 'Formwork complete · Reinforcing & bulkheads set · Placement scheduled', tag: 'On track' },
  { site: 'Off-site', t: 'NWP fabrication — NVC pipe', s: 'Tunnel pipe 191/191 delivered · Shaft pipe 9/9 hydrotested · Tee MK 307 fit-up at Jewel', tag: 'In progress' },
  { site: 'South site', t: 'Stone column ground improvement', s: 'SC15, SC16, SC26 installed by Menard · CFA pre-drill by Henry', tag: 'In progress' },
  { site: 'Tunnel', t: 'Pipe welding QC', s: '144 of 191 joints QA-accepted · Stasuk QC / Acuren QA on site', tag: 'In progress' }];


  return (
    <section className="cs" id="overview">
      {/* === Section header === */}
      <EB
        className="editable--hero"
        fields={[
        { id: 'title', label: 'Title', kind: 'text', default: 'Cedar Narrows Water Supply Tunnel' },
        { id: 'summary', label: 'Summary', kind: 'textarea', rows: 3, default: 'Tunneling is complete and the Fraser River crossing is tracking eleven weeks ahead of its November 2027 substantial completion.' },
        { id: 'accent', label: 'Highlight phrase', kind: 'text', default: 'eleven weeks ahead' },
        { id: 'chip1', label: 'Tag 1', kind: 'text', default: 'Traylor / Aecon GP' },
        { id: 'chip2', label: 'Tag 2', kind: 'text', default: 'Forecast SC · Nov 8, 2027' },
        { id: 'chip3', label: 'Tag 3', kind: 'text', default: 'Day 1,520 of 2,130' }]
        }
        sources={{ summary: OV_SRC_MONTHLY, chip2: OV_SRC_WEEKLY }}
        render={(v) =>
        <header className="cs__header cs__header--summary">
            {!hideTitle && <h2 className="cs__title">{v.title}</h2>}
            <p className="cs__summary"><HeadlineText text={v.summary} accent={v.accent} color="#3F9A5E" /></p>
            <div className="cs__chips">
              {v.chip1 && <span className="chip">{v.chip1}</span>}
              {v.chip2 && <span className="chip">{v.chip2}</span>}
              {v.chip3 && <span className="chip">{v.chip3}</span>}
            </div>
          </header>
        } />
      

      {/* === Headline KPI strip === */}
      <div className="cs__kpi-grid cs__kpi-grid--4">
        {KPI_TILES.map((k, i) =>
        <EB
          key={i}
          className="editable--tile"
          fields={[
          { id: 'label', label: 'Label', kind: 'text', default: k.defaults.label },
          { id: 'value', label: 'Value', kind: 'text', default: k.defaults.value, updateId: k.updateId },
          { id: 'sub', label: 'Caption', kind: 'text', default: k.defaults.sub }]
          }
          sources={{ value: k.source }}
          render={(v) =>
          k.updateId ?
          <StatTileWithUpdate updateId={k.updateId} defaultValue={v.value} label={v.label} sub={v.sub} tone={k.tone} /> :
          <StatTile label={v.label} value={v.value} sub={v.sub} tone={k.tone} />
          } />

        )}
      </div>

      {/* === Status callout === */}
      <EB
        fields={[
        { id: 'title', label: 'Title', kind: 'text', default: 'Where the project stands — week ending March 29' },
        { id: 'body', label: 'Body', kind: 'textarea', rows: 6, default: 'Tunneling complete. Focus is on steel pipe installation, cellular grout backfill (4.5% complete with 647 m³ placed this week), South Valve Chamber dewatering and excavation prep, and North Valve Chamber East Wall Lift 2 concrete. Stone columns SC15, SC16, SC26 installed by Menard remediating SVC SOE non-conformance.' }]
        }
        sources={{ body: OV_SRC_WEEKLY }}
        render={(v) =>
        <div className="cs__callout cs__callout--muted">
            <div className="cs__callout-ico"><IconInfo size={18} /></div>
            <div className="cs__callout-body">
              <h4 className="cs__callout-title">{v.title}</h4>
              <p className="cs__p">{v.body}</p>
            </div>
          </div>
        } />
      

      {/* === Two-column: Tunnel pipe progress + Manpower === */}
      <div className="cs__split-2">
        <EB
          fields={[
          { id: 'title', label: 'Title', kind: 'text', default: 'Tunnel steel pipe — installation progress' },
          { id: 'sub', label: 'Subtitle', kind: 'text', default: 'Daily 12010 · Mar 2, 2026' },
          { id: 'total', label: 'Total pipes', kind: 'text', default: '191' },
          { id: 'v1', label: 'Pipe delivered', kind: 'text', default: '191' },
          { id: 'v2', label: 'Transferred to yard', kind: 'text', default: '191' },
          { id: 'v3', label: 'Set in tunnel', kind: 'text', default: '183' },
          { id: 'v4', label: 'Capped', kind: 'text', default: '164' },
          { id: 'v5', label: 'Weld QC accepted', kind: 'text', default: '144' }]
          }
          sources={{ v3: OV_SRC_DAILY, v4: OV_SRC_DAILY, v5: OV_SRC_DAILY }}
          render={(v) => {
            const T = parseInt(v.total, 10) || 191;
            const n = (s) => parseInt(s, 10) || 0;
            return (
              <div className="dash-card">
                <div className="dash-card__head">
                  <div className="dash-card__title">{v.title}</div>
                  <div className="dash-card__sub">{v.sub}</div>
                </div>
                <div className="dash-card__body">
                  <ProgressBar value={n(v.v1)} total={T} label="Pipe delivered" />
                  <ProgressBar value={n(v.v2)} total={T} label="Transferred to yard" />
                  <ProgressBar value={n(v.v3)} total={T} label="Set in tunnel" />
                  <ProgressBar value={n(v.v4)} total={T} label="Capped" />
                  <ProgressBar value={n(v.v5)} total={T} label="Weld QC accepted" />
                </div>
              </div>);

          }} />
        

        <EB
          fields={[
          { id: 'title', label: 'Title', kind: 'text', default: 'Manpower on site (week 220)' },
          { id: 'sub', label: 'Subtitle', kind: 'text', default: 'Indirect/Overhead 36 · Staff 23 · Direct craft 44' },
          { id: 'r1l', label: 'Row 1 — label', kind: 'text', default: 'Laborers' },
          { id: 'r1v', label: 'Row 1 — count', kind: 'text', default: '28' },
          { id: 'r2l', label: 'Row 2 — label', kind: 'text', default: 'Operators' },
          { id: 'r2v', label: 'Row 2 — count', kind: 'text', default: '3' },
          { id: 'r3l', label: 'Row 3 — label', kind: 'text', default: 'Electricians' },
          { id: 'r3v', label: 'Row 3 — count', kind: 'text', default: '2' },
          { id: 'r4l', label: 'Row 4 — label', kind: 'text', default: 'Welders / Mechanics' },
          { id: 'r4v', label: 'Row 4 — count', kind: 'text', default: '3' },
          { id: 'r5l', label: 'Row 5 — label', kind: 'text', default: 'Blue Max Drilling (sub)' },
          { id: 'r5v', label: 'Row 5 — count', kind: 'text', default: '4' },
          { id: 'r6l', label: 'Row 6 — label', kind: 'text', default: 'ILP Archaeology (sub)' },
          { id: 'r6v', label: 'Row 6 — count', kind: 'text', default: '4' }]
          }
          sources={{ sub: OV_SRC_MANPOWER, r1v: OV_SRC_MANPOWER, r5v: OV_SRC_MANPOWER }}
          render={(v) => {
            const rows = [1, 2, 3, 4, 5, 6].map((i) => ({
              l: v[`r${i}l`],
              v: parseInt(v[`r${i}v`], 10) || 0
            }));
            return (
              <div className="dash-card">
                <div className="dash-card__head">
                  <div className="dash-card__title">{v.title}</div>
                  <div className="dash-card__sub">{v.sub}</div>
                </div>
                <div className="dash-card__body dash-card__body--rows">
                  {rows.map((r, i) =>
                  <div key={i} className="mp-row">
                      <span className="mp-row__label">{r.l}</span>
                      <span className="mp-row__bar"><span className="mp-row__fill" style={{ width: Math.min(100, r.v * 3) + '%' }} /></span>
                      <span className="mp-row__v">{r.v}</span>
                    </div>
                  )}
                </div>
              </div>);

          }} />
        
      </div>

      {/* === Active workfronts — outer header non-editable, each card is its own block === */}
      <div className="dash-card dash-card--workfronts">
        <div className="dash-card__head">
          <div className="dash-card__title">Active workfronts — this week</div>
          <div className="dash-card__sub">From Weekly Report No. 220</div>
        </div>
        <div className="wf-grid">
          {WORKFRONTS.map((w, i) =>
          <EB
            key={i}
            className="editable--wf"
            fields={[
            { id: 'site', label: 'Site', kind: 'text', default: w.site },
            { id: 'tag', label: 'Status tag', kind: 'text', default: w.tag },
            { id: 't', label: 'Title', kind: 'text', default: w.t },
            { id: 's', label: 'Summary', kind: 'textarea', rows: 4, default: w.s }]
            }
            sources={{ s: OV_SRC_WEEKLY }}
            render={(v) =>
            <div className="wf-card">
                  <div className="wf-card__head">
                    <span className="wf-card__site">{v.site}</span>
                    <span className={`wf-card__tag ${v.tag === 'On track' ? 'is-ok' : 'is-active'}`}>{v.tag}</span>
                  </div>
                  <div className="wf-card__t">{v.t}</div>
                  <div className="wf-card__s">{v.s}</div>
                </div>
            } />

          )}
        </div>
      </div>

    </section>);
}

/* ===== Section: Safety ===== */
const SF_SRC_STATS = {
  kind: 'xlsx',
  file: 'Safety-Stats-Q4-2025.xlsx',
  pages: 'Sheet: KPI',
  by: 'Myles Murphy',
  ago: '1 wk ago',
  agent: 'spreadsheet agent',
  extractedAgo: '4 days ago',
  excerpts: [
  {
    label: 'KPI · 2022–2025 rolling',
    kind: 'table',
    headers: ['Year', 'LTI', 'TRIF', 'NLTI', 'Hours (k)'],
    rows: [
    ['2022', 0, 0.00, 3.46, 50.3],
    ['2023', 0, 0.00, 6.35, 173.4],
    ['2024', 1, 0.79, 2.40, 251.8],
    ['2025', 0, 0.00, 8.92, 269.2]]

  }]

};
const SF_SRC_INCIDENTS = {
  kind: 'xlsx',
  file: 'Safety-Stats-Q4-2025.xlsx',
  pages: 'Sheet: Incident Log',
  by: 'Myles Murphy',
  ago: '1 wk ago',
  agent: 'spreadsheet agent',
  extractedAgo: '4 days ago',
  excerpts: [
  {
    label: 'Incident counts — Sept 25 – Dec 25, 2025',
    kind: 'table',
    headers: ['Category', 'Count'],
    rows: [
    ['Near Hit', 3],
    ['Report Only', 2],
    ['First Aid', 2],
    ['Medical Aid', 0],
    ['Lost Time', 0],
    ['Equip. Damage', 3],
    ['Prop. Damage', 5]]

  }]

};
const SF_SRC_TRAINING = {
  kind: 'xlsx',
  file: 'Safety-Inspections-Q4-2025.xlsx',
  pages: 'Sheet: Activity',
  by: 'Reu De Los Santos',
  ago: '3 d ago',
  agent: 'spreadsheet agent',
  extractedAgo: '3 days ago',
  excerpts: [
  {
    label: 'Inspection / training counts',
    kind: 'table',
    headers: ['Activity', 'Count'],
    rows: [
    ['Safety team inspections', 40],
    ['Crew inspections', 38],
    ['Orientations completed', 38],
    ['WSBC inspections — no orders', 2]]

  }]

};
const SF_SRC_LEADERSHIP = {
  kind: 'pdf',
  file: '2025-12 Monthly Report-R0.pdf',
  pages: 'p.4',
  by: 'James Anderson',
  ago: '2 wk ago',
  agent: 'node agent',
  extractedAgo: '12 days ago',
  excerpts: [
  { label: 'Page 4 — Org', text: 'Safety Manager Myles Murphy has tendered his resignation. Reu De Los Santos has been promoted into the role effective January 2026.' }]

};

function SectionSafety({ editable = false }) {
  const EB = ({ fields, render, sources = {}, className = '' }) => {
    const init = Object.fromEntries(fields.map((f) => [f.id, f.default]));
    if (!editable) return render(init);
    return (
      <EditableBlock fields={fields} initialValues={init} sources={sources} className={className}>
        {(v) => render(v)}
      </EditableBlock>);

  };

  const METRICS = [
  { key: 'lti', title: 'Lost Time Incidents', value: '0', delta: 'Goal · 0', tone: 'neutral',
    labels: ['2022', '2023', '2024', 'Period'], values: [0, 0, 1, 0], source: SF_SRC_STATS },
  { key: 'trif', title: 'TRIF', value: '0.00', delta: 'Goal · 0.80', tone: 'neg',
    labels: ['2023', '2024', '2025', 'Period'], values: [0, 0.79, 0, 0], source: SF_SRC_STATS },
  { key: 'nlti', title: 'NLTI', value: '8.92', delta: 'Goal · 3.90', tone: 'pos',
    labels: ['2022', '2023', '2024', 'Period'], values: [3.46, 6.35, 2.40, 8.92], source: SF_SRC_STATS },
  { key: 'hrs', title: 'Hours worked (period)', value: '78,897', delta: '745,796 project to date', tone: 'pos',
    labels: ['2022', '2023', '2024', '2025'], values: [50.3, 173.4, 251.8, 269.2], source: SF_SRC_STATS }];


  const INCIDENT_LABELS = ['Near Hit', 'Report Only', 'First Aid', 'Non-Occ MA', 'Medical Aid', 'Lost Time', 'Equip. Damage', 'Prop. Damage'];
  const INCIDENT_VALS = [3, 2, 2, 0, 0, 0, 3, 5];

  return (
    <section className="cs" id="safety">
      <EB
        className="editable--hero"
        fields={[
        { id: 'title', label: 'Section title', kind: 'text', default: 'Safety' },
        { id: 'lede', label: 'Description', kind: 'textarea', rows: 5, default: 'Period September 25 – December 25, 2025. Zero LTI, zero medical aid, and no recordable or HP safety incidents this period. NLTI sits above the project goal driven by two first-aid events; TRIF remains at zero.' }]
        }
        sources={{ lede: SF_SRC_STATS }}
        render={(v) =>
        <React.Fragment>
            <h2 className="cs__title cs__title--with-icon"><IconShield size={20} />{v.title}</h2>
            <p className="cs__lede">{v.lede}</p>
          </React.Fragment>
        } />
      

      <div className="cs__split-2">
        <EB
          fields={[
          { id: 'headline', label: 'Headline', kind: 'textarea', rows: 3, default: 'NLTI rate climbed to 8.92 this period — well above the 3.90 project goal — driven by two first-aid events' },
          { id: 'accent', label: 'Highlight phrase', kind: 'text', default: 'well above the 3.90 project goal' }]
          }
          sources={{ headline: SF_SRC_STATS }}
          render={(v) =>
          <AnalysisCard
            headline={v.headline} accent={v.accent} accentColor="#C2502F"
            legend={[{ color: '#D04A3F', label: 'NLTI rate' }, { color: 'rgba(82,178,110,0.45)', label: 'At or below goal (3.90)' }]}>
            <RichTrendChart
              values={[3.46, 6.35, 2.40, 8.92]}
              xLabels={['2022', '2023', '2024', 'Period']}
              yMax={10} yTicks={[0, 2, 4, 6, 8, 10]}
              color="#D04A3F" goal={3.90} goalLabel="Goal · 3.90"
              zoneFill="rgba(82,178,110,0.12)"
              annotations={[{ i: 3, value: '8.92', title: 'this period', color: '#C2502F', place: 'below' }]} />
          </AnalysisCard>
          } />

        <EB
          fields={[
          { id: 'headline', label: 'Headline', kind: 'textarea', rows: 3, default: 'Hours on site grew to 269k in 2025 — 745,796 worked to date — with zero lost-time incidents this period' },
          { id: 'accent', label: 'Highlight phrase', kind: 'text', default: 'zero lost-time incidents' }]
          }
          sources={{ headline: SF_SRC_STATS }}
          render={(v) =>
          <AnalysisCard
            headline={v.headline} accent={v.accent} accentColor="#3F9A5E"
            legend={[{ color: '#3F9A5E', label: 'Hours worked per year (thousands)' }]}>
            <RichTrendChart
              values={[50.3, 173.4, 251.8, 269.2]}
              xLabels={['2022', '2023', '2024', '2025']}
              yMax={300} yTicks={[0, 100, 200, 300]}
              color="#3F9A5E" fill="rgba(63,154,94,0.14)" area={true}
              annotations={[{ i: 3, value: '269k', title: '2025', color: '#3F9A5E', place: 'below' }]} />
          </AnalysisCard>
          } />
      </div>

      <div className="cs__split-2">
        <EB
          fields={[
          { id: 'title', label: 'Card title', kind: 'text', default: 'Incident mix — period' },
          { id: 'unit', label: 'Unit', kind: 'text', default: 'events' },
          { id: 'n1', label: 'Total events (period)', kind: 'text', default: '15' },
          { id: 'n2', label: 'Recordable / HP', kind: 'text', default: '0' },
          { id: 'n3', label: 'Disciplinary actions', kind: 'text', default: '5' }]
          }
          sources={{ n1: SF_SRC_INCIDENTS, n2: SF_SRC_INCIDENTS, n3: SF_SRC_INCIDENTS }}
          render={(v) =>
          <div className="bar-card">
              <div className="bar-card__head">
                <div className="bar-card__title">{v.title}</div>
                <div className="bar-card__unit">{v.unit}</div>
              </div>
              <div className="bar-card__chart">
                <BarChart values={INCIDENT_VALS} labels={[INCIDENT_LABELS[0], '', '', '', '', '', '', INCIDENT_LABELS[7]]} highlightedIndices={[2, 6, 7]} height={150} />
              </div>
              <div className="bar-card__summary">
                <div><span className="bar-card__sn">{v.n1}</span><span className="bar-card__sl">Total events (period)</span></div>
                <div><span className="bar-card__sn">{v.n2}</span><span className="bar-card__sl">Recordable / HP</span></div>
                <div><span className="bar-card__sn">{v.n3}</span><span className="bar-card__sl">Disciplinary actions</span></div>
              </div>
            </div>
          } />
        

        <EB
          fields={[
          { id: 'title', label: 'Card title', kind: 'text', default: 'Accomplishments & Training' },
          { id: 't1v', label: 'Safety team inspections', kind: 'text', default: '40' },
          { id: 't2v', label: 'Crew inspections', kind: 'text', default: '38' },
          { id: 't3v', label: 'Orientations completed', kind: 'text', default: '38' },
          { id: 't4v', label: 'WSBC inspections — no orders', kind: 'text', default: '2' },
          { id: 'note', label: 'Trailing note', kind: 'textarea', rows: 4, default: 'Recurring training across the period: spotter, rigging, mine rescue, confined space, fire extinguisher, crane operator competency, and CSE training. JOHSC met Nov 20; CDSI meeting held Nov 6.' }]
          }
          sources={{ t1v: SF_SRC_TRAINING, t2v: SF_SRC_TRAINING, t3v: SF_SRC_TRAINING, t4v: SF_SRC_TRAINING }}
          render={(v) => {
            const tiles = [
            { v: v.t1v, l: 'Safety team inspections' },
            { v: v.t2v, l: 'Crew inspections' },
            { v: v.t3v, l: 'Orientations completed' },
            { v: v.t4v, l: 'WSBC inspections — no orders' }];

            return (
              <div className="bar-card">
                <div className="bar-card__head">
                  <div className="bar-card__title type-caption-title" style={{ textTransform: 'none', letterSpacing: '-0.01em' }}>{v.title}</div>
                </div>
                <div className="train-grid">
                  {tiles.map((t) =>
                  <div key={t.l} className="train-tile">
                      <div className="train-tile__v">{t.v}</div>
                      <div className="train-tile__l">{t.l}</div>
                    </div>
                  )}
                </div>
                <p className="cs__p cs__p--muted">{v.note}</p>
              </div>);

          }} />
        
      </div>

      <EB
        fields={[
        { id: 'title', label: 'Title', kind: 'text', default: 'Safety leadership transition' },
        { id: 'body', label: 'Body', kind: 'textarea', rows: 4, default: 'Safety Manager Myles Murphy has tendered his resignation. Reu De Los Santos has been promoted into the role effective January 2026.' }]
        }
        sources={{ body: SF_SRC_LEADERSHIP }}
        render={(v) =>
        <div className="cs__callout cs__callout--muted">
            <div className="cs__callout-ico"><IconInfo size={16} /></div>
            <div className="cs__callout-body">
              <h4 className="cs__callout-title">{v.title}</h4>
              <p className="cs__p">{v.body}</p>
            </div>
          </div>
        } />
      
    </section>);

}

/* ===== Section: Finance ===== */
const FN_SRC_KPI = {
  kind: 'xlsx',
  file: 'Cost-Tracker-Dec-2025.xlsx',
  pages: 'Sheet: Summary',
  by: 'Lorri Warf',
  ago: '2 d ago',
  agent: 'spreadsheet agent',
  extractedAgo: '2 days ago',
  excerpts: [
  {
    label: 'KPI strip — JTD',
    kind: 'table',
    headers: ['Metric', 'Value', 'Note'],
    rows: [
    ['Payment received', '$240.4M', 'Before holdback $295.9M'],
    ['Earned revenue', '$178.4M', 'WIP $51.8M'],
    ['Cost to date', '$210.8M', 'Incl. $12M amort. equip.'],
    ['Net cash position', '$29.6M', 'Job 2104']]

  }]

};
const FN_SRC_RBM = {
  kind: 'xlsx',
  file: 'EAC-Forecast-Dec-2025.xlsx',
  pages: 'Sheet: RBM',
  by: 'Lorri Warf',
  ago: '2 d ago',
  agent: 'spreadsheet agent',
  extractedAgo: '2 days ago',
  excerpts: [
  {
    label: 'Revenue · Budget · Margin ($M)',
    kind: 'table',
    headers: ['Bucket', 'Revenue', 'Cost', 'Margin'],
    rows: [
    ['Original estimate', 287.8, 246.4, 41.4],
    ['Approved COs', 26.1, 22.1, 3.9],
    ['Current EAC', 313.9, 292.8, 21.1]]

  }]

};
const FN_SRC_RISKS = {
  kind: 'xlsx',
  file: 'EAC-Forecast-Dec-2025.xlsx',
  pages: 'Sheet: Risks',
  by: 'Lorri Warf',
  ago: '2 d ago',
  agent: 'spreadsheet agent',
  extractedAgo: '2 days ago',
  excerpts: [
  {
    label: 'Current financial risks ($M)',
    kind: 'table',
    headers: ['Risk', 'Exposure'],
    rows: [
    ['Pipe production', 0.65],
    ['VC concrete', 1.15],
    ['VC mechanical', 0.54],
    ['Valve remediation', 0.20],
    ['Archaeology T&M', 2.55],
    ['Tariffs', 0.00]]

  }]

};
const FN_SRC_CHANGEMGMT = {
  kind: 'xlsx',
  file: 'Change-Management-Log.xlsx',
  pages: 'Sheet: Changes',
  by: 'James Anderson',
  ago: '4 d ago',
  agent: 'spreadsheet agent',
  extractedAgo: '4 days ago',
  excerpts: [
  {
    label: 'Change management — counts & values',
    kind: 'table',
    headers: ['Category', 'Count', 'Value'],
    rows: [
    ['Approved Change Orders (CO)', 28, '$26.06M'],
    ['Field Orders (FO)', 29, '—'],
    ['Pending Change Orders (PCO)', 70, '$27.13M est.'],
    ['Approved time extensions', '155.5 CD', '—'],
    ['Disputed time extensions', '81 CD', 'SVC Secant Pile Depth']]

  }]

};

function SectionFinance({ editable = false }) {
  const EB = ({ fields, render, sources = {}, className = '' }) => {
    const init = Object.fromEntries(fields.map((f) => [f.id, f.default]));
    if (!editable) return render(init);
    return (
      <EditableBlock fields={fields} initialValues={init} sources={sources} className={className}>
        {(v) => render(v)}
      </EditableBlock>);

  };

  const FIN = [
  { key: 'pay',
    headline: 'Payments received reached $240.4M to date — $295.9M before holdback',
    accent: '$240.4M to date', accentColor: '#3F9A5E', color: '#3F9A5E', fill: 'rgba(63,154,94,0.14)',
    labels: ['Q1', 'Q2', 'Q3', 'Q4', 'JTD'], values: [60, 110, 175, 220, 240.4],
    yMax: 300, yTicks: [0, 100, 200, 300], anno: '$240M', legend: 'Cumulative payments received ($M)' },
  { key: 'rev',
    headline: 'Earned revenue stands at $178.4M with $51.8M still in work-in-progress',
    accent: '$51.8M still in work-in-progress', accentColor: '#3A6FB0', color: '#3A6FB0', fill: 'rgba(58,111,176,0.13)',
    labels: ['Q1', 'Q2', 'Q3', 'Q4', 'JTD'], values: [55, 95, 135, 165, 178.4],
    yMax: 200, yTicks: [0, 50, 100, 150, 200], anno: '$178M', legend: 'Cumulative earned revenue ($M)' }];


  const RISKS_VALS = [0.65, 1.15, 0.54, 0.20, 2.55, 0.0];
  const RISKS_LBL = ['Pipe prod.', 'VC concrete', 'VC mech.', 'Valve remed.', 'Arch. T&M', 'Tariffs'];

  return (
    <section className="cs" id="finance">
      <EB
        className="editable--hero"
        fields={[
        { id: 'title', label: 'Section title', kind: 'text', default: 'Finance' },
        { id: 'lede', label: 'Description', kind: 'textarea', rows: 5, default: 'Contract financial status as of December 31, 2025. Forecast margin is $21.1M against an original $41.4M, with $27.1M of unsecured recovery opportunities (escalation, settlements, archaeology T&M) and a $7.1M contingency held in the EAC.' }]
        }
        sources={{ lede: FN_SRC_KPI }}
        render={(v) =>
        <React.Fragment>
            <h2 className="cs__title cs__title--with-icon"><IconDollar size={20} />{v.title}</h2>
            <p className="cs__lede">{v.lede}</p>
          </React.Fragment>
        } />
      

      <div className="an-grid">
        {FIN.map((m) =>
        <EB
          key={m.key}
          fields={[
          { id: 'headline', label: 'Headline', kind: 'textarea', rows: 3, default: m.headline },
          { id: 'accent', label: 'Highlight phrase', kind: 'text', default: m.accent }]
          }
          sources={{ headline: FN_SRC_KPI }}
          render={(v) =>
          <AnalysisCard
            headline={v.headline} accent={v.accent} accentColor={m.accentColor}
            legend={[{ color: m.color, label: m.legend }]}>
            <RichTrendChart
              values={m.values} xLabels={m.labels}
              yMax={m.yMax} yTicks={m.yTicks}
              color={m.color} fill={m.fill} area={true}
              annotations={[{ i: m.values.length - 1, value: m.anno, title: 'to date', color: m.color, place: 'below' }]} />
          </AnalysisCard>
          } />
        )}
      </div>

      <EB
        fields={[
        { id: 'r1c', label: 'Approved CO — count', kind: 'text', default: '28' },
        { id: 'r1v', label: 'Approved CO — value', kind: 'text', default: '$26.06M' },
        { id: 'r1s', label: 'Approved CO — status', kind: 'text', default: 'Executed' },
        { id: 'r2c', label: 'Field Orders — count', kind: 'text', default: '29' },
        { id: 'r2v', label: 'Field Orders — value', kind: 'text', default: '—' },
        { id: 'r2s', label: 'Field Orders — status', kind: 'text', default: 'Active' },
        { id: 'r3c', label: 'Pending CO — count', kind: 'text', default: '70' },
        { id: 'r3v', label: 'Pending CO — value', kind: 'text', default: '$27.13M est.' },
        { id: 'r3s', label: 'Pending CO — status', kind: 'text', default: 'In review' },
        { id: 'r4c', label: 'Approved time ext. — count', kind: 'text', default: '155.5 CD' },
        { id: 'r4v', label: 'Approved time ext. — value', kind: 'text', default: '—' },
        { id: 'r4s', label: 'Approved time ext. — status', kind: 'text', default: 'Granted' },
        { id: 'r5c', label: 'Disputed time ext. — count', kind: 'text', default: '81 CD' },
        { id: 'r5v', label: 'Disputed time ext. — value', kind: 'text', default: 'SVC Secant Pile Depth' },
        { id: 'r5s', label: 'Disputed time ext. — status', kind: 'text', default: 'Disputed' }]
        }
        sources={{
          r1c: FN_SRC_CHANGEMGMT, r1v: FN_SRC_CHANGEMGMT,
          r2c: FN_SRC_CHANGEMGMT,
          r3c: FN_SRC_CHANGEMGMT, r3v: FN_SRC_CHANGEMGMT,
          r4c: FN_SRC_CHANGEMGMT,
          r5c: FN_SRC_CHANGEMGMT
        }}
        render={(v) => {
          const rows = [
          ['Approved Change Orders (CO)', v.r1c, v.r1v, v.r1s],
          ['Field Orders (FO)', v.r2c, v.r2v, v.r2s],
          ['Pending Change Orders (PCO)', v.r3c, v.r3v, v.r3s],
          ['Approved time extensions', v.r4c, v.r4v, v.r4s],
          ['Disputed time extensions', v.r5c, v.r5v, v.r5s]];

          return (
            <div className="cs__sub">
              <div className="cs__sub-label">Change Management</div>
              <div className="cs__table">
                <div className="cs__tr cs__tr--head">
                  <div>Category</div><div className="r">Count</div><div className="r">Value</div><div className="c">Status</div>
                </div>
                {rows.map((row, i) =>
                <div key={i} className="cs__tr">
                    <div>{row[0]}</div>
                    <div className="r tnum">{row[1]}</div>
                    <div className="r tnum">{row[2]}</div>
                    <div className="c">{row[3]}</div>
                  </div>
                )}
              </div>
            </div>);

        }} />
      
    </section>);

}

/* ===== Section: Photos ===== */
const PHOTOS = [
{ id: 'secant', img: (window.__resources && window.__resources.photoSecant) || 'assets/photo-secant-piles.png', t: 'Secant Pile Installation', s: 'South Valve Chamber · 45 of 67 piles complete' },
{ id: 'staging', img: (window.__resources && window.__resources.photoStaging) || 'assets/photo-staging-steel-pipe.png', t: 'Staging Steel Pipe', s: 'South site laydown · 84 tunnel pipes on site' },
{ id: 'welding', img: (window.__resources && window.__resources.photoWelding) || 'assets/photo-tunnel-welding.png', t: 'Jewel Welding Tunnel Pipe', s: 'Tunnel · 60 joints completed underway' },
{ id: 'grout', img: (window.__resources && window.__resources.photoGrout) || 'assets/photo-grout-plant.png', t: 'Cellular Grout Plant Assembly', s: 'South site · Mix design complete, plant assembly underway' },
{ id: 'excav', img: (window.__resources && window.__resources.photoExcav) || 'assets/photo-nvc-excavation.png', t: 'NVC Fine Grading Excavation', s: 'North Valve Chamber · Excavation and bracing complete' },
{ id: 'rebar', img: (window.__resources && window.__resources.photoRebar) || 'assets/photo-nvc-rebar.png', t: 'NVC Base Slab Reinforcing', s: 'North Valve Chamber · Rebar and edge forms installation' }];

function SectionPhotos({ onOpenPhoto, variant = 'overview', onCreateRecord }) {
  const [view, setView] = useStateCol('grid'); // 'grid' (data table) | 'cards'
  const [query, setQuery] = useStateCol('');

  if (variant === 'overview') {
    return (
      <section className="cs" id="photos">
        <header className="cs__photo-head">
          <h2 className="cs__title cs__title--with-icon"><IconCamera size={20} />Latest project photos</h2>
          <span className="chip">Sep – Dec 2025</span>
        </header>
        <p className="cs__lede">Selected images from this reporting period across both sites and offsite fabrication.</p>
        <div className="photo-grid">
          {PHOTOS.map((p) =>
          <button
            key={p.id}
            type="button"
            className="photo photo--button"
            onClick={() => onOpenPhoto && onOpenPhoto(p.id)}>
              <div className="photo__img">
                <img src={p.img} alt={p.t} loading="lazy" />
              </div>
              <div className="photo__meta">
                <div className="photo__t">{p.t}</div>
                <div className="photo__s">{p.s}</div>
              </div>
            </button>
          )}
        </div>
      </section>);
  }

  // Standalone Photos tab — data-grid by default with toggle to cards
  const filtered = PHOTOS.filter((p) => p.t.toLowerCase().includes(query.toLowerCase()));

  return (
    <section className="cs cs--standalone" id="photos">
      <header className="cs__standalone-head">
        <h2 className="cs__standalone-title">Photos</h2>
      </header>
      <div className="dg-toolbar">
        <div className="dg-search">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" />
          </svg>
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search…" />
        </div>
        <div className="dg-toolbar__right">
          <button className="dg-pill" type="button">All types <IconChevronD size={12} /></button>
          <button className="dg-pill" type="button">Last Modified <IconChevronD size={12} /></button>
          <div className="dg-viewtoggle" role="tablist" aria-label="View mode">
            <button
              type="button"
              role="tab"
              aria-selected={view === 'grid'}
              className={`dg-viewtoggle__btn ${view === 'grid' ? 'is-active' : ''}`}
              onClick={() => setView('grid')}
              title="Grid">
              <IconGridList size={14} />
            </button>
            <button
              type="button"
              role="tab"
              aria-selected={view === 'cards'}
              className={`dg-viewtoggle__btn ${view === 'cards' ? 'is-active' : ''}`}
              onClick={() => setView('cards')}
              title="Cards">
              <IconCardsView size={14} />
            </button>
          </div>
          <button
            className="iconbtn dg-add"
            type="button"
            aria-label="New record"
            title="New record"
            onClick={onCreateRecord}><IconPlus size={14} /></button>
        </div>
      </div>

      {view === 'grid' ?
      <PhotosDataGrid items={filtered} onOpenPhoto={onOpenPhoto} /> :

      <div className="photo-grid">
          {filtered.map((p) =>
        <button
          key={p.id}
          type="button"
          className="photo photo--button"
          onClick={() => onOpenPhoto && onOpenPhoto(p.id)}>
              <div className="photo__img">
                <img src={p.img} alt={p.t} loading="lazy" />
              </div>
              <div className="photo__meta">
                <div className="photo__t">{p.t}</div>
                <div className="photo__s">{p.s}</div>
              </div>
            </button>
        )}
        </div>
      }
    </section>);

}

/* ===== Photos Data Grid ===== */
function PhotosDataGrid({ items, onOpenPhoto }) {
  return <ItemsDataGrid items={items.map((p) => ({ ...p, kind: 'photo' }))} onOpenPhoto={onOpenPhoto} />;
}

/* ===== Generic Items Data Grid ===== */
const RECORD_ITEMS = [
{ id: 'overview', kind: 'record', t: 'Cedar Narrows Water Supply Tunnel — Project Overview', tag: 'Need review', updated: '2 d', comments: 12 },
{ id: 'safety', kind: 'record', t: 'Safety — Period Sept – Dec 2025', tag: 'Approved', updated: '3 d', comments: 5 },
{ id: 'finance', kind: 'record', t: 'Finance — As of December 31, 2025', tag: 'Need review', updated: '4 d', comments: 9 }];


function ItemsDataGrid({ items, onOpenPhoto, onOpenRecord }) {
  const handleClick = (it) => {
    if (it.kind === 'photo' && onOpenPhoto) onOpenPhoto(it.id);else
    if (it.kind === 'record' && onOpenRecord) onOpenRecord(it.id);
  };
  return (
    <div className="dg-wrap">
      <table className="dg">
        <colgroup>
          <col style={{ width: '38%' }} />
          <col style={{ width: '12%' }} />
          <col style={{ width: '6%' }} />
          <col style={{ width: '6%' }} />
          <col style={{ width: '14%' }} />
          <col style={{ width: '8%' }} />
          <col style={{ width: '8%' }} />
          <col style={{ width: '8%' }} />
        </colgroup>
        <thead>
          <tr>
            <th>Title</th>
            <th className="dg-th--center">Owner</th>
            <th className="dg-th--center" aria-label="DNA">
              <IconDna size={14} />
            </th>
            <th className="dg-th--center" aria-label="Priority">
              <IconCircleAlert size={14} />
            </th>
            <th>Status</th>
            <th className="dg-th--center" aria-label="Updated">
              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
            </th>
            <th className="dg-th--center" aria-label="Comments">
              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a8 8 0 0 1-12.6 6.5L3 20l1.5-5.4A8 8 0 1 1 21 12z" /></svg>
            </th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {items.map((it) =>
          <tr key={it.id} onClick={() => handleClick(it)} className="dg-row">
              <td>
                <div className="dg-title">
                  <span className="dg-fileicon">
                    {it.kind === 'photo' ?
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="8.5" cy="9.5" r="1.5" /><path d="M21 16l-5-5-9 9" /></svg> :
                  it.kind === 'report' ?
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6M8 13h8M8 17h5" /></svg> :

                  <IconRecordCard size={16} />
                  }
                  </span>
                  <span className="dg-title__text">{it.t}</span>
                </div>
              </td>
              <td className="dg-td--center"><span className="dg-av" aria-hidden="true"></span></td>
              <td className="dg-td--center dg-icol">
                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden="true">
                  <path d="M14.6654 7.38527V7.99861C14.6645 9.43622 14.199 10.8351 13.3383 11.9865C12.4775 13.1379 11.2676 13.9803 9.88894 14.3879C8.51032 14.7955 7.03687 14.7465 5.68834 14.2483C4.33982 13.7501 3.18847 12.8293 2.406 11.6233C1.62354 10.4173 1.25189 8.99065 1.34648 7.55615C1.44107 6.12165 1.99684 4.75616 2.93088 3.66332C3.86493 2.57049 5.12722 1.80886 6.52949 1.49204C7.93176 1.17521 9.39888 1.32017 10.712 1.90527M5.9987 7.33187L7.9987 9.33187L14.6654 2.6652" stroke="#52B26E" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </td>
              <td className="dg-td--center dg-icol">
                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden="true">
                  <rect x="1" y="9" width="3" height="6" rx="1" fill="#615D5A" />
                  <rect x="6" y="5" width="3" height="10" rx="1" fill="#615D5A" />
                  <rect x="11" y="1" width="3" height="14" rx="1" fill="#E7E1DF" />
                </svg>
              </td>
              <td><span className="dg-tag">{it.tag || 'Need review'}</span></td>
              <td className="dg-td--center dg-meta">{it.updated || '5 d'}</td>
              <td className="dg-td--center dg-meta">{it.comments != null ? it.comments : 8}</td>
              <td className="dg-td--right">
                <button className="dg-more" type="button" aria-label="More" onClick={(e) => e.stopPropagation()}>
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1" /><circle cx="5" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
                </button>
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>);

}

/* ===== Reports data fixtures =====
   Filenames mirror the actual project conventions:
   - Monthly:   YYYY-MM Monthly Report-R{rev}.pdf
   - Weekly:    AWST_Weekly Report_{week#}_{DDMMMYYYY}.pdf
   - Daily:     AWST - Contractor Shift Report -{site} - TAGP - Rev{rr} - {sheet} - {YYYY} - {Month-DD}.pdf
*/

const MONTHLY_REPORTS = [
{ id: 'm-2026-03', t: '2026-03 Monthly Report-R0.pdf', period: 'March 2026', rev: 'R0', owner: 'J. Anderson', status: 'Need review', updated: '2 d', comments: 4 },
{ id: 'm-2026-02', t: '2026-02 Monthly Report-R1.pdf', period: 'February 2026', rev: 'R1', owner: 'J. Anderson', status: 'Approved', updated: '1 mo', comments: 7 },
{ id: 'm-2026-01', t: '2026-01 Monthly Report-R0.pdf', period: 'January 2026', rev: 'R0', owner: 'M. Reyes', status: 'Approved', updated: '2 mo', comments: 3 }];


const WEEKLY_REPORTS = [
{ id: 'w-220', t: 'AWST_Weekly Report_220_29Mar2026.pdf', period: 'Mar 23 – 29, 2026', week: 'WK 220', owner: 'M. Reyes', status: 'Need review', updated: '1 d', comments: 2 },
{ id: 'w-219', t: 'AWST_Weekly Report_219_22Mar2026.pdf', period: 'Mar 16 – 22, 2026', week: 'WK 219', owner: 'M. Reyes', status: 'Approved', updated: '8 d', comments: 1 },
{ id: 'w-218', t: 'AWST_Weekly Report_218_15Mar2026.pdf', period: 'Mar 9 – 15, 2026', week: 'WK 218', owner: 'D. Hayes', status: 'Approved', updated: '15 d', comments: 0 },
{ id: 'w-217', t: 'AWST_Weekly Report_217_08Mar2026.pdf', period: 'Mar 2 – 8, 2026', week: 'WK 217', owner: 'D. Hayes', status: 'Approved', updated: '22 d', comments: 3 },
{ id: 'w-216', t: 'AWST_Weekly Report_216_01Mar2026.pdf', period: 'Feb 23 – Mar 1, 2026', week: 'WK 216', owner: 'M. Reyes', status: 'Approved', updated: '29 d', comments: 1 },
{ id: 'w-215', t: 'AWST_Weekly Report_215_22Feb2026.pdf', period: 'Feb 16 – 22, 2026', week: 'WK 215', owner: 'L. Nguyen', status: 'Approved', updated: '36 d', comments: 0 },
{ id: 'w-214', t: 'AWST_Weekly Report_214_15Feb2026.pdf', period: 'Feb 9 – 15, 2026', week: 'WK 214', owner: 'L. Nguyen', status: 'Approved', updated: '43 d', comments: 4 }];


const DAILY_REPORTS = [
{ id: 'd-12010-s', t: 'AWST - Contractor Shift Report -South - TAGP - Rev00 - 12010 - 2026 - March-02.pdf', period: 'Mar 2, 2026', site: 'South', rev: 'Rev00', owner: 'D. Hayes', status: 'Approved', updated: '1 d', comments: 1 },
{ id: 'd-12010-n', t: 'AWST - Contractor Shift Report -North - TAGP - Rev00 - 12010 - 2026 - March-02.pdf', period: 'Mar 2, 2026', site: 'North', rev: 'Rev00', owner: 'M. Reyes', status: 'Approved', updated: '1 d', comments: 0 },
{ id: 'd-12009-s', t: 'AWST - Contractor Shift Report -South - TAGP - Rev00 - 12009 - 2026 - March-01.pdf', period: 'Mar 1, 2026', site: 'South', rev: 'Rev00', owner: 'D. Hayes', status: 'Approved', updated: '2 d', comments: 0 },
{ id: 'd-12009-n', t: 'AWST - Contractor Shift Report -North - TAGP - Rev00 - 12009 - 2026 - March-01.pdf', period: 'Mar 1, 2026', site: 'North', rev: 'Rev00', owner: 'M. Reyes', status: 'Need review', updated: '2 d', comments: 3 },
{ id: 'd-12008-s', t: 'AWST - Contractor Shift Report -South - TAGP - Rev01 - 12008 - 2026 - February-28.pdf', period: 'Feb 28, 2026', site: 'South', rev: 'Rev01', owner: 'D. Hayes', status: 'Approved', updated: '3 d', comments: 2 },
{ id: 'd-12008-n', t: 'AWST - Contractor Shift Report -North - TAGP - Rev00 - 12008 - 2026 - February-28.pdf', period: 'Feb 28, 2026', site: 'North', rev: 'Rev00', owner: 'M. Reyes', status: 'Approved', updated: '3 d', comments: 0 },
{ id: 'd-12007-s', t: 'AWST - Contractor Shift Report -South - TAGP - Rev00 - 12007 - 2026 - February-27.pdf', period: 'Feb 27, 2026', site: 'South', rev: 'Rev00', owner: 'L. Nguyen', status: 'Approved', updated: '4 d', comments: 0 },
{ id: 'd-12007-n', t: 'AWST - Contractor Shift Report -North - TAGP - Rev00 - 12007 - 2026 - February-27.pdf', period: 'Feb 27, 2026', site: 'North', rev: 'Rev00', owner: 'M. Reyes', status: 'Approved', updated: '4 d', comments: 1 },
{ id: 'd-12006-s', t: 'AWST - Contractor Shift Report -South - TAGP - Rev00 - 12006 - 2026 - February-26.pdf', period: 'Feb 26, 2026', site: 'South', rev: 'Rev00', owner: 'D. Hayes', status: 'Approved', updated: '5 d', comments: 0 },
{ id: 'd-12006-n', t: 'AWST - Contractor Shift Report -North - TAGP - Rev00 - 12006 - 2026 - February-26.pdf', period: 'Feb 26, 2026', site: 'North', rev: 'Rev00', owner: 'M. Reyes', status: 'Approved', updated: '5 d', comments: 2 }];


/* ===== Reports Data Grid ===== */
function ReportsDataGrid({ items, secondaryLabel = 'Period', secondaryKey = 'period', tertiaryLabel, tertiaryKey, totalCount }) {
  return (
    <div className="dg-wrap">
      <table className="dg dg--reports">
        <colgroup>
          <col style={{ width: tertiaryKey ? '34%' : '42%' }} />
          <col style={{ width: '16%' }} />
          {tertiaryKey && <col style={{ width: '8%' }} />}
          <col style={{ width: '12%' }} />
          <col style={{ width: '14%' }} />
          <col style={{ width: '6%' }} />
          <col style={{ width: '6%' }} />
          <col style={{ width: '4%' }} />
        </colgroup>
        <thead>
          <tr>
            <th>Name</th>
            <th>{secondaryLabel}</th>
            {tertiaryKey && <th>{tertiaryLabel}</th>}
            <th>Owner</th>
            <th>Status</th>
            <th className="dg-th--center" aria-label="Updated">
              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
            </th>
            <th className="dg-th--center" aria-label="Comments">
              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a8 8 0 0 1-12.6 6.5L3 20l1.5-5.4A8 8 0 1 1 21 12z" /></svg>
            </th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {items.map((it) =>
          <tr key={it.id} className="dg-row">
              <td>
                <div className="dg-title">
                  <span className="dg-fileicon">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6M8 13h8M8 17h5" /></svg>
                  </span>
                  <span className="dg-title__text">{it.t}</span>
                </div>
              </td>
              <td className="dg-meta">{it[secondaryKey]}</td>
              {tertiaryKey && <td className="dg-meta">{it[tertiaryKey]}</td>}
              <td>
                <div className="dg-owner">
                  <span className="dg-av" aria-hidden="true"></span>
                  <span className="dg-owner__name">{it.owner}</span>
                </div>
              </td>
              <td><span className={`dg-tag dg-tag--${it.status === 'Approved' ? 'ok' : 'review'}`}>{it.status}</span></td>
              <td className="dg-td--center dg-meta">{it.updated}</td>
              <td className="dg-td--center dg-meta">{it.comments}</td>
              <td className="dg-td--right">
                <button className="dg-more" type="button" aria-label="More" onClick={(e) => e.stopPropagation()}>
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1" /><circle cx="5" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
                </button>
              </td>
            </tr>
          )}
        </tbody>
      </table>
      {totalCount && <DgPagination shown={items.length} total={totalCount} />}
    </div>);
}

/* ===== Pagination ===== */
function DgPagination({ shown, total, page = 1 }) {
  const pageSize = shown;
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  const visiblePages = [];
  for (let i = 1; i <= Math.min(totalPages, 4); i++) visiblePages.push(i);
  if (totalPages > 5) visiblePages.push('…');
  if (totalPages > 4) visiblePages.push(totalPages);

  return (
    <div className="dg-pag">
      <div className="dg-pag__info">
        Showing <strong>1–{shown}</strong> of <strong>{total}</strong>
      </div>
      <div className="dg-pag__nav" role="navigation" aria-label="Pagination">
        <button type="button" className="dg-pag__btn" aria-label="Previous page" disabled>
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6" /></svg>
        </button>
        {visiblePages.map((p, i) =>
        p === '…' ?
        <span key={`e${i}`} className="dg-pag__el">…</span> :

        <button
          key={p}
          type="button"
          className={`dg-pag__btn dg-pag__btn--num ${p === page ? 'is-active' : ''}`}
          aria-current={p === page ? 'page' : undefined}>
              {p}
            </button>

        )}
        <button type="button" className="dg-pag__btn" aria-label="Next page">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6" /></svg>
        </button>
      </div>
    </div>);

}

/* ===== Reports section (generic for monthly/weekly/daily) ===== */
function SectionReports({ title, kicker, items, totalCount, secondaryLabel, secondaryKey, tertiaryLabel, tertiaryKey, onCreateRecord }) {
  const [query, setQuery] = useStateCol('');
  const filtered = items.filter((it) => it.t.toLowerCase().includes(query.toLowerCase()));

  return (
    <section className="cs cs--standalone">
      <header className="cs__standalone-head">
        <div>
          <h2 className="cs__standalone-title">{title}</h2>
          {kicker && <div className="cs__standalone-kicker">{kicker}</div>}
        </div>
      </header>
      <div className="dg-toolbar">
        <div className="dg-search">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" />
          </svg>
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search reports…" />
        </div>
        <div className="dg-toolbar__right">
          <button className="dg-pill" type="button">Status <IconChevronD size={12} /></button>
          <button className="dg-pill" type="button">Owner <IconChevronD size={12} /></button>
          <button className="dg-pill" type="button">Last Modified <IconChevronD size={12} /></button>
          <button
            className="iconbtn dg-add"
            type="button"
            aria-label="New record"
            title="New record"
            onClick={onCreateRecord}><IconPlus size={14} /></button>
        </div>
      </div>
      <ReportsDataGrid
        items={filtered}
        secondaryLabel={secondaryLabel}
        secondaryKey={secondaryKey}
        tertiaryLabel={tertiaryLabel}
        tertiaryKey={tertiaryKey}
        totalCount={query ? null : totalCount} />
      
    </section>);

}

function SectionMonthly({ onCreateRecord }) {
  return (
    <SectionReports
      title="Monthly reports"
      kicker="Project monthly performance reports submitted to the Owner"
      items={MONTHLY_REPORTS}
      totalCount={14}
      secondaryLabel="Period"
      secondaryKey="period"
      tertiaryLabel="Rev"
      tertiaryKey="rev"
      onCreateRecord={onCreateRecord} />);


}

function SectionWeekly({ onCreateRecord }) {
  return (
    <SectionReports
      title="Weekly reports"
      kicker="Site progress reports issued every Sunday"
      items={WEEKLY_REPORTS}
      totalCount={62}
      secondaryLabel="Period"
      secondaryKey="period"
      tertiaryLabel="Week"
      tertiaryKey="week"
      onCreateRecord={onCreateRecord} />);


}

function SectionDaily({ onCreateRecord }) {
  return (
    <SectionReports
      title="Daily reports"
      kicker="Contractor shift reports — North & South sites"
      items={DAILY_REPORTS}
      totalCount={438}
      secondaryLabel="Date"
      secondaryKey="period"
      tertiaryLabel="Site"
      tertiaryKey="site"
      onCreateRecord={onCreateRecord} />);


}

/* ===== Section: All items ===== */
function SectionAllItems({ onOpenPhoto, onOpenRecord, onCreateRecord }) {
  const [query, setQuery] = useStateCol('');
  const PHOTO_ITEMS = PHOTOS.map((p) => ({ id: p.id, kind: 'photo', t: p.t, tag: 'Approved', updated: '4 d', comments: 0 }));
  const MONTHLY_ITEMS = MONTHLY_REPORTS.map((r) => ({ id: r.id, kind: 'report', t: r.t, tag: r.status, updated: r.updated, comments: r.comments }));
  const WEEKLY_ITEMS = WEEKLY_REPORTS.map((r) => ({ id: r.id, kind: 'report', t: r.t, tag: r.status, updated: r.updated, comments: r.comments }));
  const DAILY_ITEMS = DAILY_REPORTS.map((r) => ({ id: r.id, kind: 'report', t: r.t, tag: r.status, updated: r.updated, comments: r.comments }));
  const ALL = [...MONTHLY_ITEMS, ...WEEKLY_ITEMS, ...DAILY_ITEMS, ...PHOTO_ITEMS, ...RECORD_ITEMS];
  const filtered = ALL.filter((it) => it.t.toLowerCase().includes(query.toLowerCase()));

  return (
    <section className="cs cs--standalone" id="all">
      <header className="cs__standalone-head">
        <h2 className="cs__standalone-title">All items</h2>
      </header>
      <div className="dg-toolbar">
        <div className="dg-search">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" />
          </svg>
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search…" />
        </div>
        <div className="dg-toolbar__right">
          <button className="dg-pill" type="button">All types <IconChevronD size={12} /></button>
          <button className="dg-pill" type="button">Last Modified <IconChevronD size={12} /></button>
          <button
            className="iconbtn dg-add"
            type="button"
            aria-label="New record"
            title="New record"
            onClick={onCreateRecord}><IconPlus size={14} /></button>
        </div>
      </div>
      <ItemsDataGrid items={filtered} onOpenPhoto={onOpenPhoto} onOpenRecord={onOpenRecord} />
    </section>);

}

/* ===== Mobile sections tabs ===== */
function CollMobileTabs({ active, onPick }) {
  return (
    <nav className="coll-mtabs mobile-only" aria-label="Sections">
      {SECTIONS.map((s) =>
      <button
        key={s.key}
        type="button"
        className={`coll-mtabs__item ${active === s.key ? 'is-active' : ''}`}
        onClick={() => onPick(s.key)}>
          {s.label}
        </button>
      )}
    </nav>);

}

/* ===== Public: collection page ===== */
function CollectionPage({ onBack, onOpenRecord, onOpenPhoto, onOpenGraph, onCreateRecord, initialTab = 'overview', onTabChange }) {
  const [active, setActive] = useStateCol(initialTab);
  React.useEffect(() => {setActive(initialTab);}, [initialTab]);
  const pickTab = (t) => {setActive(t);onTabChange && onTabChange(t);};
  const openPhotoHere = (id) => onOpenPhoto && onOpenPhoto(id, active);
  const openRecordHere = () => onOpenRecord && onOpenRecord();
  return (
    <div className="coll-page" data-screen-label="Cedar Narrows Collection — Overview">
      <CollTopBar onBack={onBack} onOpenRecord={onOpenRecord} onOpenGraph={onOpenGraph} />
      <CollMobileTabs active={active} onPick={pickTab} />
      <div className="coll-page__body">
        <CollSidebar active={active} onPick={pickTab} />
        <div className="coll-page__main">
          {active === 'overview' &&
          <React.Fragment>
              <SectionOverview />
            </React.Fragment>
          }
          {active === 'monthly' && <SectionMonthly onCreateRecord={onCreateRecord} />}
          {active === 'weekly' && <SectionWeekly onCreateRecord={onCreateRecord} />}
          {active === 'daily' && <SectionDaily onCreateRecord={onCreateRecord} />}
          {active === 'photos' && <SectionPhotos onOpenPhoto={openPhotoHere} variant="standalone" onCreateRecord={onCreateRecord} />}
          {active === 'all' && <SectionAllItems onOpenPhoto={openPhotoHere} onOpenRecord={openRecordHere} onCreateRecord={onCreateRecord} />}
        </div>
        {active === 'overview' &&
        <div className="coll-page__body-tools">
            <CollectionRecordContextMenu onOpen={onOpenRecord} />
          </div>
        }
      </div>
    </div>);

}

/* ===== Collection-level record menu (compact, 5 items) =====
   Used when the record is shown inline as the collection's Overview.
   Full set of actions (Details / Comments / Lineage / History) lives in
   RecordContextMenu on the dedicated record page. */
function CollectionRecordContextMenu({ onOpen, align = 'right' }) {
  const [menuOpen, setMenuOpen] = useStateCol(false);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    if (!menuOpen) return;
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setMenuOpen(false);
    };
    const onKey = (e) => {if (e.key === 'Escape') setMenuOpen(false);};
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  const close = () => setMenuOpen(false);
  const handleOpen = () => {close();if (onOpen) onOpen();};

  return (
    <div className={`rec-top__menu-wrap rec-top__menu-wrap--${align}`} ref={wrapRef}>
      <button
        className="iconbtn"
        title="More"
        aria-label="More"
        aria-haspopup="menu"
        aria-expanded={menuOpen}
        onClick={() => setMenuOpen((o) => !o)}>
        <IconMoreH size={16} />
      </button>
      {menuOpen &&
      <div className="rec-menu" role="menu">
          <button className="rec-menu__item" role="menuitem" onClick={handleOpen}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14L21 3" /><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" /></svg>
            </span>
            Open
          </button>
          <button className="rec-menu__item" role="menuitem" onClick={close}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" /></svg>
            </span>
            Rename
          </button>
          <button className="rec-menu__item" role="menuitem" onClick={close}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><path d="M14 13l-3-3-3 3" /><path d="M11 10v7" /></svg>
            </span>
            Move
          </button>
          <button className="rec-menu__item" role="menuitem" onClick={close}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M8 12h8" /></svg>
            </span>
            Exclude
          </button>
          <div className="rec-menu__rule"></div>
          <button className="rec-menu__item rec-menu__item--danger" role="menuitem" onClick={close}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /></svg>
            </span>
            Delete
          </button>
        </div>
      }
    </div>);

}

/* ===== Reusable Record context menu (3-dots) ===== */
function RecordContextMenu({ onEdit, align = 'right' }) {
  const [menuOpen, setMenuOpen] = useStateCol(false);
  const sharedCtx = useOutput();
  const isEmpty = sharedCtx?.isEmpty;
  const [localPanel, setLocalPanel] = useStateCol(null);
  const openPanel = sharedCtx ? sharedCtx.openPanel : localPanel;
  const setOpenPanel = sharedCtx ? sharedCtx.setOpenPanel : setLocalPanel;
  const mountPanelsLocally = !sharedCtx; // when shared, RecordPageBody mounts them
  const wrapRef = React.useRef(null);
  const su = useSourceUpdates(); // null on screens without provider

  React.useEffect(() => {
    if (!menuOpen) return;
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setMenuOpen(false);
    };
    const onKey = (e) => {if (e.key === 'Escape') setMenuOpen(false);};
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  React.useEffect(() => {
    if (!openPanel) return;
    const onKey = (e) => {if (e.key === 'Escape') setOpenPanel(null);};
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [openPanel]);

  const close = () => setMenuOpen(false);
  const open = (panel) => {setMenuOpen(false);setOpenPanel(panel);};

  return (
    <React.Fragment>
    <div className={`rec-top__menu-wrap rec-top__menu-wrap--${align}`} ref={wrapRef}>
      <button
          className="iconbtn rec-top__menubtn"
          title={!isEmpty && su && su.pendingCount > 0 ? `More · ${su.pendingCount} source ${su.pendingCount === 1 ? 'update' : 'updates'}` : 'More'}
          aria-label="More"
          aria-haspopup="menu"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}>
        <IconMoreH size={16} />
        {!isEmpty && su && su.pendingCount > 0 &&
          <span className="rec-top__menudot" aria-hidden="true" />
          }
      </button>
      {menuOpen &&
        <div className="rec-menu" role="menu">
          <button className="rec-menu__item" role="menuitem" onClick={close}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" /></svg>
            </span>
            Rename
          </button>
          <button className="rec-menu__item" role="menuitem" onClick={close}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><path d="M14 13l-3-3-3 3" /><path d="M11 10v7" /></svg>
            </span>
            Move
          </button>
          <button className="rec-menu__item" role="menuitem" onClick={close}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="8" y="8" width="12" height="12" rx="2" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></svg>
            </span>
            Duplicate
          </button>
          <div className="rec-menu__rule"></div>
          {!isEmpty && su && su.allCount > 0 &&
          <button
            className="rec-menu__item rec-menu__item--accent"
            role="menuitem"
            onClick={() => {setMenuOpen(false);su.openPanel();}}>
              <span className="rec-menu__ico">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ stroke: "rgb(97, 93, 90)" }}><path d="M3 12a9 9 0 0 1 15.5-6.4L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-15.5 6.4L3 16" /><path d="M3 21v-5h5" /></svg>
              </span>
              <span className="rec-menu__label">Source updates</span>
              {su.pendingCount > 0 &&
            <span className="rec-menu__count" style={{ backgroundColor: "rgb(0, 0, 0)" }}>{su.pendingCount}</span>
            }
            </button>
          }
          <button className="rec-menu__item" role="menuitem" onClick={() => open('details')}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 8h.01" /><path d="M11 12h1v4h1" /></svg>
            </span>
            Details
          </button>
          <button className="rec-menu__item" role="menuitem" onClick={() => open('comments')}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z" /></svg>
            </span>
            Comments
          </button>
          <button className="rec-menu__item" role="menuitem" onClick={() => open('lineage')}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="2.5" /><circle cx="6" cy="18" r="2.5" /><circle cx="18" cy="12" r="2.5" /><path d="M8.4 7.2l7.2 3.6" /><path d="M8.4 16.8l7.2-3.6" /></svg>
            </span>
            Data Lineage
          </button>
          <button className="rec-menu__item" role="menuitem" onClick={() => open('history')}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v5h5" /><path d="M12 8v4l3 2" /></svg>
            </span>
            Version History
          </button>
          <div className="rec-menu__rule"></div>
          <button className="rec-menu__item rec-menu__item--danger" role="menuitem" onClick={close}>
            <span className="rec-menu__ico">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /></svg>
            </span>
            Delete
          </button>
        </div>
        }
    </div>
    {mountPanelsLocally && openPanel === 'details' && <RecordDetailsPanel onClose={() => setOpenPanel(null)} />}
    {mountPanelsLocally && openPanel === 'comments' && <RecordCommentsPanel onClose={() => setOpenPanel(null)} />}
    {mountPanelsLocally && openPanel === 'lineage' && <RecordLineagePanel onClose={() => setOpenPanel(null)} />}
    {mountPanelsLocally && openPanel === 'history' && <RecordVersionHistoryPanel onClose={() => setOpenPanel(null)} />}
    </React.Fragment>);

}

/* ===== Output switcher chips (Dashboard / Report / Slide) ===== */
function OutputChips() {
  const ctx = useOutput();
  const output = ctx?.output || 'dashboard';
  const setOutput = ctx?.setOutput || (() => {});
  const setOpenPanel = ctx?.setOpenPanel || (() => {});
  const isEmpty = ctx?.isEmpty;
  const agentGenerated = ctx?.agentGenerated;
  const extraOutputs = ctx?.extraOutputs || [];
  const addOutput = ctx?.addOutput || (() => {});
  const [menuOpen, setMenuOpen] = useStateCol(false);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    if (!menuOpen) return;
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setMenuOpen(false);
    };
    const onKey = (e) => {if (e.key === 'Escape') setMenuOpen(false);};
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  // Output chips:
  // - During the initial empty (pre-generation) state: single "New output" chip.
  // - After agent generation: just "Dashboard" + any user-added extras.
  // - On the demo Cedar Narrows dashboard: all three default outputs.
  let items;
  if (isEmpty) {
    items = [{ key: 'new-output', label: 'New output' }];
  } else if (agentGenerated) {
    items = [{ key: 'dashboard', label: 'Dashboard' }, ...extraOutputs];
  } else {
    items = [
      { key: 'dashboard', label: 'Dashboard' },
      { key: 'report', label: 'Report' },
      { key: 'slide', label: 'Slide' }];
  }
  // Only show the + when the record exists and isn't still being generated.
  const showAddBtn = !isEmpty;
  const openChipPanel = (panel) => () => {setMenuOpen(false);setOpenPanel(panel);};

  return (
    <div className="rec-top__outputs" role="tablist" aria-label="Output">
      {items.map((it) => {
        const isActive = isEmpty ? true : output === it.key;
        return (
          <div
            key={it.key}
            className={`rec-top__output-wrap ${isActive ? 'is-active' : ''} ${isActive && menuOpen ? 'is-menuopen' : ''}`}
            ref={isActive ? wrapRef : null}>
            <button
              type="button"
              role="tab"
              aria-selected={isActive}
              aria-haspopup={isActive ? 'menu' : undefined}
              aria-expanded={isActive ? menuOpen : undefined}
              className={`rec-top__output ${isActive ? 'is-active' : ''}`}
              onClick={() => {
                if (isActive) setMenuOpen((o) => !o);else
                setOutput(it.key);
              }}
              style={{ fontWeight: "500" }}>
              <span className="rec-top__output-label">{it.label}</span>
              {isActive &&
              <span
                className="rec-top__output-dots"
                role="button"
                tabIndex={-1}
                aria-label="Output options"
                onClick={(e) => {e.stopPropagation();setMenuOpen((o) => !o);}}>
                  <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="1" /><circle cx="5" cy="12" r="1" /><circle cx="19" cy="12" r="1" />
                  </svg>
                </span>
              }
            </button>
            {isActive && menuOpen &&
            <div className="rec-menu rec-menu--chip" role="menu">
                <button className="rec-menu__item" role="menuitem" onClick={() => setMenuOpen(false)}>
                  <span className="rec-menu__ico">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" /></svg>
                  </span>
                  Rename
                </button>
                <button className="rec-menu__item" role="menuitem" onClick={() => setMenuOpen(false)}>
                  <span className="rec-menu__ico">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="8" y="8" width="12" height="12" rx="2" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></svg>
                  </span>
                  Duplicate
                </button>
                <div className="rec-menu__rule"></div>
                <button className="rec-menu__item" role="menuitem" onClick={openChipPanel('comments')}>
                  <span className="rec-menu__ico">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z" /></svg>
                  </span>
                  Comments
                </button>
                <button className="rec-menu__item" role="menuitem" onClick={openChipPanel('lineage')}>
                  <span className="rec-menu__ico">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="2.5" /><circle cx="6" cy="18" r="2.5" /><circle cx="18" cy="12" r="2.5" /><path d="M8.4 7.2l7.2 3.6" /><path d="M8.4 16.8l7.2-3.6" /></svg>
                  </span>
                  Data Lineage
                </button>
                <button className="rec-menu__item" role="menuitem" onClick={openChipPanel('history')}>
                  <span className="rec-menu__ico">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v5h5" /><path d="M12 8v4l3 2" /></svg>
                  </span>
                  Version History
                </button>
                <div className="rec-menu__rule"></div>
                <button className="rec-menu__item rec-menu__item--danger" role="menuitem" onClick={() => setMenuOpen(false)}>
                  <span className="rec-menu__ico">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /></svg>
                  </span>
                  Delete
                </button>
              </div>
            }
          </div>);

      })}
      {showAddBtn && (
        <button
          type="button"
          className="rec-top__output-add"
          aria-label="Add output"
          title="Add output"
          onClick={() => addOutput()}>
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </button>
      )}
    </div>);

}

/* ===== Record top bar (single-line, no sections sidebar) ===== */
function RecordTopBar({ onBack }) {
  const ctx = useOutput();
  const baseCommentsCount = window.RP_COMMENTS_COUNT || 0;
  const agentGenerated = ctx?.agentGenerated;
  // Freshly agent-generated records start with zero comments — they're a new
  // artifact nobody has reviewed yet.
  const commentsCount = agentGenerated ? 0 : baseCommentsCount;
  const isEmpty = ctx?.isEmpty;
  const newRecord = ctx?.newRecord;
  const setNewRecordName = ctx?.setNewRecordName || (() => {});

  const openComments = () => {
    if (ctx) ctx.setOpenPanel({ panel: 'comments', scope: 'All outputs' });
  };

  return (
    <header className="rec-top rec-top--withchips">
      <button className="iconbtn rec-top__nav" onClick={onBack} aria-label="Back">
        <IconChevronL size={16} />
      </button>
      <div className="rec-top__mark" style={{ backgroundColor: "rgb(254, 252, 250)", borderColor: "rgb(231, 225, 223)" }} aria-hidden="true">
        <IconRecordCard size={20} />
      </div>
      <div className="rec-top__heading">
        <div className="rec-top__kicker">Traylor Bros., Inc. · Content Library · Cedar Narrows Water Supply Tunnel</div>
        <div className="rec-top__title">
          {isEmpty ?
            <input
              className="rec-top__titletext rec-top__titletext--input"
              type="text"
              value={newRecord?.name || ''}
              placeholder="Untitled record"
              onChange={(e) => setNewRecordName(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter') e.currentTarget.blur(); }}
              aria-label="Record name" /> :
            <span className="rec-top__titletext">Cedar Narrows Water Supply Tunnel - Project Overview</span>
          }
        </div>
      </div>
      <div className="rec-top__spacer"></div>
      <OutputChips />
      <div className="rec-top__spacer"></div>
      {!isEmpty &&
        <div className="rec-top__meta desktop-only">
          <span className="rec-top__owner">James Anderson · Marketing Team</span>
          <span className="rec-top__sep">·</span>
          <span className="rec-top__time">4 min ago</span>
        </div>
      }
      {isEmpty &&
        <div className="rec-top__meta desktop-only">
          <span className="rec-top__owner">James Anderson · Marketing Team</span>
          <span className="rec-top__sep">·</span>
          <span className="rec-top__time">Just now</span>
        </div>
      }
      <div className="rec-top__actions">
        {!isEmpty &&
          <React.Fragment>
            <span className="rec-top__check" title="Reviewed" aria-label="Reviewed">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="9" />
                <path d="M8.5 12.5l2.5 2.5 4.5-5" />
              </svg>
            </span>
            <button
              type="button"
              className="rec-top__stat rec-top__stat--btn"
              title={`${commentsCount} comments across all outputs`}
              aria-label="Open comments"
              onClick={openComments}>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 12a8 8 0 0 1-12.6 6.5L3 20l1.5-5.4A8 8 0 1 1 21 12z" />
              </svg>
              <span>{commentsCount}</span>
            </button>
            <button className="tag-status desktop-only" type="button">Need review</button>
          </React.Fragment>
        }
        {isEmpty && <span className="tag-status tag-status--draft desktop-only">Draft</span>}
        <RecordContextMenu />
      </div>
    </header>);

}

/* =========================================================================
   OUTPUT: REPORT — long-form article with hero + sections + inline photos
   ========================================================================= */
function OutputReport({ onOpenPhoto }) {
  // Local EB helper — same pattern as SectionOverview etc.
  const EB = ({ fields, render, sources = {}, className = '' }) => {
    const init = Object.fromEntries(fields.map((f) => [f.id, f.default]));
    return (
      <EditableBlock fields={fields} initialValues={init} sources={sources} className={className}>
        {(v) => render(v)}
      </EditableBlock>);
  };

  const photoOptions = PHOTOS.map((p) => p.id);
  const photoLabel = (id) => {
    const p = PHOTOS.find((x) => x.id === id);
    return p ? `${p.id} — ${p.t}` : id;
  };
  // For text inputs we display as id (so users can also paste any id).

  const renderInlinePhoto = (photoId, caption) => {
    const p = PHOTOS.find((x) => x.id === photoId);
    if (!p) return null;
    return (
      <figure className="rep-figure">
        <img src={p.img} alt={p.t} />
        <figcaption>
          <strong>{p.t}.</strong>{' '}{caption || p.s}
        </figcaption>
      </figure>);

  };

  return (
    <article className="output-report" data-output="report">
      {/* Hero */}
      <EB
        className="rep-hero"
        fields={[
        { id: 'kicker', label: 'Kicker', kind: 'text', default: 'Monthly Project Report · March 2026' },
        { id: 'title', label: 'Title', kind: 'text', default: 'Cedar Narrows Water Supply Tunnel — March 2026 Project Report' },
        { id: 'byline', label: 'Byline', kind: 'text', default: 'TAGP Project Controls · Prepared for Metro Vancouver' },
        { id: 'heroPhoto', label: 'Hero photo (id)', kind: 'text', hint: `Options: ${photoOptions.join(', ')}`, default: 'tunnel' }]
        }
        sources={{ kicker: OV_SRC_MONTHLY, title: OV_SRC_MONTHLY }}
        render={(v) => {
          const hero = PHOTOS.find((x) => x.id === v.heroPhoto);
          return (
            <div className="rep-hero__inner">
              <div className="rep-hero__img">
                <img src={hero ? hero.img : ((window.__resources && window.__resources.heroImg) || 'assets/tunnel-hero.png')} alt="" />
              </div>
              <div className="rep-hero__overlay">
                <div className="rep-hero__kicker">{v.kicker}</div>
                <h1 className="rep-hero__title">{v.title}</h1>
                <div className="rep-hero__byline">{v.byline}</div>
              </div>
            </div>);

        }} />

      {/* Lede */}
      <EB
        className="rep-block rep-block--lede"
        fields={[
        { id: 'lede', label: 'Lede', kind: 'textarea', rows: 5, default:
          'The Cedar Narrows Water Supply Tunnel (Fraser River Crossing, Metro Vancouver Contract RFP No. 20-354) continues on a forecast Substantial Completion of November 8, 2027 — eleven weeks ahead of the Change-Order #14 baseline. March 2026 advanced the project from steel-pipe staging into sustained welded-pipe installation in the bored tunnel, with both shaft sites running on parallel critical paths. This monthly report consolidates the safety, production, and commercial picture for the Owner.' }]
        }
        sources={{ lede: OV_SRC_MONTHLY }}
        render={(v) => <p className="rep-lede">{v.lede}</p>} />

      {/* 1 — Status & milestones */}
      <section className="rep-section">
        <EB
          fields={[{ id: 't', label: 'Heading', kind: 'text', default: '1 · Project status and milestones' }]}
          render={(v) => <h2 className="rep-h2" style={{ fontWeight: "500" }}>{v.t}</h2>} />
        <EB
          fields={[
          { id: 'p', label: 'Paragraph', kind: 'textarea', rows: 4, default:
            'The project is at 62% physical completion against the Rev.08 baseline at the end of the reporting period. The Owner submission for Change-Order #14 has been accepted, which formally rolls the forecast Substantial Completion to Nov 8, 2027. Both valve chambers have moved into deep excavation, and the steel-pipe installation crew has completed the first 380 m of welded liner inside the bored tunnel.' }]
          }
          sources={{ p: OV_SRC_MONTHLY }}
          render={(v) => <p className="rep-p">{v.p}</p>} />
        <EB
          fields={[
          { id: 'bullets', label: 'Bullets (one per line)', kind: 'textarea', rows: 6, default:
            'Forecast Substantial Completion · Nov 8, 2027 (+11 weeks vs CO-14)\nTunnel boring · complete; final acceptance signed Feb 2026\nWelded steel-pipe installation · 380 m of 2,253 m (17%)\nSecant pile installation (SVC) · 45 of 67 piles complete\nNVC base-slab reinforcing · in progress, pour scheduled Apr 12' }]
          }
          sources={{ bullets: OV_SRC_WEEKLY }}
          render={(v) =>
          <ul className="rep-list">
              {v.bullets.split('\n').filter(Boolean).map((line, i) => <li key={i}>{line}</li>)}
            </ul>
          } />
        <EB
          fields={[
          { id: 'photo', label: 'Photo (id)', kind: 'text', hint: `Options: ${photoOptions.join(', ')}`, default: 'secant' },
          { id: 'cap', label: 'Caption', kind: 'textarea', rows: 2, default: 'Secant piles approaching the design wall depth at the south valve chamber excavation perimeter.' }]
          }
          render={(v) => renderInlinePhoto(v.photo, v.cap)} />
      </section>

      {/* 2 — Safety */}
      <section className="rep-section">
        <EB
          fields={[{ id: 't', label: 'Heading', kind: 'text', default: '2 · Safety performance' }]}
          render={(v) => <h2 className="rep-h2" style={{ fontWeight: "500" }}>{v.t}</h2>} />
        <EB
          fields={[
          { id: 'p', label: 'Paragraph', kind: 'textarea', rows: 4, default:
            'No lost-time incidents occurred in March 2026. NLTI year-to-date stands at 14.3, which reads high in isolation but tracks against a 4.8 project-to-date average; the YTD figure is driven by two recordable hand-injuries in January 2026. The crew has now logged 312,400 person-hours without a serious injury or major near-miss. JHA participation across both shafts averaged 97% in March.' }]
          }
          sources={{ p: OV_SRC_SAFETY_KPI }}
          render={(v) => <p className="rep-p">{v.p}</p>} />
        <EB
          fields={[
          { id: 'bullets', label: 'Bullets (one per line)', kind: 'textarea', rows: 5, default:
            'Lost-time incidents in March · 0\nNLTI YTD · 14.3 (project-to-date avg: 4.8)\nPerson-hours since last serious injury · 312,400\nLast safety stand-down · Mar 14, all crews\nOpen safety observations cleared in period · 38 of 41' }]
          }
          sources={{ bullets: OV_SRC_SAFETY_KPI }}
          render={(v) =>
          <ul className="rep-list">
              {v.bullets.split('\n').filter(Boolean).map((line, i) => <li key={i}>{line}</li>)}
            </ul>
          } />
        <EB
          fields={[
          { id: 'photo', label: 'Photo (id)', kind: 'text', hint: `Options: ${photoOptions.join(', ')}`, default: 'excav' },
          { id: 'cap', label: 'Caption', kind: 'textarea', rows: 2, default: 'North Valve Chamber deep excavation. Edge-protection and pump access were the focus of the March safety walks.' }]
          }
          render={(v) => renderInlinePhoto(v.photo, v.cap)} />
      </section>

      {/* 3 — Pipe installation progress */}
      <section className="rep-section">
        <EB
          fields={[{ id: 't', label: 'Heading', kind: 'text', default: '3 · Tunnel and pipe installation progress' }]}
          render={(v) => <h2 className="rep-h2" style={{ fontWeight: "500" }}>{v.t}</h2>} />
        <EB
          fields={[
          { id: 'p', label: 'Paragraph', kind: 'textarea', rows: 4, default:
            'Welded-pipe installation through the bored tunnel is the dominant production activity for the next two reporting periods. 380 m of liner has been welded and accepted to date, against a Rev.08 target of 412 m at end of March — a 7.8% gap that is being closed through a second swing-shift welding crew commissioned in the third week of the month. Cellular-grout backfill behind the installed liner is sitting at 4.5% complete; the slag-mix throughput projection still holds for April subject to the South-portal dewatering test result.' }]
          }
          sources={{ p: OV_SRC_DAILY }}
          render={(v) => <p className="rep-p">{v.p}</p>} />
        <EB
          fields={[
          { id: 'bullets', label: 'Bullets (one per line)', kind: 'textarea', rows: 5, default:
            'Welded liner installed · 380 m / 2,253 m (17%)\nWeld QC acceptance rate · 96.4% (Stasuk + Acuren)\nCellular-grout backfill · 4.5% of design volume\nTunnel pipes staged on-site · 84 of 96\nSecond welding shift · commissioned Mar 16' }]
          }
          sources={{ bullets: OV_SRC_DAILY }}
          render={(v) =>
          <ul className="rep-list">
              {v.bullets.split('\n').filter(Boolean).map((line, i) => <li key={i}>{line}</li>)}
            </ul>
          } />
        <EB
          fields={[
          { id: 'photo', label: 'Photo (id)', kind: 'text', hint: `Options: ${photoOptions.join(', ')}`, default: 'welding' },
          { id: 'cap', label: 'Caption', kind: 'textarea', rows: 2, default: 'Stick-welding the next pipe joint inside the bored tunnel. Backfill grouting follows the welding crew at a 6-pipe offset.' }]
          }
          render={(v) => renderInlinePhoto(v.photo, v.cap)} />
      </section>

      {/* 4 — Financial / commercial */}
      <section className="rep-section">
        <EB
          fields={[{ id: 't', label: 'Heading', kind: 'text', default: '4 · Financial position and commercial items' }]}
          render={(v) => <h2 className="rep-h2" style={{ fontWeight: "500" }}>{v.t}</h2>} />
        <EB
          fields={[
          { id: 'p', label: 'Paragraph', kind: 'textarea', rows: 4, default:
            'Cost-at-Completion is forecast at $312M against a contract value of $289M, reflecting Change-Order #14 (formally executed) and three open commercial items currently in negotiation with the Owner. The cash position remains healthy and the project is current on monthly invoicing. PCO-008 (inflation claim) is the largest open item and is being progressed via a partial-payment letter agreed in principle with CMC.' }]
          }
          sources={{ p: FN_SRC_KPI }}
          render={(v) => <p className="rep-p">{v.p}</p>} />
        <EB
          fields={[
          { id: 'bullets', label: 'Bullets (one per line)', kind: 'textarea', rows: 6, default:
            'Contract value · $289M (after CO-14)\nForecast cost @ completion · $312M\nCO-14 · executed Mar 4 — adds 11 weeks to SC\nPCO-008 (inflation) · in negotiation, partial payment proposed\nPCO-011 (geotechnical conditions) · disputed, mediation Apr 22\nPCO-013 (Owner-directed dewatering) · approved, $1.4M' }]
          }
          sources={{ bullets: OV_SRC_COMMERCIAL }}
          render={(v) =>
          <ul className="rep-list">
              {v.bullets.split('\n').filter(Boolean).map((line, i) => <li key={i}>{line}</li>)}
            </ul>
          } />
      </section>
    </article>);

}

/* =========================================================================
   OUTPUT: SLIDE — 16:9, full-width, headline metrics only
   ========================================================================= */
function OutputSlide() {
  const EB = ({ fields, render, sources = {}, className = '' }) => {
    const init = Object.fromEntries(fields.map((f) => [f.id, f.default]));
    return (
      <EditableBlock fields={fields} initialValues={init} sources={sources} className={className}>
        {(v) => render(v)}
      </EditableBlock>);
  };

  return (
    <div className="output-slide-wrap" data-output="slide">
      <div className="output-slide" role="region" aria-label="Project status slide">
        <div className="slide__chrome">
          <div className="slide__brand">
            <span className="slide__brandmark" aria-hidden="true">
              <IconRecordCard size={18} />
            </span>
            <EB
              fields={[{ id: 'brand', label: 'Brand line', kind: 'text', default: 'Traylor Bros., Inc. · TAGP' }]}
              render={(v) => <span className="slide__brandtext">{v.brand}</span>} />
          </div>
          <EB
            fields={[{ id: 'date', label: 'Date label', kind: 'text', default: 'March 2026' }]}
            render={(v) => <span className="slide__date">{v.date}</span>} />
        </div>

        <div className="slide__title-block">
          <EB
            fields={[{ id: 'kicker', label: 'Kicker', kind: 'text', default: 'Cedar Narrows Water Supply Tunnel · Status report' }]}
            render={(v) => <div className="slide__kicker">{v.kicker}</div>} />
          <EB
            fields={[{ id: 'title', label: 'Title', kind: 'text', default: 'Forecast on track. Pipe installation accelerating.' }]}
            render={(v) => <h1 className="slide__title">{v.title}</h1>} />
        </div>

        <div className="slide__metrics">
          <EB
            className="slide__metric"
            fields={[
            { id: 'label', label: 'Label', kind: 'text', default: 'Pipe installed' },
            { id: 'value', label: 'Value', kind: 'text', default: '17%' },
            { id: 'sub', label: 'Sub', kind: 'text', default: '380 m of 2,253 m' },
            { id: 'pct', label: 'Progress %', kind: 'text', default: '17' }]
            }
            render={(v) =>
            <div className="slide-metric">
                <div className="slide-metric__label">{v.label}</div>
                <div className="slide-metric__value">{v.value}</div>
                <div className="slide-metric__sub">{v.sub}</div>
                <div className="slide-metric__bar"><span style={{ width: `${Math.max(0, Math.min(100, parseFloat(v.pct) || 0))}%` }} /></div>
              </div>
            } />
          <EB
            className="slide__metric"
            fields={[
            { id: 'label', label: 'Label', kind: 'text', default: 'NLTI · YTD' },
            { id: 'value', label: 'Value', kind: 'text', default: '14.3' },
            { id: 'sub', label: 'Sub', kind: 'text', default: 'Project-to-date avg: 4.8' }]
            }
            render={(v) =>
            <div className="slide-metric">
                <div className="slide-metric__label">{v.label}</div>
                <div className="slide-metric__value">{v.value}</div>
                <div className="slide-metric__sub">{v.sub}</div>
              </div>
            } />
          <EB
            className="slide__metric"
            fields={[
            { id: 'label', label: 'Label', kind: 'text', default: 'Cost @ completion' },
            { id: 'value', label: 'Value', kind: 'text', default: '$312M' },
            { id: 'sub', label: 'Sub', kind: 'text', default: '+$23M vs $289M contract (CO-14)' }]
            }
            render={(v) =>
            <div className="slide-metric">
                <div className="slide-metric__label">{v.label}</div>
                <div className="slide-metric__value">{v.value}</div>
                <div className="slide-metric__sub">{v.sub}</div>
              </div>
            } />
          <EB
            className="slide__metric"
            fields={[
            { id: 'label', label: 'Label', kind: 'text', default: 'Active workfronts' },
            { id: 'value', label: 'Value', kind: 'text', default: '7' },
            { id: 'sub', label: 'Sub', kind: 'text', default: 'SVC excavation · NVC slab · tunnel weld · grout · dewatering' }]
            }
            render={(v) =>
            <div className="slide-metric">
                <div className="slide-metric__label">{v.label}</div>
                <div className="slide-metric__value">{v.value}</div>
                <div className="slide-metric__sub">{v.sub}</div>
              </div>
            } />
        </div>

        <div className="slide__foot">
          <EB
            fields={[{ id: 'foot', label: 'Footer', kind: 'text', default: 'Forecast Substantial Completion: Nov 8, 2027  ·  +11 weeks vs CO-14 baseline' }]}
            render={(v) => <span>{v.foot}</span>} />
        </div>
      </div>
    </div>);

}

/* ===== Empty state for a brand-new record =====
   Shown the moment a user clicks "+" on a section toolbar (Monthly reports,
   Weekly reports, Daily reports, Photos, All items). The record exists but
   has no artifact yet — we use this surface to explain what a Record is and
   to give two ways to start (AI agent or template library).

   Renders the template-library get-started state. */
function RecordEmptyState({ onOpenAgentChat }) {
  return <EmptyVariantTemplates onOpenAgentChat={onOpenAgentChat} />;
}

/* ===== Public: record page ===== */
function RecordPage({ onBack, onOpenPhoto, newRecord, setNewRecordName, onOpenAgentChat, generating, genStageIdx, genStages, agentGenerated, onTemplateGenerate, onTemplateCreateEmpty, templateArtifact }) {
  return (
    <OutputProvider
      newRecord={newRecord}
      setNewRecordName={setNewRecordName}
      onOpenAgentChat={onOpenAgentChat}
      generating={generating}
      genStageIdx={genStageIdx}
      genStages={genStages}
      agentGenerated={agentGenerated}
      onTemplateGenerate={onTemplateGenerate}
      onTemplateCreateEmpty={onTemplateCreateEmpty}
      templateArtifact={templateArtifact}>
      <SourceUpdatesProvider key={agentGenerated ? 'agent-gen' : 'demo'} initialUpdates={agentGenerated ? [] : undefined}>
        <RecordPageBody onBack={onBack} onOpenPhoto={onOpenPhoto} />
      </SourceUpdatesProvider>
    </OutputProvider>);
}

function RecordPageBody({ onBack, onOpenPhoto }) {
  const { output, openPanel, setOpenPanel, isEmpty, onOpenAgentChat, generating, genStageIdx, genStages, agentGenerated, templateArtifact, extraOutputs, setOutputState } = useOutput();
  // openPanel may be a string ('details' | 'comments' | ...) OR an object
  // { panel: '...', scope: 'All outputs' } when the caller wants to override
  // a panel's default filter (e.g. header comment-count button).
  const panelKey = typeof openPanel === 'string' ? openPanel : openPanel?.panel;
  const panelOpts = openPanel && typeof openPanel === 'object' ? openPanel : null;
  const activeExtra = extraOutputs && extraOutputs.find((o) => o.key === output);
  const isExtraActive = !!activeExtra;
  // Template inserted via "Create empty": the record is still in its empty/new
  // shell (editable title, Draft tag) but renders the template dashboard as its
  // first artifact instead of the get-started state.
  const showTemplateArtifact = isEmpty && !generating && templateArtifact;
  const showEmptyState = isEmpty && !generating && !templateArtifact;
  const isEmptyLayout = showEmptyState || isExtraActive; // centered get-started layout
  const fixedWidth = !isEmpty && !isExtraActive;         // real demo dashboard only
  const mainKind = isEmpty
    ? (generating ? 'generating' : (showTemplateArtifact ? 'dashboard' : 'empty'))
    : (isExtraActive ? 'empty' : output);
  const screenLabel = isEmpty
    ? (generating ? 'Cedar Narrows Record — Generating dashboard'
      : (templateArtifact ? 'Cedar Narrows Record — Template inserted' : 'Cedar Narrows Record — New (empty)'))
    : (isExtraActive ? `Cedar Narrows Record — ${activeExtra.label} (empty)` : `Cedar Narrows Record — ${OUTPUT_LABELS[output] || 'Dashboard'}`);
  return (
    <div className={`rec-page ${isEmpty ? 'rec-page--empty' : ''} ${generating ? 'rec-page--generating' : ''} ${isExtraActive ? 'rec-page--extra-empty' : ''}`} data-screen-label={screenLabel}>
      <RecordTopBar onBack={onBack} />
      {!isEmpty && !isExtraActive && <LineageProblemBanner />}
      <div className="rec-page__body" style={{ textAlign: "left" }}>
        <div className={`rec-page__main rec-page__main--${mainKind} ${isEmptyLayout ? 'rec-page__main--empty-templates' : ''}`} style={fixedWidth ? { width: "2019px" } : null}>
          {isEmpty && generating &&
            <GeneratingPlaceholder stages={genStages} stageIdx={genStageIdx} />
          }
          {showEmptyState &&
            <RecordEmptyState onOpenAgentChat={onOpenAgentChat} />
          }
          {showTemplateArtifact &&
            <TemplateDashboard editable={true} />
          }
          {!isEmpty && isExtraActive &&
            <RecordEmptyState onOpenAgentChat={onOpenAgentChat} />
          }
          {!isEmpty && !isExtraActive && output === 'dashboard' &&
          <React.Fragment>
              <SectionOverview editable={true} />
              <SectionSafety editable={true} />
              <SectionFinance editable={true} />
              <SectionPhotos onOpenPhoto={onOpenPhoto} />
            </React.Fragment>
          }
          {!isEmpty && !isExtraActive && output === 'report' && <OutputReport onOpenPhoto={onOpenPhoto} />}
          {!isEmpty && !isExtraActive && output === 'slide' && <OutputSlide />}
        </div>
      </div>
      <RecordSourceUpdatesPanelMount />
      {panelKey === 'details' && <RecordDetailsPanel onClose={() => setOpenPanel(null)} />}
      {panelKey === 'comments' && <RecordCommentsPanel onClose={() => setOpenPanel(null)} initialScope={panelOpts?.scope} />}
      {panelKey === 'lineage' && <RecordLineagePanel onClose={() => setOpenPanel(null)} />}
      {panelKey === 'history' && <RecordVersionHistoryPanel onClose={() => setOpenPanel(null)} />}
    </div>);
}

// Reads the provider state to mount the side panel when requested
function RecordSourceUpdatesPanelMount() {
  const ctx = useSourceUpdates();
  if (!ctx || !ctx.panelOpen) return null;
  return <RecordSourceUpdatesPanel onClose={ctx.closePanel} />;
}

/* ===== Public: photo page ===== */
function PhotoPage({ photoId, onBack }) {
  const photo = PHOTOS.find((p) => p.id === photoId) || PHOTOS[0];
  return (
    <div className="rec-page photo-page" data-screen-label={`Cedar Narrows Photo — ${photo.t}`}>
      <header className="rec-top">
        <button className="iconbtn rec-top__nav" onClick={onBack} aria-label="Back">
          <IconChevronL size={16} />
        </button>
        <div className="rec-top__mark" style={{ backgroundColor: "rgb(254, 252, 250)", borderColor: "rgb(231, 225, 223)" }} aria-hidden="true">
          <IconImg2 size={20} />
        </div>
        <div className="rec-top__heading">
          <div className="rec-top__kicker">Cedar Narrows Water Supply Tunnel · Photo</div>
          <div className="rec-top__title">{photo.t}</div>
        </div>
        <div className="rec-top__spacer"></div>
        <div className="rec-top__meta desktop-only">
          <span className="rec-top__owner">{photo.s}</span>
        </div>
        <div className="rec-top__actions">
          <RecordContextMenu />
        </div>
      </header>
      <div className="photo-page__body">
        <img className="photo-page__img" src={photo.img} alt={photo.t} />
      </div>
    </div>);

}

/* ===== Public: hub-home dashboard =====
   Reuses the record's Dashboard output (Overview + Safety + Finance + Photos)
   verbatim, read-only (editable=false), with the duplicate title suppressed
   because the hub-home header already carries it. */
function HubDashboard({ onOpenPhoto }) {
  return (
    <div className="hub-dash">
      <SectionOverview editable={false} hideTitle={true} />
      <SectionSafety editable={false} />
      <SectionFinance editable={false} />
      <SectionPhotos onOpenPhoto={onOpenPhoto} variant="overview" />
    </div>);
}

window.HubDashboard = HubDashboard;
window.CollectionPage = CollectionPage;
window.RecordPage = RecordPage;
window.PhotoPage = PhotoPage;

// Dashboard primitives reused by other hub dashboards (e.g. Finance).
Object.assign(window, {
  StatTile, ProgressBar, BarChart, GroupedBarChart,
  RichTrendChart, AnalysisCard, HeadlineText,
});