/* global React, Counter */
const { useState: useStE, useEffect: useEffE, useRef: useRefE } = React;

/* ============================================
   1. ROI CALCULATOR — économies + revenus additionnels
   ============================================ */
function ROICalculator() {
  // Pertes opérationnelles
  const [hours, setHours] = useStE(8);
  const [team, setTeam] = useStE(2);
  const [hourlyCost, setHourlyCost] = useStE(38);
  // Acquisition & relance
  const [monthlyRevenue, setMonthlyRevenue] = useStE(15);    // k€/mois
  const [avgDeal, setAvgDeal] = useStE(2);                    // k€ panier moyen
  const [lostQuotes, setLostQuotes] = useStE(5);             // devis non relancés / mois
  const [unpaidRate, setUnpaidRate] = useStE(6);              // % impayés/retards

  // Calculs
  const timeSaved = Math.round(hours * team * 48 * hourlyCost * 0.7);
  const recoveredQuotes = Math.round(lostQuotes * 12 * avgDeal * 1000 * 0.55); // 55% de relance gagnée
  const acquisitionLift = Math.round(monthlyRevenue * 1000 * 12 * 0.12);       // +12% acquisition
  const recoveredUnpaid = Math.round(monthlyRevenue * 1000 * 12 * (unpaidRate / 100) * 0.7); // 70% des impayés récupérés

  const total = timeSaved + recoveredQuotes + acquisitionLift + recoveredUnpaid;

  // Pour stacked bar
  const segments = [
    { label: 'Temps gagné', value: timeSaved, color: 'linear-gradient(90deg, #2F855A, #4FB07A)', solid: '#4FB07A' },
    { label: 'Devis relancés', value: recoveredQuotes, color: 'linear-gradient(90deg, #64746B, #8A9A90)', solid: '#8A9A90' },
    { label: 'Acquisition +', value: acquisitionLift, color: 'linear-gradient(90deg, #2F855A, #4FB07A)', solid: '#2F855A' },
    { label: 'Impayés', value: recoveredUnpaid, color: 'linear-gradient(90deg, #3A4A42, #1E5A3C)', solid: '#1E5A3C' },
  ];

  const fmt = (n) => n.toLocaleString('fr-FR');

  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="orb orb-gold" style={{ width: 500, height: 500, top: 100, right: -100 }} />
      <div className="orb orb-bordeaux" style={{ width: 400, height: 400, bottom: 100, left: -80 }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 60px' }}>
          <div className="eyebrow eyebrow-line reveal" style={{ marginBottom: 20, justifyContent: 'center' }}>Simulateur de gains</div>
          <h2 className="display-lg reveal" data-delay="1" style={{ marginBottom: 20 }}>
            Combien votre entreprise<br/>
            peut <span className="display-italic gold-text">générer en plus</span> ?
          </h2>
          <p className="body-lg reveal" data-delay="2">
            Économies de temps + CA récupéré sur les relances et l'acquisition automatisée.
            Ajustez vos paramètres ci-dessous.
          </p>
        </div>

        <div className="reveal calc-shell" style={{
          maxWidth: 1180, margin: '0 auto',
          background: 'linear-gradient(180deg, rgba(12,18,15,0.92), rgba(10,15,13,0.98))',
          borderRadius: 28,
          border: '1px solid rgba(47,133,90,0.25)',
          boxShadow: '0 40px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(47,133,90,0.05) inset',
          overflow: 'hidden',
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.1fr 1fr',
          }} className="calc-grid">
            {/* LEFT — INPUTS */}
            <div style={{ padding: '44px 48px', borderRight: '1px solid rgba(244,247,245,0.06)' }} className="calc-inputs">
              {/* Group 1 */}
              <div style={{ marginBottom: 36 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
                  <span style={{
                    width: 28, height: 28, borderRadius: 8,
                    background: 'rgba(100,116,107,0.25)',
                    border: '1px solid rgba(100,116,107,0.5)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-display)', fontSize: 13, color: '#A4B3AA', fontWeight: 500,
                  }}>1</span>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--vp-cream)', textTransform: 'uppercase', fontWeight: 500 }}>
                    Pertes opérationnelles
                  </span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                  <Slider label="Heures admin perdues / sem / personne" value={hours} min={1} max={25} suffix=" h" onChange={setHours} />
                  <Slider label="Personnes concernées" value={team} min={1} max={20} suffix="" onChange={setTeam} />
                  <Slider label="Coût horaire chargé moyen" value={hourlyCost} min={20} max={90} suffix=" €" onChange={setHourlyCost} />
                </div>
              </div>

              <div style={{ height: 1, background: 'rgba(47,133,90,0.15)', margin: '32px -48px' }} />

              {/* Group 2 */}
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
                  <span style={{
                    width: 28, height: 28, borderRadius: 8,
                    background: 'rgba(47,133,90,0.18)',
                    border: '1px solid rgba(47,133,90,0.45)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-display)', fontSize: 13, color: 'var(--vp-gold-light)', fontWeight: 500,
                  }}>2</span>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--vp-cream)', textTransform: 'uppercase', fontWeight: 500 }}>
                    Acquisition & relances
                  </span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                  <Slider label="CA mensuel actuel" value={monthlyRevenue} min={3} max={120} step={1} suffix=" k€" onChange={setMonthlyRevenue} />
                  <Slider label="Panier moyen client" value={avgDeal} min={1} max={20} suffix=" k€" onChange={setAvgDeal} />
                  <Slider label="Devis non relancés / mois" value={lostQuotes} min={0} max={25} suffix="" onChange={setLostQuotes} />
                  <Slider label="Taux d'impayés / retards de paiement" value={unpaidRate} min={0} max={25} suffix=" %" onChange={setUnpaidRate} />
                </div>
              </div>
            </div>

            {/* RIGHT — RESULTS */}
            <div style={{
              padding: '44px 48px',
              background: 'linear-gradient(180deg, rgba(47,133,90,0.04), rgba(100,116,107,0.04))',
              display: 'flex', flexDirection: 'column',
            }} className="calc-results">
              <div className="mono" style={{ fontSize: 11, color: 'var(--vp-gold)', letterSpacing: '0.22em', marginBottom: 10 }}>
                GAIN POTENTIEL · 12 MOIS
              </div>
              <div className="gold-text" style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 5.4vw, 76px)',
                fontWeight: 300, letterSpacing: '-0.04em', lineHeight: 0.95,
                marginBottom: 6,
              }}>
                +{fmt(total)} €
              </div>
              <div style={{ fontSize: 13, color: 'var(--vp-cream-dim)', marginBottom: 26 }}>
                Soit <strong style={{ color: 'var(--vp-cream)' }}>{fmt(Math.round(total / 12))} €/mois</strong> de valeur générée par l'automatisation.
              </div>

              {/* Stacked bar */}
              <div style={{ marginBottom: 28 }}>
                <div style={{
                  height: 14, borderRadius: 7, overflow: 'hidden',
                  display: 'flex', background: 'rgba(244,247,245,0.04)',
                  border: '1px solid rgba(244,247,245,0.06)',
                }}>
                  {segments.map((s, i) => total > 0 && (
                    <div key={i} style={{
                      width: `${(s.value / total) * 100}%`,
                      background: s.color,
                      transition: 'width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1)',
                    }} />
                  ))}
                </div>
              </div>

              {/* Breakdown */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 28 }}>
                {segments.map((s, i) => {
                  const pct = total > 0 ? Math.round((s.value / total) * 100) : 0;
                  return (
                    <div key={i} style={{
                      display: 'flex', alignItems: 'center', gap: 14,
                      padding: '12px 14px', borderRadius: 12,
                      background: 'rgba(10,15,13,0.5)',
                      border: '1px solid rgba(244,247,245,0.05)',
                    }}>
                      <span style={{
                        width: 8, height: 8, borderRadius: 2,
                        background: s.solid, flexShrink: 0,
                        boxShadow: `0 0 8px ${s.solid}`,
                      }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, color: 'var(--vp-cream)', fontWeight: 500 }}>
                          {s.label}
                        </div>
                        <div className="mono" style={{ fontSize: 10, color: 'var(--vp-cream-faint)', letterSpacing: '0.05em' }}>
                          {pct}% du gain total
                        </div>
                      </div>
                      <div style={{
                        fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500,
                        color: 'var(--vp-cream)', letterSpacing: '-0.02em',
                      }}>
                        +{fmt(s.value)} €
                      </div>
                    </div>
                  );
                })}
              </div>

              <a href="#booking" className="btn btn-primary" style={{ width: '100%' }}>
                Valider mon plan personnalisé <span className="btn-arrow">→</span>
              </a>

              <div className="mono" style={{
                fontSize: 10, color: 'var(--vp-cream-faint)', letterSpacing: '0.05em',
                marginTop: 16, lineHeight: 1.5, textAlign: 'center',
              }}>
                Estimation basée sur les benchmarks observés chez 38 clients Vivo Partner (2024-2026).<br/>
                Audit gratuit pour affiner ces chiffres avec vos données réelles.
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .calc-grid { grid-template-columns: 1fr !important; }
          .calc-inputs { border-right: none !important; border-bottom: 1px solid rgba(244,247,245,0.06) !important; }
          .calc-inputs, .calc-results { padding: 32px !important; }
          .calc-inputs > div > div[style*="margin: 32px"] { margin: 28px -32px !important; }
        }
      `}</style>
    </section>
  );
}

function Slider({ label, value, min, max, step = 1, suffix, onChange }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.15em', color: 'var(--vp-cream-faint)', textTransform: 'uppercase' }}>{label}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: 'var(--vp-gold-light)', letterSpacing: '-0.02em' }}>
          {value}{suffix}
        </span>
      </div>
      <div style={{ position: 'relative', height: 6, background: 'rgba(244,247,245,0.06)', borderRadius: 3 }}>
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: `${pct}%`,
          background: 'var(--grad-gold)', borderRadius: 3,
        }} />
        <input type="range" min={min} max={max} step={step} value={value} onChange={e => onChange(+e.target.value)}
          style={{
            position: 'absolute', inset: -8, width: 'calc(100% + 16px)', height: 22,
            opacity: 0, cursor: 'pointer', margin: 0,
          }} />
        <div style={{
          position: 'absolute', left: `${pct}%`, top: '50%',
          width: 20, height: 20, borderRadius: '50%',
          background: 'var(--grad-gold)',
          border: '2px solid var(--vp-black)',
          transform: 'translate(-50%, -50%)',
          boxShadow: '0 4px 14px -2px rgba(47,133,90,0.6)',
          pointerEvents: 'none',
        }} />
      </div>
    </div>
  );
}

/* ============================================
   2. CASE STUDY
   ============================================ */
function CaseStudy() {
  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 60, gap: 40, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow eyebrow-line reveal" style={{ marginBottom: 20 }}>Étude de cas</div>
            <h2 className="display-lg reveal" data-delay="1">
              Helvex Studio :<br/>
              de <span className="display-italic" style={{ color: 'var(--vp-bordeaux-glow)' }}>14h d'admin</span> à <span className="display-italic gold-text">2h</span><br/>
              en 6 semaines.
            </h2>
          </div>
          <p className="body-lg reveal" data-delay="2" style={{ maxWidth: 380 }}>
            Studio d'architecture · 12 personnes · CA 2.4M€. Le combo qui a tout changé.
          </p>
        </div>

        <div className="reveal" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
          padding: 48, borderRadius: 28,
          background: 'linear-gradient(180deg, rgba(244,247,245,0.025), rgba(244,247,245,0.005))',
          border: '1px solid rgba(47,133,90,0.2)',
        }} className="case-grid">
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--vp-gold)', letterSpacing: '0.18em', marginBottom: 16 }}>
              CONTEXTE
            </div>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--vp-cream)', marginBottom: 28 }}>
              Helvex passait <strong>14h/semaine</strong> à éditer des devis manuellement, relancer les clients par téléphone et reporter les chantiers sur Excel. Chaque oubli coûtait 3 à 8k€.
            </p>

            <div className="mono" style={{ fontSize: 11, color: 'var(--vp-gold)', letterSpacing: '0.18em', marginBottom: 16 }}>
              SOLUTION DÉPLOYÉE
            </div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
              {['Génération automatique des devis depuis CRM', 'Relances multi-canaux selon comportement client', 'Suivi chantier temps réel + alertes dérives', 'Dashboard pilotage trésorerie unifié'].map((s, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--vp-cream-dim)' }}>
                  <span style={{ color: 'var(--vp-gold-light)', flexShrink: 0 }}>◆</span>
                  {s}
                </li>
              ))}
            </ul>

            <div style={{
              padding: 20, borderRadius: 14,
              background: 'rgba(18,61,50,0.25)',
              border: '1px solid rgba(47,133,90,0.5)',
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontStyle: 'italic', lineHeight: 1.45, color: 'var(--vp-cream)', marginBottom: 12 }}>
                "On a doublé notre pipeline sans embaucher. Aujourd'hui, je passe mon temps sur les projets — pas sur des relances."
              </div>
              <div style={{ fontSize: 13, color: 'var(--vp-cream-dim)' }}>
                <strong style={{ color: 'var(--vp-cream)' }}>Camille Moreau</strong> · CEO Helvex Studio
              </div>
            </div>
          </div>

          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--vp-gold)', letterSpacing: '0.18em', marginBottom: 24 }}>
              RÉSULTATS · 6 MOIS
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {[
                { v: 12, suf: 'h', l: 'gagnées / semaine', sub: '14h → 2h' },
                { v: 340, pre: '+€', suf: 'k', l: 'pipeline généré', sub: 'sur 6 mois' },
                { v: 2, dec: 1, suf: '×', l: 'conversion devis', sub: '23% → 47%' },
                { v: 0, l: 'factures oubliées', sub: 'depuis le mois 2' },
              ].map((s, i) => (
                <div key={i} style={{
                  padding: 22, borderRadius: 16,
                  background: 'rgba(10,15,13,0.5)',
                  border: '1px solid rgba(47,133,90,0.2)',
                }}>
                  <div className="gold-text" style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 8 }}>
                    <Counter to={s.v} prefix={s.pre || ''} suffix={s.suf || ''} decimals={s.dec || 0} />
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--vp-cream)', fontWeight: 500, marginBottom: 4 }}>
                    {s.l}
                  </div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--vp-cream-faint)', letterSpacing: '0.05em' }}>
                    {s.sub}
                  </div>
                </div>
              ))}
            </div>

            {/* Mini timeline */}
            <div style={{ marginTop: 24, padding: 20, borderRadius: 14, background: 'rgba(10,15,13,0.5)', border: '1px solid rgba(244,247,245,0.06)' }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--vp-cream-faint)', marginBottom: 14, textTransform: 'uppercase' }}>
                Timeline déploiement
              </div>
              {[
                { w: 'S1-2', l: 'Audit + cartographie process', c: 'var(--vp-gold-light)' },
                { w: 'S3', l: 'Architecture + roadmap', c: 'var(--vp-gold-light)' },
                { w: 'S4-6', l: 'Déploiement + onboarding équipe', c: '#7BD4A8' },
                { w: 'S7+', l: 'Optimisation continue', c: '#7BD4A8' },
              ].map((row, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0', fontSize: 12 }}>
                  <span className="mono" style={{ width: 40, color: 'var(--vp-cream-faint)', letterSpacing: '0.05em' }}>{row.w}</span>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: row.c, boxShadow: `0 0 6px ${row.c}` }} />
                  <span style={{ color: 'var(--vp-cream-dim)' }}>{row.l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .case-grid { grid-template-columns: 1fr !important; padding: 32px !important; }
        }
      `}</style>
    </section>
  );
}

