/* ─── NAVBAR ─── */
const { C: navC, FONTS: navFONTS } = window.LT;
const { useScrolled: navUseScrolled, useViewport: navUseViewport } = window.LTHooks;

function Navbar() {
  const scrolled = navUseScrolled(80);
  const { isMobile } = navUseViewport();
  const [open, setOpen] = React.useState(false);

  const NAV = [
    { label: "Distancias", href: "#distancias" },
    { label: "Recorrido",  href: "#recorrido" },
    { label: "Comunidad",  href: "#comunidad" },
    { label: "Sponsors",   href: "#sponsors" },
    { label: "Q&A",        href: "#faq" },
  ];

  const linkStyle = {
    textDecoration: "none",
    color: navC.textSoft,
    fontSize: 14,
    fontWeight: 500,
    letterSpacing: "0.04em",
    padding: "8px 4px",
    borderRadius: 4,
    transition: "color 0.2s",
  };

  return (
    <React.Fragment>
      {/* Skip link for keyboard users — AAA */}
      <a href="#main"
        style={{
          position: "absolute", left: 12, top: 12, zIndex: 2000,
          background: navC.sunset, color: navC.night, padding: "10px 16px",
          borderRadius: 8, fontFamily: navFONTS.body, fontWeight: 700,
          textDecoration: "none", transform: "translateY(-200%)",
          transition: "transform 0.2s",
        }}
        onFocus={e => e.target.style.transform = "translateY(0)"}
        onBlur={e => e.target.style.transform = "translateY(-200%)"}
      >Saltar al contenido</a>

      <nav
        aria-label="Navegación principal"
        style={{
          position: "fixed", top: 0, left: 0, right: 0, zIndex: 1000,
          padding: scrolled ? "12px 20px" : "20px 20px",
          background: scrolled ? "rgba(11,15,20,0.92)" : "transparent",
          backdropFilter: scrolled ? "blur(18px) saturate(140%)" : "none",
          WebkitBackdropFilter: scrolled ? "blur(18px) saturate(140%)" : "none",
          borderBottom: scrolled ? `1px solid ${navC.border}` : "1px solid transparent",
          transition: "all 0.35s ease",
        }}
      >
        <div style={{
          maxWidth: 1180, margin: "0 auto",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 16,
        }}>
          <a href="#hero" aria-label="Ir al inicio" style={{
            textDecoration: "none", display: "flex", alignItems: "center", gap: 10,
          }}>
            <span aria-hidden="true" style={{
              width: 32, height: 32, borderRadius: 8,
              background: `linear-gradient(135deg, ${navC.sunset}, ${navC.ember})`,
              display: "grid", placeItems: "center",
              fontFamily: navFONTS.display, fontSize: 18, fontWeight: 700,
              color: navC.night, boxShadow: `0 4px 16px ${navC.sunsetGlow}`,
            }}>L</span>
            <span style={{
              fontFamily: navFONTS.display, fontSize: 20, fontWeight: 700,
              color: navC.text, letterSpacing: "0.06em", textTransform: "uppercase",
            }}>
              Love<span style={{ color: navC.sunset, marginLeft: 2 }}>Trail</span>
            </span>
          </a>

          {!isMobile && (
            <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
              {NAV.map(n => (
                <a key={n.href} href={n.href}
                  style={linkStyle}
                  onMouseEnter={e => e.target.style.color = navC.sunsetSoft}
                  onMouseLeave={e => e.target.style.color = navC.textSoft}
                  onFocus={e => e.target.style.color = navC.sunsetSoft}
                  onBlur={e => e.target.style.color = navC.textSoft}
                >{n.label}</a>
              ))}
              <a href="#inscripcion" className="cta-btn" style={{ padding: "10px 22px", fontSize: 13 }}>
                Inscribite
              </a>
            </div>
          )}

          {isMobile && (
            <button
              aria-label={open ? "Cerrar menú" : "Abrir menú"}
              aria-expanded={open}
              onClick={() => setOpen(o => !o)}
              style={{
                background: "rgba(255,255,255,0.06)",
                border: `1px solid ${navC.border}`,
                color: navC.text,
                width: 44, height: 44, borderRadius: 10,
                display: "grid", placeItems: "center", cursor: "pointer",
              }}
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
                {open
                  ? <React.Fragment><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></React.Fragment>
                  : <React.Fragment><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></React.Fragment>
                }
              </svg>
            </button>
          )}
        </div>

        {isMobile && open && (
          <div style={{
            position: "absolute", top: "100%", left: 0, right: 0,
            background: "rgba(11,15,20,0.98)",
            backdropFilter: "blur(18px)",
            borderBottom: `1px solid ${navC.border}`,
            padding: "12px 20px 20px",
          }}>
            {NAV.map(n => (
              <a key={n.href} href={n.href}
                onClick={() => setOpen(false)}
                style={{
                  display: "block", padding: "14px 8px",
                  color: navC.text, textDecoration: "none",
                  fontSize: 16, fontWeight: 500,
                  borderBottom: `1px solid ${navC.border}`,
                }}>{n.label}</a>
            ))}
            <a href="#inscripcion" onClick={() => setOpen(false)}
              className="cta-btn"
              style={{ width: "100%", justifyContent: "center", marginTop: 16 }}
            >Inscribite ahora</a>
          </div>
        )}
      </nav>
    </React.Fragment>
  );
}

window.LTNavbar = Navbar;