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

const SERVICES = [
  { ico: "network", tint: "var(--tint-blue)", accent: "var(--accent-blue)", t: "Business Design", sub: "Construimos empresas diseñadas para crecer",
    d: "Ordenamos estructura, procesos y organización. Arquitectura organizacional, diseño operativo, estructura de equipos, procesos internos y sistemas de gestión.",
    ideal: "Proyectos sin ejecutar o empresas sin estructura operativa" },
  { ico: "trending-up", tint: "var(--tint-mint)", accent: "var(--accent-green)", t: "Scale & Growth", sub: "Escalamos lo que ya funciona",
    d: "Transformamos modelos funcionales en operaciones escalables. Expansión, crecimiento regional, replicabilidad, nuevas unidades de negocio y revenue optimization.",
    ideal: "Empresas con modelo probado listas para expandirse" },
  { ico: "list-checks", tint: "var(--tint-purple)", accent: "var(--accent-purple)", t: "Project Execution", sub: "Ejecutamos proyectos complejos con método",
    d: "Coordinamos timelines, recursos, equipos, proveedores y operaciones en tiempo real. Velocidad, flexibilidad y foco en ejecución.",
    ideal: "Empresas con desafíos de ejecución o transformación" },
  { ico: "star", tint: "var(--tint-peach)", accent: "var(--accent-orange)", t: "Brand & Marketing", sub: "Construimos marcas que generan pertenencia",
    d: "Desarrollamos posicionamiento, narrativa, identidad y experiencias. Branding con visión comercial y operacional.",
    ideal: "Marcas en crecimiento o con lanzamientos estratégicos" },
];

function Services() {
  return (
    <section className="sl-sec sl-sec--gray" id="services">
      <div className="sl-wrap">
        <SectionHeader
          eyebrow="Áreas de Intervención"
          title={<span>Qué<br />Hacemos</span>}
          lead="Trabajamos colaborativamente desde la operación para estudiar oportunidades de mejora, diseñar estrategias y ejecutar soluciones. Un solo enfoque: hacer que las cosas sucedan y medir los resultados."
          bar={false} />
        <div className="sl-serv-grid">
          {SERVICES.map((s, i) => (
            <div className="sl-serv" key={i} style={{ background: s.tint }}>
              <div className="sl-serv-ico"><Icon name={s.ico} size={34} style={{ color: s.accent }} /></div>
              <h3>{s.t}</h3>
              <div className="sl-serv-sub">{s.sub}</div>
              <p>{s.d}</p>
              <div className="sl-serv-hr" />
              <div className="sl-serv-lab">Cliente ideal</div>
              <div className="sl-serv-ideal">{s.ideal}</div>
            </div>
          ))}
        </div>
        <div className="sl-quote">
          Los negocios reales no tienen problemas de un solo tipo. Por eso Summit trabaja de forma integral — <span className="mint">porque las fricciones más importantes están en las conexiones entre áreas.</span>
        </div>
      </div>
    </section>
  );
}
window.Services = Services;