const NAV_LINKS = [
  { id: 'book', label: 'Book' },
  { id: 'how', label: 'How it works' },
  { id: 'services', label: 'Services' },
  { id: 'gallery', label: 'Gallery' },
  { id: 'about', label: 'About' },
  { id: 'faq', label: 'FAQ' },
];

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const go = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <header className={`nav ${scrolled ? 'nav-scrolled' : ''}`}>
      <div className="nav-inner container">
        <a href="#top" className="nav-brand" onClick={(e)=>{e.preventDefault(); window.scrollTo({top:0,behavior:'smooth'});}}>
          <img src="assets/logo.jpeg" alt="Prestige Auto Spa Mobile" />
          <span className="nav-brand-text">
            <span className="serif">PRESTIGE</span>
            <span className="mono">Auto Spa Mobile</span>
          </span>
        </a>
        <nav className="nav-links">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={`#${l.id}`} onClick={(e)=>{e.preventDefault(); go(l.id);}}>{l.label}</a>
          ))}
        </nav>
        <div className="nav-cta">
          <a className="nav-phone" href="tel:+13105550110">
            <Icon name="phone" size={14}/> (310) 555-0110
          </a>
          <button className="btn btn-primary nav-book" onClick={()=>go('book')}>
            Book now <Icon name="arrow" size={14}/>
          </button>
        </div>
        <button className="nav-toggle" aria-label="Menu" onClick={()=>setOpen(o=>!o)}>
          <Icon name={open ? 'close' : 'menu'} size={20}/>
        </button>
      </div>
      {open && (
        <div className="nav-mobile">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={`#${l.id}`} onClick={(e)=>{e.preventDefault(); go(l.id);}}>{l.label}</a>
          ))}
          <button className="btn btn-primary" onClick={()=>go('book')}>Book now</button>
        </div>
      )}
    </header>
  );
};

window.Nav = Nav;