/* global React, LynxMark, ICONS, useScrollY */
const { useState: useNavState, useEffect: useNavEffect } = React;

const LINKS = [
  ["Servicios", "#servicios"],
  ["Confianza", "#confianza"],
  ["Por qué nosotros", "#por-que"],
  ["Nosotros", "#nosotros"],
  ["Contacto", "#contacto"],
];

function Nav() {
  const y = useScrollY();
  const scrolled = y > 24;
  const [open, setOpen] = useNavState(false);
  const [isMobile, setIsMobile] = useNavState(
    () => typeof window !== "undefined" && window.matchMedia("(max-width: 860px)").matches
  );

  useNavEffect(() => {
    const mq = window.matchMedia("(max-width: 860px)");
    const onChange = (e) => setIsMobile(e.matches);
    setIsMobile(mq.matches);
    mq.addEventListener("change", onChange);
    return () => mq.removeEventListener("change", onChange);
  }, []);

  useNavEffect(() => {
    if (!open) return;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <header
      className={
        "nav nav-header" +
        (scrolled ? " nav-scrolled" : "") +
        (open ? " nav-open" : "") +
        (isMobile && scrolled ? " nav-mobile-solid" : "")
      }
    >
      <div
        style={{
          maxWidth: "var(--maxw)",
          margin: "0 auto",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 12,
        }}
      >
        <a
          href="#top"
          onClick={() => setOpen(false)}
          style={{ display: "inline-flex", alignItems: "center", gap: 12 }}
          aria-label="LYNCARED — ir al inicio"
        >
          <LynxMark size={36} chip />
          <span
            style={{
              fontFamily: "var(--font-display)",
              fontSize: 17,
              fontWeight: 500,
              letterSpacing: "0.22em",
            }}
          >
            LYNCARED
          </span>
        </a>

        <nav className="nav-links" style={{ display: "flex", alignItems: "center", gap: 32 }} aria-label="Principal">
          {LINKS.map(([label, href]) => (
            <a
              key={href}
              href={href}
              style={{
                fontFamily: "var(--font-display)",
                fontSize: 14,
                fontWeight: 500,
                color: "var(--text-dim)",
                transition: "color .2s ease",
              }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--text)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-dim)")}
            >
              {label}
            </a>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <a
            href="tel:+34634707655"
            className="btn btn-primary btn-sm nav-cta"
            style={{ whiteSpace: "nowrap" }}
          >
            <span style={{ width: 14, height: 14, display: "inline-flex" }}>{ICONS.phone}</span>
            <span className="nav-cta-label">Llamar ahora</span>
          </a>

          <button
            aria-label={open ? "Cerrar menú" : "Abrir menú"}
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
            className="nav-burger"
            style={{
              width: 42,
              height: 42,
              borderRadius: 12,
              background: "rgba(255,255,255,0.04)",
              border: "1px solid rgba(255,255,255,0.14)",
              display: "none",
              alignItems: "center",
              justifyContent: "center",
              transition: "background .2s ease",
            }}
          >
            <BurgerIcon open={open} />
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      <div
        className="nav-drawer"
        style={{
          position: "fixed",
          top: 64,
          left: 0,
          right: 0,
          bottom: 0,
          background: "rgba(5, 15, 29, 0.96)",
          backdropFilter: "blur(20px)",
          WebkitBackdropFilter: "blur(20px)",
          padding: "32px var(--pad-x)",
          display: "none",
          flexDirection: "column",
          gap: 4,
          transform: open ? "translateY(0)" : "translateY(-12px)",
          opacity: open ? 1 : 0,
          pointerEvents: open ? "auto" : "none",
          transition: "opacity .25s ease, transform .25s ease",
        }}
      >
        {LINKS.map(([label, href], i) => (
          <a
            key={href}
            href={href}
            onClick={() => setOpen(false)}
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "20px 4px",
              fontFamily: "var(--font-display)",
              fontSize: 28,
              fontWeight: 500,
              letterSpacing: "-0.02em",
              color: "var(--text)",
              borderBottom: "1px solid rgba(255,255,255,0.06)",
              transform: open ? "translateY(0)" : "translateY(20px)",
              opacity: open ? 1 : 0,
              transition: `transform 500ms cubic-bezier(.16,.84,.3,1) ${i * 60}ms, opacity 400ms ease ${i * 60}ms`,
            }}
          >
            <span>
              <span style={{ color: "var(--cyan)", fontFamily: "var(--font-mono)", fontSize: 13, marginRight: 14 }}>
                0{i + 1}
              </span>
              {label}
            </span>
            <span style={{ width: 18, height: 18, display: "inline-flex", color: "var(--text-mute)" }}>
              {ICONS.arrow}
            </span>
          </a>
        ))}

        <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 12 }}>
          <a
            href="tel:+34634707655"
            className="btn btn-primary btn-lg"
            style={{ justifyContent: "center" }}
            onClick={() => setOpen(false)}
          >
            <span style={{ width: 16, height: 16, display: "inline-flex" }}>{ICONS.phone}</span>
            +34 634 70 76 55
          </a>
          <a
            href="https://wa.me/34634707655?text=Hola%2C%20quiero%20informaci%C3%B3n%20sobre%20LYNCARED"
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-lg"
            style={{ background: "#25D366", color: "#0a1f38", justifyContent: "center" }}
            onClick={() => setOpen(false)}
          >
            <span style={{ width: 16, height: 16, display: "inline-flex" }}>{ICONS.whatsapp}</span>
            WhatsApp
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .nav-links { display: none !important; }
          .nav-burger { display: inline-flex !important; }
          .nav-drawer { display: flex !important; }
        }
        @media (max-width: 480px) {
          .nav-cta-label { display: none; }
        }
      `}</style>
    </header>
  );
}

function BurgerIcon({ open }) {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
      <line
        x1="3" y1={open ? "10" : "6"} x2="17" y2={open ? "10" : "6"}
        stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"
        style={{
          transformOrigin: "center",
          transform: open ? "rotate(45deg)" : "none",
          transition: "transform .3s ease, y .3s ease",
        }}
      />
      <line
        x1="3" y1={open ? "10" : "14"} x2="17" y2={open ? "10" : "14"}
        stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"
        style={{
          transformOrigin: "center",
          transform: open ? "rotate(-45deg)" : "none",
          transition: "transform .3s ease, y .3s ease",
        }}
      />
    </svg>
  );
}

window.Nav = Nav;