// Cas clients — avant / après — responsive
function Cases() {
  const cases = [
    {
      tag: 'Cabinet de recrutement · 28 collab.',
      title: 'Sourcing candidats : 4 jours → 6 heures',
      before: {
        chips: ['LinkedIn manuel', 'Tableurs partagés', 'Relances oubliées', 'CV éparpillés'],
        text: 'Les chargés de recherche jonglaient entre 7 onglets, un Notion, un drive et un CRM. La moitié des candidats qualifiés finissaient enterrés.',
      },
      after: {
        chips: ['Agent de sourcing', 'Scoring auto', 'Relances séquencées', 'Pipeline unifié'],
        text: 'Un agent IA qualifie, score et relance. Les chargés de recherche valident, échangent — ils ne saisissent plus jamais une fiche.',
      },
      kpis: [['×7', 'vitesse de sourcing'], ['+34%', 'taux de placement'], ['0', 'ressaisie manuelle']],
    },
    {
      tag: 'Cabinet d\'avocats · 12 collab.',
      title: 'Veille juridique : de 8h/sem à temps réel',
      before: {
        chips: ['Newsletters PDF', 'Veille Google', 'Notes éparses', 'Synthèses tardives'],
        text: 'Chaque associé maintenait sa propre veille. Les notes circulaient mal, les opportunités clients se perdaient entre deux lundis matins.',
      },
      after: {
        chips: ['Watcher IA dédié', 'Synthèse quotidienne', 'Alertes par dossier', 'Base unifiée'],
        text: 'Un agent surveille 40+ sources, synthétise, et notifie le bon associé sur le bon dossier. La veille devient un actif partagé, pas une corvée.',
      },
      kpis: [['—85%', 'temps de veille'], ['+22', 'leads détectés/mois'], ['100%', 'sources couvertes']],
    },
    {
      tag: 'PME industrielle · 60 collab.',
      title: 'Devis & relances : opérations remises à plat',
      before: {
        chips: ['Excel + email', 'Relances aléatoires', 'Stock incohérent', 'ERP isolé'],
        text: 'Le commerce vivait dans Outlook, la prod dans l\'ERP, la compta dans un troisième monde. Chaque devis prenait 3 allers-retours.',
      },
      after: {
        chips: ['Devis automatisé', 'ERP ↔ CRM sync', 'Relances intelligentes', 'Tableau de bord live'],
        text: 'Une chaîne d\'automatisations lie ERP, CRM et email. Les devis sortent en quelques minutes, les relances partent toutes seules au bon moment.',
      },
      kpis: [['×3', 'devis émis/jour'], ['+18%', 'taux de transfo'], ['—12 j', 'cycle moyen']],
    },
  ];

  return (
    <section id="cases" className="section">
      <div className="container">
        <div className="reveal" style={{ marginBottom: 100, maxWidth: 720 }}>
          <span className="eyebrow" style={{ marginBottom: 24, display: 'inline-flex' }}>Cas clients</span>
          <h2 style={{ marginTop: 24 }}>
            Avant Gaussia, <span className="serif" style={{ color: 'var(--accent)' }}>après</span> Gaussia.
          </h2>
          <p style={{ marginTop: 24, fontSize: 17 }}>
            Trois exemples concrets de ce que ça change, mesuré là où ça compte vraiment : le temps des équipes et la qualité des décisions.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          {cases.map((c, i) => <CaseRow key={i} item={c} />)}
        </div>
      </div>
    </section>
  );
}

