function Footer() {
  const cols = [
    { h: 'Tuotteet', items: ['Aulanäytöt', 'Opastenäytöt', 'Totemit', 'Ulkonäytöt', 'Kosketuspaneelit', 'Mediasoittimet'] },
    { h: 'Palvelut', items: ['Laitetoimitus', 'Asennus & sähköurakointi', 'Sisältö & hallintapääte', 'Ylläpito', 'Projektisuunnittelu', 'Avaimet käteen'] },
    { h: 'Asiakkaat', items: ['Liikekiinteistöt', 'Kauppakeskukset', 'Kiinteistösijoittajat', 'Hotellit', 'Toimitilat', 'Liiketilat'] },
  ];

  return (
    <footer id="yhteystiedot" className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            <div className="footer__mark">
              <img src="assets/logo-mark-paper.svg" alt="" width="32" height="32" />
              <span className="footer__word">digitaalimainos<span className="footer__tld">.fi</span></span>
            </div>
            <p className="footer__tag">Infonäyttöjen uusi aikakausi on täällä.</p>
            <div className="footer__contact">
              <div><span className="mono footer__label">EMAIL</span> <a href="mailto:myynti@digitaalimainos.fi">myynti@digitaalimainos.fi</a></div>
              <div><span className="mono footer__label">OSOITE</span> Helsinki, Suomi</div>
            </div>
          </div>
          <div className="footer__cols">
            {cols.map(c => (
              <div key={c.h} className="footer__col">
                <span className="mono footer__col-h">{c.h}</span>
                <ul>{c.items.map(i => <li key={i}><a href="#">{i}</a></li>)}</ul>
              </div>
            ))}
          </div>
        </div>
        <div className="footer__rule" />
        <div className="footer__bottom">
          <span className="mono">AV-DIGITAALIMAINOS OY · HELSINKI · PERUSTETTU 2024</span>
          <span className="mono">© 2026 · TIETOSUOJA · EVÄSTEET</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;