// Client logos marquee — responsive
function ClientLogos() {
  const { isMobile, isTablet } = useResponsive();
  // Made-up but believable French startup/PME-style names
  const clients = [
    'Lumen', 'Kairos', 'Volta', 'Méridien', 'Atlas&Co',
    'Florent Studio', 'Norbé', 'Tessera', 'Pavone', 'Halia', 'Rivage', 'Nordsens',
  ];
  const row = [...clients, ...clients];
  return (
    <section style={{
      padding: isMobile ? '40px 0' : isTablet ? '60px 0' : '80px 0',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="container" style={{
        display: 'flex',
        alignItems: 'center',
        gap: isMobile ? 20 : 40,
        flexDirection: isMobile ? 'column' : 'row',
      }}>
        <div style={{
          flex: '0 0 auto',
          fontFamily: 'var(--mono)',
          fontSize: isMobile ? 10 : 11,
          color: 'var(--text-faint)',
          textTransform: 'uppercase',
          letterSpacing: '0.15em',
          maxWidth: 160,
          lineHeight: 1.5,
          textAlign: isMobile ? 'center' : 'left',
        }}>
          Ils nous ont confié<br/>leurs opérations
        </div>
        <div style={{ flex: 1, overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)', width: isMobile ? '100%' : 'auto' }}>
          <div style={{
            display: 'flex',
            gap: isMobile ? 32 : 56,
            animation: 'marquee 40s linear infinite',
            whiteSpace: 'nowrap',
            width: 'max-content',
          }}>
            {row.map((c, i) => (
              <div key={i} style={{
                fontFamily: 'var(--serif)',
                fontSize: isMobile ? 22 : 30,
                fontStyle: 'italic',
                color: 'var(--text-dim)',
                opacity: 0.7,
                letterSpacing: '-0.02em',
              }}>{c}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// Services — responsive grid
function Services() {
  const { isMobile, isTablet } = useResponsive();
  const items = [
    {
      n: 1,
      title: 'Agents IA sur-mesure',
      desc: 'Des assistants construits sur Claude (Anthropic) et les meilleurs LLMs : un agent qui analyse vos contrats, extrait les clauses clés et rédige une synthèse en langage clair — connecté à votre CRM, formé sur vos données.',
      tags: ['Claude', 'LLM', 'RAG', 'Agents'],
    },
    {
      n: 2,
      title: 'Automatisations workflow',
      desc: 'n8n, Make, Zapier — on remplace vos copier-coller par des chaînes qui tournent toutes seules. Robustes, observables, sans code-spaghetti.',
      tags: ['n8n', 'Make', 'Zapier'],
    },
    {
      n: 3,
      title: 'Intégrations & connecteurs',
      desc: 'Vos CRM, ERP, outils RH et tableurs parlent enfin la même langue. Une donnée saisie une fois, propagée partout, sans copier-coller.',
      tags: ['API', 'Webhooks', 'Sync'],
    },
    {
      n: 4,
      title: 'Formation des équipes',
      desc: 'On ne livre pas une boîte noire. Vos équipes apprennent à piloter, ajuster, et étendre les outils — l\'autonomie comme livrable final.',
      tags: ['Workshops', 'Docs', 'Coaching'],
    },
  ];

  return (
    <section id="services" className="section">
      <div className="container">
        <div className="reveal" style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: isTablet ? 'flex-start' : 'flex-end',
          marginBottom: isMobile ? 40 : isTablet ? 60 : 80,
          gap: isTablet ? 24 : 40,
          flexWrap: 'wrap',
          flexDirection: isTablet ? 'column' : 'row',
        }}>
          <div style={{ maxWidth: 640 }}>
            <span className="eyebrow" style={{ marginBottom: 24, display: 'inline-flex' }}>Services</span>
            <h2 style={{ marginTop: 24 }}>
              Quatre leviers pour transformer<br/>
              le rapport <span className="serif" style={{ color: 'var(--accent)' }}>de vos équipes</span> à l'IA.
            </h2>
          </div>
          <p style={{ maxWidth: 360, fontSize: isMobile ? 15 : 16 }}>
            Chaque mission combine librement ces leviers. On commence par auditer ce qui pèse le plus, on déploie, on mesure.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isTablet ? '1fr' : 'repeat(2, 1fr)',
          gap: 0,
          border: '1px solid var(--line)',
          borderRadius: 16,
          overflow: 'hidden',
          background: 'var(--bg-elev)',
          boxShadow: '0 1px 0 var(--line)',
        }}>
          {items.map((s, i) => (
            <ServiceCard key={s.n} item={s} index={i} isTablet={isTablet} isMobile={isMobile} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ item, index, isTablet, isMobile }) {
  const [hover, setHover] = useState(false);
  const isRight = !isTablet && index % 2 === 1;
  const isBottom = isTablet ? index > 0 : index >= 2;
  return (
    <div
      className="reveal"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: isMobile ? '32px 24px' : isTablet ? '40px 32px' : '48px 44px',
        borderLeft: isRight ? '1px solid var(--line)' : 'none',
        borderTop: isBottom ? '1px solid var(--line)' : 'none',
        position: 'relative',
        minHeight: isMobile ? 240 : 320,
        display: 'flex',
        flexDirection: 'column',
        background: hover ? 'var(--hover-tint)' : 'transparent',
        transition: 'background 0.4s ease',
      }}>
      {/* corner accent */}
      <div style={{
        position: 'absolute',
        top: 24, right: 24,
        width: 6, height: 6,
        borderRadius: 50,
        background: hover ? 'var(--accent)' : 'var(--text-faint)',
        boxShadow: hover ? '0 0 14px var(--accent-glow)' : 'none',
        transition: 'all 0.3s',
      }} />

      <StepNum n={item.n} />
      <h3 style={{ marginTop: 18, marginBottom: 16, fontSize: isMobile ? 26 : 32 }}>
        {item.title}
      </h3>
      <p style={{ flex: 1, fontSize: isMobile ? 14 : 15, maxWidth: 460 }}>{item.desc}</p>
      <div style={{ display: 'flex', gap: 8, marginTop: isMobile ? 20 : 28, flexWrap: 'wrap' }}>
        {item.tags.map(t => (
          <span key={t} style={{
            fontFamily: 'var(--mono)',
            fontSize: 10,
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            color: 'var(--text-dim)',
            border: '1px solid var(--line-strong)',
            padding: '5px 10px',
            borderRadius: 999,
          }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ClientLogos, Services });