// Activa Soluciones — Services / capability grid
// 6 cards with orange icon circles. Hover lifts + reveals corner accent.

const ServiceIcons = {
  growth:   <svg viewBox="0 0 24 24" width="22" height="22"><path className="li" stroke="white" d="M4 19l5-5 4 4 7-9M14 9h6v6"/></svg>,
  comms:    <svg viewBox="0 0 24 24" width="22" height="22"><path className="li" stroke="white" d="M4 6h16v10H8l-4 4V6z"/></svg>,
  tech:     <svg viewBox="0 0 24 24" width="22" height="22"><path className="li" stroke="white" d="M3 5h18v12H3zM7 21h10M12 17v4"/></svg>,
  bi:       <svg viewBox="0 0 24 24" width="22" height="22"><path className="li" stroke="white" d="M4 20V8m6 12V4m6 16v-7m6 7V11"/></svg>,
  ops:      <svg viewBox="0 0 24 24" width="22" height="22"><path className="li" stroke="white" d="M12 4l8 4v6c0 4-3.6 7.4-8 8-4.4-.6-8-4-8-8V8l8-4z"/></svg>,
  brand:    <svg viewBox="0 0 24 24" width="22" height="22"><path className="li" stroke="white" d="M12 3l2.5 5.5 6 .9-4.4 4.2 1 6L12 16.8 6.9 19.6l1-6L3.5 9.4l6-.9z"/></svg>,
};

const services = [
  {
    icon: 'growth',
    title: 'Transformación comercial',
    body: 'Rediseñamos tu funnel completo — de demand-gen al cierre — con métricas auditables semana a semana.',
    bullets: ['Diagnóstico de pipeline', 'Diseño de oferta', 'Sales enablement'],
  },
  {
    icon: 'brand',
    title: 'Marketing estratégico',
    body: 'Posicionamiento, brand architecture y planes de comunicación que mueven cuota de mercado, no impresiones.',
    bullets: ['Brand & posicionamiento', 'Estrategia de medios', 'Performance integrado'],
  },
  {
    icon: 'tech',
    title: 'Tecnología comercial',
    body: 'Stacks CRM, MarTech y RevOps implementados con un equipo que conoce tu industria y tus números.',
    bullets: ['CRM (HubSpot · Salesforce)', 'RevOps & automatización', 'Integraciones a ERP'],
  },
  {
    icon: 'bi',
    title: 'Business Intelligence',
    body: 'Convertimos data fragmentada en palancas accionables para el comité directivo. Dashboards en 30 días.',
    bullets: ['Modelo de datos', 'Dashboards ejecutivos', 'Sales & marketing analytics'],
  },
  {
    icon: 'ops',
    title: 'Ejecución operativa',
    body: 'Equipo senior operando dentro de tu organización como extensión del directorio. Sin proyectos eternos.',
    bullets: ['Squad in-house', 'Gestión semanal de KPIs', 'Comité quincenal'],
  },
  {
    icon: 'comms',
    title: 'Crecimiento M&A',
    body: 'Acompañamos due-diligence comercial y planes 100-días post-adquisición para integrar y acelerar.',
    bullets: ['Commercial DD', 'Plan 100 días', 'Integración go-to-market'],
  },
];

const Services = () => {
  return (
    <section className="section muted" id="servicios">
      <div className="container">
        <Reveal from="up"><span className="s-eyebrow">Capacidades</span></Reveal>
        <Reveal from="up" delay={80}>
          <h2 className="s-title">Un solo equipo<br/>para las <span className="accent">palancas</span> que mueven tu P&amp;L.</h2>
        </Reveal>
        <Reveal from="up" delay={160}>
          <p className="s-lead">
            Operamos como una extensión de tu equipo directivo. Cada capacidad se conecta a las demás —
            porque el crecimiento no sucede en silos.
          </p>
        </Reveal>
        <div className="svc-grid">
          {services.map((s, idx) => (
            <Reveal key={s.title} from={idx % 2 === 0 ? 'right' : 'left'} delay={(idx % 3) * 90}>
              <article className="card svc">
                <div className="corner-line"></div>
                <div className="icon-circle">{ServiceIcons[s.icon]}</div>
                <h3 className="svc-title">{s.title}</h3>
                <p className="svc-body">{s.body}</p>
                <ul className="svc-bullets">
                  {s.bullets.map((b) => (
                    <li key={b}>
                      <svg width="14" height="14" viewBox="0 0 24 24"><path className="li" stroke="#F39C12" d="M5 12h14M13 6l6 6-6 6"/></svg>
                      {b}
                    </li>
                  ))}
                </ul>
                <a className="svc-more more">Conocer capacidad <span className="arr arrow-rise">→</span></a>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .svc-grid {
          margin-top: 56px;
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
          align-items: stretch;
        }
        .svc-grid > .reveal { display: flex; }
        .svc-grid > .reveal > .card { flex: 1; }
        @media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
        .svc-title {
          font-family: var(--font-display); font-weight: 700;
          font-size: 22px; color: var(--color-fg-1); letter-spacing: -0.015em;
          margin: 22px 0 10px;
        }
        .svc-body {
          font-family: var(--font-body); font-size: 14px; line-height: 1.6;
          color: var(--color-fg-2); margin: 0 0 16px;
        }
        .svc-bullets {
          list-style: none; padding: 0; margin: 0 0 22px;
          display: flex; flex-direction: column; gap: 8px;
        }
        .svc-bullets li {
          display: flex; gap: 10px; align-items: center;
          font-family: var(--font-body); font-size: 13px; color: var(--color-fg-1);
          font-weight: 500;
        }
        .svc-more {
          font-family: var(--font-display); font-weight: 700; font-size: 13px;
          color: var(--activa-blue-700);
          display: inline-flex; align-items: center; gap: 8px;
          cursor: pointer;
          transition: color 220ms var(--ease-rise);
        }
        .card:hover .svc-more { color: var(--color-accent); }
        .card:hover .svc-more .arr { transform: translate(2px, -2px); }
      `}</style>
    </section>
  );
};