/* global React */
const { SectionHeader } = window.UI;

const STATS = [
  { num: "+100", t: "Proyectos ejecutados", d: "Festivales, marketplaces, espacios físicos y más. Experiencia real en operaciones diversas y complejas.", dark: true },
  { num: "15", t: "Años de experiencia", d: "Más de una década construyendo y escalando negocios en industrias de alta presión y ritmo acelerado.", dark: false },
  { num: "100%", t: "Foco en implementación", d: "No entregamos recomendaciones. Acompañamos hasta que los cambios funcionen en la operación real.", dark: true },
  { num: "360°", t: "Mirada integral", d: "Operaciones, estrategia, equipos y tecnología trabajando en conjunto con foco en resultados medibles.", dark: false },
];

function Why() {
  return (
    <section className="sl-sec sl-sec--gray" id="why">
      <div className="sl-wrap">
        <SectionHeader
          eyebrow="Diferencial"
          title={<span>¿Por qué<br />Summit Lab?</span>}
          lead="Porque no alcanza con un buen diagnóstico. Se necesita experiencia, cercanía y capacidad de implementación para que la mejora suceda en la operación real."
          bar={false} />
        <div className="sl-stats">
          {STATS.map((s, i) => (
            <div className={"sl-stat " + (s.dark ? "dark" : "light")} key={i}>
              <div className="sl-stat-num">{s.num}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Why = Why;