// NavBar.jsx — 5-page sticky navigation
function NavBar({ page, onNavigate }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'home', label: 'Home' },
    { id: 'servizi', label: 'Servizi' },
    { id: 'chi-siamo', label: 'Chi siamo' },
    { id: 'prodotti', label: 'Prodotti' },
    { id: 'recensioni', label: 'Recensioni' },
    { id: 'contatti', label: 'Contatti' },
  ];

  const go = (id) => { onNavigate(id); setMobileOpen(false); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: '#FFFFFF',
      borderBottom: '1px solid #F0EBE5',
      boxShadow: scrolled ? '0 2px 16px rgba(0,0,0,0.05)' : 'none',
      transition: 'box-shadow 240ms',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 76 }}>
        <a href="#home" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ display: 'flex', alignItems: 'center' }}>
          <Logo height={56} />
        </a>

        <nav className="nav-desktop" style={{ display: 'flex', gap: 32 }}>
          {links.map((l) => (
            <a key={l.id} href={`#${l.id}`}
               onClick={(e) => { e.preventDefault(); go(l.id); }}
               style={{
                 fontFamily: "'DM Sans', sans-serif",
                 fontSize: 14, fontWeight: 500,
                 color: page === l.id ? '#E8621A' : '#1A1A1A',
                 position: 'relative',
                 paddingBottom: 4,
                 transition: 'color 240ms',
               }}>
              {l.label}
              {page === l.id && <span style={{ position: 'absolute', left: 0, right: 0, bottom: -2, height: 2, background: 'var(--ds-grad-solar)', borderRadius: 2 }} />}
            </a>
          ))}
        </nav>

        <a href="tel:0119721717" className="nav-call-desktop" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '11px 20px',
          borderRadius: 10,
          background: 'var(--ds-grad-solar)',
          color: '#fff',
          fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 14, letterSpacing: 0.5,
          transition: 'filter 240ms',
        }}>
          <Icon.Phone size={14} color="#fff" /> 011 972 1717
        </a>

        <button className="nav-burger" aria-label="Apri menu"
          onClick={() => setMobileOpen(v => !v)}
          style={{ display: 'none', background: 'transparent', border: 'none', padding: 8, color: '#1A1A1A' }}>
          {mobileOpen ? <Icon.X size={22} /> : <Icon.Menu size={22} />}
        </button>
      </div>

      {mobileOpen && (
        <div className="nav-mobile-menu" style={{ borderTop: '1px solid #F0EBE5', background: '#FFFFFF', padding: '12px 0 20px' }}>
          <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`} onClick={(e) => { e.preventDefault(); go(l.id); }}
                 style={{
                   padding: '14px 4px',
                   fontFamily: "'DM Sans', sans-serif", fontSize: 16, fontWeight: 500,
                   color: page === l.id ? '#E8621A' : '#1A1A1A',
                   borderBottom: '1px solid #F4EFE7',
                 }}>{l.label}</a>
            ))}
            <a href="tel:0119721717" style={{
              marginTop: 14, padding: '14px 18px',
              borderRadius: 10, background: 'var(--ds-grad-solar)',
              color: '#fff', fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 14, letterSpacing: 0.5,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              <Icon.Phone size={14} color="#fff" /> Chiama ora · 011 972 1717
            </a>
          </div>
        </div>
      )}
    </header>
  );
}
Object.assign(window, { NavBar });