// Manifesto — transferred from Alpha Loop Capital and rewritten in Tom's personal voice.
// Same ten-rule structure, but reframed for the "operator/investor/dad" byline rather than the fund.

function ManifestoPage({ navigate }) {
  const rules = window.HOAGS_DATA.MANIFESTO;

  return (
    <div className="th-manifesto">
      {/* Hero */}
      <section className="th-mani-hero">
        <span className="th-eyebrow">The Hoags Manifesto · 2026</span>
        <h1>
          Ten rules I write,<br/>
          invest, and operate by.
        </h1>
        <p className="th-mani-lede">
          Ten rules, written for me and held to in public. The fund version, the operator version, the personal version — same spine, one byline.
        </p>
        <div className="th-mani-meta">
          <div><span className="th-eyebrow">Author</span><br/>Tom Hogan</div>
          <div><span className="th-eyebrow">First written</span><br/>June 2024 · ALC</div>
          <div><span className="th-eyebrow">This edition</span><br/>May 2026 · Hoags</div>
        </div>
      </section>

      {/* Rules */}
      <section className="th-mani-rules">
        {rules.map((r) => (
          <article key={r.n} className="th-mani-rule">
            <div className="th-mani-num">{r.n}</div>
            <div className="th-mani-body">
              <h2>{r.head}</h2>
              <p>{r.body}</p>
            </div>
          </article>
        ))}
      </section>

      {/* Sign-off */}
      <section className="th-mani-foot">
        <div className="th-mani-foot-rule" />
        <div className="th-mani-foot-grid th-mani-foot-grid--solo">
          <div>
            <span className="th-eyebrow">Sign-off</span>
            <p className="th-mani-signoff">Written by hand. Held to in public. Revised when wrong.</p>
            <p className="th-mani-byline">— Tom</p>
          </div>
        </div>
      </section>
    </div>
  );
}

window.ManifestoPage = ManifestoPage;