/* ============================================================================
   About
   ========================================================================== */
function AboutPage({ go }) {
  return (
    <main className="wrap" style={{ paddingTop: 56, paddingBottom: 72 }}>
      <Eyebrow idx="04">About</Eyebrow>
      <h1 className="section-title" style={{ fontSize: "var(--text-4xl)", marginBottom: 40 }}>
        I write to think, and publish to remember.
      </h1>
      <div className="about-grid">
        <div className="about-portrait">
          <Placeholder label="Portrait" style={{ aspectRatio: "4/5" }} />
          <p style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".03em", color: "var(--fg-3)", marginTop: 10 }}>
            ↳ drop a black-and-white portrait here
          </p>
        </div>
        <div className="about-prose">
          <p>
            I'm Aaron — an engineer by training and a generalist by temperament. I
            spend my time at the seams between <em>science, politics, philosophy,
            history, and technology</em>, because that's where the interesting
            mistakes live.
          </p>
          <p>
            This site is a public notebook. I believe design and technology are
            extensions of people and their patterns — tools for shaping what already
            feels natural. Getting that right takes intention, not defaults.
          </p>
          <div className="topics">
            {[
              ["Science", "How we know what we know"],
              ["Philosophy", "How to live with the knowing"],
              ["History", "What we've already tried"],
              ["Technology", "What we'll try next"],
            ].map(([n, d]) => (
              <div className="topic" key={n}>
                <p className="tn">{n}</p>
                <p className="td">{d}</p>
              </div>
            ))}
          </div>
          <p>
            If you take one thing from anything here, I'd rather it be usable than
            merely inspiring. Every piece is meant to hand you a next step.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
            <Button variant="primary" onClick={() => go("subscribe")}>Subscribe →</Button>
            <Button variant="secondary" onClick={() => go("writing")}>Read the writing</Button>
          </div>
        </div>
      </div>
    </main>
  );
}
Object.assign(window, { AboutPage });