/* Header — sticky, translucent, with live wait pill + Book CTA */
const { useState: useStateH, useEffect: useEffectH } = React;

function Header({ onBook }) {
  const [scrolled, setScrolled] = useStateH(false);
  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const nav = [
    ['Services', '#services'],
    ['How it works', '#how'],
    ['Our team', '#team'],
    ['New patients', '#new-patients'],
    ['FAQ', '#faq'],
    ['Contact', '#locations'],
  ];
  const go = (e, href) => {
    e.preventDefault();
    const el = document.querySelector(href);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 74, behavior: 'smooth' });
  };
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(251,249,244,0.88)' : 'rgba(251,249,244,0.62)',
      backdropFilter: 'blur(14px)',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all var(--dur) var(--ease-out)',
    }}>
      <Container style={{ display: 'flex', alignItems: 'center', gap: 24, height: 74 }}>
        {/* lockup */}
        <a href="#top" onClick={(e) => go(e, '#top')} style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 'none', textDecoration: 'none' }}>
          <img src="assets/logo-mark.png" alt="Tidewell" style={{ height: 38, width: 'auto' }} />
          <div style={{ lineHeight: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, color: 'var(--teal-800)', letterSpacing: '-0.01em' }}>Tidewell</div>
            <div style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--teal-500)', marginTop: 2 }}>Family Health</div>
          </div>
        </a>

        <nav style={{ display: 'flex', gap: 22, marginLeft: 10 }}>
          {nav.map(([n, href]) => (
            <a key={n} href={href} onClick={(e) => go(e, href)} style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink-700)', textDecoration: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}
               onMouseEnter={(e) => (e.target.style.color = 'var(--teal-700)')}
               onMouseLeave={(e) => (e.target.style.color = 'var(--ink-700)')}>{n}</a>
          ))}
        </nav>

        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          <Pill status="go">Open now · ~12 min</Pill>
          <a href="tel:+16045550123" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: 600, color: 'var(--teal-700)', textDecoration: 'none', whiteSpace: 'nowrap' }}>
            <Icon name="phone" size={16} /> (604) 555-0123
          </a>
          <Button size="sm" icon="calendar-check" onClick={onBook}>Book a same-day visit</Button>
        </div>
      </Container>
    </header>
  );
}

window.Header = Header;