/* The Snowberry website — Header / nav bar (desktop links + mobile menu) */
function SiteHeader({ onNav, onTour }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector('[data-scroll-root]') || window;
    const onScroll = () => {
      const y = el === window ? window.scrollY : el.scrollTop;
      setScrolled(y > 24);
    };
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);
  const { Button } = window.TheSnowberryDesignSystem_ed783b;
  const links = [['care', 'Our Care'], ['tour', '3D Tour'], ['home', 'The Home'], ['activities', 'Daily Life'], ['story', 'Our Story'], ['visit', 'Visit']];
  const go = (id) => (e) => { e.preventDefault(); setOpen(false); onNav && onNav(id); };
  const solid = scrolled || open;
  const linkStyle = { fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500, color: 'var(--ink-700)', textDecoration: 'none', letterSpacing: '0.02em' };
  const mobLinkStyle = { fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 500, color: 'var(--ink-900)', textDecoration: 'none', padding: '14px 2px', borderBottom: '1px solid var(--hairline)' };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: solid ? 'rgba(253,251,248,0.96)' : 'transparent',
      backdropFilter: solid ? 'saturate(140%) blur(8px)' : 'none',
      borderBottom: solid ? '1px solid var(--hairline)' : '1px solid transparent',
      transition: 'background 240ms ease, border-color 240ms ease',
    }}>
      <div className="sb-header-pad" style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto',
        padding: '16px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="#top" onClick={go('top')} style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <img src="assets/logos/sprig-deep.png" alt="" style={{ height: 34 }} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 22, color: 'var(--green-700)', letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>
            The Snowberry
          </span>
        </a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <span className="sb-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
            {links.map(([id, label]) => (
              <a key={id} href={'#' + id} onClick={go(id)} style={linkStyle}
                 onMouseEnter={(e)=>e.currentTarget.style.color='var(--green-600)'}
                 onMouseLeave={(e)=>e.currentTarget.style.color='var(--ink-700)'}>
                {label}
              </a>
            ))}
            <a href="../../index.html#faq" style={linkStyle}
               onMouseEnter={(e)=>e.currentTarget.style.color='var(--green-600)'}
               onMouseLeave={(e)=>e.currentTarget.style.color='var(--ink-700)'}>
              FAQ
            </a>
          </span>
          <span className="sb-nav-cta"><Button variant="primary" size="sm" onClick={()=>{setOpen(false);onTour&&onTour();}}>Schedule a tour</Button></span>
          <button type="button" className="sb-burger" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open} onClick={()=>setOpen(o=>!o)}>
            {open ? (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="5" y1="5" x2="19" y2="19"></line><line x1="19" y1="5" x2="5" y2="19"></line></svg>
            ) : (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="4" y1="7" x2="20" y2="7"></line><line x1="4" y1="12" x2="20" y2="12"></line><line x1="4" y1="17" x2="20" y2="17"></line></svg>
            )}
          </button>
        </nav>
      </div>
      {open && (
        <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--cream)', borderBottom: '1px solid var(--hairline)', boxShadow: 'var(--shadow-md)', padding: '6px 20px 22px', display: 'flex', flexDirection: 'column' }}>
          {links.map(([id, label]) => (
            <a key={id} href={'#' + id} onClick={go(id)} style={mobLinkStyle}>{label}</a>
          ))}
          <a href="../../index.html#faq" style={mobLinkStyle}>FAQ</a>
          <div style={{ marginTop: 18 }}><Button variant="primary" size="md" fullWidth onClick={()=>{setOpen(false);onTour&&onTour();}}>Schedule a quiet tour</Button></div>
        </div>
      )}
    </header>
  );
}
window.SiteHeader = SiteHeader;