// Fin45 — About page
const { FinMascot } = window;

function PageAbout() {
  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 }}>
            About · the experiment
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 64, letterSpacing: '-0.025em', lineHeight: 1, margin: '0 0 28px' }}>
            One hundred thousand dollars. Three hundred sixty-five days. One AI.
          </h1>

          <div className="prose">
            <p className="lead">
              Fin45 is a public, in-progress experiment: can an autonomous AI agent compound $100,000 of paper money into something resembling financial freedom — and can it do it transparently, in front of an audience, every single trading day?
            </p>

            <h2>The Experiment</h2>
            <p>
              On June 1, 2026, the agent received a $100,000 paper account and a 365-day window. Its mandate is simple to state and absurd in practice: net 10% per month, after costs and slippage, while documenting every decision. The agent runs 15-minute decision cycles during market hours, ranks signals against its current prompt, and publishes its reasoning log post-close.
            </p>

            <h2>The Agent</h2>
            <p>
              The agent watches 381 sources — SEC filings, options chains, congressional disclosures, earnings transcripts, dark-pool prints, on-chain flows, macro releases, and a long tail of social signals. Each signal is scored, deduplicated, and routed into a conviction model. Trades are sized to conviction; passes are documented as carefully as fills.
            </p>

            <h2>The Money</h2>
            <p>
              For now the experiment runs on paper. Beginning Month 2, a parallel real-money account funded with personal capital will mirror every paper trade, so that slippage, fees and execution friction are real, even if the paper book is what you read about.
            </p>

            <h2>The Target</h2>
            <p>
              Ten percent per month, net, sustained. We are not pretending this is reasonable. It is the rate at which $100,000 becomes a different life inside a year, and we picked it precisely because it requires the agent to be wrong less often than the floor.
            </p>

            <h2>The Narrator</h2>
            <p>
              Fin45 is written by Andrew McGuire — twenty years in B2B SaaS go-to-market, Agent Operator for the experiment, based in Bend, Oregon. The voice is mine. The trades are the agent's. The prompt diffs you'll read about in Lookback editions are the seam where my judgment meets the agent's reasoning.
            </p>

            <h2>The Legal Frame</h2>
            <p>
              Fin45 is an educational documentary. Nothing on this site is financial advice, an offer, or a solicitation. The trades you see are made by an autonomous system on a paper account, published after the fact, for the purpose of documenting how an AI agent learns to trade in public.
            </p>

            <div className="disclaimer">
              FIN45 IS NOT FINANCIAL ADVICE. The trades described are paper trades executed by an autonomous agent for documentary purposes. Past performance — paper or otherwise — does not guarantee future results. You should not make investment decisions based on Fin45 content. Markets carry the risk of loss. The narrator is not a registered investment advisor. Consult a licensed professional before acting on anything you read here. © 2026 Zagoso LLC, Bend, Oregon.
            </div>
          </div>
        </div>

        <aside style={{ position: 'sticky', top: 96, display: 'flex', flexDirection: 'column', gap: 22 }}>
          <div className="rail-card mascot">
            <FinMascot pose="hodler" size={180} />
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.16em', color: 'var(--accent)', textTransform: 'uppercase', marginTop: 8 }}>
              Fin · the hodler
            </div>
          </div>
          <div className="rail-card">
            <div className="rail-h">Quick facts</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'JetBrains Mono, monospace', fontSize: 12 }}>
              <Fact k="Starting" v="$100,000" />
              <Fact k="Duration" v="365 days" />
              <Fact k="Sources"  v="381 monitored" />
              <Fact k="Cycles"   v="15-minute" />
              <Fact k="Cadence"  v="Mon–Fri 5:30 PM ET" />
              <Fact k="Pricing"  v="Free · Pro forthcoming" />
              <Fact k="Owner"    v="Zagoso LLC" />
              <Fact k="Based"    v="Bend, Oregon" />
            </div>
          </div>
        </aside>
      </div>
    </main>
  );
}

function Fact({ k, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: '1px solid var(--border)' }}>
      <span style={{ color: 'var(--text-muted)', textTransform: 'uppercase', fontSize: 10, letterSpacing: '0.12em' }}>{k}</span>
      <span style={{ color: 'var(--text-primary)' }}>{v}</span>
    </div>
  );
}

window.PageAbout = PageAbout;