// Trusted-by logo marquee — we use name badges (original, no brand marks)
const LogoStrip = () => {
  const items = [
    'HubSpot', 'Zapier', 'Make', 'Airtable', 'Notion', 'Slack', 'Stripe',
    'Shopify', 'Google Workspace', 'Microsoft 365', 'Supabase', 'OpenAI',
    'n8n', 'Twilio', 'QuickBooks'
  ];
  const row = [...items, ...items]; // duplicate for marquee

  return (
    <section style={{ padding: '60px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', overflow: 'hidden', position: 'relative' }}>
      <div className="wrap" style={{ marginBottom: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 16 }}>
        <div className="mono">// Stack interconnectée par nos workflows</div>
        <div className="mono" style={{ color: 'var(--fg-mute)' }}>+ connecteurs personnalisés via API</div>
      </div>
      <div style={{ position: 'relative', maskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)', WebkitMaskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)' }}>
        <div className="marquee">
          {row.map((n, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 8px' }}>
              <span style={{ width: 6, height: 6, borderRadius: 50, background: 'var(--cyan)', opacity: 0.5 }}></span>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 22, fontWeight: 500, color: 'var(--fg-dim)', letterSpacing: '-0.01em' }}>{n}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { LogoStrip });