/* 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 = ['The Day', 'What\u2019s Included', 'Investment', '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.6)',
      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((label, i) => {
          const id = ['day', 'included', 'investment', 'faq'][i];
          return (
            <a key={id} href={`#${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)',
            }}>{label}</a>
          );
        })}
      </nav>
      <div style={{ justifySelf: 'end' }}>
        <Pill as="a" href="#tour" style={{ padding: '12px 24px', fontSize: 11 }}>
          Book a tour
        </Pill>
      </div>
    </header>
  );
}

window.SiteHeader = SiteHeader;