/* global React */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function useViewport() {
  const [w, setW] = useStateH(typeof window !== "undefined" ? window.innerWidth : 1440);
  useEffectH(() => {
    const on = () => setW(window.innerWidth);
    window.addEventListener("resize", on);
    return () => window.removeEventListener("resize", on);
  }, []);
  return w;
}
window.useViewport = useViewport;

function Header({ screen, setScreen }) {
  const [scrolled, setScrolled] = useStateH(false);
  const [menuOpen, setMenuOpen] = useStateH(false);
  const vw = useViewport();
  const isMobile = vw < 860;

  // On the homepage, the header floats over the full-bleed hero until the user scrolls.
  const overHero = screen === "home" && !scrolled && !menuOpen;

  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffectH(() => { if (!isMobile) setMenuOpen(false); }, [isMobile]);

  const fg = overHero ? "#f5f3ef" : "#3a3833";
  const fgActive = overHero ? "#f5f3ef" : "#1a1917";

  const linkStyle = (active) => ({
    fontSize: 12,
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    color: active ? fgActive : fg,
    fontWeight: 500,
    cursor: "pointer",
    transition: "opacity 220ms cubic-bezier(0.2,0.6,0.2,1), color 220ms ease",
    paddingBottom: 2,
    borderBottom: active
      ? `0.5px solid ${fgActive}`
      : "0.5px solid transparent",
  });

  const mobileLinkStyle = (active) => ({
    display: "block",
    padding: "18px 0",
    fontSize: 22,
    fontWeight: 500,
    letterSpacing: "-0.01em",
    color: active ? "#1a1917" : "#3a3833",
    borderBottom: "0.5px solid rgba(26,25,23,0.14)",
    cursor: "pointer",
  });

  const go = (s) => { setMenuOpen(false); setScreen(s); };

  return (
    <>
      <header style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        background: overHero
          ? "transparent"
          : (scrolled || menuOpen ? "rgba(245,243,239,0.94)" : "rgba(245,243,239,1)"),
        backdropFilter: overHero ? "none" : (scrolled || menuOpen ? "blur(12px)" : "none"),
        WebkitBackdropFilter: overHero ? "none" : (scrolled || menuOpen ? "blur(12px)" : "none"),
        borderBottom: overHero ? "0.5px solid transparent" : "0.5px solid rgba(26,25,23,0.18)",
        transition: "background 320ms cubic-bezier(0.2,0.6,0.2,1), border-color 320ms ease",
      }}>
        <div style={{
          maxWidth: 1440, margin: "0 auto",
          padding: isMobile ? "16px 20px" : "18px max(24px, 3vw)",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 16,
        }}>
          <a onClick={() => go("home")} style={{ cursor: "pointer", display: "inline-flex", alignItems: "center" }}>
            <img
              src={overHero ? "assets/logos/derlot-wordmark-white.svg" : "assets/logos/derlot-wordmark-black.svg"}
              style={{ height: isMobile ? 22 : 26, display: "block", transition: "opacity 220ms" }}
              alt="Derlot" />
          </a>

          {!isMobile && (
            <>
              <nav style={{ display: "flex", gap: 26, alignItems: "center" }}>
                <a onClick={() => go("collections")} style={linkStyle(screen === "collections" || screen === "gateway" || screen === "trio")}>Collections</a>
                <a onClick={() => go("projects")} style={linkStyle(screen === "projects")}>Projects</a>
                <a onClick={() => go("moodboard")} style={linkStyle(screen === "moodboard")}>Moodboard</a>
                <a href="configurator.html" style={linkStyle(false)}>Configurator</a>
                <a onClick={() => go("downloads")} style={linkStyle(screen === "downloads")}>Downloads</a>
                <a onClick={() => go("about")} style={linkStyle(screen === "about")}>About</a>
              </nav>
              <a onClick={() => go("distributors")} style={{ ...linkStyle(false), fontWeight: 500, cursor: "pointer" }}>Contact us</a>
            </>
          )}

          {isMobile && (
            <button
              onClick={() => setMenuOpen(m => !m)}
              aria-label="Menu"
              style={{
                background: "transparent", border: "none", padding: 6, cursor: "pointer",
                display: "inline-flex", flexDirection: "column", gap: 5, fontFamily: "inherit",
              }}
            >
              <span style={{ display: "block", width: 22, height: 1, background: overHero ? "#f5f3ef" : "#1a1917", transform: menuOpen ? "translateY(3px) rotate(45deg)" : "none", transition: "transform 220ms, background 220ms" }} />
              <span style={{ display: "block", width: 22, height: 1, background: overHero ? "#f5f3ef" : "#1a1917", opacity: menuOpen ? 0 : 1, transition: "opacity 150ms, background 220ms" }} />
              <span style={{ display: "block", width: 22, height: 1, background: overHero ? "#f5f3ef" : "#1a1917", transform: menuOpen ? "translateY(-3px) rotate(-45deg)" : "none", transition: "transform 220ms, background 220ms" }} />
            </button>
          )}
        </div>
      </header>

      {/* Mobile drawer */}
      {isMobile && menuOpen && (
        <div style={{
          position: "fixed", top: 54, left: 0, right: 0, bottom: 0, zIndex: 49,
          background: "rgba(245,243,239,0.98)",
          backdropFilter: "blur(12px)",
          WebkitBackdropFilter: "blur(12px)",
          padding: "24px 20px 40px",
          overflowY: "auto",
        }}>
          <nav>
            <a onClick={() => go("collections")} style={mobileLinkStyle(screen === "collections" || screen === "gateway" || screen === "trio")}>Collections</a>
            <a onClick={() => go("projects")} style={mobileLinkStyle(screen === "projects")}>Projects</a>
            <a onClick={() => go("moodboard")} style={mobileLinkStyle(screen === "moodboard")}>Moodboard</a>
            <a href="configurator.html" style={mobileLinkStyle(false)}>Configurator</a>
            <a onClick={() => go("downloads")} style={mobileLinkStyle(screen === "downloads")}>Downloads</a>
            <a onClick={() => go("about")} style={mobileLinkStyle(screen === "about")}>About</a>
          </nav>
          <a onClick={() => go("distributors")} style={{
            display: "inline-flex", marginTop: 32,
            fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
            color: "#1a1917", fontWeight: 500,
            borderBottom: "0.5px solid #1a1917", paddingBottom: 3,
          }}>Contact us →</a>
        </div>
      )}
    </>
  );
}

window.Header = Header;