/* global React, Pill */
const { useEffect: useHeaderEffect, useState: useHeaderState } = React;

function SiteHeader() {
  const [scrolled, setScrolled] = useHeaderState(false);
  useHeaderEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { id: 'afternoon', label: 'The Afternoon' },
    { id: 'included', label: "What\u2019s Included" },
    { id: 'investment', label: 'Investment' },
    { id: 'faq', label: 'FAQ' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 60,
      display: 'grid', gridTemplateColumns: '1fr auto 1fr',
      alignItems: 'center', gap: 32, padding: '12px 48px',
      background: scrolled ? 'rgba(250, 246, 238, 0.94)' : 'rgba(250, 246, 238, 0.55)',
      backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)',
      borderBottom: scrolled ? '1px solid var(--hg-line-soft)' : '1px solid transparent',
      transition: 'background .25s, border-color .25s',
    }}>
      <a href="#top" style={{ justifySelf: 'start', borderBottom: 'none' }}>
        <img src="assets/logo.png" alt="Himaya Garden" style={{ height: 56, width: 'auto', display: 'block' }} />
      </a>
      <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
        {items.map((it) => (
          <a key={it.id} href={`#${it.id}`} style={{
            fontFamily: 'var(--hg-font-sans)', fontSize: 12, fontWeight: 500,
            textTransform: 'uppercase', letterSpacing: '0.2em',
            padding: '6px 0', borderBottom: '1px solid transparent',
            color: 'var(--hg-fg)',
          }}>{it.label}</a>
        ))}
      </nav>
      <div style={{ justifySelf: 'end' }}>
        <Pill as="a" href="#tour" style={{ padding: '12px 24px', fontSize: 11 }}>
          Book a tea tour
        </Pill>
      </div>
    </header>
  );
}

window.SiteHeader = SiteHeader;