// FFC Presentation Dashboard — weekly manager report + rollup toggles + period navigation.
const { useState: ffcUseStatePresentation, useEffect: ffcUseEffectPresentation, useMemo: ffcUseMemoPresentation } = React;

function PresentationView({ report, reports, onEdit }) {
  const { KpiCard, Card, Badge, Button } = window.FloatsFuelCellsDesignSystem_f57587;
  const U = window.FFCUtil;
  const C = window.FFCCalendar;
  const allReports = ffcUseMemoPresentation(() => (reports && reports.length ? reports : [report || C.blankReport()]).map(C.normalizeReport), [reports, report]);
  const byDateAsc = ffcUseMemoPresentation(() => [...allReports].sort((a, b) => new Date(a.period_ending) - new Date(b.period_ending)), [allReports]);
  const [view, setView] = ffcUseStatePresentation('week');
  const [openBriefing, setOpenBriefing] = ffcUseStatePresentation(null);
  const [activePeriodEnding, setActivePeriodEnding] = ffcUseStatePresentation((report && report.period_ending) || (byDateAsc[byDateAsc.length - 1] || C.blankReport()).period_ending);

  const renderBriefingSeat = (title) => {
    const isOpen = openBriefing === title;
    return (
      <button
        key={title}
        type="button"
        className={'ffc-briefing-card' + (isOpen ? ' is-selected' : '')}
        aria-expanded={isOpen}
        onClick={() => setOpenBriefing(title)}
      >
        <span className="ffc-briefing-glow" aria-hidden="true" />
        <span className="ffc-briefing-title">{title}</span>
      </button>
    );
  };


  ffcUseEffectPresentation(() => {
    if (report && report.period_ending) setActivePeriodEnding(report.period_ending);
  }, [report && report.period_ending]);

  const findNearestReport = (periodEnding) => {
    if (!byDateAsc.length) return C.blankReport();
    const exact = byDateAsc.find((x) => x.period_ending === periodEnding);
    if (exact) return exact;
    const target = new Date(periodEnding + 'T00:00:00').getTime();
    return byDateAsc.reduce((best, row) => {
      const bestDelta = Math.abs(new Date(best.period_ending + 'T00:00:00').getTime() - target);
      const rowDelta = Math.abs(new Date(row.period_ending + 'T00:00:00').getTime() - target);
      return rowDelta < bestDelta ? row : best;
    }, byDateAsc[byDateAsc.length - 1]);
  };

  const r = C.normalizeReport(findNearestReport(activePeriodEnding));
  const d = new Date(r.period_ending + 'T00:00:00');
  const selectedYear = d.getUTCFullYear();
  const monthNumber = d.getUTCMonth() + 1;
  const quarterNumber = Math.floor(d.getUTCMonth() / 3) + 1;
  const monthName = d.toLocaleDateString('en-US', { timeZone: 'UTC', month: 'long' });
  const fmtDate = (iso) => new Date(iso + 'T00:00:00').toLocaleDateString('en-US', { timeZone: 'UTC', month: 'numeric', day: 'numeric', year: 'numeric' });
  const fmtMD = (iso) => new Date(iso + 'T00:00:00').toLocaleDateString('en-US', { timeZone: 'UTC', month: 'numeric', day: 'numeric' });

  const periodKey = (row, mode) => {
    const rd = new Date(row.period_ending + 'T00:00:00');
    const y = rd.getUTCFullYear();
    const m = rd.getUTCMonth() + 1;
    const q = Math.floor(rd.getUTCMonth() / 3) + 1;
    if (mode === 'week') return row.period_ending;
    if (mode === 'month') return y + '-M' + String(m).padStart(2, '0');
    if (mode === 'quarter') return y + '-Q' + q;
    return String(y);
  };
  const activeKey = periodKey(r, view);
  const periodBuckets = (() => {
    const seen = new Map();
    byDateAsc.forEach((row) => {
      const key = periodKey(row, view);
      seen.set(key, row); // keep the latest report in that bucket
    });
    return Array.from(seen.entries()).map(([key, latestReport]) => ({ key, latestReport }));
  })();
  const activeBucketIndex = Math.max(0, periodBuckets.findIndex((b) => b.key === activeKey));
  const prevBucket = activeBucketIndex > 0 ? periodBuckets[activeBucketIndex - 1] : null;
  const nextBucket = activeBucketIndex >= 0 && activeBucketIndex < periodBuckets.length - 1 ? periodBuckets[activeBucketIndex + 1] : null;
  const movePeriod = (direction) => {
    const target = direction < 0 ? prevBucket : nextBucket;
    if (!target) return;
    setOpenBriefing(null);
    setActivePeriodEnding(target.latestReport.period_ending);
  };

  const included = byDateAsc.filter((x) => {
    const xd = new Date(x.period_ending + 'T00:00:00');
    if (view === 'week') return x.period_ending === r.period_ending;
    if (view === 'month') return xd.getUTCFullYear() === selectedYear && xd.getUTCMonth() + 1 === monthNumber;
    if (view === 'quarter') return xd.getUTCFullYear() === selectedYear && Math.floor(xd.getUTCMonth() / 3) + 1 === quarterNumber;
    return xd.getUTCFullYear() === selectedYear;
  });
  const sum = (rows, key) => rows.reduce((t, x) => t + (Number(x[key]) || 0), 0);
  const pair = C.calcPair(sum(included, 'weekly_actual'), sum(included, 'weekly_fc'));
  const latest = included[included.length - 1] || r;
  const periodTitle = view === 'week' ? r.week_label : view === 'month' ? monthName + ' ' + selectedYear + ' Rollup' : view === 'quarter' ? 'Q' + quarterNumber + ' ' + selectedYear + ' Rollup' : selectedYear + ' Year Rollup';
  const periodSub = view === 'week' ? 'Week ' + r.week_number + ' · Period Ending ' + fmtDate(r.period_ending) : included.length + ' saved week' + (included.length === 1 ? '' : 's') + ' included';
  const rangeText = included.length ? fmtMD(included[0].period_start || C.periodMeta(included[0].period_ending).period_start) + '–' + fmtDate(included[included.length - 1].period_ending) : 'No saved reports';

  const rollupRows = view === 'week' ? [
    { metric: r.week_label, actual: r.weekly_actual, fc: r.weekly_fc, diff: r.weekly_diff, pct: r.weekly_percent },
    { metric: monthName + ' Daily Sales Average (Annual FC/252) thru ' + fmtMD(r.period_ending), actual: r.daily_avg_actual, fc: r.daily_avg_fc, diff: r.daily_avg_diff, pct: r.daily_avg_percent },
    { metric: 'MTD vs FC', actual: r.mtd_actual, fc: r.mtd_fc, diff: r.mtd_diff, pct: r.mtd_percent },
    { metric: 'YTD vs FC (' + r.business_days_ytd + ' Days)', actual: r.ytd_actual, fc: r.ytd_fc, diff: r.ytd_diff, pct: r.ytd_percent },
  ] : [
    { metric: periodTitle + ' · ' + rangeText, actual: pair.actual, fc: pair.fc, diff: pair.diff, pct: pair.percent },
    { metric: 'Latest MTD vs FC', actual: latest.mtd_actual, fc: latest.mtd_fc, diff: latest.mtd_diff, pct: latest.mtd_percent },
    { metric: 'Latest YTD vs FC (' + latest.business_days_ytd + ' Days)', actual: latest.ytd_actual, fc: latest.ytd_fc, diff: latest.ytd_diff, pct: latest.ytd_percent },
  ];

  const divisionMap = {};
  included.forEach((rep) => (rep.division_rows || []).forEach((row) => {
    if (!row || row.hidden || (!Number(row.actual) && !Number(row.fc))) return;
    const name = row.name || 'Unnamed';
    if (!divisionMap[name]) divisionMap[name] = { name, actual: 0, fc: 0 };
    divisionMap[name].actual += Number(row.actual) || 0;
    divisionMap[name].fc += Number(row.fc) || 0;
  }));
  const divisionRows = Object.values(divisionMap).map((row) => ({ ...row, ...C.calcPair(row.actual, row.fc) }));
  const briefings = [
    ['Weekly Wins', r.weekly_wins], ['Customer Service', r.customer_service], ['Quotes > 60% Chance of Closing', r.quotes_over_60], ['Projects in Design', r.projects_in_design], ['RMA Warranty / Returns for Repair', r.rma_warranty_returns], ['New Sales Opportunities', r.new_sales_opportunities], ['Focus for the Week', r.focus_for_week], ['Follow Up for Next Week', r.follow_up_next_week], ['Open Discussion', r.open_discussion],
  ];
  const briefingTextByTitle = Object.fromEntries(briefings);
  const cabinLeftTitles = ['Weekly Wins', 'Quotes > 60% Chance of Closing', 'RMA Warranty / Returns for Repair'];
  const cabinRightRows = [
    ['Customer Service', 'Focus for the Week'],
    ['Projects in Design', 'Follow Up for Next Week'],
    ['New Sales Opportunities', 'Open Discussion'],
  ];
  const rollupNotes = included.map((rep) => ({ title: 'Week ' + rep.week_number + ' · ' + fmtMD(rep.period_ending), text: rep.weekly_wins || rep.focus_for_week || rep.open_discussion || '' })).filter((x) => x.text);
  const eyebrow = { fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-secondary)' };
  const sectionTitle = { display: 'flex', alignItems: 'center', gap: 12, margin: '0 0 18px' };
  const renderMoney = (n) => (Number(n) >= 0 ? U.usd(n) : U.usd(n).replace('$-', '-$'));
  const metricTable = (rows) => <Card className="ffc-report-table-card" padding="none" style={{ overflow: 'hidden' }}><table className="ffc-report-table" style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-mono)' }}><thead><tr style={{ background: 'var(--surface-inset)' }}>{['Metric', 'Actual', '2026 FC', 'Diff', '%'].map((h, i) => <th key={h} style={{ textAlign: i === 0 ? 'left' : 'right', padding: '14px 20px', fontSize: 10.5, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', borderBottom: '1px solid var(--border-default)' }}>{h}</th>)}</tr></thead><tbody>{rows.map((row, i) => { const tone = U.toneFor(row.pct); const col = tone === 'ahead' ? 'var(--status-ahead)' : tone === 'behind' ? 'var(--status-behind)' : 'var(--text-secondary)'; return <tr key={i} style={{ borderBottom: i < rows.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}><td style={{ textAlign: 'left', padding: '16px 20px', fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500, color: 'var(--text-primary)' }}>{row.metric}</td><td style={{ textAlign: 'right', padding: '16px 20px', fontSize: 15, color: 'var(--text-primary)', fontFeatureSettings: "'tnum' 1" }}>{renderMoney(row.actual)}</td><td style={{ textAlign: 'right', padding: '16px 20px', fontSize: 15, color: 'var(--text-secondary)', fontFeatureSettings: "'tnum' 1" }}>{renderMoney(row.fc)}</td><td style={{ textAlign: 'right', padding: '16px 20px', fontSize: 15, color: col, fontFeatureSettings: "'tnum' 1" }}>{(row.diff > 0 ? '+' : '') + renderMoney(row.diff)}</td><td style={{ textAlign: 'right', padding: '16px 20px', fontSize: 14, fontWeight: 500, color: col, fontFeatureSettings: "'tnum' 1" }}>{U.pct(row.pct)}</td></tr>; })}</tbody></table></Card>;

  const handleBriefingWheel = (e) => {
    const scroller = e.currentTarget.querySelector('.ffc-briefing-detail-inner');
    if (!scroller) return;
    const atTop = scroller.scrollTop <= 0;
    const atBottom = Math.ceil(scroller.scrollTop + scroller.clientHeight) >= scroller.scrollHeight;
    if ((e.deltaY < 0 && atTop) || (e.deltaY > 0 && atBottom)) {
      window.scrollBy({ top: e.deltaY, left: 0, behavior: 'auto' });
    }
  };

  const viewLabel = view === 'week' ? 'week' : view === 'month' ? 'month' : view === 'quarter' ? 'quarter' : 'year';
  const filenamePeriod = view === 'week' ? r.period_ending : view === 'month' ? String(selectedYear) + '-' + String(monthNumber).padStart(2, '0') : view === 'quarter' ? String(selectedYear) + '-Q' + quarterNumber : String(selectedYear);
  const documentTitle = view === 'week'
    ? 'FFC · ' + (r.week_label || ('Week ' + r.week_number)) + ' Sales Briefing - ' + r.period_ending
    : view === 'month'
      ? 'FFC · ' + monthName + ' Sales Briefing - ' + filenamePeriod
      : view === 'quarter'
        ? 'FFC · Q' + quarterNumber + ' Sales Briefing - ' + filenamePeriod
        : 'FFC · ' + selectedYear + ' Sales Briefing - ' + filenamePeriod;

  ffcUseEffectPresentation(() => {
    const previousTitle = document.title;
    document.title = documentTitle;
    return () => { document.title = previousTitle; };
  }, [documentTitle]);

  return (
    <div className="ffc-presentation-root" style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 40px 64px', display: 'flex', flexDirection: 'column', gap: 40 }}>
      <header className="ffc-rise ffc-presentation-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap', borderBottom: '1px solid var(--border-subtle)', paddingBottom: 28 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}><span style={{ ...eyebrow, color: 'var(--brand-accent)' }}>Weekly Sales Briefing</span><h1 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--text-primary)' }}>Floats &amp; Fuel Cells</h1><span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '0.04em', color: 'var(--text-secondary)' }}>{periodTitle} · {periodSub}</span></div>
        <div className="ffc-period-control-cluster" style={{ display: 'flex', alignItems: 'flex-start', gap: 12, flexWrap: 'wrap', justifyContent: 'flex-end' }}><div className="ffc-no-print" style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'stretch' }}><div style={{ display: 'flex', gap: 4, background: 'var(--surface-inset)', padding: 4, borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>{['week','month','quarter','year'].map((v) => <button key={v} onClick={() => { setView(v); setOpenBriefing(null); }} style={{ border: 'none', cursor: 'pointer', padding: '8px 12px', borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', background: view === v ? 'var(--brand-primary)' : 'transparent', color: view === v ? 'var(--text-on-brand)' : 'var(--text-secondary)' }}>{v}</button>)}</div><div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 }}><button type="button" disabled={!prevBucket} onClick={() => movePeriod(-1)} title={'Previous ' + viewLabel} style={{ width: 36, height: 32, borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-subtle)', background: prevBucket ? 'var(--surface-card)' : 'var(--surface-inset)', color: prevBucket ? 'var(--text-primary)' : 'var(--text-muted)', cursor: prevBucket ? 'pointer' : 'not-allowed', fontSize: 18 }}>‹</button><span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Jump {viewLabel}</span><button type="button" disabled={!nextBucket} onClick={() => movePeriod(1)} title={'Next ' + viewLabel} style={{ width: 36, height: 32, borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-subtle)', background: nextBucket ? 'var(--surface-card)' : 'var(--surface-inset)', color: nextBucket ? 'var(--text-primary)' : 'var(--text-muted)', cursor: nextBucket ? 'pointer' : 'not-allowed', fontSize: 18 }}>›</button></div></div><Badge className="ffc-period-status-pill" tone={U.toneFor(view === 'week' ? r.weekly_percent : pair.percent)} variant="outline" style={{ fontSize: 12, padding: '8px 14px' }}>{U.statusLabel(view === 'week' ? r.weekly_percent : pair.percent)} · {U.pct(view === 'week' ? r.weekly_percent : pair.percent)}</Badge></div>
      </header>

      <section className="ffc-rise ffc-kpi-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
        <KpiCard label={view === 'week' ? 'Weekly Actual' : 'Rollup Actual'} value={view === 'week' ? r.weekly_actual : pair.actual} tone="ahead" variance={U.pct(view === 'week' ? r.weekly_percent : pair.percent)} sublabel={view === 'week' ? 'vs ' + U.usd(r.weekly_fc) + ' FC' : included.length + ' week rollup'} />
        <KpiCard label="2026 FC" value={view === 'week' ? r.weekly_fc : pair.fc} animate tone="onplan" sublabel={view === 'week' ? 'selected week' : 'included weeks'} />
        <KpiCard label="Difference" value={view === 'week' ? r.weekly_diff : pair.diff} tone={U.toneFor(view === 'week' ? r.weekly_percent : pair.percent)} variance={U.pct(view === 'week' ? r.weekly_percent : pair.percent)} />
        <KpiCard label="2026 Annual FC" value={r.annual_fc} tone="onplan" sublabel={'Monthly FC ' + U.usd(r.monthly_fc)} />
      </section>

      <section className="ffc-financial-section"><div style={sectionTitle}><span style={eyebrow}>Top-Line Financial Summary</span><span style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} /></div><div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 18, alignItems: 'stretch' }}>{metricTable(rollupRows)}<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}><Card accent="gold" style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8 }}><span style={eyebrow}>2026 Annual FC</span><span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 34, letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>{U.usd(r.annual_fc)}</span></Card><Card style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8 }}><span style={eyebrow}>Monthly FC</span><span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 34, letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>{U.usd(r.monthly_fc)}</span></Card></div></div></section>

      {divisionRows.length > 0 && <section className="ffc-division-section"><div style={sectionTitle}><span style={eyebrow}>Optional Division / Segment Detail</span><span style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} /></div>{metricTable(divisionRows.map((x) => ({ metric: x.name, actual: x.actual, fc: x.fc, diff: x.diff, pct: x.percent })))}</section>}

      <section className="ffc-no-print-charts ffc-chart-section"><div style={sectionTitle}><span style={eyebrow}>Performance Charts</span><span style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} /></div><div className="ffc-charts-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}><Card className="ffc-chart-card"><span style={{ ...eyebrow, display: 'block', marginBottom: 8 }}>Actual vs Forecast</span><div style={{ height: 240 }}><CompareChart rows={view === 'week' ? [{ k: 'Weekly', actual: r.weekly_actual, fc: r.weekly_fc }, { k: 'MTD', actual: r.mtd_actual, fc: r.mtd_fc }, { k: 'YTD', actual: r.ytd_actual, fc: r.ytd_fc }] : [{ k: periodTitle, actual: pair.actual, fc: pair.fc }, { k: 'Latest MTD', actual: latest.mtd_actual, fc: latest.mtd_fc }, { k: 'Latest YTD', actual: latest.ytd_actual, fc: latest.ytd_fc }]} /></div></Card><Card><span style={{ ...eyebrow, display: 'block', marginBottom: 8 }}>Weekly Trend</span><div style={{ height: 240 }}><TrendChart weeks={byDateAsc.slice(-12)} /></div></Card><Card style={{ gridColumn: '1 / -1' }}><span style={{ ...eyebrow, display: 'block', marginBottom: 8 }}>2026 Annual Forecast Context</span><div style={{ height: 120 }}><AnnualChart ytdActual={latest.ytd_actual || r.ytd_actual} annualFc={r.annual_fc} /></div></Card></div></section>

      <section className={view === 'week' ? 'ffc-executive-cabin-section' : ''}>
        {view === 'week' ? (
          <div className="ffc-executive-cabin-heading">
            <span className="ffc-executive-plane-icon" aria-hidden="true">✈</span>
            <span className="ffc-executive-heading-text">Executive Briefing</span>
            <span className="ffc-executive-heading-line" aria-hidden="true" />
          </div>
        ) : (
          <div style={sectionTitle}>
            <span style={eyebrow}>Rollup Notes</span>
            <span style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} />
          </div>
        )}
        {view === 'week' ? (
          <div className={'ffc-briefing-cabin' + (openBriefing ? ' has-open' : '')}>
            <div className="ffc-cabin-left">
              {cabinLeftTitles.map(renderBriefingSeat)}
            </div>

            <div className="ffc-cabin-aisle" aria-hidden="true">
              {[1, 2, 3].map((row) => (
                <div key={row} className="ffc-cabin-row-marker">
                  <span>{row}</span>
                </div>
              ))}
            </div>

            <div className="ffc-cabin-right">
              {cabinRightRows.map((row, index) => (
                <div key={index} className="ffc-cabin-right-row">
                  {row.map(renderBriefingSeat)}
                </div>
              ))}
            </div>

            {openBriefing && (() => {
              const bodyText = briefingTextByTitle[openBriefing] || 'No update entered for this section.';
              return (
                <button
                  type="button"
                  className="ffc-briefing-detail"
                  role="dialog"
                  aria-modal="false"
                  aria-label={openBriefing + ' briefing. Click anywhere to close.'}
                  onWheel={handleBriefingWheel}
                  onClick={() => setOpenBriefing(null)}
                >
                  <div className="ffc-briefing-detail-inner">
                    <span className="ffc-briefing-detail-kicker">Executive Briefing</span>
                    <h3>{openBriefing}</h3>
                    <p className={!briefingTextByTitle[openBriefing] ? 'is-empty' : ''}>{bodyText}</p>
                  </div>
                </button>
              );
            })()}

            <div className="ffc-print-briefings">
              {briefings.map(([title, text]) => (
                <div key={title} className="ffc-print-briefing-item">
                  <h3>{title}</h3>
                  <p>{text || 'No update entered for this section.'}</p>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
            {rollupNotes.length ? rollupNotes.map((n) => (
              <Card key={n.title} accent="teal">
                <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 15, color: 'var(--text-primary)' }}>{n.title}</h3>
                <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--text-secondary)' }}>{n.text}</p>
              </Card>
            )) : (
              <Card><p style={{ margin: 0, fontFamily: 'var(--font-sans)', color: 'var(--text-secondary)' }}>No notes available for the selected rollup.</p></Card>
            )}
          </div>
        )}
      </section>

      <footer className="ffc-screen-flight-footer ffc-no-print" aria-label="Briefing metadata">
        <span>End of Briefing</span>
        <strong>{documentTitle.replace('FFC · ', '')}</strong>
        <span>{included.length} saved week{included.length === 1 ? '' : 's'} included</span>
      </footer>

      <footer className="ffc-print-flight-strip" aria-hidden="true">
        <span>Briefing<strong>FFC Sales</strong></span>
        <span>View<strong>{viewLabel}</strong></span>
        <span>Period<strong>{filenamePeriod}</strong></span>
        <span>Generated<strong>{new Date().toLocaleDateString('en-US')}</strong></span>
      </footer>

      <div className="ffc-no-print" style={{ display: 'flex', justifyContent: 'flex-end' }}><Button variant="secondary" onClick={onEdit}>Edit Current Week</Button></div>
    </div>
  );
}

Object.assign(window, { PresentationView });