// Header.jsx — sticky top bar
const Header = ({ solid = false } = {}) => {
  const [scrolled, setScrolled] = React.useState(solid);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    if (solid) { setScrolled(true); return; }
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [solid]);

  const headerStyle = {
    position: "fixed",
    top: 0, left: 0, right: 0,
    zIndex: 100,
    height: 76,
    display: "grid",
    gridTemplateColumns: "1fr auto 1fr",
    alignItems: "center",
    padding: "0 56px",
    background: scrolled ? "rgba(237, 232, 216, 0.94)" : "transparent",
    backdropFilter: scrolled ? "saturate(140%) blur(14px)" : "none",
    WebkitBackdropFilter: scrolled ? "saturate(140%) blur(14px)" : "none",
    borderBottom: scrolled ? "1px solid rgba(0,0,0,0.08)" : "1px solid transparent",
    color: scrolled ? "#0A0A0A" : "#fff",
    transition: "background 240ms ease-out, color 240ms ease-out, border-color 240ms ease-out",
    fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
  };

  const linkStyle = {
    color: "inherit", textDecoration: "none",
    fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase",
    position: "relative", padding: "4px 0",
  };

  return (
    <header style={headerStyle}>
      <a href="index.html#top" style={{ color: "inherit", textDecoration: "none", display: "flex", alignItems: "center" }}>
        <img
          src={scrolled ? "assets/logo-real-black.png" : "assets/logo-real-white.png"}
          alt="agence JMD"
          style={{ height: 36, width: "auto", display: "block", transition: "opacity 200ms ease-out" }}
        />
      </a>
      <nav style={{ display: "flex", gap: 40 }}>
        <a href="index.html#approche" style={linkStyle}>Approche</a>
        <a href="index.html#travail"  style={linkStyle}>Travail</a>
        <a href="index.html#methode"  style={linkStyle}>Méthode</a>
        <a href="index.html#journal"  style={linkStyle}>Journal</a>
      </nav>
      <div style={{ justifySelf: "end" }}>
        <a
          href="index.html#contact"
          style={{
            fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase",
            fontWeight: 700, color: "inherit", textDecoration: "none",
            borderBottom: "1px solid currentColor", paddingBottom: 5,
          }}
        >
          Devenez culturel <span style={{ marginLeft: 6 }}>→</span>
        </a>
      </div>
    </header>
  );
};

window.Header = Header;