// Fin45 — Trackers hub page
const DTR = window.FIN_TRACKERS;
const { FinMascot, SubscribeCTA } = window;

function PageTrackers() {
  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 }}>
            Trackers · the money that moves markets
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 60, letterSpacing: '-0.025em', lineHeight: 1.02, margin: 0 }}>
            Follow the people<br />who move the money.
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 19, color: 'var(--text-body)', maxWidth: '60ch', margin: '24px 0 0' }}>
            Live trackers of the politicians, founders and indices that move the market. Every disclosure, every funding round, every benchmark — surfaced the moment it happens, scored against the historical base-rate.
          </p>
        </div>
        <FinMascot pose="analyst" size={160} />
      </header>

      {DTR.catalog.map(group => (
        <section key={group.group}>
          <div className="section-hd">
            <h2>{group.group}<span className="muted"> · {group.items.length} trackers</span></h2>
          </div>
          <div className="tracker-grid">
            {group.items.map(t => (
              <a key={t.id} href={'#/tracker/' + t.id} className={'tracker-card' + (t.hot ? ' hot' : '')}>
                {t.hot ? <span className="tracker-hot">HOT</span> : null}
                <div className="tracker-mood-bar" data-mood={t.mood} />
                <div className="tracker-card-body">
                  <div className="tracker-name">{t.name}</div>
                  <div className="tracker-sub">{t.sub}</div>
                  <div className="tracker-meta">
                    <span className={'tracker-ytd ' + (t.ytd.startsWith('+') ? 'up' : t.ytd.startsWith('-') ? 'dn' : 'muted')}>{t.ytd}</span>
                    <span className="tracker-sep">·</span>
                    <span className="tracker-events">{typeof t.events === 'number' ? t.events + ' events' : t.events}</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </section>
      ))}

      <section style={{ marginTop: 64, padding: '32px 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: 12 }}>
          Coming next
        </div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.4, color: 'var(--text-primary)', maxWidth: '60ch' }}>
          More politicians (full congressional roster), more founders (Bezos, Zuckerberg, Wood, Cohen, Burry), every major ETF, and a dedicated commodities tracker. Subscribe to vote on what we build next.
        </div>
      </section>

      <SubscribeCTA heading={<>The smart money,<br />in your inbox.</>} />
    </main>
  );
}

window.PageTrackers = PageTrackers;