/* global React, useMedia */

const WA_LINK = "#";

/* ─── LaunchBanner ─────────────────────────────────────────────────────────── */
function EmpresasLaunchBanner() {
  const isMobile = useMedia("(max-width: 767px)");
  return (
    <div
      style={{
        background: "rgba(199,255,110,0.08)",
        borderBottom: "1px solid rgba(199,255,110,0.18)",
        padding: isMobile ? "10px 16px" : "10px 20px",
        textAlign: "center",
        color: "#C9D6C0",
        fontSize: isMobile ? 12 : 13,
        lineHeight: 1.45,
      }}
    >
      🚀{" "}
      <strong style={{ color: "#C7FF6E", fontWeight: 700 }}>
        Em fase de testes
      </strong>{" "}
      as vagas ficam concentradas em São Paulo — estamos expandindo pelo Brasil
      🇧🇷
    </div>
  );
}

/* ─── EmpresasHero ─────────────────────────────────────────────────────────── */
function EmpresasHero() {
  const isMobile = useMedia("(max-width: 767px)");

  return (
    <section
      style={{
        position: "relative",
        padding: isMobile ? "56px 20px 64px" : "96px 32px 88px",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(ellipse at 50% 0%, rgba(199,255,110,0.10), transparent 60%)",
          pointerEvents: "none",
        }}
      ></div>

      <div
        style={{
          maxWidth: 760,
          margin: "0 auto",
          position: "relative",
          zIndex: 2,
          textAlign: "center",
        }}
      >
        <div
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            background: "rgba(199,255,110,0.1)",
            border: "1px solid rgba(199,255,110,0.3)",
            color: "#C7FF6E",
            padding: "6px 14px",
            borderRadius: 999,
            fontSize: 12,
            fontWeight: 600,
            marginBottom: 28,
          }}
        >
          <span
            style={{
              width: 6,
              height: 6,
              borderRadius: 999,
              background: "#C7FF6E",
            }}
          ></span>
          Bares, restaurantes, hotéis e eventos
        </div>

        <h1
          style={{
            fontFamily: "Bricolage Grotesque",
            fontWeight: 800,
            fontSize: isMobile ? 38 : 68,
            lineHeight: isMobile ? 1.05 : 0.97,
            letterSpacing: "-0.04em",
            margin: 0,
            color: "#F4FBE9",
          }}
        >
          Contrate para o seu negócio sem perder tempo com entrevista.
        </h1>

        <p
          style={{
            color: "#C9D6C0",
            fontSize: isMobile ? 16 : 19,
            lineHeight: 1.6,
            margin: "24px auto 36px",
            maxWidth: 580,
          }}
        >
          Cadastre seu estabelecimento e ganhe{" "}
          <strong style={{ color: "#F4FBE9" }}>3 créditos grátis</strong> pra
          anunciar. O Vaguinho cruza o perfil de cada candidato com a sua vaga e
          só te manda quem combina — você assiste os vídeos quando quiser e fala
          direto com quem aprovar.
        </p>

        <a
          href="#"
          onClick={(e) => {
            e.preventDefault();
            window.openCTA("hero-empresa");
          }}
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 10,
            background: "#C7FF6E",
            color: "#0B201A",
            padding: isMobile ? "16px 28px" : "18px 36px",
            borderRadius: 999,
            fontWeight: 700,
            fontSize: isMobile ? 16 : 18,
            textDecoration: "none",
            boxShadow:
              "0 0 0 4px rgba(199,255,110,0.18), 0 12px 36px rgba(199,255,110,0.22)",
            cursor: "pointer",
          }}
        >
          💬 Anunciar vaga no WhatsApp
        </a>

        <div style={{ color: "#8FA597", fontSize: 13, marginTop: 16 }}>
          Sem mensalidade. Sem cadastro chato. Tudo pelo WhatsApp.
        </div>

        {/* Trust pills */}
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            flexWrap: "wrap",
            gap: 10,
            marginTop: 32,
          }}
        >
          {[
            "3 créditos grátis",
            "Sem mensalidade",
            "Match dos dois lados",
            "Fale direto com quem aprovar",
          ].map((t) => (
            <div
              key={t}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 6,
                background: "rgba(244,251,233,0.05)",
                border: "1px solid rgba(244,251,233,0.08)",
                borderRadius: 999,
                padding: "5px 12px",
                color: "#C9D6C0",
                fontSize: 12,
              }}
            >
              <svg
                width="11"
                height="11"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#C7FF6E"
                strokeWidth="3"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <polyline points="20 6 9 17 4 12" />
              </svg>
              {t}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── EmpresasHowItWorks ───────────────────────────────────────────────────── */
function EmpresasHowItWorks() {
  const isMobile = useMedia("(max-width: 767px)");
  const steps = [
    {
      n: 1,
      title: "Cadastre seu estabelecimento",
      desc: "Crie sua conta pelo WhatsApp. Assim que aprovada, você ganha 3 créditos grátis pra começar a anunciar — sem pagar nada.",
      icon: (
        <>
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
          <line x1="3" y1="9" x2="21" y2="9" />
          <line x1="9" y1="21" x2="9" y2="9" />
        </>
      ),
    },
    {
      n: 2,
      title: "Poste sua vaga",
      desc: "Use 1 crédito pra publicar uma vaga: função, horário, salário, bairro. Ela fica no ar por 30 dias atraindo candidatos.",
      icon: (
        <>
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
          <line x1="16" y1="2" x2="16" y2="6" />
          <line x1="8" y1="2" x2="8" y2="6" />
          <line x1="3" y1="10" x2="21" y2="10" />
        </>
      ),
    },
    {
      n: 3,
      title: "Receba candidaturas com vídeo",
      desc: "Os candidatos se candidatam à sua vaga e você vê todos eles. Assiste o vídeo de apresentação de cada um quantas vezes quiser, no seu tempo.",
      icon: (
        <>
          <polygon points="23 7 16 12 23 17 23 7" />
          <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
        </>
      ),
    },
    {
      n: 4,
      title: "Aprovou? Fale direto.",
      desc: "Gostou de um candidato? Mande mensagem direto pra ele e combine os detalhes. A negociação e a contratação são com você.",
      icon: (
        <>
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.15 6.15l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7a2 2 0 0 1 1.72 2.02z" />
        </>
      ),
    },
  ];

  return (
    <section
      id="how"
      style={{
        padding: isMobile ? "56px 20px" : "96px 32px",
        background: "#123328",
        borderTop: "1px solid rgba(244,251,233,0.05)",
      }}
    >
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div
          style={{
            fontSize: 11,
            textTransform: "uppercase",
            letterSpacing: "0.14em",
            color: "#C7FF6E",
            fontWeight: 700,
            marginBottom: 12,
          }}
        >
          Como funciona
        </div>
        <h2
          style={{
            fontFamily: "Bricolage Grotesque",
            fontSize: isMobile ? 34 : 56,
            fontWeight: 700,
            letterSpacing: "-0.035em",
            margin: "0 0 48px",
            color: "#F4FBE9",
            lineHeight: 1.05,
            maxWidth: 760,
          }}
        >
          Como o Vaguinho trabalha pra você
        </h2>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "repeat(4, 1fr)",
            gap: isMobile ? 10 : 14,
          }}
        >
          {steps.map((s) => (
            <div
              key={s.n}
              style={{
                background: "#1A4534",
                border: "1px solid rgba(244,251,233,0.08)",
                borderRadius: 20,
                padding: isMobile ? "20px 22px" : "28px 24px",
                boxShadow:
                  "0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04)",
              }}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  marginBottom: 18,
                }}
              >
                <div
                  style={{
                    fontFamily: "JetBrains Mono",
                    color: "#C7FF6E",
                    fontSize: 12,
                    fontWeight: 600,
                    opacity: 0.7,
                  }}
                >
                  0{s.n}
                </div>
                <div
                  style={{
                    width: 38,
                    height: 38,
                    borderRadius: 11,
                    background: "rgba(199,255,110,0.12)",
                    color: "#C7FF6E",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <svg
                    width="18"
                    height="18"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.75"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    {s.icon}
                  </svg>
                </div>
              </div>
              <h3
                style={{
                  fontFamily: "Bricolage Grotesque",
                  fontSize: isMobile ? 18 : 20,
                  fontWeight: 700,
                  letterSpacing: "-0.02em",
                  color: "#F4FBE9",
                  margin: "0 0 10px",
                  lineHeight: 1.2,
                }}
              >
                {s.title}
              </h3>
              <p
                style={{
                  color: "#C9D6C0",
                  fontSize: 13,
                  lineHeight: 1.65,
                  margin: 0,
                }}
              >
                {s.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── EmpresasMatch ────────────────────────────────────────────────────────── */
function EmpresasMatch() {
  const isMobile = useMedia("(max-width: 767px)");
  const cards = [
    {
      icon: (
        <>
          <circle cx="12" cy="12" r="10" />
          <circle cx="12" cy="12" r="6" />
          <circle cx="12" cy="12" r="2" />
        </>
      ),
      title: "Mais encaixe",
      desc: "Candidatos que de fato têm a ver com a sua vaga, não uma pilha de currículos no escuro.",
    },
    {
      icon: (
        <>
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
        </>
      ),
      title: "Mais retenção",
      desc: "Quem combina dos dois lados fica mais tempo. Menos rotatividade, menos recontratação.",
    },
    {
      icon: (
        <>
          <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
          <polyline points="17 6 23 6 23 12" />
        </>
      ),
      title: "Mais retorno",
      desc: "Menos tempo perdido e menos giro de equipe significam mais retorno sobre cada contratação.",
    },
  ];

  return (
    <section
      style={{
        position: "relative",
        padding: isMobile ? "56px 20px" : "96px 32px",
        background: "#0B201A",
        borderTop: "1px solid rgba(244,251,233,0.05)",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(ellipse at 50% 0%, rgba(199,255,110,0.10), transparent 60%)",
          pointerEvents: "none",
        }}
      ></div>
      <div
        style={{
          maxWidth: 1200,
          margin: "0 auto",
          position: "relative",
          zIndex: 1,
        }}
      >
        <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
          <div
            style={{
              fontSize: 11,
              textTransform: "uppercase",
              letterSpacing: "0.14em",
              color: "#C7FF6E",
              fontWeight: 700,
              marginBottom: 12,
            }}
          >
            Nosso diferencial · tecnologia proprietária com IA
          </div>
          <h2
            style={{
              fontFamily: "Bricolage Grotesque",
              fontSize: isMobile ? 34 : 56,
              fontWeight: 700,
              letterSpacing: "-0.035em",
              margin: 0,
              color: "#F4FBE9",
              lineHeight: 1.05,
            }}
          >
            Você só fala com quem combina com a sua vaga —{" "}
            <span style={{ color: "#C7FF6E" }}>e com o seu negócio.</span>
          </h2>
          <p
            style={{
              color: "#C9D6C0",
              fontSize: isMobile ? 15 : 18,
              lineHeight: 1.65,
              margin: "20px auto 0",
              maxWidth: 660,
            }}
          >
            Por trás do Vaguinho tem um algoritmo proprietário, que aprende com
            IA, criado pra uma coisa só:{" "}
            <strong style={{ color: "#F4FBE9" }}>encaixar os dois lados</strong>.
            Ele cruza o que cada candidato procura — horário, região, tipo de
            trabalho — com o perfil do seu estabelecimento e da sua vaga.
            Candidato que não combina não chega até você; e a sua vaga nem
            aparece pra quem não tem a ver com ela. É um{" "}
            <strong style={{ color: "#F4FBE9" }}>match dos dois lados</strong>:
            bom pra você, bom pra quem vai trabalhar com você.
          </p>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
            gap: isMobile ? 12 : 16,
            marginTop: isMobile ? 36 : 56,
          }}
        >
          {cards.map((c, i) => (
            <div
              key={i}
              style={{
                background: "#1A4534",
                border: "1px solid rgba(244,251,233,0.08)",
                borderRadius: 18,
                padding: isMobile ? "24px 22px" : "32px 28px",
                boxShadow:
                  "0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04)",
              }}
            >
              <div
                style={{
                  width: 44,
                  height: 44,
                  borderRadius: 12,
                  background: "rgba(199,255,110,0.12)",
                  color: "#C7FF6E",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  marginBottom: 18,
                }}
              >
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.75"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  {c.icon}
                </svg>
              </div>
              <h3
                style={{
                  fontFamily: "Bricolage Grotesque",
                  fontSize: isMobile ? 20 : 24,
                  fontWeight: 700,
                  letterSpacing: "-0.02em",
                  color: "#F4FBE9",
                  margin: "0 0 8px",
                }}
              >
                {c.title}
              </h3>
              <p
                style={{
                  color: "#C9D6C0",
                  fontSize: 14,
                  lineHeight: 1.6,
                  margin: 0,
                }}
              >
                {c.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── EmpresasWhyItWorks ───────────────────────────────────────────────────── */
function EmpresasWhyItWorks() {
  const isMobile = useMedia("(max-width: 767px)");
  const benefits = [
    {
      icon: (
        <>
          <circle cx="12" cy="12" r="10" />
          <circle cx="12" cy="12" r="6" />
          <circle cx="12" cy="12" r="2" />
        </>
      ),
      title: "Match dos dois lados",
      desc: "Algoritmo proprietário que aprende com IA pra combinar o perfil de cada candidato com a sua vaga. Quem combina, fica.",
    },
    {
      icon: (
        <>
          <circle cx="12" cy="12" r="10" />
          <polyline points="12 6 12 12 16 14" />
        </>
      ),
      title: "Zero tempo perdido com no-show",
      desc: "Só se candidata quem realmente quer a vaga. Você fala com quem demonstrou interesse.",
    },
    {
      icon: (
        <>
          <polygon points="23 7 16 12 23 17 23 7" />
          <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
        </>
      ),
      title: "Vídeo vale mais que currículo",
      desc: "Em até 60 segundos você sente se a pessoa tem o perfil certo pro seu salão.",
    },
    {
      icon: (
        <>
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
          <circle cx="12" cy="10" r="3" />
        </>
      ),
      title: "Candidatos do seu bairro",
      desc: "O Vaguinho prioriza quem mora perto — quem mora perto, fica mais.",
    },
    {
      icon: (
        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.15 6.15l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7a2 2 0 0 1 1.72 2.02z" />
      ),
      title: "Tudo pelo WhatsApp",
      desc: "Sem painel pra aprender, sem app pra baixar, sem senha pra lembrar.",
    },
    {
      icon: (
        <>
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
          <line x1="16" y1="2" x2="16" y2="6" />
          <line x1="8" y1="2" x2="8" y2="6" />
          <line x1="3" y1="10" x2="21" y2="10" />
          <line x1="9" y1="16" x2="9.01" y2="16" />
          <path d="M3 21 L21 3" />
        </>
      ),
      title: "Sem mensalidade, sem fidelidade",
      desc: "Use seus créditos quando precisar. Sem contrato, sem assinatura, sem compromisso.",
    },
  ];

  return (
    <section
      style={{
        padding: isMobile ? "56px 20px" : "96px 32px",
        background: "#0E2620",
      }}
    >
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div
          style={{
            fontSize: 11,
            textTransform: "uppercase",
            letterSpacing: "0.14em",
            color: "#C7FF6E",
            fontWeight: 700,
            marginBottom: 12,
          }}
        >
          Por que usar
        </div>
        <h2
          style={{
            fontFamily: "Bricolage Grotesque",
            fontSize: isMobile ? 34 : 56,
            fontWeight: 700,
            letterSpacing: "-0.035em",
            margin: "0 0 48px",
            color: "#F4FBE9",
            lineHeight: 1.05,
            maxWidth: 760,
          }}
        >
          Por que donos de bar, restaurante e hotel usam o Vaguinho
        </h2>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
            gap: isMobile ? 10 : 14,
          }}
        >
          {benefits.map((b, i) => (
            <div
              key={i}
              style={{
                background: "#1A4534",
                border: "1px solid rgba(244,251,233,0.08)",
                borderRadius: 18,
                padding: isMobile ? "20px 22px" : "28px 28px",
                boxShadow: "0 4px 14px rgba(0,0,0,0.25)",
              }}
            >
              <div
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: 12,
                  background: "rgba(199,255,110,0.12)",
                  color: "#C7FF6E",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  marginBottom: 16,
                }}
              >
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.75"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  {b.icon}
                </svg>
              </div>
              <h3
                style={{
                  fontFamily: "Bricolage Grotesque",
                  fontSize: isMobile ? 18 : 20,
                  fontWeight: 700,
                  letterSpacing: "-0.015em",
                  color: "#F4FBE9",
                  margin: "0 0 8px",
                  lineHeight: 1.25,
                }}
              >
                {b.title}
              </h3>
              <p
                style={{
                  color: "#C9D6C0",
                  fontSize: 14,
                  lineHeight: 1.6,
                  margin: 0,
                }}
              >
                {b.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── EmpresasComparison ───────────────────────────────────────────────────── */
function EmpresasComparison() {
  const isMobile = useMedia("(max-width: 767px)");
  const rows = [
    [
      "Você filtra currículo no escuro, sem saber se a pessoa combina",
      "IA combina candidato e vaga pelos dois lados — você só vê quem encaixa",
    ],
    [
      "Você recebe 80 currículos pra ler",
      "Você recebe vídeos curtos de candidatos curados",
    ],
    [
      "Marca entrevistas que ninguém aparece",
      "Você só fala com quem você escolheu",
    ],
    [
      "Mensalidade fixa, dê certo ou não",
      "Comece grátis com 3 créditos — 1 vaga por crédito",
    ],
    ["Currículo no papel", "Vídeo de apresentação"],
    ["Painel, login, senha, cadastro", "Tudo pelo WhatsApp que você já usa"],
  ];

  return (
    <section style={{ padding: isMobile ? "56px 20px" : "96px 32px" }}>
      <div style={{ maxWidth: 900, margin: "0 auto" }}>
        <div
          style={{
            fontSize: 11,
            textTransform: "uppercase",
            letterSpacing: "0.14em",
            color: "#C7FF6E",
            fontWeight: 700,
            marginBottom: 12,
            textAlign: "center",
          }}
        >
          Comparativo
        </div>
        <h2
          style={{
            fontFamily: "Bricolage Grotesque",
            fontSize: isMobile ? 30 : 52,
            fontWeight: 700,
            letterSpacing: "-0.035em",
            margin: "0 0 40px",
            color: "#F4FBE9",
            lineHeight: 1.05,
            textAlign: "center",
          }}
        >
          Vaguinho vs. site de vagas tradicional
        </h2>

        {/* Header row */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 10,
            marginBottom: 6,
          }}
        >
          <div
            style={{
              background: "rgba(244,251,233,0.04)",
              border: "1px solid rgba(244,251,233,0.08)",
              borderRadius: "12px 12px 0 0",
              padding: isMobile ? "10px 14px" : "12px 22px",
              textAlign: "center",
              color: "#8FA597",
              fontSize: isMobile ? 12 : 13,
              fontWeight: 600,
            }}
          >
            Site de vagas tradicional
          </div>
          <div
            style={{
              background: "rgba(199,255,110,0.07)",
              border: "1px solid rgba(199,255,110,0.22)",
              borderRadius: "12px 12px 0 0",
              padding: isMobile ? "10px 14px" : "12px 22px",
              textAlign: "center",
              color: "#C7FF6E",
              fontSize: isMobile ? 12 : 13,
              fontWeight: 700,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 6,
            }}
          >
            Vaguinho
            <svg
              width="13"
              height="13"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="3"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <polyline points="20 6 9 17 4 12" />
            </svg>
          </div>
        </div>

        {/* Data rows */}
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {rows.map((row, i) => (
            <div
              key={i}
              style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 10,
              }}
            >
              <div
                style={{
                  background: "rgba(244,251,233,0.03)",
                  border: "1px solid rgba(244,251,233,0.06)",
                  borderRadius: 10,
                  padding: isMobile ? "12px 14px" : "16px 22px",
                  display: "flex",
                  alignItems: "flex-start",
                  gap: 10,
                }}
              >
                <span
                  style={{
                    flexShrink: 0,
                    marginTop: 2,
                    width: 16,
                    height: 16,
                    borderRadius: 999,
                    background: "rgba(255,107,107,0.15)",
                    color: "#FF6B6B",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: 10,
                    fontWeight: 700,
                    lineHeight: 1,
                  }}
                >
                  ✕
                </span>
                <span
                  style={{
                    color: "#8FA597",
                    fontSize: isMobile ? 12 : 14,
                    lineHeight: 1.45,
                  }}
                >
                  {row[0]}
                </span>
              </div>
              <div
                style={{
                  background: "rgba(199,255,110,0.04)",
                  border: "1px solid rgba(199,255,110,0.12)",
                  borderRadius: 10,
                  padding: isMobile ? "12px 14px" : "16px 22px",
                  display: "flex",
                  alignItems: "flex-start",
                  gap: 10,
                }}
              >
                <span
                  style={{
                    flexShrink: 0,
                    marginTop: 2,
                    width: 16,
                    height: 16,
                    borderRadius: 999,
                    background: "rgba(199,255,110,0.15)",
                    color: "#C7FF6E",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: 10,
                    fontWeight: 700,
                    lineHeight: 1,
                  }}
                >
                  ✓
                </span>
                <span
                  style={{
                    color: "#F4FBE9",
                    fontSize: isMobile ? 12 : 14,
                    lineHeight: 1.45,
                  }}
                >
                  {row[1]}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── EmpresasPricing ──────────────────────────────────────────────────────── */
function EmpresasPricing() {
  const isMobile = useMedia("(max-width: 767px)");
  const items = [
    { label: "Cadastro do estabelecimento", value: "Grátis" },
    { label: "3 créditos de boas-vindas", value: "Grátis" },
    { label: "Ver candidatos e assistir vídeos", value: "Ilimitado" },
    { label: "Falar com quem você aprovar", value: "Incluído" },
  ];

  return (
    <section
      style={{
        padding: isMobile ? "56px 20px" : "96px 32px",
        background: "#123328",
      }}
    >
      <div style={{ maxWidth: 600, margin: "0 auto", textAlign: "center" }}>
        <div
          style={{
            fontSize: 11,
            textTransform: "uppercase",
            letterSpacing: "0.14em",
            color: "#C7FF6E",
            fontWeight: 700,
            marginBottom: 12,
          }}
        >
          Preço
        </div>
        <h2
          style={{
            fontFamily: "Bricolage Grotesque",
            fontSize: isMobile ? 34 : 52,
            fontWeight: 700,
            letterSpacing: "-0.035em",
            margin: "0 0 10px",
            color: "#F4FBE9",
            lineHeight: 1.05,
          }}
        >
          Quanto custa?
        </h2>
        <p
          style={{
            color: "#C9D6C0",
            fontSize: isMobile ? 15 : 17,
            lineHeight: 1.6,
            margin: "0 0 36px",
          }}
        >
          Comece de graça. Você ganha 3 créditos pra anunciar e testar o
          Vaguinho.
        </p>

        <div
          style={{
            background: "#1A4534",
            border: "1px solid rgba(244,251,233,0.08)",
            borderRadius: 20,
            overflow: "hidden",
            boxShadow:
              "0 14px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04)",
            textAlign: "left",
          }}
        >
          {/* Highlight: créditos grátis */}
          <div
            style={{
              background: "rgba(199,255,110,0.08)",
              borderBottom: "1px solid rgba(244,251,233,0.06)",
              padding: isMobile ? "24px 20px" : "28px",
              textAlign: "center",
            }}
          >
            <div
              style={{
                fontFamily: "Bricolage Grotesque",
                fontWeight: 800,
                fontSize: isMobile ? 36 : 48,
                color: "#C7FF6E",
                letterSpacing: "-0.04em",
                lineHeight: 1,
              }}
            >
              3 créditos grátis
            </div>
            <div
              style={{
                color: "#C9D6C0",
                fontSize: isMobile ? 13 : 14,
                marginTop: 8,
              }}
            >
              1 crédito = 1 vaga ativa por 30 dias
            </div>
          </div>

          {items.map((item, i) => (
            <div
              key={i}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                gap: 16,
                padding: isMobile ? "16px 20px" : "18px 28px",
                borderBottom:
                  i < items.length - 1
                    ? "1px solid rgba(244,251,233,0.06)"
                    : "none",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span
                  style={{
                    flexShrink: 0,
                    width: 22,
                    height: 22,
                    borderRadius: 999,
                    background: "rgba(199,255,110,0.12)",
                    color: "#C7FF6E",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <svg
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="3"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <polyline points="20 6 9 17 4 12" />
                  </svg>
                </span>
                <span
                  style={{
                    color: "#F4FBE9",
                    fontSize: isMobile ? 14 : 15,
                    fontWeight: 500,
                  }}
                >
                  {item.label}
                </span>
              </div>
              <div
                style={{
                  flexShrink: 0,
                  color: "#C7FF6E",
                  fontSize: isMobile ? 14 : 15,
                  fontWeight: 700,
                }}
              >
                {item.value}
              </div>
            </div>
          ))}
        </div>

        <p
          style={{
            color: "#C9D6C0",
            fontSize: 14,
            lineHeight: 1.65,
            marginTop: 24,
            textAlign: "left",
          }}
        >
          Cada crédito ativa uma vaga por 30 dias. Você vê todos os candidatos,
          assiste os vídeos quantas vezes quiser e fala direto com quem aprovar.
          A negociação e a decisão de contratar são suas.
        </p>
        <p
          style={{
            color: "#C9D6C0",
            fontSize: 14,
            lineHeight: 1.65,
            marginTop: 8,
            textAlign: "left",
          }}
        >
          Acabaram os créditos? Em breve você poderá comprar mais. Por enquanto,
          o teste é por nossa conta.
        </p>
        <p
          style={{
            color: "#8FA597",
            fontSize: 13,
            fontWeight: 600,
            marginTop: 8,
            textAlign: "center",
          }}
        >
          Sem mensalidade. Sem fidelidade. Sem letra miúda.
        </p>
      </div>
    </section>
  );
}

/* ─── EmpresasFAQ ──────────────────────────────────────────────────────────── */
function EmpresasFAQ() {
  const isMobile = useMedia("(max-width: 767px)");
  const items = [
    {
      q: "Como o Vaguinho sabe quais candidatos combinam com a minha vaga?",
      a: "A gente usa um algoritmo proprietário, que aprende com IA, pra cruzar o que cada candidato procura — horário, região, tipo de trabalho — com o perfil do seu estabelecimento e da sua vaga. Quem não combina não chega até você. É o match dos dois lados, feito pra aumentar o encaixe e a retenção da sua equipe.",
    },
    {
      q: "E se eu não gostar de nenhum candidato?",
      a: "Sem problema. Ver os candidatos e assistir os vídeos é sempre ilimitado e grátis. Você usa os créditos só pra manter a vaga no ar.",
    },
    {
      q: "Como funcionam os créditos?",
      a: "Você ganha 3 créditos grátis ao se cadastrar. Cada crédito ativa uma vaga por 30 dias. Dentro dela, você vê todos os candidatos, assiste os vídeos quantas vezes quiser e fala direto com quem aprovar.",
    },
    {
      q: "O Vaguinho garante a contratação?",
      a: "Não. A decisão de contratar e a relação trabalhista são 100% suas. O Vaguinho entrega candidatos com vídeo, você decide.",
    },
    {
      q: "Quanto tempo leva pra chegar candidato?",
      a: "Depende da vaga e da região, mas costuma começar a receber candidaturas nas primeiras 24 a 72 horas com a vaga no ar.",
    },
    {
      q: "Posso anunciar várias vagas?",
      a: "Pode. Cada vaga usa 1 crédito e fica no ar por 30 dias. Com os 3 créditos grátis você já anuncia até 3 vagas.",
    },
    {
      q: "E quando acabam os créditos?",
      a: "Você poderá comprar mais (em breve). Sem assinatura, sem mensalidade — só compra quando precisar.",
    },
  ];

  return (
    <section style={{ padding: isMobile ? "56px 20px" : "96px 32px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto" }}>
        <div
          style={{
            fontSize: 11,
            textTransform: "uppercase",
            letterSpacing: "0.14em",
            color: "#C7FF6E",
            fontWeight: 700,
            marginBottom: 12,
          }}
        >
          Dúvidas
        </div>
        <h2
          style={{
            fontFamily: "Bricolage Grotesque",
            fontSize: isMobile ? 32 : 48,
            fontWeight: 700,
            letterSpacing: "-0.035em",
            margin: "0 0 28px",
            color: "#F4FBE9",
            lineHeight: 1.05,
          }}
        >
          Tira as dúvidas
        </h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {items.map((it, i) => (
            <details
              key={i}
              style={{
                background: "#1A4534",
                border: "1px solid rgba(244,251,233,0.06)",
                borderRadius: 14,
                padding: isMobile ? "16px 18px" : "18px 22px",
              }}
            >
              <summary
                style={{
                  fontFamily: "Bricolage Grotesque",
                  fontSize: isMobile ? 16 : 18,
                  fontWeight: 600,
                  color: "#F4FBE9",
                  cursor: "pointer",
                  listStyle: "none",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  letterSpacing: "-0.01em",
                  gap: 12,
                }}
              >
                {it.q}
                <span
                  style={{
                    color: "#C7FF6E",
                    fontSize: 22,
                    flexShrink: 0,
                    lineHeight: 1,
                  }}
                >
                  +
                </span>
              </summary>
              <div
                style={{
                  color: "#C9D6C0",
                  fontSize: 14,
                  lineHeight: 1.65,
                  marginTop: 10,
                }}
              >
                {it.a}
              </div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── EmpresasFinalCTA ─────────────────────────────────────────────────────── */
function EmpresasFinalCTA() {
  const isMobile = useMedia("(max-width: 767px)");
  return (
    <section
      id="cta"
      style={{
        padding: isMobile ? "64px 20px" : "96px 32px",
        background: "linear-gradient(180deg, #123328 0%, #0B201A 100%)",
      }}
    >
      <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <h2
          style={{
            fontFamily: "Bricolage Grotesque",
            fontSize: isMobile ? 44 : 76,
            fontWeight: 800,
            letterSpacing: "-0.045em",
            lineHeight: isMobile ? 1.0 : 0.95,
            margin: 0,
            color: "#F4FBE9",
          }}
        >
          Sua próxima contratação{" "}
          <span style={{ color: "#C7FF6E" }}>mais simples.</span>
        </h2>
        <p
          style={{
            color: "#C9D6C0",
            fontSize: isMobile ? 16 : 19,
            lineHeight: 1.5,
            marginTop: 16,
          }}
        >
          Cadastre-se, ganhe 3 créditos e anuncie sua vaga. É grátis e leva uns
          minutinhos.
        </p>
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault();
            window.openCTA("finalcta-empresa");
          }}
          style={{
            marginTop: 32,
            display: "inline-flex",
            alignItems: "center",
            gap: 10,
            background: "#C7FF6E",
            color: "#0B201A",
            padding: isMobile ? "18px 32px" : "20px 36px",
            borderRadius: 999,
            fontWeight: 700,
            fontSize: isMobile ? 16 : 18,
            textDecoration: "none",
            boxShadow:
              "0 0 0 6px rgba(199,255,110,0.16), 0 16px 48px rgba(199,255,110,0.28)",
            cursor: "pointer",
          }}
        >
          💬 Anunciar vaga no WhatsApp
        </a>
        {!isMobile && (
          <div style={{ marginTop: 20, color: "#8FA597", fontSize: 13 }}>
            Procurando uma vaga?{" "}
            <a
              href="index.html"
              style={{
                color: "#C7FF6E",
                textDecoration: "none",
                fontWeight: 600,
              }}
            >
              Veja como funciona para candidatos →
            </a>
          </div>
        )}
      </div>
    </section>
  );
}

/* ─── EmpresasFooter ───────────────────────────────────────────────────────── */
function EmpresasFooter() {
  const isMobile = useMedia("(max-width: 767px)");
  return (
    <footer
      style={{
        padding: isMobile ? "36px 20px" : "48px 32px",
        background: "#0B201A",
        borderTop: "1px solid rgba(244,251,233,0.05)",
      }}
    >
      <div
        style={{
          maxWidth: 1200,
          margin: "0 auto",
          display: "flex",
          flexWrap: "wrap",
          gap: isMobile ? 20 : 24,
          alignItems: "center",
          justifyContent: isMobile ? "center" : "space-between",
          textAlign: isMobile ? "center" : "left",
        }}
      >
        <img
          src="assets/vaguinho-logo.png"
          alt="Vaguinho"
          style={{ height: 22 }}
        />
        <div
          style={{
            display: "flex",
            gap: 24,
            flexWrap: "wrap",
            justifyContent: "center",
          }}
        >
          <a
            href="index.html"
            style={{ color: "#8FA597", fontSize: 13, textDecoration: "none" }}
          >
            Para candidatos
          </a>
          <a
            href="termos-de-uso.html"
            style={{ color: "#8FA597", fontSize: 13, textDecoration: "none" }}
          >
            Termos de Uso
          </a>
          <a
            href="politica-de-privacidade.html"
            style={{ color: "#8FA597", fontSize: 13, textDecoration: "none" }}
          >
            Privacidade
          </a>
        </div>
        <div style={{ color: "#5C7268", fontSize: 12 }}>
          © Vaguinho - Empregos · Alobots 🇧🇷
        </div>
      </div>
    </footer>
  );
}

window.EmpresasLaunchBanner = EmpresasLaunchBanner;
window.EmpresasHero = EmpresasHero;
window.EmpresasHowItWorks = EmpresasHowItWorks;
window.EmpresasMatch = EmpresasMatch;
window.EmpresasWhyItWorks = EmpresasWhyItWorks;
window.EmpresasComparison = EmpresasComparison;
window.EmpresasPricing = EmpresasPricing;
window.EmpresasFAQ = EmpresasFAQ;
window.EmpresasFinalCTA = EmpresasFinalCTA;
window.EmpresasFooter = EmpresasFooter;
