/* Section 6 — Commercial · Engagements · Équipe · Next Steps · Closing (Mystery) */

const Slide19_Commercial = () => (
  <>
    <ChromeTop section="Modèle commercial" slideNum={19} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">18</span>Modèle commercial<span className="bar"></span></div>
      <div className="title-m">Trois formules. Une logique de palier. Payés à la performance.</div>
      <div className="body-m" style={{ maxWidth: 1300, marginBottom: 24 }}>Notre modèle repose sur trois formules indexées sur le chiffre d'affaires généré. Chaque formule s'ouvre lorsque la précédente atteint un seuil de CA prouvant la maturité de l'opération. Conditions appliquées à nos <b style={{ color: 'var(--orbit-text-1)' }}>4 partenaires actuels</b>.</div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, flex: 1 }}>
        {[
          { n: "F1", t: "Formule 1 · Démarrage", c: 'var(--waka-cyan)', p: "Setup forfait + Run mensuel", lock: "Accessible immédiatement", d: "Cadrage, branding, voix de marque, intégration catalogue, animation 24/7, écoute multi-terrain. Reporting hebdo signé.", k: ["Setup 6 sem.", "Animation 24/7", "Dashboard live", "Reporting hebdo"], threshold: null, condition: "Niveau d'entrée pour tout partenaire" },
          { n: "F2", t: "Formule 2 · Performance", c: 'var(--waka-orange)', p: "F1 + commission souscription", lock: "Ouvre quand CA F1 ≥ 150 000 €", d: "Ajout du levier performance : commission par souscription RED activée et conservée >30j. Le levier qui aligne 100% Waka avec votre cash.", k: ["Commission par souscription", "Conservation 30j", "Mesure conjointe", "Cash-aligned"], threshold: "150 000 €", condition: "CA cumulé en Formule 1" },
          { n: "F3", t: "Formule 3 · Premium agentic", c: 'var(--red-green)', p: "F2 + intégrations agentic dédiées", lock: "Ouvre quand CA F2 ≥ 250 000 €", d: "Création d'API personnalisées, serveurs MCP dédiés, équipes IA dédiées, customisation deep du pipeline. Pour les opérations matures.", k: ["MCP dédiés", "API perso", "Équipes IA dédiées", "Customisation deep"], threshold: "250 000 €", condition: "CA cumulé en Formule 2" },
        ].map((x, i) => (
          <div key={i} className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', borderTop: `3px solid ${x.c}`, position: 'relative' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
              <div className="step-num" style={{ borderColor: x.c, color: x.c, width: 54, height: 54, fontSize: 18 }}>{x.n}</div>
              <span className="tag" style={{ borderColor: x.c, color: x.c, fontSize: 10 }}>{x.p}</span>
            </div>
            <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--orbit-text-1)', marginBottom: 6, letterSpacing: -.5 }}>{x.t}</div>
            {x.threshold ? (
              <div style={{ padding: '10px 12px', background: 'var(--orbit-bg-surface)', borderLeft: `3px solid ${x.c}`, marginBottom: 12 }}>
                <div style={{ fontSize: 10, color: 'var(--orbit-text-3)', letterSpacing: 1.5, textTransform: 'uppercase' }}>{x.condition}</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: x.c, marginTop: 2, fontFamily: 'monospace' }}>≥ {x.threshold}</div>
              </div>
            ) : (
              <div style={{ padding: '10px 12px', background: 'rgba(0,188,212,.08)', borderLeft: `3px solid ${x.c}`, marginBottom: 12 }}>
                <div style={{ fontSize: 10, color: 'var(--orbit-text-3)', letterSpacing: 1.5, textTransform: 'uppercase' }}>Accès</div>
                <div style={{ fontSize: 14, fontWeight: 700, color: x.c, marginTop: 2 }}>{x.condition}</div>
              </div>
            )}
            <div style={{ fontSize: 13, color: 'var(--orbit-text-2)', lineHeight: 1.55, marginBottom: 14 }}>{x.d}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 'auto', paddingTop: 14, borderTop: '1px solid var(--orbit-border)' }}>
              {x.k.map((k, j) => <div key={j} style={{ fontSize: 12.5, color: 'var(--orbit-text-2)', display: 'flex', gap: 10, alignItems: 'center' }}><span style={{ width: 5, height: 5, background: x.c }}></span>{k}</div>)}
            </div>
          </div>
        ))}
      </div>

      {/* Dérogation RED */}
      <div style={{ marginTop: 18, padding: '18px 26px', background: 'linear-gradient(90deg, rgba(45,190,96,.18), rgba(232,131,42,.10))', border: '1px solid var(--red-green)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ width: 48, height: 48, background: 'var(--red-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <i className="bi bi-stars" style={{ color: '#fff', fontSize: 22 }}></i>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 2.5, color: 'var(--red-green)', textTransform: 'uppercase' }}>Dérogation exclusive · RED by SFR</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--orbit-text-1)', marginTop: 4, lineHeight: 1.4, maxWidth: 900 }}>Pour RED, Waka <b style={{ color: 'var(--red-green)' }}>déroge à la règle des paliers</b> — accès direct aux trois formules. Nous connaissons le potentiel.</div>
          </div>
        </div>
        <div style={{ textAlign: 'right', borderLeft: '1px solid var(--orbit-border-strong)', paddingLeft: 24, flexShrink: 0 }}>
          <div style={{ fontSize: 36, fontWeight: 800, color: 'var(--waka-orange)', fontFamily: 'monospace', lineHeight: 1 }}>~12 000</div>
          <div style={{ fontSize: 12, color: 'var(--orbit-text-2)', marginTop: 4, maxWidth: 200 }}>signaux d'intention par jour — un potentiel d'opération hors normes.</div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="18 · Modèle commercial" />
  </>
);

