function Hero() {
  return (
    <section id="top" className="hero surface-paper">
      <div className="container hero__grid">
        <div className="hero__copy">
          <p className="eyebrow hero__eyebrow">
            <span className="dot dot--live" /> LIIKEKIINTEISTÖT · KAUPPAKESKUKSET · TOIMITALOT
          </p>
          <h1 className="display-1 hero__h1">
            Kiinteistön<br/>
            infonäytöt<br/>
            <span className="hero__h1-accent">avaimet käteen.</span>
          </h1>
          <p className="lede hero__lede">
            Toimitamme aula-, opaste- ja mainosnäytöt liikekiinteistöihin — kauppakeskuksiin,
            toimitaloihin ja liiketiloihin. Yrityshakemisto, opastus, tapahtumat ja vuokrattavat
            mainospaikat yhdellä järjestelmällä.
          </p>
          <div className="hero__actions">
            <a href="#tarjous" className="btn btn-primary btn-lg">Pyydä tarjous →</a>
            <a href="#aulanaytto" className="btn btn-ghost btn-lg">Katso esimerkki</a>
          </div>
          <div className="hero__meta">
            <span className="mono">PERUSTETTU 2024</span>
            <span className="hero__meta-sep">·</span>
            <span className="mono">HELSINKI</span>
            <span className="hero__meta-sep">·</span>
            <span className="mono">KOKO SUOMEN PARTNERIVERKOSTO</span>
          </div>
        </div>

        <div className="hero__visual" aria-hidden="true">
          {/* A vertical totem display with content scrolling on it — synthetic render */}
          <div className="totem">
            <div className="totem__bezel">
              <div className="totem__screen">
                <div className="totem__content totem__content--1">
                  <span className="totem__eyebrow" style={{color:'#2BD9FF'}}>OPASTUS</span>
                  <span className="totem__price">3. krs</span>
                  <span className="totem__discount" style={{color:'#A6FF2B', fontSize:'15px'}}>NEUVOTTELU → OIKEALLE</span>
                  <span className="totem__label">Hissit A–B · aula</span>
                </div>
                <div className="totem__content totem__content--2">
                  <span className="totem__eyebrow" style={{color:'#FFD12B'}}>YRITYSHAKEMISTO</span>
                  <span className="totem__price" style={{fontSize:'34px'}}>42</span>
                  <span className="totem__discount" style={{color:'#2BD9FF', fontSize:'15px'}}>VUOKRALAISTA</span>
                  <span className="totem__label">Selaa kosketuksella</span>
                </div>
                <div className="totem__content totem__content--3">
                  <span className="totem__eyebrow" style={{color:'#FF2B9D'}}>TAPAHTUMA</span>
                  <span className="totem__price">12.6.</span>
                  <span className="totem__discount" style={{color:'#A6FF2B', fontSize:'15px'}}>POP-UP · 1. KRS</span>
                  <span className="totem__label">Aukioloajat 10–20</span>
                </div>
              </div>
            </div>
            <div className="totem__stand" />
            <div className="totem__base" />
          </div>
          <div className="hero__tag-row">
            <span className="tag tag-dot">LIVE — AULAN OPASTE</span>
            <span className="tag">43″ · PYSTYASENNUS</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;