/* ============================================================================
   Home — landing, with 3 switchable hero directions
   ========================================================================== */
function RegMark() {
  return (
    <div className="reg-mark" style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <span className="crosshair" />
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".12em", color: "var(--fg-4)" }}>50.4°N</span>
    </div>
  );
}

function HeroA({ go, showPattern = true }) {
  return (
    <section className="hero heroA">
      {showPattern && <div className="hero-dotgrid dot-grid" style={{ maskImage: "linear-gradient(to bottom, #000, transparent)", WebkitMaskImage: "linear-gradient(to bottom, #000, transparent)", opacity: .5 }} />}
      <div className="wrap" style={{ position: "relative" }}>
        <RegMark />
        <Eyebrow idx="01">Writing · Projects · Ideas</Eyebrow>
        <h1 className="statement">Think clearly. Build deliberately.</h1>
        <p className="lead">
          A public notebook on science, philosophy, history, and the technology
          between them — written so you leave with something you can actually use.
        </p>
        <div className="hero-cta">
          <Button variant="primary" onClick={() => go("subscribe")}>Get the next essay →</Button>
          <span className="btn btn-ghost" onClick={() => go("writing")}><span className="u">Read the latest</span> ↗</span>
        </div>
      </div>
    </section>
  );
}

function HomePage({ go, openPost, tweaks = {} }) {
  return (
    <main>
      <HeroA go={go} openPost={openPost} showPattern={tweaks.heroPattern !== false} />

      {/* Latest writing */}
      <section className="wrap section" style={{ paddingTop: 24 }}>
        <div className="section-head">
          <div>
            <Eyebrow idx="02">Writing</Eyebrow>
            <h2 className="section-title">Latest essays & notes</h2>
          </div>
          <span className="btn btn-ghost" onClick={() => go("writing")}><span className="u">All writing</span> →</span>
        </div>
        <div>
          {POSTS.slice(0, 3).map((p) => <PostRow key={p.id} post={p} onOpen={openPost} />)}
        </div>
      </section>

      {/* Selected projects */}
      <section className="wrap section" style={{ paddingTop: 0 }}>
        <div className="section-head">
          <div>
            <Eyebrow idx="03">Projects</Eyebrow>
            <h2 className="section-title">Selected work</h2>
          </div>
          <span className="btn btn-ghost" onClick={() => go("projects")}><span className="u">All projects</span> →</span>
        </div>
        <div className="proj-grid">
          {PROJECTS.slice(0, 2).map((p) => <ProjectCard key={p.id} p={p} />)}
        </div>
      </section>

      <NewsletterBand showPattern={tweaks.newsletterPattern !== false} />
    </main>
  );
}

Object.assign(window, { HomePage, HeroA });