const Slide20_Engagements = () => (
  <>
    <ChromeTop section="Engagements" slideNum={20} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">19</span>Nos engagements<span className="bar"></span></div>
      <div className="title-l" style={{ fontSize: 72, maxWidth: 1500 }}>Ce sur quoi <span style={{ color: 'var(--waka-orange)' }}>Waka s'engage</span> — par écrit.</div>
      <div className="subtitle">Six engagements opérationnels qui définissent le standard de service. Mesurés conjointement, restitués chaque semaine.</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, flex: 1, marginTop: 'auto' }}>
        {[
          { ic: 'lightning-charge-fill', t: "Réactivité", v: "< 3 min", d: "Délai entre détection N4 et premier appel WakaVoice.", c: 'var(--waka-orange)' },
          { ic: 'shield-fill-check', t: "Disponibilité", v: "99.9%", d: "SLA plateforme Orbit. Azure Container Apps multi-zones.", c: 'var(--waka-cyan)' },
          { ic: 'translate', t: "Voix de marque", v: "100%", d: "Tone of voice RED validé conjointement, audité chaque mois.", c: 'var(--red-green)' },
          { ic: 'eye-fill', t: "Transparence", v: "Live", d: "Dashboard temps réel RED. Tout est visible — interactions, conversions, réclamations.", c: 'var(--waka-orange)' },
          { ic: 'file-earmark-text-fill', t: "Reporting", v: "Hebdo", d: "Rapport hebdomadaire signé HMAC-SHA256. Mensuel pilotage. Trimestriel stratégique.", c: 'var(--waka-cyan)' },
          { ic: 'arrow-repeat', t: "Réversibilité", v: "30 jours", d: "Sortie du contrat sans pénalité. Données restituées en formats standards.", c: 'var(--red-green)' },
        ].map((x, i) => (
          <div key={i} className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <div style={{ width: 44, height: 44, background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i className={`bi bi-${x.ic}`} style={{ color: x.c, fontSize: 20 }}></i>
              </div>
              <div style={{ fontSize: 32, fontWeight: 800, color: x.c, letterSpacing: -1 }}>{x.v}</div>
            </div>
            <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--orbit-text-1)', marginBottom: 6 }}>{x.t}</div>
            <div style={{ fontSize: 14, color: 'var(--orbit-text-2)', lineHeight: 1.5 }}>{x.d}</div>
          </div>
        ))}
      </div>
    </div>
    <ChromeBottom chapter="19 · Engagements" />
  </>
);

/* Slide 21 — Roadmap supprimée — alias vers Engagements pour compat */
const Slide21_Roadmap = Slide20_Engagements;

