// PageHeader — shared top navigation bar for standalone pages.
// Shows logo + back link on the left; key nav links on the right (desktop).
// Mobile: logo + back link only (hamburger optional).

function PageHeader({ backHref = "./index.html", backLabel = "← Início" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    const onResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener("scroll", onScroll);
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
    };
  }, []);

  const navLinks = [
    { label: "Catálogo",  href: "./catalogo.html" },
    { label: "Parcerias", href: "./parceria.html" },
    { label: "Levar",     href: "./levar.html" },
    { label: "Contato",   href: "./contato.html" },
  ];

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      padding: "12px 24px",
      background: scrolled ? "rgba(6,9,20,0.92)" : "rgba(6,9,20,0.60)",
      backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
      borderBottom: `1px solid ${scrolled ? "var(--line)" : "transparent"}`,
      transition: "background 0.35s, border-color 0.35s",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      boxSizing: "border-box",
    }}>
      {/* Left: logo + back */}
      <a href={backHref} style={{
        display: "flex", alignItems: "center", gap: 12, textDecoration: "none",
      }}>
        <img src="./assets/logo-white.svg" alt="Física Além do Papel"
          style={{ width: 26, height: 26, filter: "drop-shadow(0 0 8px rgba(45,111,247,0.5))" }} />
        <span style={{
          fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 500,
          color: "var(--fg-2)", letterSpacing: "0.02em",
        }}>{backLabel}</span>
      </a>

      {/* Right: page links (desktop only) */}
      {!isMobile && (
        <nav style={{ display: "flex", alignItems: "center", gap: 4 }}>
          {navLinks.map(l => (
            <a key={l.label} href={l.href} style={{
              fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 400,
              color: "var(--fg-3)", padding: "7px 14px", borderRadius: "var(--r-sm)",
              textDecoration: "none", transition: "color 0.2s, background 0.2s",
            }}
            onMouseOver={(e) => { e.currentTarget.style.color = "var(--fg-1)"; e.currentTarget.style.background = "rgba(255,255,255,0.05)"; }}
            onMouseOut={(e) => { e.currentTarget.style.color = "var(--fg-3)"; e.currentTarget.style.background = "transparent"; }}
            >{l.label}</a>
          ))}
        </nav>
      )}
    </header>
  );
}

window.PageHeader = PageHeader;