// Nav + WhatsApp FAB + mobile drawer

const NAV_LINKS = [
  { href: '#collections', label: 'Collections' },
  { href: '#diamonds', label: 'Diamonds' },
  { href: '#bespoke', label: 'Bespoke' },
  { href: '#boutiques', label: 'Boutiques' },
  { href: '#heritage', label: 'Heritage' },
  { href: '#testimonials', label: 'Testimonials' },
];

const Nav = ({ onBook }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <React.Fragment>
      <nav className={`mm-nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="mm-nav-inner">
          <div className="mm-nav-left">
            <button className="mm-nav-hamburger" onClick={() => setOpen(!open)} aria-label="Menu">
              <Icon name={open ? 'x' : 'menu'} size={20} />
            </button>
            <Btn variant={scrolled ? 'ghost' : 'ghost-on-dark'} small href="https://wa.me/971554758003">
              <Icon name="whatsapp" size={14} /> WhatsApp
            </Btn>
          </div>
          <Wordmark small={scrolled} />
          <div className="mm-nav-links" role="navigation">
            {NAV_LINKS.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
          </div>
          <div className="mm-nav-right" aria-hidden="true"></div>
        </div>
      </nav>
      {open && (
        <div className="mm-mobile-drawer" style={{
          position: 'fixed', inset: '64px 0 0 0', zIndex: 49,
          background: 'var(--ivory)', padding: 32, overflow: 'auto'
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {NAV_LINKS.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)} style={{
                fontFamily: 'var(--display)', fontSize: 36,
                padding: '20px 0', borderBottom: '1px solid var(--line)',
                color: 'var(--ink)'
              }}>{l.label}</a>
            ))}
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <Btn variant="primary" onClick={() => { setOpen(false); onBook(); }}>Book a Consultation</Btn>
              <Btn variant="ghost" href="https://wa.me/971554758003"><Icon name="whatsapp" size={14} /> WhatsApp Us</Btn>
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
};

const WhatsAppFab = () => (
  <a className="mm-fab" href="https://wa.me/971554758003" aria-label="WhatsApp">
    <span className="mm-fab-label">Chat on WhatsApp</span>
    <Icon name="whatsapp" size={24} />
  </a>
);

Object.assign(window, { Nav, WhatsAppFab });