function Logo({ height = 40 }) {
  // Custom rebrand: editorial serif wordmark + minimal geometric mark.
  // Replaces the puzzle/Google-color logo to fit the dark editorial system.
  return (
    <svg viewBox="0 0 360 64" height={height} fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Team Solutionss" style={{ display: "block" }}>
      {/* Mark: orbital ring with emerald node (echoes Tessa core in Suite diagram) */}
      <circle cx="32" cy="32" r="26" stroke="currentColor" strokeWidth="1" opacity="0.6" />
      <circle cx="32" cy="32" r="16" stroke="currentColor" strokeWidth="1" opacity="0.35" strokeDasharray="2 3" />
      <circle cx="32" cy="32" r="6" fill="var(--accent)" />
      <circle cx="32" cy="6" r="2.2" fill="currentColor" />
      {/* Wordmark */}
      <text x="76" y="36" fontFamily="Instrument Serif, Times New Roman, serif" fontSize="32" fill="currentColor" letterSpacing="-0.5">
        Team
      </text>
      <text x="76" y="56" fontFamily="Instrument Serif, Times New Roman, serif" fontStyle="italic" fontSize="18" fill="currentColor" opacity="0.7" letterSpacing="0">
        Solutionss
      </text>
    </svg>
  );
}

const HERRAMIENTAS = [
  {
    href: "https://agencia.teamsolutionss.com/diagnostico-inbound",
    title: "Diagnóstico de Inbound",
    desc: "5 min · Conoce tu madurez digital",
    star: true,
    external: true,
  },
  {
    href: "/simulador",
    title: "Simulador Tessa",
    desc: "Pre-valida creativos antes de gastar pauta",
    flask: true,
  },
  { divider: true },
  {
    href: "/blog/calculadora-de-roi-en-publicidad-digital",
    title: "Calculadora de ROI",
    desc: "Mide el retorno de tus campañas",
  },
  {
    href: "/blog/compara-tu-coste-por-adquisicion-con-el-promedio-del-sector",
    title: "Comparador de CPA",
    desc: "Tu coste vs. el promedio del sector",
  },
  {
    href: "/blog/calculadora-de-presupuesto-para-campanas-de-marketing-digital",
    title: "Calculadora de presupuesto",
    desc: "Cuánto invertir según tu objetivo",
  },
];

// Legacy export for any external callers expecting CALCULADORAS — kept as alias.
const CALCULADORAS = HERRAMIENTAS.filter((h) => !h.divider && !h.star && !h.flask);

function HerramientasDropdown() {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const onClick = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    const onEsc = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("mousedown", onClick);
    document.addEventListener("keydown", onEsc);
    return () => {
      document.removeEventListener("mousedown", onClick);
      document.removeEventListener("keydown", onEsc);
    };
  }, [open]);

  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-haspopup="true"
        aria-expanded={open}
        style={{
          background: "none",
          border: 0,
          padding: 0,
          font: "inherit",
          color: "var(--ink-dim)",
          cursor: "pointer",
          display: "inline-flex",
          alignItems: "center",
          gap: 6,
        }}
      >
        Herramientas gratis
        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" aria-hidden="true">
          <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
        </svg>
      </button>
      {open && (
        <div
          role="menu"
          style={{
            position: "absolute",
            top: "calc(100% + 14px)",
            left: "50%",
            transform: "translateX(-50%)",
            background: "var(--bg-elev)",
            border: "1px solid var(--line)",
            borderRadius: 12,
            padding: 8,
            minWidth: 320,
            boxShadow: "0 20px 40px rgba(0,0,0,0.5)",
            zIndex: 100,
          }}
        >
          {HERRAMIENTAS.map((c, i) => {
            if (c.divider) {
              return (
                <div
                  key={`div-${i}`}
                  style={{
                    height: 1,
                    background: "var(--line)",
                    margin: "6px 8px",
                  }}
                />
              );
            }
            const linkProps = c.external
              ? { target: "_blank", rel: "noopener" }
              : {};
            return (
              <a
                key={c.href}
                href={c.href}
                role="menuitem"
                onClick={() => setOpen(false)}
                {...linkProps}
                style={{
                  display: "flex",
                  alignItems: "flex-start",
                  gap: 10,
                  padding: "12px 14px",
                  borderRadius: 8,
                  color: "var(--ink-dim)",
                  textDecoration: "none",
                  fontSize: 13,
                  lineHeight: 1.4,
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = "var(--accent-soft)";
                  e.currentTarget.style.color = "var(--ink)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = "transparent";
                  e.currentTarget.style.color = "var(--ink-dim)";
                }}
              >
                {c.star && <span style={{ color: "var(--accent)", fontSize: 13 }}>★</span>}
                {c.flask && <span style={{ color: "var(--accent)", fontSize: 13 }}>◆</span>}
                <span style={{ flex: 1 }}>
                  <strong style={{ display: "block", color: "var(--ink)", fontWeight: 500, marginBottom: 2 }}>
                    {c.title}
                  </strong>
                  {c.desc}
                </span>
              </a>
            );
          })}
        </div>
      )}
    </div>
  );
}

