/* Hero.jsx — the proclamation. A masthead that reads like a printed broadside. */

function Hero({ onBegin }) {
  return (
    <section className="hero" id="top">
      <div className="hero-frame">
        <div className="hero-kicker" aria-hidden="true">
          <span>◈ LEAKED INTERNAL DRAFT</span>
          <span>THE COMPROMISES THEY FILED QUIETLY — EXPOSED</span>
        </div>

        <div className="hero-top u-label">
          <span>BY ORDER OF THE BUREAU OF RADICAL COMPLIANCE</span>
          <span>No. 11 · AS AMENDED</span>
        </div>

        <hr className="rule-ink" style={{ margin: "0 0 38px" }} />

        <div className="hero-eyebrow u-label">A PRACTICAL GUIDE TO HONORING BURNER CULTURE</div>

        <h1 className="hero-title">
          The <em>Un</em>principles
        </h1>

        <p className="hero-lede u-clause">
          The eleven principles you already believe in — faithfully preserved,
          and helpfully annotated with every condition under which they may be set aside.
          <span className="hero-whenever"> Whenever convenient.</span>
          <span className="hero-scrawl" aria-hidden="true">↖ there it is</span>
        </p>

        <div className="hero-actions">
          <Button variant="primary" onClick={onBegin}>Read the Full Decree</Button>
          <span className="hero-sub u-fine">
            11 articles · 1 founding hypocrisy · terms apply<span className="u-dagger">∗</span>
          </span>
        </div>

        <div className="hero-seal">
          <Seal size={134} />
        </div>

        <div className="hero-extra-stamps" aria-hidden="true">
          <Stamp rotate={-14} size={22} color="var(--stamp-red)">DO NOT DISTRIBUTE</Stamp>
          <Stamp rotate={8} size={18} color="var(--stamp-red)">UNOFFICIAL</Stamp>
        </div>
      </div>

      <div className="hero-scrollcue u-label">
        <span>CONTINUE TO ARTICLE I</span>
        <span className="hero-arrow">↓</span>
      </div>
    </section>
  );
}

window.Hero = Hero;