const { useEffect: useEffectH, useState: useStateH } = React;

function Hero() {
  const [tick, setTick] = useStateH(0);
  useEffectH(() => {
    const id = setInterval(() => setTick(t => t + 1), 2400);
    return () => clearInterval(id);
  }, []);
  const roas = (3.42 + Math.sin(tick) * 0.12).toFixed(2);
  return (
    <header className="hero">
      <div className="hero-grid" aria-hidden="true"/>
      <div className="hero-bloom" aria-hidden="true"/>
      <div className="hero-inner">
        <div className="hero-eyebrow">
          <span className="pulse-dot"/> AI ACTIVE · 42 ACCOUNTS LIVE
        </div>
        <h1 className="hero-title">
          Ads optimized by AI.<br/>
          <span className="grad-text">Perfected by humans.</span>
        </h1>
        <p className="hero-sub">
          A fixed monthly fee for the AI that runs your campaigns 24/7.
          Then pick the oversight package. We sign off on every move.
        </p>
        <div className="hero-ctas">
          <a href="https://app.growth-dna.ai/signup" className="btn-pulse btn-lg">Start now <span>→</span></a>
          <a href="#product" className="btn-ghost btn-lg">See how it works</a>
        </div>
        <div className="hero-stats">
          <div className="stat">
            <div className="stat-val">+{roas}×</div>
            <div className="stat-lbl">AVG ROAS · 90D</div>
          </div>
          <div className="stat-divider"/>
          <div className="stat">
            <div className="stat-val">72h</div>
            <div className="stat-lbl">HUMAN REVIEW CADENCE</div>
          </div>
          <div className="stat-divider"/>
          <div className="stat">
            <div className="stat-val">€599<span className="stat-sm">/mo</span></div>
            <div className="stat-lbl">AI ENGINE · FLAT</div>
          </div>
        </div>
      </div>
    </header>
  );
}

window.Hero = Hero;