function Industria() {
  const industrias = [
    "E-commerce",
    "Retail / tiendas físicas",
    "Tienda de abarrotes",
    "Restaurantes / food",
    "Salud y bienestar",
    "Servicios profesionales",
    "Inmobiliaria",
    "Educación",
    "B2B / SaaS",
    "Turismo / viajes",
  ];

  const casos = [
    {
      sector: "Retail · tienda de barrio",
      pull: "+38% en ventas mensuales",
      copy: "Una abarrotería en Panamá Oeste sumó WhatsApp con Tessa para reactivar clientes inactivos. Cada lunes Tessa manda promos según historial — sin que el dueño tenga que abrir la app.",
    },
    {
      sector: "Servicios profesionales",
      pull: "CPL bajó 41%",
      copy: "Una clínica dental triplicó leads calificados en 6 semanas con Tessa Ads + Tessa CRM. El equipo solo agenda — la calificación, el follow-up y la nutrición van en automático.",
    },
  ];

  return (
    <section className="shell industria-section" id="industrias">
      <SectionLabel num="04 / Industrias" label="Funciona en tu negocio" right="No hay caso especial" />

      <div className="industria-grid">
        <div>
          <h2 className="h-section" style={{ maxWidth: "14ch", marginBottom: 24 }}>
            Si tienes clientes y pauta,
            <br />
            <span className="italic" style={{ color: "var(--accent)" }}>Tessa funciona.</span>
          </h2>
          <p className="lede" style={{ maxWidth: "44ch" }}>
            No importa si vendes empanadas, software o consultas médicas. Tessa adapta buyer
            personas, canales y benchmarks a tu sector — desde el día uno.
          </p>

          <div className="industria-chips">
            {industrias.map((i) => (
              <span key={i} className="industria-chip">{i}</span>
            ))}
          </div>
        </div>

        <div className="industria-casos">
          {casos.map((c, idx) => (
            <article key={idx} className="industria-caso">
              <div className="industria-caso-meta">
                <span className="eyebrow" style={{ borderTop: 0 }}>{c.sector}</span>
                <span className="industria-caso-pull">{c.pull}</span>
              </div>
              <p>{c.copy}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Industria = Industria;