function Hero() {
  const rotatorWords = ["actually works.", "fits your team.", "saves you hours.", "ships next week."];

  return (
    <section className="hero" id="top">
      <div className="hero-grid-bg" />
      <NeuralSphere />

      <div className="hero-inner">
        <div className="hero-text">
          <div className="hero-badge">
            <span className="dot" />
            Now booking pilots for May
          </div>

          <h1 className="hero-headline">
            AI that<br/>
            <span className="accent-stroke"><Rotator words={rotatorWords} /></span>
          </h1>

          <p className="hero-subhead">
            We're the team Australian SMEs call when AI feels like noise.
            We turn the hype into tools your business will use on Monday morning —
            no jargon, no six-figure platforms, no fluff.
          </p>

          <div className="hero-ctas">
            <a href="#contact" className="btn btn-primary">
              Book a 30-min chat
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 6l6 6-6 6"/>
              </svg>
            </a>
            <a href="#try-it" className="btn-arrow">
              Try it live below
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 5v14M6 13l6 6 6-6"/>
              </svg>
            </a>
          </div>

          <div className="hero-meta">
            <div className="hero-meta-item">
              <span className="val">+38</span>
              <span className="lbl">Pilots shipped</span>
            </div>
            <div className="hero-meta-item">
              <span className="val">14d</span>
              <span className="lbl">Avg first value</span>
            </div>
            <div className="hero-meta-item">
              <span className="val">0%</span>
              <span className="lbl">Bullshit</span>
            </div>
          </div>
        </div>
        <div /> {/* right column intentionally empty — sphere fills it visually */}
      </div>

      <div className="hero-scroll-hint">
        <span>Scroll</span>
        <span className="line" />
      </div>
    </section>
  );
}
window.Hero = Hero;