/* Hero.jsx */

function Hero() {
  return (
    <section className="hero" id="hero" style={{ borderBottom: '1px solid var(--rule)', paddingBottom: 72 }}>
      <div className="container">
        <div className="hero-tagline">
          <span className="pulse" />
          <span>Domain exploration · not a pitch</span>
        </div>

        <div className="hero-grid">
          <div>
            <h1 className="eyebrow serif">
              The shock was absorbed.<br />
              You just couldn't see where.
            </h1>
            <p className="lede" style={{ maxWidth: '54ch' }}>
              In April 2026, the Strait of Hormuz wobbled and pump prices in Aotearoa <em>fell</em>.
              The standard explanations don't account for it. The financial-instrument architecture
              that quietly absorbed the shock is operating at a tempo almost nobody is naming.
            </p>
            <div className="flex-row" style={{ marginTop: 8 }}>
              <button className="btn" onClick={() => window.scrollTo({ top: document.getElementById('tempos').offsetTop - 56, behavior: 'smooth' })}>
                Begin walkthrough
              </button>
              <button className="btn ghost" onClick={() => window.scrollTo({ top: document.getElementById('inverse').offsetTop - 56, behavior: 'smooth' })}>
                Skip to the methodology
              </button>
            </div>
          </div>

          <div className="hero-meta">
            <div className="row">
              <div className="k">Prepared by</div>
              <div className="v">Regan Duff · CEO, Axiom Intelligence</div>
              <div style={{ fontSize: 11.5, color: 'var(--muted-2)' }}>PhD candidate, U. Auckland Business School</div>
            </div>
            <div className="row">
              <div className="k">For</div>
              <div className="v">Patrick — to think alongside</div>
            </div>
            <div className="row">
              <div className="k">Date</div>
              <div className="v">5 May 2026</div>
            </div>
            <div className="row">
              <div className="k">Reading time</div>
              <div className="v">15–20 min · interactive</div>
            </div>
            <div className="row">
              <div className="k">Right responses</div>
              <div className="v">"Let's talk" — or — "Here is why not"</div>
            </div>
          </div>
        </div>

        {/* hero stat strip */}
        <div style={{
          marginTop: 80, paddingTop: 32,
          borderTop: '1px solid var(--rule)',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32,
        }}>
          <Stat value="56%" color="red" sub="of NZ adults had little or no confidence in the govt fuel response. Horizon, 28 Apr." />
          <Stat value="↓" color="navy" sub="Pump prices fell during the most acute phase of the Hormuz disruption." />
          <Stat value="3" sub="distinct tempos at which institutional response actually occurs. The article only named two." />
          <Stat value="80%" sub="estimated codebase reuse from Cascade to a domain-specific risk inverse-designer." />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;