const { useState, useEffect, useRef } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { href: '#palvelut',    label: 'Palvelut' },
    { href: '#palvelukonsepti', label: 'Palvelukonsepti' },
    { href: '#aulanaytto',  label: 'Aulanäyttö' },
    { href: '#yritys',      label: 'Yritys' },
    { href: '#yhteystiedot', label: 'Yhteystiedot' },
  ];

  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="container nav__inner">
        <a href="#top" className="nav__brand" aria-label="digitaalimainos.fi etusivu">
          <img src="assets/logo-mark.svg" alt="" width="28" height="28" />
          <span className="nav__word">digitaalimainos<span className="nav__word-tld">.fi</span></span>
        </a>
        <ul className="nav__menu">
          {items.map(it => (
            <li key={it.href}>
              <a href={it.href}>{it.label}</a>
            </li>
          ))}
        </ul>
        <div className="nav__cta">
          <a href="mailto:myynti@digitaalimainos.fi" className="nav__phone" aria-label="Lähetä sähköpostia">
            <i data-lucide="mail" style={{ width: 14, height: 14, strokeWidth: 1.8 }}></i>
            <span>myynti@digitaalimainos.fi</span>
          </a>
          <a href="#tarjous" className="btn btn-primary nav__btn">Pyydä tarjous →</a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;