function Header() {
  // Resolve home base relative to current page depth
  const path = (typeof window !== 'undefined' && window.location && window.location.pathname) || "";
  const depth = (path.match(/\/services\//) ? 2 : 0);
  const home = depth === 0 ? "" : "../".repeat(depth);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: "rgba(255, 255, 255, 0.92)",
      backdropFilter: "blur(12px)",
      borderBottom: "1px solid var(--n-200)",
      height: 84,
    }}>
      <div style={{maxWidth: 1440, margin: "0 auto", padding: "0 32px", height: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24}}>
        <a href={home + "index.html"} style={{display: "flex", alignItems: "center", textDecoration: "none"}}>
          <Wordmark size={40}/>
        </a>
        <nav style={{display: "flex", alignItems: "center", gap: 28, fontSize: 14, fontWeight: 600}}>
          <a href={home + "index.html#services"} style={{display: "inline-flex", alignItems: "center", gap: 4, textDecoration: "none", color: "var(--ink-900)"}}>Services <Icon name="chevronDown" size={14}/></a>
          <a href={home + "index.html#work"} style={{textDecoration: "none", color: "var(--ink-900)"}}>Portfolio</a>
          <a href={home + "index.html#areas"} style={{textDecoration: "none", color: "var(--ink-900)", whiteSpace: "nowrap"}}>Service areas</a>
          <a href={home + "index.html#about"} style={{textDecoration: "none", color: "var(--ink-900)"}}>About</a>
          <a href={home + "index.html#reviews"} style={{textDecoration: "none", color: "var(--ink-900)"}}>Reviews</a>
        </nav>
        <div style={{display: "flex", alignItems: "center", gap: 14}}>
          <a href="tel:9145550199" style={{display: "inline-flex", alignItems: "center", gap: 8, textDecoration: "none", color: "var(--ink-900)", fontWeight: 600, fontSize: 14, whiteSpace: "nowrap"}}>
            <Icon name="phone" size={16} stroke={1.75}/>914-555-0199
          </a>
          <a href={home + "index.html#quote"} className="btn btn-primary" style={{textDecoration: "none", whiteSpace: "nowrap"}}>Get free estimate</a>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;