const PROBLEMS = [
  {
    num: "01",
    text: <>Perdés ventas por <em>no contestar a tiempo.</em></>,
    foot: "El 62% de las consultas fuera de horario nunca reciben respuesta.",
  },
  {
    num: "02",
    text: <>Tu equipo gasta horas en <em>tareas repetitivas.</em></>,
    foot: "Cotizaciones, agendamientos, seguimiento de pagos, respuestas del mismo FAQ.",
  },
  {
    num: "03",
    text: <>Tus procesos viven en <em>cabezas y planillas.</em></>,
    foot: "Si se va la persona clave, se va la información.",
  },
];

function Problem() {
  return (
    <section className="problem">
      <div className="container">
        <span className="eyebrow" style={{color:"color-mix(in oklch, var(--bone) 70%, transparent)"}}>Por qué estás acá</span>
        <p className="problem-head">
          Tres cosas que probablemente te están pasando <em>ahora mismo</em> — y cuestan más plata de la que parece.
        </p>
        <div className="problem-grid">
          {PROBLEMS.map((p) => (
            <div key={p.num} className="problem-cell">
              <div className="problem-num">{p.num}</div>
              <div className="problem-text">{p.text}</div>
              <div className="problem-foot">{p.foot}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Problem });