function Header({ onConsult, onEstimate }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  // Treat the page as home only when the actual home sections exist on the current document.
  const isHome = !!document.getElementById('services') && !!document.getElementById('work');

  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 60);
    h();
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  // Smart nav: scroll on home, redirect on other pages
  const go = (hash) => (e) => {
    e.preventDefault();
    setOpen(false);
    if (isHome) {
      const el = document.querySelector(hash);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
      window.location.href = 'index.html' + hash;
    }
  };

  // Logo: always goes home
  const goHome = (e) => {
    e.preventDefault();
    setOpen(false);
    if (isHome) {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      window.location.href = 'index.html';
    }
  };

  return (
    <>
      <header className={`hdr ${scrolled ? 'scrolled' : ''}`}>
        <div className="hdr-inner">
          <a href="index.html" onClick={goHome} aria-label="Worldliness Construction home">
            <img src="assets/logo-worldliness.png" alt="Worldliness Construction" className="hdr-logo" />
          </a>
          <nav className="hdr-nav">
            <a href="index.html#services"    onClick={go('#services')}>Services</a>
            <a href="index.html#work"        onClick={go('#work')}>Our Work</a>
            <a href="index.html#process"     onClick={go('#process')}>Process</a>
            <a href="index.html#testimonials" onClick={go('#testimonials')}>Reviews</a>
          </nav>
          <button className="btn btn-primary hdr-cta" onClick={onEstimate || onConsult}>
            Get Estimate
            <Icon name="arrow" size={14} />
          </button>
          <button className="burger" onClick={() => setOpen(v => !v)} aria-label="Menu">
            <Icon name={open ? 'close' : 'menu'} size={24} />
          </button>
        </div>
      </header>
      <div className={`mobile-drawer ${open ? 'open' : ''}`}>
        <div className="mobile-drawer-inner">
          <a href="index.html#services"     onClick={go('#services')}>Services</a>
          <a href="index.html#work"         onClick={go('#work')}>Our Work</a>
          <a href="index.html#process"      onClick={go('#process')}>Process</a>
          <a href="index.html#testimonials" onClick={go('#testimonials')}>Reviews</a>
          <button className="btn btn-primary" onClick={() => { setOpen(false); (onEstimate || onConsult)(); }} style={{justifyContent:'center'}}>
            Get Estimate <Icon name="arrow" size={14} />
          </button>
          <a href={window.CONTACT.phoneHref} style={{display:'flex', alignItems:'center', gap:10, color:'var(--bronze)', fontWeight:600, border:'none'}}>
            <Icon name="phone" size={16} /> {window.CONTACT.phone}
          </a>
        </div>
      </div>
    </>
  );
}
window.Header = Header;