function Header() {
  const { useState, useEffect, useRef } = React;
  const [open, setOpen] = useState(false);
  const [hidden, setHidden] = useState(false);
  const lastY = useRef(0);

  // Lake Osceola pattern: lock body scroll while overlay is open
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // Scroll-direction reveal: hide on scroll down past threshold, show on
  // ANY upward scroll. Always visible near the top of the page. RAF-throttled
  // to handle iOS momentum scroll smoothly.
  useEffect(() => {
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      window.requestAnimationFrame(() => {
        const y = window.scrollY;
        const delta = y - lastY.current;
        if (y < 100) {
          setHidden(false);
        } else if (delta > 4) {
          setHidden(true);
        } else if (delta < 0) {
          setHidden(false);
        }
        lastY.current = y;
        ticking = false;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const path = (typeof window !== 'undefined' && window.location && window.location.pathname) || "";
  const depth = (path.match(/\/services\//) ? 2 : 0);
  const home = depth === 0 ? "" : "../".repeat(depth);
  const navLinks = [
    {l: "Services",      href: home + "index.html#services"},
    {l: "Portfolio",     href: home + "index.html#work"},
    {l: "Service areas", href: home + "index.html#areas"},
    {l: "About",         href: home + "index.html#about"},
    {l: "Reviews",       href: home + "index.html#reviews"},
  ];

  return (
    <>
      {/* Fixed-position spacer reserves header space in document flow.
          Header itself is position:fixed so its hide/show animation is
          rock-solid on mobile browsers (sticky + transform is flaky on
          iOS due to momentum scroll / address bar quirks). */}
      <div className="header-spacer" aria-hidden="true"></div>

      <header style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 40,
        background: "rgba(255, 255, 255, 0.94)",
        backdropFilter: "blur(12px)",
        WebkitBackdropFilter: "blur(12px)",
        borderBottom: "1px solid var(--n-200)",
        transform: hidden && !open ? "translateY(-100%)" : "translateY(0)",
        transition: "transform 280ms cubic-bezier(0.22, 1, 0.36, 1)",
        willChange: "transform",
      }}>
        <div className="container container--wide" style={{height: 80, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16}}>
          <a href={home + "index.html"} style={{display: "flex", alignItems: "center", textDecoration: "none"}}>
            <Wordmark size={44}/>
          </a>
          <nav className="nav-desktop">
            <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 className="nav-actions">
            <a className="nav-phone" href="tel:9142993593" 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-299-3593
            </a>
            <a href={home + "index.html#quote"} className="btn btn-primary" style={{textDecoration: "none", whiteSpace: "nowrap"}}>
              <span className="btn-cta-text-full">Get free estimate</span>
              <span className="btn-cta-text-short">Estimate</span>
            </a>
            <button className="menu-btn" aria-label="Open menu" aria-expanded={open} onClick={() => setOpen(true)}>
              <Icon name="menu" size={22}/>
            </button>
          </div>
        </div>
      </header>

      {/* Fullscreen mobile overlay (Lake Osceola pattern) */}
      {open && (
        <div
          onClick={() => setOpen(false)}
          style={{
            position: "fixed", inset: 0, zIndex: 100,
            background: "rgba(11, 14, 18, 0.97)",
            backdropFilter: "blur(20px)",
            display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center",
            padding: "32px 24px",
          }}>
          <button
            onClick={() => setOpen(false)}
            aria-label="Close menu"
            style={{
              position: "absolute", top: 20, right: 20,
              width: 44, height: 44,
              background: "transparent", border: "none",
              color: "var(--white)", cursor: "pointer",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
            }}>
            <Icon name="x" size={24}/>
          </button>

          <nav style={{display: "flex", flexDirection: "column", alignItems: "center", gap: 4}}>
            {navLinks.map(n => (
              <a
                key={n.l}
                href={n.href}
                onClick={() => setOpen(false)}
                style={{
                  color: "rgba(255, 255, 255, 0.92)",
                  textDecoration: "none",
                  fontSize: 22, fontWeight: 700,
                  fontFamily: "var(--font-display)",
                  letterSpacing: "0.04em", textTransform: "uppercase",
                  padding: "14px 24px",
                }}>
                {n.l}
              </a>
            ))}
          </nav>

          <div style={{display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginTop: 36}}>
            <a
              href="tel:9142993593"
              onClick={() => setOpen(false)}
              style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                color: "rgba(255, 255, 255, 0.78)", textDecoration: "none",
                fontSize: 15, fontWeight: 600,
              }}>
              <Icon name="phone" size={16} stroke={1.75} color="#9FC7AE"/>
              914-299-3593
            </a>
            <a
              href={home + "index.html#quote"}
              onClick={() => setOpen(false)}
              className="btn btn-primary"
              style={{textDecoration: "none", padding: "14px 28px"}}>
              Get free estimate
            </a>
          </div>
        </div>
      )}
    </>
  );
}
window.Header = Header;