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

const Hero = () => {
  const [quoteIn, setQuoteIn] = React.useState(false);

  React.useEffect(() => {
    const t = setTimeout(() => setQuoteIn(true), 800);
    return () => clearTimeout(t);
  }, []);

  return (
    <section className="hero" data-screen-label="01 Hero">
      {window.HeroNetwork && <window.HeroNetwork />}
      <aside className="hero-ticker" aria-hidden="true">
        <div>↳ Huoltovarmuus · Turvallisuus · Talous · Kv. yhteistyö · Hallinto · Mielenterveys</div>
      </aside>

      <div className="hero-content">
        <div className="hero-eyebrow">
          <span>Tutke ry</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 miten se suojautuu sen riskeiltä.
        </div>

        <div className={"hero-quote" + (quoteIn ? " in" : "")}>
          “Suomi on hyvässä asemassa. Mutta <span className="em-window">toiminnan ikkuna on kapea</span>.”
        </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</span>
        <span>Helsinki · 04 · 2026</span>
      </div>
    </section>
  );
};

window.Hero = Hero;