// Services — 4 pillars
const Services = () => {
  const svcs = [
    {
      num: '01',
      title: 'Interconnexion des outils',
      desc: 'Vos CRM, tableurs, courriels, ERP et SaaS enfin parlent la même langue. Zéro saisie double, zéro export/import manuel.',
      bullets: ['API & webhooks', 'Sync bidirectionnelle', 'Gestion des erreurs']
    },
    {
      num: '02',
      title: 'Automatisation des workflows',
      desc: 'Des processus métiers déclenchés par un courriel, un formulaire, une commande. Ils tournent 24/7, sans vous.',
      bullets: ['Règles d\'affaires sur mesure', 'Notifications intelligentes', 'Journal d\'exécution']
    },
    {
      num: '03',
      title: 'Assistants IA métier',
      desc: 'Des agents spécialisés entraînés sur vos documents, vos produits, votre ton. Ils répondent, trient, résument.',
      bullets: ['Recherche dans vos documents', 'Intégration Slack/Teams', 'Garde-fous définis']
    },
    {
      num: '04',
      title: 'Dashboards & reporting',
      desc: 'Une vue unifiée de vos KPI, branchée en direct sur vos sources. Plus de présentations assemblées à la main le dimanche soir.',
      bullets: ['Temps réel', 'Alertes automatiques', 'Export PDF automatique']
    }
  ];

  return (
    <section id="services" className="section">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginBottom: 72, alignItems: 'end' }} className="sec-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Nos services</div>
            <h2 className="h-section">
              Quatre leviers,<br/>
              une même philosophie :<br/>
              <span className="serif" style={{ color: 'var(--cyan)' }}>l'humain arbitre, la machine exécute.</span>
            </h2>
          </div>
          <div style={{ color: 'var(--fg-dim)', fontSize: 16, lineHeight: 1.6, maxWidth: 440 }}>
            Nous n'automatisons pas pour automatiser. Chaque chantier démarre par
            une cartographie de votre quotidien : on identifie les points de friction,
            on chiffre le temps perdu, puis on propose la solution la plus simple
            qui les fait disparaître.
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} className="svc-grid">
          {svcs.map(s => (
            <article key={s.num} className="svc reveal">
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <span className="svc-num">— {s.num}</span>
                <span className="svc-num">/ service</span>
              </div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <ul className="svc-list">
                {s.bullets.map(b => <li key={b}>{b}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .sec-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .svc-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Services });