/* Header.jsx — sticky nav + mobile menu */
const NAV = [
  { id: "servicios", label: "Servicios" },
  { id: "obras", label: "Obras" },
  { id: "nosotros", label: "Nosotros" },
  { id: "maquinaria", label: "Maquinaria" },
  { id: "contacto", label: "Contacto" },
];

function Header({ name }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);

  const go = (e, id) => { e.preventDefault(); setOpen(false); scrollToId(id); };

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 200,
      transition: "background .3s ease, box-shadow .3s ease, padding .3s ease",
      background: scrolled ? "color-mix(in srgb, var(--paper) 92%, transparent)" : "transparent",
      backdropFilter: scrolled ? "blur(10px)" : "none",
      boxShadow: scrolled ? "0 1px 0 var(--line)" : "none",
    }}>
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: scrolled ? 66 : 84, transition: "height .3s ease",
      }}>
        <Logo name={name} onDark={!scrolled} />
        <nav style={{ display: "flex", alignItems: "center", gap: 4 }} className="desk-nav">
          {NAV.map((n) => (
            <a key={n.id} href={`#${n.id}`} onClick={(e) => go(e, n.id)} style={{
              padding: "8px 14px", fontWeight: 600, fontSize: ".94rem",
              color: scrolled ? "var(--ink)" : "var(--on-dark)",
              borderRadius: 4, transition: "color .15s, opacity .15s",
            }} onMouseEnter={(e) => e.currentTarget.style.opacity = ".62"}
              onMouseLeave={(e) => e.currentTarget.style.opacity = "1"}>{n.label}</a>
          ))}
          <a href="#contacto" onClick={(e) => go(e, "contacto")} className="btn btn-accent" style={{ marginLeft: 12 }}>
            Pedir presupuesto
          </a>
        </nav>
        <button className="burger" aria-label="Menú" onClick={() => setOpen(true)} style={{
          display: "none", flexDirection: "column", gap: 5, padding: 8,
        }}>
          <span style={{ width: 26, height: 2.5, background: scrolled ? "var(--ink)" : "var(--on-dark)", display: "block" }} />
          <span style={{ width: 26, height: 2.5, background: scrolled ? "var(--ink)" : "var(--on-dark)", display: "block" }} />
          <span style={{ width: 18, height: 2.5, background: scrolled ? "var(--ink)" : "var(--on-dark)", display: "block" }} />
        </button>
      </div>

      {/* mobile drawer */}
      <div style={{
        position: "fixed", inset: 0, zIndex: 300, pointerEvents: open ? "auto" : "none",
      }}>
        <div onClick={() => setOpen(false)} style={{
          position: "absolute", inset: 0, background: "rgba(0,0,0,.5)",
          opacity: open ? 1 : 0, transition: "opacity .3s ease",
        }} />
        <div style={{
          position: "absolute", top: 0, right: 0, bottom: 0, width: "min(82vw,360px)",
          background: "var(--dark)", color: "var(--on-dark)", padding: "26px 26px 40px",
          transform: open ? "translateX(0)" : "translateX(100%)", transition: "transform .35s cubic-bezier(.4,0,.1,1)",
          display: "flex", flexDirection: "column",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 36 }}>
            <Logo name={name} onDark />
            <button onClick={() => setOpen(false)} aria-label="Cerrar" style={{ color: "var(--on-dark)", fontSize: 30, lineHeight: 1 }}>×</button>
          </div>
          <nav style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {NAV.map((n, i) => (
              <a key={n.id} href={`#${n.id}`} onClick={(e) => go(e, n.id)} className="display" style={{
                fontSize: "1.6rem", padding: "12px 0", color: "var(--on-dark)",
                borderBottom: "1px solid var(--line-dark)",
              }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: ".7rem", color: "var(--accent)", marginRight: 12, fontWeight: 500 }}>0{i + 1}</span>
                {n.label}
              </a>
            ))}
          </nav>
          <a href="#contacto" onClick={(e) => go(e, "contacto")} className="btn btn-accent" style={{ marginTop: 30 }}>
            Pedir presupuesto <Arrow />
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px){
          .desk-nav{display:none!important}
          .burger{display:flex!important}
        }
      `}</style>
    </header>
  );
}
Object.assign(window, { Header });