// Fin45 — Methodology page
const DM = window.FIN_DATA;
const { FinMascot, SubscribeCTA } = window;

function PageMethodology() {
  return (
    <main className="page" style={{ paddingTop: 48, paddingBottom: 64 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 240px', gap: 56, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 14 }}>
            Methodology · how it works
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 56, letterSpacing: '-0.025em', lineHeight: 1.02, margin: '0 0 24px' }}>
            One agent. 381 sources. A 15-minute cycle.
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 19, color: 'var(--text-body)', maxWidth: '60ch', margin: '0 0 48px', lineHeight: 1.5 }}>
            We publish the agent's plumbing because the trades only mean something if you can see the loop that produced them. This page is the loop.
          </p>

          {/* Cycle steps */}
          <div className="section-hd" style={{ marginTop: 0 }}>
            <h2>The Decision Cycle <span className="muted">· every 15 minutes</span></h2>
          </div>
          <div className="cycle-list">
            {DM.cycle.map((c, i) => (
              <div key={i} className="cycle-row">
                <div className="cycle-step">
                  <span className="cycle-step-num">{String(i + 1).padStart(2, '0')}</span>
                  <span className="cycle-step-time">{c.step}</span>
                </div>
                <div className="cycle-body">
                  <div className="cycle-name">{c.name}</div>
                  <div className="cycle-desc">{c.desc}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="section-hd">
            <h2>Signal scoring <span className="muted">· three axes</span></h2>
          </div>
          <div className="method-cols">
            <div>
              <div className="method-h">Recency</div>
              <p>How fresh the signal is, normalized by source. A 10-K filing has a different half-life than a Pelosi disclosure. Each channel decays on its own curve.</p>
            </div>
            <div>
              <div className="method-h">Novelty</div>
              <p>How surprising the signal is given the agent's running prior. Repeating a thing the agent already believed is worth less than a thing that breaks the current model.</p>
            </div>
            <div>
              <div className="method-h">Base-rate</div>
              <p>How often this kind of signal has historically paid. Insider clusters > single insider. Multi-channel corroboration > single channel. The agent learns these weights monthly.</p>
            </div>
          </div>

          <div className="section-hd">
            <h2>Conviction sizing <span className="muted">· the formula</span></h2>
          </div>
          <p className="prose" style={{ maxWidth: '64ch', fontSize: 18 }}>
            Every trade is sized as <code className="mono" style={{ background: 'var(--bg-surface)', padding: '2px 8px', color: 'var(--accent)' }}>weight = (conviction − 0.5)² × max_size</code> — a quadratic above the threshold floor. The floor is 0.65. Below that, the agent passes and documents why.
          </p>
          <p className="prose" style={{ maxWidth: '64ch', fontSize: 18, marginTop: 18 }}>
            This is the most important line of code in the project. It means the agent gets bigger faster only as conviction climbs, not as cash piles up — and it forces the agent to write down a pass when the math says pass. Passes are a feature, not a bug.
          </p>

          <div className="section-hd">
            <h2>Risk limits <span className="muted">· hard caps</span></h2>
          </div>
          <div className="risk-grid">
            {DM.risk.map((r, i) => (
              <div key={i} className="risk-cell">
                <span className="risk-k">{r.k}</span>
                <span className="risk-v">{r.v}</span>
              </div>
            ))}
          </div>

          <div className="section-hd">
            <h2>Publishing <span className="muted">· what gets shipped, when</span></h2>
          </div>
          <div className="method-cols">
            <div>
              <div className="method-h">Daily · 5:30 PM ET</div>
              <p>The Gap. Free. Scoreboard, signals, blotter, editorial, radar. Published Mon–Fri after the close.</p>
            </div>
            <div>
              <div className="method-h">Every 10 sessions</div>
              <p>The Lookback. Free preview, full version Pro. Trade-by-trade walkthrough plus the prompt diff that ships next.</p>
            </div>
            <div>
              <div className="method-h">Monthly close</div>
              <p>The Report Card. Free. TLDR scorecard, lessons, prompt changes, watchlist for next month.</p>
            </div>
          </div>

          <div className="section-hd">
            <h2>The Pro frame <span className="muted">· coming Month 2</span></h2>
          </div>
          <p className="prose" style={{ maxWidth: '64ch', fontSize: 18 }}>
            Fin45 Pro adds two things free subscribers don't get: the trades as they happen (not after the close), and the full prompt diff between versions. The free edition will always exist. The free edition is the documentary; Pro is the live feed.
          </p>
        </div>

        <aside style={{ position: 'sticky', top: 96, display: 'flex', flexDirection: 'column', gap: 22 }}>
          <div className="rail-card mascot">
            <FinMascot pose="analyst" size={180} />
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.16em', color: 'var(--accent)', textTransform: 'uppercase', marginTop: 8 }}>
              Fin · the analyst
            </div>
          </div>
          <div className="rail-card">
            <div className="rail-h">In this page</div>
            <div style={{ display: 'flex', flexDirection: 'column', fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>
              <a href="#cycle" style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>Decision cycle</a>
              <a href="#scoring" style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>Signal scoring</a>
              <a href="#sizing" style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>Conviction sizing</a>
              <a href="#risk" style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>Risk limits</a>
              <a href="#publishing" style={{ padding: '6px 0', borderBottom: '1px solid var(--border)', color: 'var(--text-body)' }}>Publishing</a>
              <a href="#pro" style={{ padding: '6px 0', color: 'var(--text-body)' }}>Pro frame</a>
            </div>
          </div>
          <div className="rail-card">
            <div className="rail-h">Related</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontFamily: 'JetBrains Mono, monospace', fontSize: 11 }}>
              <a href="#/changelog">/changelog →</a>
              <a href="#/lookback">/lookback →</a>
              <a href="#/portfolio">/portfolio →</a>
              <a href="#/about">/about →</a>
            </div>
          </div>
        </aside>
      </div>

      <SubscribeCTA heading="The loop, every day." />
    </main>
  );
}

window.PageMethodology = PageMethodology;