function Herramientas() {
  const tools = [
    {
      kind: "diagnostico",
      eyebrow: "★ Lead magnet",
      title: "Diagnóstico de Inbound",
      desc: "Conoce tu madurez digital con un assessment guiado por IA. 5 minutos, sin compromiso.",
      meta: "5 minutos · Resultado inmediato",
      cta: "Hacer diagnóstico",
      href: "https://agencia.teamsolutionss.com/diagnostico-inbound",
      external: true,
      featured: true,
    },
    {
      kind: "simulador",
      eyebrow: "◆ IP propietaria",
      title: "Simulador Tessa",
      desc: "Pre-valida tus creativos con personas sintéticas antes de gastar un solo dólar de pauta.",
      meta: "Threshold 70% · Powered by Tessa Engine",
      cta: "Probar simulador",
      href: "/simulador",
      featured: true,
    },
    {
      kind: "roi",
      eyebrow: "Calculadora",
      title: "Calculadora de ROI",
      desc: "Mide el retorno real de tus campañas y compara con el promedio de tu industria.",
      meta: "Análisis con IA incluido",
      cta: "Calcular ROI",
      href: "/blog/calculadora-de-roi-en-publicidad-digital",
    },
    {
      kind: "cpa",
      eyebrow: "Calculadora",
      title: "Comparador de CPA",
      desc: "Compara tu coste por adquisición contra el promedio del sector y descubre dónde optimizar.",
      meta: "Benchmarks por industria",
      cta: "Comparar CPA",
      href: "/blog/compara-tu-coste-por-adquisicion-con-el-promedio-del-sector",
    },
    {
      kind: "presupuesto",
      eyebrow: "Calculadora",
      title: "Calculadora de presupuesto",
      desc: "Cuánto deberías invertir en marketing digital según tu industria, objetivo y tamaño.",
      meta: "Distribución por canal recomendada",
      cta: "Calcular presupuesto",
      href: "/blog/calculadora-de-presupuesto-para-campanas-de-marketing-digital",
    },
  ];

  return (
    <section className="shell herramientas-section" id="herramientas">
      <SectionLabel num="13 / Recursos" label="Herramientas gratis" right="Sin registro · Sin tarjeta" />

      <div className="herramientas-intro">
        <h2 className="h-section" style={{ maxWidth: "16ch", marginBottom: 24 }}>
          Pruébanos sin pagar.
          <br />
          <span className="italic" style={{ color: "var(--accent)" }}>Empieza por una.</span>
        </h2>
        <p className="lede" style={{ maxWidth: "52ch" }}>
          Todas son gratuitas y nacen del mismo cerebro que opera nuestras campañas reales. Si te
          gustan, hablamos. Si no, te las llevas igual.
        </p>
      </div>

      <div className="herramientas-grid">
        {tools.map((t) => {
          const linkProps = t.external ? { target: "_blank", rel: "noopener" } : {};
          return (
            <article key={t.kind} className={`herramienta ${t.featured ? "is-featured" : ""}`}>
              <div className="herramienta-eyebrow">{t.eyebrow}</div>
              <h3 className="herramienta-title">{t.title}</h3>
              <p className="herramienta-desc">{t.desc}</p>
              <div className="herramienta-meta">{t.meta}</div>
              <a
                href={t.href}
                {...linkProps}
                className={`btn ${t.featured ? "btn-primary" : "btn-ghost"}`}
                style={{ marginTop: "auto", justifyContent: "center" }}
              >
                {t.cta} <Arrow />
              </a>
            </article>
          );
        })}
      </div>
    </section>
  );
}

window.Herramientas = Herramientas;