/* global React, useMedia */
function NavBar({ active = "home" }) {
  const isMobile = useMedia("(max-width: 767px)");

  return (
    <nav
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: "rgba(11,32,26,0.85)",
        backdropFilter: "blur(20px) saturate(140%)",
        borderBottom: "1px solid rgba(244,251,233,0.06)",
      }}
    >
      <div
        style={{
          height: isMobile ? 60 : 72,
          display: "flex",
          alignItems: "center",
          padding: isMobile ? "0 20px" : "0 32px",
          gap: 20,
          maxWidth: 1200,
          margin: "0 auto",
          width: "100%",
        }}
      >
        <a
          href="index.html"
          style={{
            display: "flex",
            alignItems: "center",
            textDecoration: "none",
          }}
        >
          <img
            src="assets/vaguinho-logo.png"
            alt="Vaguinho"
            style={{ height: isMobile ? 24 : 28 }}
          />
        </a>
        <div style={{ flex: 1 }}></div>
        {!isMobile && (
          <>
            <a
              href={active === "empresas" ? "#how" : "index.html#how"}
              style={{
                color: active === "home" ? "#F4FBE9" : "#C9D6C0",
                fontSize: 14,
                fontWeight: 500,
                textDecoration: "none",
              }}
            >
              Como funciona
            </a>
            <a
              href={active === "empresas" ? "index.html" : "empresas.html"}
              style={{
                color: "#C9D6C0",
                fontSize: 14,
                fontWeight: 500,
                textDecoration: "none",
                display: "inline-flex",
                alignItems: "center",
                gap: 6,
              }}
            >
              {active === "empresas" ? "Para candidatos" : "Para empresa"}
              <svg
                width="12"
                height="12"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M7 17L17 7M7 7h10v10" />
              </svg>
            </a>
          </>
        )}
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault();
            window.openCTA(
              active === "empresas" ? "navbar-empresa" : "navbar-candidato",
            );
          }}
          style={{
            background: "#C7FF6E",
            color: "#0B201A",
            padding: isMobile ? "8px 16px" : "10px 18px",
            borderRadius: 999,
            fontWeight: 700,
            fontSize: isMobile ? 13 : 14,
            textDecoration: "none",
            display: "inline-flex",
            alignItems: "center",
            gap: 6,
            whiteSpace: "nowrap",
            cursor: "pointer",
          }}
        >
          {isMobile
            ? "Começar →"
            : (active === "empresas"
                ? "Cadastrar empresa"
                : "Quero achar vaga") + " →"}
        </a>
      </div>
    </nav>
  );
}

window.NavBar = NavBar;