// Fin45 — Changelog page (prompt versions)
const DC = window.FIN_DATA;
const { FinMascot, SubscribeCTA } = window;

function PageChangelog() {
  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 }}>
            Changelog · the agent's prompt history
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 60, letterSpacing: '-0.025em', lineHeight: 1.02, margin: 0 }}>
            v{DC.changelog[0].ver.replace('v', '')} · {DC.changelog.length} versions shipped.
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 19, color: 'var(--text-body)', maxWidth: '64ch', margin: '24px 0 0' }}>
            Every change to the agent's prompt is versioned, dated and tied to the lookback that motivated it. This is the diff layer behind every trade you read about.
          </p>
        </div>
        <FinMascot pose="reads" size={160} />
      </header>

      <div className="changelog-list">
        {DC.changelog.map((c, i) => (
          <article key={i} className="changelog-entry">
            <div className="cl-ver">
              <div className="cl-ver-tag">{c.ver}</div>
              <div className="cl-ver-date">{c.date}</div>
              <div className="cl-ver-day">Day {c.day}</div>
              {i === 0 ? <div className="cl-ver-current">CURRENT</div> : null}
            </div>
            <div className="cl-body">
              <h3 className="cl-headline">{c.headline}</h3>
              <ul className="cl-changes">
                {c.changes.map((change, j) => (
                  <li key={j}>{change}</li>
                ))}
              </ul>
              <div style={{ marginTop: 14, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
                Motivated by <a href="#/lookback" style={{ color: 'var(--accent)', borderBottom: '1px solid var(--accent-soft)' }}>lookback {c.day - 10}–{c.day}</a> · diff (Pro only)
              </div>
            </div>
          </article>
        ))}

        <article className="changelog-entry pending">
          <div className="cl-ver">
            <div className="cl-ver-tag">v0.8</div>
            <div className="cl-ver-date">Pending</div>
            <div className="cl-ver-day">~Day 57</div>
          </div>
          <div className="cl-body">
            <h3 className="cl-headline" style={{ color: 'var(--text-muted)' }}>Ships with the next lookback.</h3>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.5, color: 'var(--text-body)' }}>
              Each lookback edition ships with the next prompt diff. The next one lands Friday May 30 — covering CPI, FOMC minutes, and how the agent handled triple witching.
            </p>
          </div>
        </article>
      </div>

      <SubscribeCTA heading={<>Every diff, every Friday.</>} />
    </main>
  );
}

window.PageChangelog = PageChangelog;