function AulanaytSection() {
  // Live ticker: rotate the main notice slot like a real lobby display
  const notices = [
    { tag: 'OPASTE',    tagColor: '#FFD12B', when: 'UUSI',   headline: 'Nordix Oy → 4. krs', meta: 'Hissit A–B · käänny oikealle' },
    { tag: 'TAPAHTUMA', tagColor: '#FF2B9D', when: '12.6.',  headline: 'Pop-up aulassa klo 10–20',  meta: 'Katutaso · 1. krs' },
    { tag: 'HUOLTO',    tagColor: '#2BD9FF', when: '06.06.', headline: 'Hissi B huollossa 9–13', meta: 'Käytä hissiä A' },
    { tag: 'VUOKRATTAVANA', tagColor: '#A6FF2B', when: '180 m²', headline: 'Toimitila vapautuu', meta: '3. krs · kysy aulasta' },
  ];
  const [idx, setIdx] = React.useState(0);
  const [clock, setClock] = React.useState(() => new Date());
  React.useEffect(() => {
    const noticeT = setInterval(() => setIdx(i => (i + 1) % notices.length), 3200);
    const clockT  = setInterval(() => setClock(new Date()), 30 * 1000);
    return () => { clearInterval(noticeT); clearInterval(clockT); };
  }, []);

  const n = notices[idx];
  const pad = (x) => String(x).padStart(2, '0');
  const hhmm = `${pad(clock.getHours())}:${pad(clock.getMinutes())}`;
  const dows = ['Su','Ma','Ti','Ke','To','Pe','La'];
  const today = `${dows[clock.getDay()]} ${pad(clock.getDate())}.${pad(clock.getMonth()+1)}.`;

  return (
    <section id="aulanaytto" className="aula surface-paper-2">
      <div className="container aula__grid">
        <div className="aula__copy">
          <p className="eyebrow aula__eyebrow"><span className="dot" /> AULANÄYTTÖ — LIIKEKIINTEISTÖILLE</p>
          <h2 className="aula__h">Aulanäyttö, jonka kävijät oikeasti lukevat.</h2>
          <p className="lede aula__lede">
            Yksi näyttö aulaan tai sisäänkäynnin viereen. Kiinteistön ylläpitäjä päivittää
            sisällön selaimella minuutissa — yrityshakemisto, opastus ja tapahtumat
            pysyvät ajan tasalla ilman tulostettuja lappuja.
          </p>
          <ul className="aula__list">
            <li><i data-lucide="check" style={{width:14,height:14,strokeWidth:2}}></i> Yrityshakemisto, kerrosopastus ja tapahtumat</li>
            <li><i data-lucide="check" style={{width:14,height:14,strokeWidth:2}}></i> HSL-aikataulut lähimmiltä pysäkeiltä reaaliajassa</li>
            <li><i data-lucide="check" style={{width:14,height:14,strokeWidth:2}}></i> Sää, päivämäärä ja kellonaika aina näkyvillä</li>
            <li><i data-lucide="check" style={{width:14,height:14,strokeWidth:2}}></i> Etäpäivitys — yksi pääkäyttäjä, kymmeniä kohteita</li>
            <li><i data-lucide="check" style={{width:14,height:14,strokeWidth:2}}></i> Vuokrattavat mainospaikat näytön kierrossa</li>
          </ul>
          <div className="aula__actions">
            <a href="#tarjous" className="btn btn-primary">Pyydä tarjous kiinteistölle →</a>
            <a href="#palvelut" className="btn btn-ghost">Mitä toimitukseen kuuluu</a>
          </div>
        </div>

        <div className="aula__visual">
          <div className="lobby">
            {/* Status / top bar */}
            <div className="lobby__top">
              <div className="lobby__brand">
                <span className="lobby__brand-dot" />
                <span className="lobby__brand-name">Töölönranta Business Center</span>
              </div>
              <div className="lobby__clock mono">
                <span>{today}</span>
                <span className="lobby__clock-time">{hhmm}</span>
              </div>
            </div>

            {/* Main grid */}
            <div className="lobby__grid">
              {/* Big notice */}
              <article className="lobby-card lobby-card--main">
                <div className="lobby-card__head">
                  <span className="lobby-tag" style={{ background: n.tagColor }}>{n.tag}</span>
                  <span className="lobby-card__when mono">{n.when}</span>
                </div>
                <h3 className="lobby-card__h">{n.headline}</h3>
                <p className="lobby-card__meta">{n.meta}</p>
                <div className="lobby-card__progress">
                  {notices.map((_, i) => (
                    <span key={i} className={`lobby-pip ${i === idx ? 'lobby-pip--on' : ''}`} />
                  ))}
                </div>
              </article>

              {/* HSL */}
              <article className="lobby-card lobby-card--hsl">
                <div className="lobby-card__head">
                  <span className="lobby-card__title mono">HSL · MEILAHTI</span>
                  <span className="lobby-card__when mono" style={{color:'#A6FF2B'}}>● LIVE</span>
                </div>
                <ul className="hsl">
                  <li><span className="hsl__route">4</span><span className="hsl__dest">Munkkiniemi</span><span className="hsl__min mono">1 min</span></li>
                  <li><span className="hsl__route hsl__route--bus">14</span><span className="hsl__dest">Hernesaari</span><span className="hsl__min mono">3 min</span></li>
                  <li><span className="hsl__route">10</span><span className="hsl__dest">Pikku Huopalahti</span><span className="hsl__min mono">7 min</span></li>
                  <li><span className="hsl__route hsl__route--bus">18</span><span className="hsl__dest">Eira</span><span className="hsl__min mono">12 min</span></li>
                </ul>
              </article>

              {/* Company directory */}
              <article className="lobby-card lobby-card--sauna">
                <span className="lobby-card__title mono">YRITYSHAKEMISTO</span>
                <div className="sauna">
                  {[
                    { t:'1. krs', n:'Aula & vastaanotto', state:'free' },
                    { t:'2. krs', n:'Meridian Oy',  state:'free' },
                    { t:'3. krs', n:'Vapaa toimitila', state:'taken' },
                    { t:'4. krs', n:'Nordix Oy', state:'free'  },
                    { t:'5. krs', n:'Aava Partners', state:'free'  },
                  ].map((s, i) => (
                    <div key={i} className={`sauna__row sauna__row--${s.state}`}>
                      <span className="sauna__t mono">{s.t}</span>
                      <span className="sauna__n">{s.n}</span>
                    </div>
                  ))}
                </div>
              </article>

              {/* Weather */}
              <article className="lobby-card lobby-card--weather">
                <span className="lobby-card__title mono">SÄÄ · HELSINKI</span>
                <div className="weather">
                  <div className="weather__now">
                    <span className="weather__temp mono">+12°</span>
                    <span className="weather__cond">Puolipilvistä</span>
                  </div>
                  <div className="weather__strip">
                    {[
                      { t:'NYT', d:'+12°' }, { t:'14', d:'+14°' },
                      { t:'17', d:'+13°' }, { t:'20', d:'+10°' },
                    ].map(w => (
                      <div key={w.t} className="weather__cell">
                        <span className="weather__t mono">{w.t}</span>
                        <span className="weather__d mono">{w.d}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </article>
            </div>

            {/* Footer ticker */}
            <div className="lobby__footer mono">
              <span className="lobby__footer-tag">TIEDOTE</span>
              <span className="lobby__footer-text">
                Vierasparkki uudistuu — rekisterikilpitunnistus käyttöön ma 17.6. · opastus aulassa.
              </span>
            </div>
          </div>

          <div className="aula__statline mono">
            <span className="dot dot--live" /> ETÄPÄIVITETTY {idx === 0 ? '14 s' : `${(idx+1)*7} s`} SITTEN · HALLINTAPÄÄTE
          </div>
        </div>
      </div>
    </section>
  );
}

window.AulanaytSection = AulanaytSection;