// Fin45 — Report Card page (monthly close)
const DR = window.FIN_DATA;
const { FinMascot, EquityCurve, HonestNumber, MonthsGrid, SubscribeCTA } = window;

function PageReportCard() {
  const rc = DR.reportCard;
  return (
    <main className="page" style={{ paddingTop: 48, paddingBottom: 64 }}>
      <div className="crumb">
        <a href="#/archive">Archive</a>
        <span className="crumb-sep">/</span>
        <a href="#/portfolio">Reports</a>
        <span className="crumb-sep">/</span>
        <span style={{ color: 'var(--text-body)' }}>{rc.month}</span>
      </div>

      <header style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'end', paddingBottom: 28, borderBottom: '3px double var(--text-primary)' }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 14 }}>
            Report Card · {rc.month} · {rc.daysCovered}
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 56, letterSpacing: '-0.025em', lineHeight: 1.04, margin: 0 }}>
            {rc.headline}
          </h1>
        </div>
        <FinMascot pose="money_moves" size={160} />
      </header>

      <div className="section-hd" style={{ marginTop: 28 }}>
        <h2>The TLDR scoreboard</h2>
        <span className="section-link">{rc.daysCovered}</span>
      </div>
      <div className="tldr-grid">
        {rc.tldr.map((row, i) => (
          <div key={i} className="tldr-cell">
            <div className="tldr-k">{row.k}</div>
            <div className="tldr-v">{row.v}</div>
          </div>
        ))}
      </div>

      <div className="section-hd">
        <h2>The equity arc <span className="muted">· Day 1 → today</span></h2>
      </div>
      <div className="equity-card">
        <EquityCurve height={260} />
      </div>

      <div className="section-hd">
        <h2>The honest number <span className="muted">· vs SPY</span></h2>
      </div>
      <HonestNumber />

      <div className="section-hd">
        <h2>What worked, what didn't</h2>
      </div>
      <div className="rc-sections">
        {rc.sections.map((s, i) => (
          <div key={i} className="rc-section">
            <div className="rc-h">{s.h}</div>
            <p>{s.body}</p>
          </div>
        ))}
      </div>

      <div className="section-hd">
        <h2>Monthly grid <span className="muted">· vs 10% target</span></h2>
      </div>
      <MonthsGrid />

      <SubscribeCTA heading={<>The next report card<br />lands May 31.</>} />
    </main>
  );
}

window.PageReportCard = PageReportCard;