// Header — sticky nav with logo, links, and click-to-call CTA
const { Logo, Button } = window.ThaiVillageCuisineDesignSystem_bfe0b3;

function Header() {
  const { NAP } = window;
  const { PhoneIcon, MenuIcon, XIcon } = window;
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const links = [['Menu', '#menu'], ['About', '#about'], ['Hours', '#hours']];

  const go = (e, href) => { e.preventDefault(); setOpen(false);
    document.querySelector(href)?.scrollIntoView({ behavior: 'smooth', block: 'start' }); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(251,243,228,0.92)' : 'rgba(251,243,228,0.7)',
      backdropFilter: 'saturate(140%) blur(12px)',
      WebkitBackdropFilter: 'saturate(140%) blur(12px)',
      borderBottom: scrolled ? '1px solid var(--cream-300)' : '1px solid transparent',
      boxShadow: scrolled ? 'var(--shadow-sm)' : 'none',
      transition: 'background var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base)',
    }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto',
        padding: '0 var(--gutter)', height: scrolled ? 70 : 84,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        transition: 'height var(--dur-base) var(--ease-out)',
      }}>
        <a href="#top" onClick={(e) => go(e, '#top')} aria-label="Thai Village Cuisine — home" style={{ display: 'inline-flex' }}>
          <Logo size={scrolled ? 38 : 44} markSrc="images/logo-mark.png" />
        </a>

        <nav className="tvc-desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 'clamp(18px, 2vw, 34px)' }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} onClick={(e) => go(e, href)} style={{
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: '0.95rem',
              color: 'var(--char-900)', letterSpacing: '0.01em', textDecoration: 'none',
            }}>{label}</a>
          ))}
          <Button variant="call" size="sm" href={NAP.tel} icon={<PhoneIcon />}>
            Call to Order: {NAP.phone}
          </Button>
        </nav>

        <button className="tvc-mobile-toggle" aria-label="Toggle menu" onClick={() => setOpen(o => !o)} style={{
          display: 'none', background: 'var(--char-900)', color: 'var(--cream-50)',
          border: 'none', borderRadius: 'var(--radius-sm)', width: 46, height: 46,
          alignItems: 'center', justifyContent: 'center', fontSize: 22, cursor: 'pointer',
        }}>{open ? <XIcon /> : <MenuIcon />}</button>
      </div>

      {/* Mobile drawer */}
      <div style={{
        overflow: 'hidden', maxHeight: open ? 320 : 0,
        transition: 'max-height var(--dur-base) var(--ease-out)',
        background: 'var(--cream-50)', borderBottom: open ? '1px solid var(--cream-300)' : 'none',
      }}>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '12px var(--gutter) 20px' }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} onClick={(e) => go(e, href)} style={{
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: '1.1rem',
              color: 'var(--char-900)', padding: '12px 4px', borderBottom: '1px solid var(--cream-200)',
            }}>{label}</a>
          ))}
          <div style={{ marginTop: 12 }}>
            <Button variant="call" size="md" fullWidth href={NAP.tel} icon={<PhoneIcon />}>
              Call to Order: {NAP.phone}
            </Button>
          </div>
        </nav>
      </div>
    </header>
  );
}
window.Header = Header;