/* ============================================
   3. FAQ
   ============================================ */
function FAQSection() {
  const [open, setOpen] = useStE(0);
  const faqs = [
    { q: 'Combien coûte une applicatuon ia sur mesure Vivo Partner ?',
      a: 'Nos missions démarrent à 1 500 € HT pour un audit + implantation sur mesure (1 mois) puis 150 € par mois. ' },
    { q: 'Combien de temps avant de voir des résultats ?',
      a: 'Les premières automatisations sont en production sous 3 semaines. Les gains de temps sont mesurables dès la 4ème semaine. Le ROI complet est généralement atteint entre 2 et 4 mois.' },
    { q: 'Est-ce que ça fonctionne pour mon métier ?',
      a: 'Nous avons accompagné des entreprises dans toute les niche du BTP. Tant que vous avez des process répétitifs et des données structurées, l\'automatisation IA crée de la valeur.' },
    { q: 'Mes données sont-elles sécurisées ?',
      a: 'Toutes nos solutions sont hébergées en Europe (RGPD), avec chiffrement bout-en-bout et sauvegardes redondantes. Nous signons systématiquement un NDA et un DPA avant toute mission.' },
    { q: 'Puis-je arrêter à tout moment ?',
      a: 'Oui. Nos contrats sont sans engagement mais nous préconisons un engagement sur 3mois minimum. Tous les systèmes restent votre propriété — documentés et transférables à votre équipe technique.' },
    { q: 'Travaillez-vous avec mes outils existants ?',
      a: 'Nous nous intégrons à plus de 200 outils : HubSpot, Salesforce, Pipedrive, Notion, Airtable, Stripe, Pennylane, QuickBooks, Slack, Make, n8n, Zapier… Si votre stack n\'est pas dans la liste, nous construisons un connecteur sur mesure.' },
  ];

  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }} className="faq-grid">
          <div style={{ position: 'sticky', top: 120 }}>
            <div className="eyebrow eyebrow-line reveal" style={{ marginBottom: 20 }}>Questions fréquentes</div>
            <h2 className="display-lg reveal" data-delay="1" style={{ marginBottom: 24 }}>
              On vous dit<br/>
              <span className="display-italic gold-text">tout</span>.
            </h2>
            <p className="body-md reveal" data-delay="2" style={{ marginBottom: 32 }}>
              Une question qui n'apparaît pas ici ? Posez-la directement lors de votre appel découverte.
            </p>
            <a href="#booking" className="btn btn-ghost">
              Poser ma question →
            </a>
          </div>

          <div className="reveal" data-delay="2" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {faqs.map((f, i) => (
              <div key={i} style={{
                borderRadius: 16, overflow: 'hidden',
                background: open === i ? 'linear-gradient(180deg, rgba(47,133,90,0.06), rgba(47,133,90,0.01))' : 'rgba(244,247,245,0.025)',
                border: `1px solid ${open === i ? 'rgba(47,133,90,0.3)' : 'rgba(244,247,245,0.06)'}`,
                transition: 'all 0.4s',
              }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: '100%', padding: '22px 26px',
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
                  color: 'var(--vp-cream)',
                  fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 400,
                  letterSpacing: '-0.01em', textAlign: 'left', lineHeight: 1.3,
                }}>
                  <span>{f.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
                    background: open === i ? 'var(--grad-gold)' : 'rgba(244,247,245,0.05)',
                    color: open === i ? '#07140E' : 'var(--vp-cream-dim)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, fontFamily: 'var(--font-body)',
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'all 0.4s',
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: open === i ? 200 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1)',
                }}>
                  <div style={{ padding: '0 26px 22px', fontSize: 14.5, lineHeight: 1.65, color: 'var(--vp-cream-dim)' }}>
                    {f.a}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .faq-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
}

