function Precios() {
  const rows = [
    { label: "Plataforma", a: "1 agente", b: "5 agentes", c: "5 agentes" },
    { label: "Créditos mensuales", a: "1,000 – 1,800", b: "5,500", c: "Sin límite" },
    { label: "Setup", a: "Incluido", b: "$499 una vez", c: "Incluido" },
    { label: "Equipo dedicado", a: "—", b: "—", c: "✓" },
    { label: "Estrategia", a: "Auto", b: "Auto", c: "Humana + IA" },
    { label: "Gestión de pauta", a: "—", b: "Limitada", c: "Activa" },
    { label: "Account Manager", a: "—", b: "—", c: "Dedicado" },
    { label: "Soporte", a: "Tickets", b: "Chat prioritario", c: "WhatsApp directo" },
    { label: "Garantía de ROI", a: "—", b: "—", c: "90 días" },
    { label: "Permanencia mínima", a: "—", b: "—", c: "—" },
  ];
  return (
    <section className="shell" id="precios">
      <SectionLabel num="12 / Inversión" label="Precios — sin esconder nada" right="USD / mes" />

      <div className="precios-intro">
        <h2 className="h-section" style={{ maxWidth: "16ch" }}>
          Precios <span className="italic" style={{ color: "var(--accent)" }}>visibles.</span>
          <br />Como debe ser.
        </h2>
        <p className="lede">
          El cliente que queremos odia "consultar precio". Mostramos desde dónde
          arranca cada camino para que solo nos contacte quien ya califica.
        </p>
      </div>

      <div className="pricing-table">
        <div className="pricing-row head">
          <div>&nbsp;</div>
          <div>Módulo</div>
          <div className="featured">Suite Tessa</div>
          <div>Agencia</div>
        </div>
        <div className="pricing-row price-row">
          <div className="label-cell">Desde</div>
          <div>$179<span className="unit">/mes</span></div>
          <div>$699<span className="unit">/mes</span></div>
          <div>$2,500<span className="unit">/mes</span></div>
        </div>
        {rows.map((r) => (
          <div key={r.label} className="pricing-row">
            <div className="label-cell">{r.label}</div>
            <div>{r.a === "✓" ? <Check /> : r.a === "—" ? <span className="dash">—</span> : r.a}</div>
            <div>{r.b === "✓" ? <Check /> : r.b === "—" ? <span className="dash">—</span> : r.b}</div>
            <div>{r.c === "✓" ? <Check /> : r.c === "—" ? <span className="dash">—</span> : r.c}</div>
          </div>
        ))}
        <div className="pricing-row cta-row">
          <div>&nbsp;</div>
          <div><a href="#modulos" className="btn btn-ghost" style={{ width: "100%", justifyContent: "center" }}>Empezar</a></div>
          <div><a href="#cta" className="btn btn-accent" style={{ width: "100%", justifyContent: "center" }}>Ver Suite</a></div>
          <div><a href="https://agencia.teamsolutionss.com/book/team/teamsolutions-agencia-evaluacion" target="_blank" rel="noopener" className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>Hablar</a></div>
        </div>
      </div>

      <div className="pricing-mobile-fallback">
        <p>
          La tabla de comparación detallada está disponible en escritorio.
          <br />
          En el celular puedes ver los 3 caminos con sus precios y diferencias.
        </p>
        <a href="#caminos" className="btn btn-primary" style={{ marginTop: 16 }}>
          Ver los 3 caminos <Arrow />
        </a>
      </div>
    </section>
  );
}

window.Precios = Precios;