function Creditos() {
  const grupos = [
    {
      label: "CRM",
      items: [
        ["Calificar un lead nuevo", "1"],
        ["Generar secuencia de seguimiento", "2"],
        ["Pre-agendar cita conversacional", "1"],
      ],
    },
    {
      label: "Performance / Ads",
      items: [
        ["Generar creativo (copy + imagen)", "5"],
        ["Simular performance de campaña", "3"],
        ["Optimización automática diaria", "2"],
      ],
    },
    {
      label: "Content",
      items: [
        ["Generar copy para post", "1"],
        ["Generar imagen con IA", "4"],
        ["Editar imagen existente", "2"],
      ],
    },
    {
      label: "SEO",
      items: [
        ["Auditoría técnica", "3"],
        ["Generar artículo optimizado", "8"],
        ["Tracking de keyword", "0.5"],
      ],
    },
    {
      label: "HR / Talento",
      items: [
        ["Filtrar candidato", "1"],
        ["Pre-entrevista conversacional", "3"],
        ["Generar shortlist", "5"],
      ],
    },
  ];

  const recargas = [
    ["Pack Boost", "$30", "200", "$0.15"],
    ["Pack Pro", "$70", "500", "$0.14"],
    ["Pack Scale", "$250", "2,000", "$0.125"],
    ["Pack Enterprise", "$500", "4,500", "$0.111"],
  ];

  return (
    <section className="shell creditos-section" id="creditos">
      <SectionLabel num="08 / Consumo" label="Cómo funcionan los créditos" right="Sin sorpresas" />

      <div className="creditos-intro">
        <h2 className="h-section" style={{ maxWidth: "16ch" }}>
          Cada acción de Tessa
          <br />
          <span className="italic" style={{ color: "var(--accent)" }}>consume créditos.</span>
        </h2>
        <p className="lede">
          Tu plan incluye una bolsa mensual que cubre el uso típico de un negocio promedio.
          Si necesitas más, recargas cuando quieras. Sin penalizaciones, sin compromisos largos.
        </p>
      </div>

      <div className="creditos-grid">
        {grupos.map((g) => (
          <article key={g.label} className="creditos-card">
            <div className="creditos-card-head">{g.label}</div>
            <ul>
              {g.items.map(([nombre, costo]) => (
                <li key={nombre}>
                  <span>{nombre}</span>
                  <span className="creditos-cost">
                    {costo}
                    <span className="creditos-unit">{costo === "1" ? "crédito" : "créditos"}</span>
                  </span>
                </li>
              ))}
            </ul>
          </article>
        ))}
      </div>

      <article className="creditos-ejemplo">
        <div className="creditos-ejemplo-head">
          <span className="eyebrow" style={{ borderTop: 0 }}>Ejemplo real</span>
          <span className="creditos-ejemplo-tag">Inmobiliaria · 100 leads / mes</span>
        </div>
        <ul className="creditos-ejemplo-list">
          <li>
            <span>Calificar 100 leads</span>
            <strong>100 créditos</strong>
          </li>
          <li>
            <span>Generar 50 secuencias de seguimiento</span>
            <strong>100 créditos</strong>
          </li>
          <li>
            <span>Pre-agendar 80 citas</span>
            <strong>80 créditos</strong>
          </li>
          <li>
            <span>Generar 30 creativos para campañas</span>
            <strong>150 créditos</strong>
          </li>
          <li className="creditos-ejemplo-total">
            <span>Total mensual</span>
            <strong>430 créditos</strong>
          </li>
        </ul>
        <p className="creditos-ejemplo-foot">
          Con la <span className="italic" style={{ color: "var(--accent)" }}>Suite Tessa</span> de 5,500 créditos,
          tienes ~12× margen sobrado para crecer sin pensar en límites.
        </p>
      </article>

      <div className="creditos-recargas">
        <div className="creditos-recargas-head">
          <h3 className="h-card" style={{ maxWidth: "20ch" }}>
            Si te quedas corto, <span className="italic" style={{ color: "var(--accent)" }}>recargas</span>.
          </h3>
          <p className="lede" style={{ maxWidth: "44ch", fontSize: 15 }}>
            Packs flexibles. Volumen tiene descuento. Las recargas no caducan: se acumulan hasta consumirse.
          </p>
        </div>
        <div className="creditos-recargas-grid">
          {recargas.map(([nombre, precio, creditos, unitario]) => (
            <article key={nombre} className="creditos-recarga">
              <div className="creditos-recarga-name">{nombre}</div>
              <div className="creditos-recarga-price">{precio}</div>
              <div className="creditos-recarga-credits">{creditos} créditos</div>
              <div className="creditos-recarga-unit">{unitario} / crédito</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Creditos = Creditos;