function Problem() {
  const items = [
    {
      tag: "01",
      quote: "Pago $X en ads cada mes pero no sé cuáles me traen ventas reales.",
      meta: "Atribución difusa",
    },
    {
      tag: "02",
      quote: "Mi agencia me manda reportes bonitos pero no sé si están funcionando.",
      meta: "Reportería decorativa",
    },
    {
      tag: "03",
      quote: "Quiero escalar pero cada vez que subo presupuesto, el ROI baja.",
      meta: "Techo de eficiencia",
    },
  ];
  return (
    <section className="shell" id="problema">
      <SectionLabel num="01 / Diagnóstico" label="¿Te suena familiar?" right="Tres síntomas" />
      <h2 className="h-section" style={{ maxWidth: "16ch", marginBottom: 16 }}>
        El marketing digital no <span className="italic" style={{ color: "var(--ink-dim)" }}>se rompió</span>.
        Se volvió <span className="italic" style={{ color: "var(--accent)" }}>opaco</span>.
      </h2>

      <div className="problem-grid">
        {items.map((it) => (
          <div key={it.tag} className="problem-card">
            <span className="problem-tag">{it.tag}</span>
            <p className="quote">"{it.quote}"</p>
            <span className="meta">— {it.meta}</span>
          </div>
        ))}
      </div>

      <p className="problem-closer">
        Si te identificas con dos o más, esta página es para ti.
      </p>
    </section>
  );
}

window.Problem = Problem;