function CaseRow({ item }) {
  const { isMobile, isTablet } = useResponsive();
  return (
    <div className="reveal" style={{
      border: '1px solid var(--line-strong)',
      borderRadius: isMobile ? 14 : 20,
      padding: isMobile ? 20 : isTablet ? 28 : 40,
      background: 'var(--bg-elev)',
      boxShadow: '0 1px 0 var(--line), 0 12px 40px rgba(20,16,14,0.04)',
    }}>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'baseline',
        marginBottom: isMobile ? 16 : 28,
        gap: 20,
        flexWrap: 'wrap',
      }}>
        <div>
          <div className="ticker" style={{ marginBottom: 12, textTransform: 'uppercase', letterSpacing: '0.12em' }}>{item.tag}</div>
          <h3 style={{
            fontSize: isMobile ? 24 : isTablet ? 28 : 36,
            fontWeight: 300,
            maxWidth: 760,
          }}>{item.title}</h3>
        </div>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isTablet ? '1fr' : '1fr auto 1fr',
        gap: isTablet ? 16 : 28,
        alignItems: 'stretch',
        marginTop: isMobile ? 20 : 32,
      }}>
        <BeforeAfterPanel kind="before" data={item.before} />
        {!isTablet && <Connector />}
        <BeforeAfterPanel kind="after" data={item.after} />
      </div>

      {/* KPIs */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        marginTop: isMobile ? 20 : 32,
        borderTop: '1px solid var(--line)',
        paddingTop: isMobile ? 20 : 28,
        gap: isMobile ? 16 : 0,
      }}>
        {item.kpis.map(([big, small], i) => (
          <div key={i} style={{
            borderLeft: !isMobile && i > 0 ? '1px solid var(--line)' : 'none',
            borderTop: isMobile && i > 0 ? '1px solid var(--line)' : 'none',
            paddingLeft: !isMobile && i > 0 ? 24 : 0,
            paddingTop: isMobile && i > 0 ? 16 : 0,
          }}>
            <div style={{
              fontFamily: 'var(--serif)', fontStyle: 'italic',
              fontSize: isMobile ? 36 : 44,
              color: 'var(--accent)', lineHeight: 1,
            }}>{big}</div>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 11,
              color: 'var(--text-faint)', textTransform: 'uppercase',
              letterSpacing: '0.12em', marginTop: 8,
            }}>{small}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function BeforeAfterPanel({ kind, data }) {
  const { isMobile } = useResponsive();
  const isAfter = kind === 'after';
  return (
    <div style={{
      padding: isMobile ? 20 : 28,
      borderRadius: 14,
      border: `1px solid ${isAfter ? 'var(--accent-soft)' : 'var(--line)'}`,
      background: isAfter ? 'linear-gradient(180deg, var(--accent-soft), transparent)' : 'var(--bg-card)',
      position: 'relative',
    }}>
      <div style={{
        fontFamily: 'var(--mono)',
        fontSize: 10,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        color: isAfter ? 'var(--accent)' : 'var(--text-faint)',
        marginBottom: isMobile ? 12 : 18,
        display: 'flex',
        alignItems: 'center',
        gap: 8,
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 50,
          background: isAfter ? 'var(--accent)' : 'var(--text-faint)',
          boxShadow: isAfter ? '0 0 10px var(--accent-glow)' : 'none',
        }} />
        {isAfter ? 'Après' : 'Avant'}
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: isMobile ? 14 : 20 }}>
        {data.chips.map(c => (
          <span key={c} style={{
            fontSize: isMobile ? 11 : 12,
            padding: '5px 10px',
            borderRadius: 999,
            background: isAfter ? 'var(--accent-soft)' : 'var(--chip-neutral-bg)',
            border: `1px solid ${isAfter ? 'var(--accent-glow)' : 'var(--line)'}`,
            color: isAfter ? 'var(--accent)' : 'var(--text-dim)',
          }}>{c}</span>
        ))}
      </div>
      <p style={{ fontSize: isMobile ? 13.5 : 14.5, color: isAfter ? 'var(--text)' : 'var(--text-dim)' }}>{data.text}</p>
    </div>
  );
}

function Connector() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minWidth: 40 }}>
      <svg width="24" height="60" viewBox="0 0 24 60" fill="none">
        <path d="M0 30 H22 M16 24 L22 30 L16 36" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

Object.assign(window, { Cases });