// Fin45 — Lookback page (bi-weekly deep dives)
const DL = window.FIN_DATA;
const { FinMascot, SubscribeCTA } = window;

function PageLookback() {
  return (
    <main className="page" style={{ paddingTop: 48, paddingBottom: 64 }}>
      <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 }}>
            Lookback · every ten sessions
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 60, letterSpacing: '-0.02em', lineHeight: 1.02, margin: 0 }}>
            What the agent did,<br />and what we changed.
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 19, color: 'var(--text-body)', maxWidth: '60ch', margin: '24px 0 0' }}>
            Every two trading weeks we publish a Lookback — the trade-by-trade walkthrough, what worked, what didn't, and the prompt diff that ships next.
          </p>
        </div>
        <FinMascot pose="analyst" size={160} />
      </header>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 36 }}>
        {DL.lookbacks.map((lb, i) => (
          <div key={i} className="lookback-card">
            <div className="lb-period">{lb.period}<br /><span style={{ color: 'var(--text-faint)', fontSize: 10, letterSpacing: '0.1em' }}>{lb.dates}</span></div>
            <div>
              <h3 className="lb-title">{lb.title}</h3>
              <p className="lb-desc">{lb.desc}</p>
              <div style={{ display: 'flex', gap: 12, marginTop: 14, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
                <span>Trade walkthrough</span><span style={{ color: 'var(--text-faint)' }}>·</span>
                <span>Prompt diff (Pro)</span><span style={{ color: 'var(--text-faint)' }}>·</span>
                <span>Honest number</span>
              </div>
            </div>
            <div className={'lb-pnl ' + (lb.pnl.startsWith('+') ? 'up' : 'dn')}>{lb.pnl}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 48, padding: '28px 32px', border: '1px solid var(--accent-soft)', background: 'rgba(212,162,76,0.04)' }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.16em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 14 }}>
          Next lookback · Day 48–57
        </div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 19, lineHeight: 1.5, color: 'var(--text-primary)', maxWidth: '60ch' }}>
          Ships <strong style={{ fontWeight: 600 }}>Friday May 30</strong>. The next cycle will likely cover CPI Wednesday, FOMC minutes, and how the agent handled triple witching. Subscribe to get it the moment it lands.
        </div>
      </div>

      <SubscribeCTA heading="The lookback, ten days out." />
    </main>
  );
}

window.PageLookback = PageLookback;