/* ============================================
   4. STACK / INTEGRATIONS
   ============================================ */
function StackSection() {
  const tools = [
    { name: 'HubSpot', cat: 'CRM', logo: 'H' },
    { name: 'Salesforce', cat: 'CRM', logo: 'S' },
    { name: 'Pipedrive', cat: 'CRM', logo: 'P' },
    { name: 'Notion', cat: 'Docs', logo: 'N' },
    { name: 'Airtable', cat: 'Data', logo: 'A' },
    { name: 'Make', cat: 'Workflow', logo: 'M' },
    { name: 'n8n', cat: 'Workflow', logo: 'n' },
    { name: 'Stripe', cat: 'Paiement', logo: 'S' },
    { name: 'Pennylane', cat: 'Compta', logo: 'P' },
    { name: 'QuickBooks', cat: 'Compta', logo: 'Q' },
    { name: 'Slack', cat: 'Team', logo: 'S' },
    { name: 'OpenAI', cat: 'IA', logo: 'O' },
    { name: 'Claude', cat: 'IA', logo: 'C' },
    { name: 'Twilio', cat: 'Comm', logo: 'T' },
    { name: 'Calendly', cat: 'Booking', logo: 'C' },
    { name: 'Google', cat: 'Suite', logo: 'G' },
  ];

  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 60px' }}>
          <div className="eyebrow eyebrow-line reveal" style={{ marginBottom: 20, justifyContent: 'center' }}>Stack & intégrations</div>
          <h2 className="display-lg reveal" data-delay="1" style={{ marginBottom: 20 }}>
            Compatible avec<br/>
            <span className="display-italic gold-text">vos outils existants</span>.
          </h2>
          <p className="body-lg reveal" data-delay="2">
            Plus de 200 connecteurs natifs. Si votre stack n'est pas listée, nous construisons l'intégration.
          </p>
        </div>

        <div className="reveal" style={{
          display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 12,
          maxWidth: 1100, margin: '0 auto',
        }} className="stack-grid">
          {tools.map((t, i) => (
            <div key={i} style={{
              aspectRatio: '1', padding: 14,
              background: 'linear-gradient(180deg, rgba(244,247,245,0.04), rgba(244,247,245,0.01))',
              border: '1px solid rgba(244,247,245,0.06)',
              borderRadius: 16,
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
              transition: 'all 0.4s', cursor: 'pointer',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = 'rgba(47,133,90,0.4)';
              e.currentTarget.style.transform = 'translateY(-3px)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = 'rgba(244,247,245,0.06)';
              e.currentTarget.style.transform = 'translateY(0)';
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: 'linear-gradient(135deg, rgba(47,133,90,0.18), rgba(100,116,107,0.15))',
                border: '1px solid rgba(47,133,90,0.25)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500, color: 'var(--vp-gold-light)',
              }}>{t.logo}</div>
              <div style={{ fontSize: 11, color: 'var(--vp-cream)', fontWeight: 500, textAlign: 'center' }}>{t.name}</div>
              <div className="mono" style={{ fontSize: 8, color: 'var(--vp-cream-faint)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{t.cat}</div>
            </div>
          ))}
        </div>

        <div className="reveal" style={{ textAlign: 'center', marginTop: 40 }}>
          <span className="mono" style={{ fontSize: 12, color: 'var(--vp-cream-dim)', letterSpacing: '0.1em' }}>
            + 184 autres outils disponibles
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .stack-grid { grid-template-columns: repeat(4, 1fr) !important; } }
        @media (max-width: 500px) { .stack-grid { grid-template-columns: repeat(3, 1fr) !important; } }
      `}</style>
    </section>
  );
}

/* ============================================
   5. STICKY MOBILE CTA
   ============================================ */
function StickyCTA() {
  const [show, setShow] = useStE(false);
  useEffE(() => {
    const onScroll = () => setShow(window.scrollY > 800);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <a href="#booking" className="sticky-cta" style={{
      position: 'fixed', bottom: 16, left: 16, right: 16, zIndex: 90,
      padding: '14px 20px', borderRadius: 999,
      background: 'rgba(10,15,13,0.92)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      border: '1px solid rgba(47,133,90,0.4)',
      boxShadow: '0 20px 50px -10px rgba(0,0,0,0.6)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
      textDecoration: 'none',
      transform: show ? 'translateY(0)' : 'translateY(120%)',
      opacity: show ? 1 : 0,
      transition: 'all 0.5s cubic-bezier(0.2, 0.7, 0.2, 1)',
    }}>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 500, color: 'var(--vp-cream)', lineHeight: 1.2 }}>
          Audit stratégique <span className="gold-text">offert</span>
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--vp-cream-faint)', letterSpacing: '0.05em', marginTop: 2 }}>
          45 min · Sans engagement
        </div>
      </div>
      <div style={{
        padding: '10px 18px', borderRadius: 999,
        background: 'var(--grad-gold)',
        color: '#07140E', fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap',
      }}>
        Réserver →
      </div>
      <style>{`
        @media (min-width: 900px) {
          .sticky-cta { left: auto !important; right: 24px !important; bottom: 24px !important; }
        }
      `}</style>
    </a>
  );
}

Object.assign(window, { ROICalculator, CaseStudy, FAQSection, StackSection, StickyCTA });