// Hero.jsx
function Hero() {
  return (
    <header className="hero" id="top">
      <div className="hero-inner">
        <div className="hero-label">
          <span className="hero-label-line"></span>
          STRATAVEX · MULTI-AGENT COMPETITIVE INTELLIGENCE
        </div>
        <h1>
          <span className="line">A workforce</span>
          <span className="line outline-text">that doesn't</span>
          <span className="line">just answer<span className="accent-text">.</span></span>
        </h1>
        <p className="hero-sub">
          A coordinated team of specialized AI agents — each with a defined role, deep domain
          expertise, and the protocols to challenge one another. They deliberate, hand off, and
          peer-review before anything ships. Intelligence no single model produces alone.
        </p>
        <div className="hero-cta-row">
          <a href="#console" className="cta-btn">Watch them work <Icons.arrowRight /></a>
          <a href="#workforce" className="nav-cta">Meet the team</a>
        </div>
        <div className="stats-bar">
          <div className="stat-item">
            <div className="stat-number">5</div>
            <div className="stat-label">Specialist Agents</div>
          </div>
          <div className="stat-item">
            <div className="stat-number">7<span className="accent">·</span></div>
            <div className="stat-label">Phase Methodology</div>
          </div>
          <div className="stat-item">
            <div className="stat-number">3</div>
            <div className="stat-label">Quality Gates</div>
          </div>
          <div className="stat-item">
            <div className="stat-number">0</div>
            <div className="stat-label">Unreviewed Outputs</div>
          </div>
        </div>
      </div>
    </header>
  );
}
window.Hero = Hero;