// Hero — clean, no background animation. Single dark background only.

const Hero = () => {
  return (
    <section className="hero" data-screen-label="01 Hero">
      {window.HeroNetwork && <window.HeroNetwork />}

      <div className="hero-content">
        <div className="hero-eyebrow">
          <span>Tutke</span>
          <span className="dot"></span>
          <span>Eduskuntavaalit · 2027</span>
          <span className="dot"></span>
          <span>15 suositusta</span>
        </div>

        <h1 className="hero-title">
          Suomen<br />
          <span className="hero-em">tekoäly­valinnat</span><br />
          2027
        </h1>

        <div className="hero-sub">
          Seuraavan hallituskauden aikana tehdään ratkaisuja, jotka määrittävät miten Suomi hyötyy tekoälystä ja suojautuu sen riskeiltä.
        </div>

        <div className="hero-scroll">
          <span>Aloita lukeminen</span>
          <svg width="14" height="20" viewBox="0 0 14 20" fill="none">
            <path d="M7 1v18M1 13l6 6 6-6" strokeWidth="1.2" />
          </svg>
        </div>
      </div>

      <div className="hero-foot">
        <span>Turvallisen tekoälyn keskus Tutke ry</span>
        <span>Helsinki · 04 · 2026</span>
      </div>
    </section>
  );
};

window.Hero = Hero;