/* Danex Roofing — site header. Sticky, white, with phone + quote CTA. */
function Header({ onQuote }) {
  const { Logo, Button } = DS;
  const [scrolled, setScrolled] = 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 > 12);
    };
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  const links = ['Services', 'Why Danex', 'Service Areas', 'Reviews'];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(251,249,245,0.92)' : 'var(--surface-raised)',
      backdropFilter: scrolled ? 'saturate(140%) blur(8px)' : 'none',
      borderBottom: '1px solid var(--border-subtle)',
      boxShadow: scrolled ? 'var(--shadow-sm)' : 'none',
      transition: 'box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)',
    }}>
      <div className="dx-container" style={{
        height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="#top" style={{ display: 'inline-flex' }}><Logo size={38} /></a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 30 }} className="dx-nav">
          {links.map((l) => (
            <a key={l} href={'#' + l.toLowerCase().replace(/\s+/g, '-')} style={{
              fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14.5,
              color: 'var(--text-default)', letterSpacing: '0.01em',
              transition: 'color var(--dur-fast) var(--ease-out)',
            }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent-text)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-default)'}
            >{l}</a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <a href="tel:6046908427" style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="dx-phone">
            <span style={{
              width: 36, height: 36, borderRadius: '50%', background: 'var(--accent-soft)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)',
            }}><i data-lucide="phone" style={{ width: 17, height: 17 }}></i></span>
            <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
              <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600, letterSpacing: '0.04em' }}>CALL DANNY</span>
              <span style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-strong)' }}>604-690-8427</span>
            </span>
          </a>
          <Button variant="primary" onClick={onQuote}>Free Quote</Button>
        </div>
      </div>
    </header>
  );
}

window.Header = Header;