function Nav() {
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    if (!mobileOpen) return;
    document.body.style.overflow = "hidden";
    const onEsc = (e) => { if (e.key === "Escape") setMobileOpen(false); };
    document.addEventListener("keydown", onEsc);
    return () => {
      document.body.style.overflow = "";
      document.removeEventListener("keydown", onEsc);
    };
  }, [mobileOpen]);

  const close = () => setMobileOpen(false);

  return (
    <>
      <nav className="nav">
        <a href="#top" className="nav-logo" style={{ color: "var(--ink)" }}>
          <Logo height={42} />
        </a>
        <div className="nav-links">
          <a href="#caminos">Cómo trabajar</a>
          <a href="#modulos">Módulos</a>
          <HerramientasDropdown />
          <a href="#agencia">Agencia</a>
          <a href="#tessa">Tessa</a>
          <a href="#precios">Precios</a>
        </div>
        <a
          href="https://agencia.teamsolutionss.com/"
          target="_blank"
          rel="noopener"
          className="btn btn-ghost nav-login-desktop"
          style={{ padding: "10px 18px", fontSize: 13 }}
        >
          Iniciar sesión
        </a>
        <a href="#cta" className="btn btn-primary nav-cta-desktop" style={{ padding: "10px 18px", fontSize: 13 }}>
          Diagnóstico <Arrow />
        </a>
        <button
          type="button"
          className="nav-burger"
          aria-label={mobileOpen ? "Cerrar menú" : "Abrir menú"}
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen((v) => !v)}
        >
          <span className={mobileOpen ? "nav-burger-x" : "nav-burger-bars"}>
            {mobileOpen ? (
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
              </svg>
            ) : (
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
              </svg>
            )}
          </span>
        </button>
      </nav>

      {mobileOpen && (
        <div className="nav-mobile-drawer" role="dialog" aria-modal="true">
          <div className="nav-mobile-inner">
            <a href="#caminos" onClick={close}>Cómo trabajar</a>
            <a href="#modulos" onClick={close}>Módulos</a>
            <a href="#agencia" onClick={close}>Agencia</a>
            <a href="#tessa" onClick={close}>Tessa</a>
            <a href="#precios" onClick={close}>Precios</a>

            <div className="nav-mobile-section">Herramientas gratis</div>
            {HERRAMIENTAS.map((c, i) => {
              if (c.divider) return null;
              const extra = c.external ? { target: "_blank", rel: "noopener" } : {};
              return (
                <a key={c.href} href={c.href} onClick={close} className="nav-mobile-sub" {...extra}>
                  <strong>
                    {c.star ? "★ " : c.flask ? "◆ " : ""}
                    {c.title}
                  </strong>
                  <span>{c.desc}</span>
                </a>
              );
            })}

            <a
              href="https://agencia.teamsolutionss.com/"
              target="_blank"
              rel="noopener"
              onClick={close}
              className="btn btn-ghost"
              style={{ marginTop: 24, justifyContent: "center" }}
            >
              Iniciar sesión
            </a>
            <a
              href="#cta"
              onClick={close}
              className="btn btn-primary"
              style={{ marginTop: 8, justifyContent: "center" }}
            >
              Diagnóstico <Arrow />
            </a>
          </div>
        </div>
      )}
    </>
  );
}

window.Nav = Nav;