// Fin45 — Home page
const D_ = window.FIN_DATA;
const { Wordmark, HonestNumber, SignalMap, Blotter, ScoreboardTile, FinMascot, SubscribeCTA } = window;

function PageHome() {
  const m = D_.meta;
  return (
    <>
      <section className="page hero">
        <div className="hero-grid">
          <div className="hero-content">
            <Wordmark size="xl" />
            <div className="hero-eyebrow">
              <span className="eyebrow-dot" />
              Day {m.day} of {m.totalDays} · Started {m.started}
            </div>
            <h1 className="hero-question">
              Can an AI agent turn <em>$100K</em> into financial freedom in 365 days?
            </h1>
            <p className="hero-sub">
              Every trade public. Every loss documented. 5:30 PM ET, Monday through Friday. Free.
            </p>
            <div className="hero-proof">
              <span>Issue #{m.issue}</span>
              <span className="proof-sep">·</span>
              <span>$103,240 today</span>
              <span className="proof-sep">·</span>
              <span className="up">+1.2%</span>
            </div>
            <form className="hero-form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="you@domain.com" />
              <button type="submit">Subscribe</button>
            </form>
          </div>
          <div className="hero-mascot">
            <FinMascot pose="ticker" size={480} />
          </div>
        </div>
      </section>

      <section className="page" style={{ marginTop: 16 }}>
        <div className="section-hd">
          <h2>Today's Edition <span className="muted">· The Gap</span></h2>
          <a className="section-link" href="#/">Read full edition →</a>
        </div>
        <EditionPreview />
      </section>

      <section className="page">
        <div className="section-hd">
          <h2>What Fin45 is</h2>
        </div>
        <div className="whatis">
          <p>An AI trading agent with $100,000 in paper money and 365 days. We started June 1, 2026. Every trade is public. Every loss is documented. The target is 10% net monthly — a rate most professional investors can't sustain.</p>
          <p>This is not financial advice. It's a documentary. You're watching an AI experiment unfold in real time. The agent watches 381 sources, runs 15-minute decision cycles, and publishes its reasoning log every day.</p>
          <p>The free edition arrives at 5:30 PM ET after the close, Monday through Friday. You see what happened today. Fin45 Pro subscribers get the trades as they happen.</p>
        </div>
      </section>

      <section className="page">
        <div className="section-hd">
          <h2>The Honest Number</h2>
          <span className="section-link">Updated daily</span>
        </div>
        <HonestNumber />
      </section>

      <section className="page">
        <div className="section-hd">
          <h2>Signal Sources <span className="muted">· 381 monitored</span></h2>
        </div>
        <div className="sources-grid">
          {D_.sources.map((s, i) => (
            <div key={i} className="src-cell">
              <span className="src-name">{s.name}</span>
              <span className="src-count">{s.n}</span>
            </div>
          ))}
        </div>
        <p className="src-note">381 sources monitored autonomously. The agent ranks, deduplicates and routes them into the daily decision cycle.</p>
      </section>

      <SubscribeCTA />
    </>
  );
}

function EditionPreview() {
  return (
    <div className="edition-preview">
      <div className="ep-head">
        <div>
          <div className="ep-title">The Gap · Day {D_.meta.day}</div>
          <div className="ep-meta" style={{ marginTop: 6 }}>{D_.meta.date}</div>
        </div>
        <div className="ep-meta">Issue #{D_.meta.issue} · 5:30 PM ET</div>
      </div>
      <div className="ep-section">
        <div className="ep-section-h">The Scoreboard</div>
        <ScoreboardTile />
      </div>
      <div className="ep-section">
        <div className="ep-section-h">The Signal Map · {D_.signals.length} signals</div>
        <SignalMap limit={5} />
      </div>
      <div className="ep-section">
        <div className="ep-section-h">The Blotter</div>
        <Blotter limit={3} />
      </div>
      <a className="ep-read" href="#/">Read the full edition →</a>
    </div>
  );
}

window.PageHome = PageHome;