/* Slide 22 → Équipe (devient slide 20 après renumérotation) */
const Slide22_Team = () => (
  <>
    <ChromeTop section="Équipe" slideNum={21} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">20</span>Équipe Waka pour RED<span className="bar"></span></div>
      <div className="title-m">Une cellule dédiée. Pilotage humain + 2 équipes IA en support.</div>
      <div className="body-m" style={{ maxWidth: 1200, marginBottom: 28 }}>Le compte RED est piloté directement par la direction. Pas de cascade hiérarchique — décision rapide, exécution serrée, supervision IA continue.</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 12, flex: 1 }}>
        {[
          { n: "Antonio Sainz", r: "Sponsor Exécutif", d: "CEO Wakacom · Garant SLA, conformité, escalade. Décision en 24h.", c: 'var(--waka-cyan)', init: "AS", icon: 'briefcase-fill', kind: 'Humain', hl: false },
          { n: "Nabil Ghanem", r: "Pilote de Compte", d: "COO EMEA · Ex-Directeur Activité Teleperformance · 8 ans télévente RED. Pilotage stratégique au quotidien.", c: 'var(--waka-orange)', init: "NG", icon: 'person-badge-fill', kind: 'Humain', hl: true },
          { n: "Account Manager", r: "Pilote d'IA", d: "Pilote opérationnel des agents au jour le jour : calibration, supervision, ajustement scripts, escalade qualité.", c: 'var(--red-green)', init: "OP", icon: 'sliders', kind: 'Humain' },
          { n: "Équipe IA · Performance", r: "Analyse & Reporting", d: "Répond en continu aux questions sur la performance, les flux, le scoring, les KPIs. Prête à générer toute coupe métier à la demande.", c: 'var(--waka-yellow)', init: "P1", icon: 'graph-up-arrow', kind: 'IA' },
          { n: "Équipe IA · Remontée Conso", r: "Cas limites & validations", d: "Détecte et remonte les cas sensibles : clients récemment désabonnés SFR, menaces de churn, réclamations en escalade. Demande validation humaine quand nécessaire.", c: '#9B59B6', init: "P2", icon: 'shield-exclamation', kind: 'IA' },
        ].map((p, i) => (
          <div key={i} className="card" style={{ padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', border: p.hl ? '2px solid var(--waka-orange)' : '1px solid var(--orbit-border)' }}>
            <div style={{ height: 140, background: `linear-gradient(135deg, ${p.c}22, var(--orbit-bg-surface))`, display: 'flex', alignItems: 'center', justifyContent: 'center', borderBottom: '1px solid var(--orbit-border)', position: 'relative' }}>
              <div style={{ fontSize: 64, fontWeight: 800, color: p.c, letterSpacing: -2 }}>{p.init}</div>
              {p.hl && <div style={{ position: 'absolute', top: 8, left: 8 }}><span className="tag orange" style={{ fontSize: 9 }}>PILOTE COMPTE</span></div>}
              <div style={{ position: 'absolute', top: 8, right: 8 }}>
                <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1.5, padding: '3px 7px', background: p.kind === 'IA' ? 'rgba(155,89,182,.18)' : 'var(--orbit-bg-raised)', color: p.kind === 'IA' ? '#C084FC' : 'var(--orbit-text-3)', border: `1px solid ${p.kind === 'IA' ? '#9B59B6' : 'var(--orbit-border)'}` }}>{p.kind}</span>
              </div>
              <div style={{ position: 'absolute', bottom: 8, right: 8 }}>
                <i className={`bi bi-${p.icon}`} style={{ color: p.c, fontSize: 18, opacity: .7 }}></i>
              </div>
            </div>
            <div style={{ padding: '16px 18px', flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--orbit-text-1)', lineHeight: 1.2 }}>{p.n}</div>
              <div style={{ fontSize: 11.5, color: p.c, marginTop: 4, fontWeight: 700, letterSpacing: .5, textTransform: 'uppercase' }}>{p.r}</div>
              <div style={{ fontSize: 12, color: 'var(--orbit-text-2)', marginTop: 12, lineHeight: 1.5, flex: 1 }}>{p.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
    <ChromeBottom chapter="20 · Équipe" />
  </>
);

/* Slide 23 → Prochaines étapes (devient slide 21) */
const Slide23_NextSteps = () => (
  <>
    <ChromeTop section="Prochaines étapes" slideNum={22} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">21</span>Prochaines étapes<span className="bar"></span></div>
      <div className="title-l" style={{ fontSize: 80, maxWidth: 1500 }}>Ce qu'il nous faut <span style={{ color: 'var(--waka-orange)' }}>pour démarrer.</span></div>
      <div className="subtitle">Trois inputs côté RED. Une signature. Quinze jours pour la communauté live, trente pour les premières souscriptions.</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, flex: 1, marginTop: 'auto' }}>
        {[
          { n: "01", t: "Périmètre commercial & prix de vente", d: "Catalogue d'offres RED partagé, conditions tarifaires de vente arrêtées (prix inclus dans la proposition). Permet aux agents de pitcher avec précision dès le J+15.", by: "Direction Commerciale RED", c: 'var(--waka-orange)' },
          { n: "02", t: "Pilote de compte côté RED", d: "Désignation d'un pilote de compte côté RED pour la phase de lancement et le pilotage quotidien. Interlocuteur direct de Nabil Ghanem.", by: "Direction des Opérations RED", c: 'var(--waka-cyan)' },
          { n: "03", t: "Accès Ezy pour création du serveur MCP", d: "Octroi des accès Ezy nécessaires à la création des endpoints dédiés. Waka adopte les API Ezy en serveur MCP sécurisé (Key Vault + Managed Identity).", by: "DSI RED", c: 'var(--red-green)' },
        ].map((s, i) => (
          <div key={i} className="card" style={{ padding: 32, display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 120, fontWeight: 800, color: s.c, lineHeight: .85, letterSpacing: -4, marginBottom: 24 }}>{s.n}</div>
            <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--orbit-text-1)', marginBottom: 14, lineHeight: 1.2 }}>{s.t}</div>
            <div style={{ fontSize: 15, color: 'var(--orbit-text-2)', lineHeight: 1.55, marginBottom: 18, flex: 1 }}>{s.d}</div>
            <div style={{ paddingTop: 18, borderTop: '1px solid var(--orbit-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span className="label">À fournir par</span>
              <span style={{ fontSize: 13, fontWeight: 700, color: s.c, textAlign: 'right' }}>{s.by}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
    <ChromeBottom chapter="21 · Prochaines étapes" />
  </>
);

/* Slide 24 → Closing avec expérience MYSTERY RED CONCIERGE (devient slide 22) */
const Slide24_Closing = () => {
  // URLs à remplacer par les vraies pages d'agents (voix, texte, avatar)
  const AGENT_URLS = {
    voice: "https://orbit.wakacom.com/demo/red-voice",
    text: "https://orbit.wakacom.com/demo/red-text",
    avatar: "https://orbit.wakacom.com/demo/red-avatar",
  };
  const doors = [
    { id: 'A', kind: 'voice', title: 'Agent Voix', sub: 'Latence < 300 ms', icon: 'mic-fill', hint: 'Parlez à RED', color: 'var(--waka-orange)' },
    { id: 'B', kind: 'text', title: 'Agent Texte', sub: 'Streaming Grok / Claude / GPT', icon: 'chat-dots-fill', hint: 'Écrivez à RED', color: 'var(--waka-cyan)' },
    { id: 'C', kind: 'avatar', title: 'Agent Avatar', sub: 'Vidéo HD lip-sync', icon: 'person-video3', hint: 'Regardez RED', color: 'var(--red-green)' },
  ];
  // Random ordering — chaque rendu peut mélanger pour renforcer l'effet "surprise"
  const [shuffled] = React.useState(() => {
    const a = [...doors];
    for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1));[a[i], a[j]] = [a[j], a[i]]; }
    return a;
  });
  const [revealed, setRevealed] = React.useState(null);

  const open = (kind) => {
    setRevealed(kind);
    setTimeout(() => { window.open(AGENT_URLS[kind], '_blank', 'noopener'); }, 700);
  };

  return (
    <>
      <style>{`
        @keyframes seal-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(232,131,42,.4)} 50%{box-shadow:0 0 0 14px rgba(232,131,42,0)} }
        @keyframes door-flip { 0%{transform:rotateY(0)} 50%{transform:rotateY(-90deg)} 100%{transform:rotateY(0)} }
        .mystery-door { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; cursor: pointer; perspective: 1000px; }
        .mystery-door:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px var(--waka-orange); }
        .mystery-seal { animation: seal-pulse 2.4s infinite; }
        .door-flipped { animation: door-flip .9s ease-in-out forwards; }
        .door-bg-noise { background-image: radial-gradient(circle at 20% 20%, rgba(232,131,42,.18), transparent 50%), radial-gradient(circle at 80% 80%, rgba(45,190,96,.14), transparent 50%); }
      `}</style>

      <div className="grid-bg"></div>
      <div style={{ position: 'absolute', inset: 0, padding: '56px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', zIndex: 2 }}>

        {/* Header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <img src="assets/waka-logo.jpg" style={{ width: 56, height: 56, objectFit: 'cover', border: '1px solid var(--orbit-border)' }} />
            <div>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--waka-orange)', letterSpacing: 1 }}>WAKA × <span style={{ color: 'var(--red-green)' }}>RED by SFR</span></div>
              <div style={{ fontSize: 11, color: 'var(--orbit-text-3)', letterSpacing: 3, textTransform: 'uppercase' }}>Proposition commerciale · 26 avril 2026</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <img src="assets/red-logo.svg" style={{ height: 40, filter: 'brightness(1.1)' }} />
            <span className="tag orange">EXPÉRIENCE LIVE</span>
          </div>
        </div>

        {/* Center — pitch + 3 mystery doors */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 28 }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 14, color: 'var(--waka-orange)', fontWeight: 700, letterSpacing: 5, textTransform: 'uppercase', marginBottom: 18 }}>↓ Et maintenant, à vous de jouer ↓</div>
            <div style={{ fontSize: 84, fontWeight: 800, lineHeight: 0.92, letterSpacing: -3, color: 'var(--orbit-text-1)', maxWidth: 1500, margin: '0 auto' }}>
              Trois portes. <span style={{ color: 'var(--waka-orange)' }}>Trois agents.</span> <span style={{ color: 'var(--red-green)' }}>Une seule mission</span> — vous convaincre.
            </div>
            <div style={{ fontSize: 17, color: 'var(--orbit-text-2)', maxWidth: 1100, margin: '14px auto 0', lineHeight: 1.5 }}>
              Choisissez une porte. Aucun indice. Derrière chacune, un agent IA <b style={{ color: 'var(--orbit-text-1)' }}>chargé du site RED</b> en base de connaissance et d'<b style={{ color: 'var(--orbit-text-1)' }}>outils Ezy simulés</b>. Parlez-lui, écrivez-lui, regardez-le. Voyez par vous-même.
            </div>
          </div>

          {/* The 3 doors */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, padding: '0 60px' }}>
            {shuffled.map((d, i) => {
              const isRevealed = revealed === d.kind;
              return (
                <div key={d.id}
                  onClick={() => open(d.kind)}
                  className={`mystery-door ${isRevealed ? 'door-flipped' : ''} door-bg-noise`}
                  style={{
                    position: 'relative',
                    padding: '36px 28px',
                    background: 'linear-gradient(180deg, var(--orbit-bg-surface), var(--orbit-bg-raised))',
                    border: `1px solid ${isRevealed ? d.color : 'var(--orbit-border-strong)'}`,
                    minHeight: 300,
                    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16,
                    textAlign: 'center',
                    overflow: 'hidden',
                  }}>
                  {/* Wax seal */}
                  <div className={isRevealed ? '' : 'mystery-seal'} style={{
                    position: 'absolute', top: 14, right: 14,
                    width: 54, height: 54,
                    background: isRevealed ? d.color : 'linear-gradient(135deg, var(--waka-orange), var(--red-green))',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 22, fontWeight: 800, color: '#fff', letterSpacing: 1,
                  }}>
                    {isRevealed ? <i className={`bi bi-${d.icon}`}></i> : d.id}
                  </div>

                  {/* RED logo top-left as wax sender */}
                  <div style={{ position: 'absolute', top: 14, left: 14, opacity: .6 }}>
                    <img src="assets/red-logo.svg" style={{ height: 18 }} alt="RED" />
                  </div>

                  {!isRevealed ? (
                    <>
                      <div style={{ fontSize: 80, color: 'var(--orbit-text-3)', opacity: .55 }}>
                        <i className="bi bi-question-circle"></i>
                      </div>
                      <div style={{ fontSize: 13, color: 'var(--orbit-text-3)', letterSpacing: 3, fontWeight: 700, textTransform: 'uppercase' }}>Porte {d.id}</div>
                      <div style={{ fontSize: 26, fontWeight: 800, color: 'var(--orbit-text-1)', lineHeight: 1.15, maxWidth: 280 }}>
                        Que se cache-t-il<br />derrière cette porte ?
                      </div>
                      <div style={{
                        marginTop: 8, padding: '8px 16px',
                        background: 'transparent', border: '1px solid var(--waka-orange)',
                        color: 'var(--waka-orange)', fontSize: 11, letterSpacing: 2.5, fontWeight: 700, textTransform: 'uppercase',
                      }}>
                        ▸ Cliquez pour ouvrir
                      </div>
                    </>
                  ) : (
                    <>
                      <i className={`bi bi-${d.icon}`} style={{ fontSize: 80, color: d.color }}></i>
                      <div style={{ fontSize: 11, color: d.color, letterSpacing: 3, fontWeight: 800, textTransform: 'uppercase' }}>{d.hint}</div>
                      <div style={{ fontSize: 30, fontWeight: 800, color: 'var(--orbit-text-1)', lineHeight: 1.1 }}>{d.title}</div>
                      <div style={{ fontSize: 13, color: 'var(--orbit-text-2)' }}>{d.sub}</div>
                      <div style={{ marginTop: 8, fontSize: 11, color: 'var(--orbit-text-3)', fontStyle: 'italic' }}>Ouverture dans un nouvel onglet…</div>
                    </>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* Footer — contacts + signature */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24, alignItems: 'end' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
            <div className="card" style={{ padding: '16px 20px' }}>
              <div className="label" style={{ marginBottom: 4 }}>Contact opérationnel</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--orbit-text-1)' }}>Nabil Ghanem</div>
              <div style={{ fontSize: 12, color: 'var(--waka-orange)', marginTop: 2, fontWeight: 600 }}>COO EMEA · Pilote de Compte</div>
              <div style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--orbit-border)', fontSize: 11, color: 'var(--orbit-text-3)' }}>nabil.ghanem@wakacom.com</div>
            </div>
            <div className="card" style={{ padding: '16px 20px' }}>
              <div className="label" style={{ marginBottom: 4 }}>Sponsor exécutif</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--orbit-text-1)' }}>Antonio Sainz</div>
              <div style={{ fontSize: 12, color: 'var(--waka-cyan)', marginTop: 2, fontWeight: 600 }}>CEO Wakacom S.L.</div>
              <div style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--orbit-border)', fontSize: 11, color: 'var(--orbit-text-3)' }}>antonio.sainz@wakacom.com</div>
            </div>
            <div className="card" style={{ padding: '16px 20px' }}>
              <div className="label" style={{ marginBottom: 4 }}>Société</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--orbit-text-1)' }}>Wakacom S.L.</div>
              <div style={{ fontSize: 12, color: 'var(--red-green)', marginTop: 2, fontWeight: 600 }}>Madrid · Paris · Casablanca</div>
              <div style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--orbit-border)', fontSize: 11, color: 'var(--orbit-text-3)' }}>Microsoft Partner · ISO 27001 (en cours)</div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 13, color: 'var(--waka-orange)', fontWeight: 800, letterSpacing: 4, textTransform: 'uppercase' }}>Merci.</div>
            <div style={{ fontSize: 48, fontWeight: 800, color: 'var(--orbit-text-1)', lineHeight: 1, letterSpacing: -1, marginTop: 6 }}>
              Capter, qualifier,<br /><span style={{ color: 'var(--red-green)' }}>convertir</span> — <span style={{ color: 'var(--waka-orange)' }}>ensemble.</span>
            </div>
          </div>
        </div>
      </div>

      <div style={{ position: 'absolute', bottom: '-180px', right: '-180px', width: 600, height: 600, opacity: 0.18, zIndex: 1 }}>
        <div className="orbit-ring" style={{ width: '100%', height: '100%' }}>
          <div className="ring"></div>
          <div className="ring r2"></div>
          <div className="ring r3"></div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { Slide19_Commercial, Slide20_Engagements, Slide21_Roadmap, Slide22_Team, Slide23_NextSteps, Slide24_Closing });