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

const ABOUT_FEATURES = [
  { ico: "git-fork", tint: "var(--tint-blue)", accent: "var(--accent-blue)", t: "Operator-led", d: "Experiencia operativa real en compañías de alto crecimiento" },
  { ico: "trending-up", tint: "var(--tint-mint)", accent: "var(--accent-green)", t: "Execution-first", d: "No solo estrategia. Implementación real y transformación operativa" },
  { ico: "target", tint: "var(--tint-purple)", accent: "var(--accent-purple)", t: "Visión integral", d: "Operaciones, marketing, equipos y expansión trabajando juntos" },
  { ico: "user-round-plus", tint: "var(--tint-peach)", accent: "var(--accent-orange)", t: "Founder-level", d: "Trabajamos cerca del founder para transformar el negocio" },
];

function About() {
  return (
    <section className="sl-sec" id="about">
      <div className="sl-wrap">
        <SectionHeader
          eyebrow="Sobre Nosotros"
          title={<span>¿Qué es<br />Summit Lab?</span>}
          lead="Somos el partner operativo que convierte el caos del crecimiento en sistemas escalables. Trabajamos codo a codo con founders y empresas que necesitan estructura, velocidad y método para crecer." />
        <div className="sl-feat-grid">
          {ABOUT_FEATURES.map((f, i) => (
            <div className="sl-feat" key={i} style={{ background: f.tint }}>
              <div className="sl-feat-ico"><Icon name={f.ico} size={30} style={{ color: f.accent }} /></div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
          ))}
        </div>
        <div className="sl-quote">
          "La mayoría de las empresas no fracasa por falta de ideas. Fracasa porque el crecimiento genera complejidad y cuellos de botella que frenan la ejecución. <span className="mint">Summit Lab existe para resolver ese problema."</span>
        </div>
      </div>
    </section>
  );
}
window.About = About;