// Header.jsx
Object.assign(window, { Header });

function Header() {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const links = [
    { label: "Inicio",        id: "hero"          },
    { label: "Programa",      id: "programa"      },
    { label: "Beneficios",    id: "beneficios"    },
    { label: "Cómo funciona", id: "como-funciona" },
    { label: "Historias",     id: "historias"     },
    { label: "Preguntas",     id: "preguntas"     },
  ];

  const goto = id => {
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const scrollToForm = () => {
    setMenuOpen(false);
    const el = document.getElementById("registro");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
  };

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 100,
      background: "#2d4270",
      borderBottom: "1px solid rgba(255,255,255,0.08)",
    }}>
      <div className="hd-inner" style={{
        maxWidth: 1200, margin: "0 auto", padding: "0 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 72,
      }}>

        {/* Logo */}
        <div
          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
          style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 8, flexShrink: 0, userSelect: "none" }}
        >
          <img
            src="assets/images/logo-header.png"
            alt="España Crece — NextGen EU"
            style={{ height: 36, width: "auto", display: "block" }}
          />
        </div>

        {/* Desktop nav */}
        <nav className="hd-nav-desktop" style={{ display: "flex", gap: 28, alignItems: "center" }}>
          {links.map(l => (
            <a
              key={l.id} href={"#" + l.id}
              onClick={e => { e.preventDefault(); goto(l.id); }}
              style={{
                fontFamily: "Inter, Arial, sans-serif",
                fontSize: 14, fontWeight: 500,
                color: "rgba(255,255,255,0.85)",
                textDecoration: "none", whiteSpace: "nowrap",
                transition: "color 0.15s",
              }}
            >
              {l.label}
            </a>
          ))}
          <button onClick={scrollToForm} style={{
            background: "#cc1515", border: "none", borderRadius: 8,
            color: "#fff", fontFamily: "Inter, Arial, sans-serif",
            fontWeight: 600, fontSize: 14,
            padding: "10px 22px", cursor: "pointer",
            whiteSpace: "nowrap", flexShrink: 0,
          }}>
            Contactar
          </button>
        </nav>

        {/* Hamburger */}
        <button
          className="hd-hamburger-btn"
          onClick={() => setMenuOpen(v => !v)}
          style={{
            display: "none", background: "none", border: "none",
            cursor: "pointer", padding: 6,
            flexDirection: "column", gap: 5, alignItems: "center",
          }}
        >
          <span style={{ display: "block", width: 24, height: 2, background: "rgba(255,255,255,0.85)", borderRadius: 1 }} />
          <span style={{ display: "block", width: 24, height: 2, background: "rgba(255,255,255,0.85)", borderRadius: 1 }} />
          <span style={{ display: "block", width: 24, height: 2, background: "rgba(255,255,255,0.85)", borderRadius: 1 }} />
        </button>
      </div>

      {/* Mobile dropdown */}
      {menuOpen && (
        <div style={{
          background: "#2d4270",
          borderBottom: "1px solid rgba(255,255,255,0.08)",
          padding: "8px 0 16px",
        }}>
          {links.map(l => (
            <a
              key={l.id} href={"#" + l.id}
              onClick={e => { e.preventDefault(); goto(l.id); }}
              style={{
                display: "block", padding: "13px 32px",
                fontFamily: "Inter, Arial, sans-serif",
                fontSize: 15, fontWeight: 500,
                color: "rgba(255,255,255,0.85)",
                textDecoration: "none",
                borderBottom: "1px solid rgba(255,255,255,0.07)",
              }}
            >
              {l.label}
            </a>
          ))}
          <div style={{ padding: "12px 32px 0" }}>
            <button onClick={scrollToForm} style={{
              width: "100%", background: "#cc1515", border: "none",
              borderRadius: 8, color: "#fff",
              fontFamily: "Inter, Arial, sans-serif",
              fontWeight: 600, fontSize: 14,
              padding: "13px 20px", cursor: "pointer",
            }}>
              Contactar
            </button>
          </div>
        </div>
      )}
    </header>
  );
}