/* Section 2 — La plateforme Orbit · Capacités · Différentiants */

const Slide05_Platform = () => (
  <>
    <ChromeTop section="Plateforme Orbit" slideNum={5} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">04</span>La plateforme Orbit · condensé technologique<span className="bar"></span></div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 48, alignItems: 'center', flex: 1 }}>
        <div>
          <div className="title-l" style={{ fontSize: 72 }}>Un condensé de technologie de <span style={{ color: 'var(--waka-orange)' }}>frontière</span>.</div>
          <div className="body-l" style={{ marginTop: 20, maxWidth: 680 }}>Orbit est notre plateforme propriétaire d'opérations IA — architecture <b style={{ color: 'var(--orbit-text-1)' }}>BFF + 14 microservices</b>, multi-LLM, multi-tenant, hébergée Azure francecentral.</div>
          <div className="body-l" style={{ marginTop: 14, maxWidth: 680, fontSize: 16 }}>Quatre piliers technologiques uniques sur le marché.</div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginTop: 24 }}>
            <div className="card surface" style={{ padding: 18, borderLeft: '3px solid var(--waka-orange)' }}>
              <div className="label" style={{ color: 'var(--waka-orange)' }}>① Génération de texte · State-of-the-art</div>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--orbit-text-1)', marginTop: 8, lineHeight: 1.4 }}>Grok 4 · Claude Opus 4.7 · GPT-5.5</div>
              <div style={{ fontSize: 12, color: 'var(--orbit-text-3)', marginTop: 6, lineHeight: 1.5 }}>Routing dynamique multi-modèles, fallback automatique, fine-tuning sur le tone of voice partenaire.</div>
            </div>
            <div className="card surface" style={{ padding: 18, borderLeft: '3px solid var(--waka-cyan)' }}>
              <div className="label" style={{ color: 'var(--waka-cyan)' }}>② Agents vocaux temps réel</div>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--orbit-text-1)', marginTop: 8, lineHeight: 1.4 }}>Latence &lt; 300 ms end-to-end</div>
              <div style={{ fontSize: 12, color: 'var(--orbit-text-3)', marginTop: 6, lineHeight: 1.5 }}>WebRTC natif, GPT Realtime + Phi-4 MM, barge-in, interruptions naturelles, qualité conversationnelle humaine.</div>
            </div>
            <div className="card surface" style={{ padding: 18, borderLeft: '3px solid var(--red-green)' }}>
              <div className="label" style={{ color: 'var(--red-green)' }}>③ Agents avatar temps réel</div>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--orbit-text-1)', marginTop: 8, lineHeight: 1.4 }}>36+ avatars standards · clonage perso</div>
              <div style={{ fontSize: 12, color: 'var(--orbit-text-3)', marginTop: 6, lineHeight: 1.5 }}>Rendu vidéo neuronal WebSocket, lip-sync précis, capacité de cloner un avatar de marque dédié.</div>
            </div>
            <div className="card surface" style={{ padding: 18, borderLeft: '3px solid var(--waka-yellow)' }}>
              <div className="label" style={{ color: 'var(--waka-yellow)' }}>④ MCP & Database Builder</div>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--orbit-text-1)', marginTop: 8, lineHeight: 1.4 }}>Agentic-ready sur n'importe quel CRM</div>
              <div style={{ fontSize: 12, color: 'var(--orbit-text-3)', marginTop: 6, lineHeight: 1.5 }}>Création à la volée de serveurs MCP & bases de données dans des environnements cloud isolés — opérations personnalisées par partenaire.</div>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div className="orbit-ring" style={{ width: 520, height: 520 }}>
            <div className="ring"></div>
            <div className="ring r2"></div>
            <div className="ring r3"></div>
            <div className="center-dot" style={{ width: 140, height: 140, fontSize: 32, flexDirection: 'column' }}>
              <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: 1 }}>ORBIT</div>
              <div style={{ fontSize: 10, opacity: .85, letterSpacing: 2 }}>v5</div>
            </div>
            {['BRAIN', 'CREW', 'VOICE', 'HOLO', 'MCP', 'DB', 'FOUNDRY', 'STREAM'].map((n, i, arr) => {
              const angle = (i / arr.length) * 2 * Math.PI - Math.PI / 2;
              const r = 240;
              const x = Math.cos(angle) * r;
              const y = Math.sin(angle) * r;
              return (
                <div key={n} style={{ position: 'absolute', top: '50%', left: '50%', transform: `translate(${x - 44}px, ${y - 14}px)`, padding: '5px 10px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border-strong)', fontSize: 10, fontWeight: 700, color: 'var(--orbit-text-2)', letterSpacing: 1.5, width: 88, textAlign: 'center' }}>{n}</div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="04 · Plateforme Orbit" />
  </>
);

const Slide06_Capabilities = () => {
  const caps = [
    { ic: 'cloud-fill', t: "Déploiement Azure AI Services", d: "OpenAI, Speech, AI Search, Document Intelligence, Vision, Translator — provisionnés en France, gouvernés par Managed Identity.", c: "orange" },
    { ic: 'globe2', t: "Modèles via Azure AI Foundry", d: "Catalogue mondial : Grok, Claude, GPT, Llama, Mistral, Gemini, Phi… Déploiement en quelques minutes, routing multi-modèle.", c: "cyan" },
    { ic: 'database-fill-gear', t: "Storage & Database Cloud", d: "Cosmos DB, PostgreSQL, Blob Storage, Data Lake — persistance auditée, chiffrée, géo-redondée.", c: "green" },
    { ic: 'bar-chart-line-fill', t: "Reporting temps réel · Fabric", d: "Microsoft Fabric + Data Intelligence : sémantique unifiée, dashboards live, KPIs partenaires en near-realtime.", c: "orange" },
    { ic: 'plug-fill', t: "Serveurs MCP CRM & API", d: "Connecteurs MCP pour Salesforce, HubSpot, Dynamics, Zendesk + n'importe quelle API REST/SOAP/GraphQL.", c: "cyan" },
    { ic: 'code-square', t: "API Factory partenaire", d: "Création d'API personnalisées exposant la stack Orbit pour répondre aux besoins métier spécifiques de chaque client.", c: "green" },
    { ic: 'chat-dots-fill', t: "Agents Texte streaming", d: "Chat SSE multi-modèles, mémoire de session, RAG enrichi, function calling natif, agentic loops.", c: "orange" },
    { ic: 'mic-fill', t: "Agents Voix sub-300ms", d: "WebRTC natif, GPT Realtime + Phi-4 MM, barge-in, voix de marque clonée, transcription temps réel.", c: "cyan" },
    { ic: 'person-video3', t: "Agents Avatar HD", d: "36+ avatars standards, clonage avatar personnalisé, rendu WebSocket, lip-sync neuronal.", c: "green" },
    { ic: 'broadcast', t: "Campagnes multicanal", d: "Téléphone, voix WebApp, SMS, mail, WhatsApp, outils internes web, Facebook, LinkedIn, Instagram, X — orchestrés depuis un seul cockpit.", c: "orange" },
    { ic: 'journal-richtext', t: "RAG · Talk with your data", d: "Bases de connaissance Azure AI Search hybrides (vector + BM25 + semantic), ingestion SharePoint/Drive/web, chunking intelligent.", c: "cyan" },
    { ic: 'shield-lock-fill', t: "Sécurité Zero-Trust", d: "Key Vault, Managed Identity, RBAC granulaire, JWT + OAuth, chiffrement at-rest/in-transit, logs immuables.", c: "green" },
  ];
  return (
    <>
      <ChromeTop section="Capacités" slideNum={6} total={23} />
      <div className="slide-body">
        <div className="eyebrow"><span className="num">05</span>Ce que la plateforme sait faire<span className="bar"></span></div>
        <div className="title-m">Douze capacités industrielles, un seul cockpit.</div>
        <div className="body-m" style={{ maxWidth: 1200, marginBottom: 22 }}>De l'infrastructure cloud aux agents conversationnels — Waka Orbit couvre l'intégralité de la chaîne, du provisioning Azure jusqu'au call agentic sur le CRM client.</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {caps.map((c, i) => (
            <div key={i} className="card" style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border)' }}>
                  <i className={`bi bi-${c.ic}`} style={{ fontSize: 17, color: c.c === 'orange' ? 'var(--waka-orange)' : c.c === 'cyan' ? 'var(--waka-cyan)' : 'var(--red-green)' }}></i>
                </div>
                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--orbit-text-1)', lineHeight: 1.2 }}>{c.t}</div>
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--orbit-text-2)', lineHeight: 1.5 }}>{c.d}</div>
            </div>
          ))}
        </div>

        {/* Bonus livrable — Profiling Marketing Intelligence */}
        <div style={{ marginTop: 18, padding: '18px 24px', background: 'linear-gradient(90deg, rgba(232,131,42,.16), rgba(45,190,96,.10))', border: '1px solid var(--waka-orange)', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 24, alignItems: 'center' }}>
          <div style={{ width: 54, height: 54, background: 'var(--waka-orange)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <i className="bi bi-people-fill" style={{ color: '#fff', fontSize: 24 }}></i>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 2.5, color: 'var(--waka-orange)', textTransform: 'uppercase' }}>Bonus livrable inclus · Marketing Intelligence</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--orbit-text-1)', marginTop: 4, lineHeight: 1.4 }}>
              Chaque interaction enrichit un <b style={{ color: 'var(--orbit-text-1)' }}>profiling marketing</b> livré à RED — analyse des cohortes, personae, freins, déclencheurs et <b style={{ color: 'var(--waka-orange)' }}>appétence par offre RED</b>. Une donnée actionnable que vos équipes acquisition n'ont pas aujourd'hui.
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', maxWidth: 340, justifyContent: 'flex-end' }}>
            <span className="tag orange" style={{ fontSize: 10 }}>Cohortes</span>
            <span className="tag cyan" style={{ fontSize: 10 }}>Personae</span>
            <span className="tag green" style={{ fontSize: 10 }}>Appétence offre</span>
            <span className="tag orange" style={{ fontSize: 10 }}>Freins / déclencheurs</span>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="05 · Capacités" />
    </>
  );
};

/* Slide 7 — Nos points différentiants + intégration Ezy via MCP sécurisé */
const Slide07_Architecture = () => (
  <>
    <ChromeTop section="Différentiation" slideNum={7} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">06</span>Nos points différentiants<span className="bar"></span></div>
      <div className="title-l" style={{ fontSize: 60, maxWidth: 1700 }}>Uniques sur le marché : <span style={{ color: 'var(--waka-orange)' }}>expertise opérationnelle</span> + <span style={{ color: 'var(--red-green)' }}>outils interconnectés</span>.</div>
      <div className="body-m" style={{ maxWidth: 1300, marginTop: 14, marginBottom: 24 }}>Nous ne vendons pas une techno. Nous opérons votre acquisition, et nos outils communiquent avec vos systèmes — y compris <b style={{ color: 'var(--orbit-text-1)' }}>Ezy</b> — via tous les canaux clients.</div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24, flex: 1 }}>
        {/* Left — 3 différentiants */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { n: '01', t: "Expertise opérationnelle native", d: "8 ans de pilotage d'activité télévente RED. Nous connaissons les KPIs, scripts, irritants, tone of voice — pas en théorie : en production.", c: 'var(--waka-orange)' },
            { n: '02', t: "Outils interconnectés multicanal", d: "Téléphone, WebApp voix, SMS, WhatsApp, FB, LinkedIn, Insta, X, outils internes — un seul cockpit, une seule ID conversation, un seul reporting.", c: 'var(--waka-cyan)' },
            { n: '03', t: "Intégration agentic via MCP sécurisé", d: "Nos agents agissent dans vos systèmes : éligibilité, panier, souscription. Pas de copier-coller, pas d'humain pivot.", c: 'var(--red-green)' },
          ].map((x, i) => (
            <div key={i} className="card" style={{ padding: '18px 22px', borderLeft: `3px solid ${x.c}`, display: 'flex', flexDirection: 'column', gap: 6, flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ fontSize: 28, fontWeight: 800, color: x.c, fontFamily: 'monospace', lineHeight: 1 }}>{x.n}</div>
                <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--orbit-text-1)' }}>{x.t}</div>
              </div>
              <div style={{ fontSize: 14, color: 'var(--orbit-text-2)', lineHeight: 1.55 }}>{x.d}</div>
            </div>
          ))}
        </div>

        {/* Right — Ezy integration explainer */}
        <div className="card" style={{ padding: 24, borderColor: 'var(--red-green)', background: 'linear-gradient(135deg, var(--red-green-glow), transparent)', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 48, height: 48, background: 'var(--red-green)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <i className="bi bi-diagram-3-fill" style={{ color: '#fff', fontSize: 22 }}></i>
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, color: 'var(--red-green)' }}>FOCUS · INTÉGRATION RED</div>
              <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--orbit-text-1)', lineHeight: 1.1, marginTop: 2 }}>Ezy → MCP sécurisé → Agent agentic</div>
            </div>
          </div>

          <div style={{ fontSize: 14, color: 'var(--orbit-text-2)', lineHeight: 1.55 }}>
            Sur la base des <b style={{ color: 'var(--orbit-text-1)' }}>accès Ezy octroyés par RED</b>, Waka <b style={{ color: 'var(--orbit-text-1)' }}>crée des endpoints dédiés</b> et adopte les API d'Ezy dans un <b style={{ color: 'var(--waka-orange)' }}>serveur MCP propriétaire</b> — secrets stockés en <b style={{ color: 'var(--orbit-text-1)' }}>Azure Key Vault</b>, authentification via <b style={{ color: 'var(--orbit-text-1)' }}>Managed Identity</b>, audit immuable.
          </div>

          {/* Mini flow */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr auto 1fr', gap: 8, alignItems: 'stretch', marginTop: 4 }}>
            <div style={{ padding: '12px 14px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border-strong)', textAlign: 'center' }}>
              <div style={{ fontSize: 10, color: 'var(--orbit-text-3)', letterSpacing: 2, fontWeight: 700 }}>RED · EZY</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--red-green)', marginTop: 4 }}>API natives</div>
              <div style={{ fontSize: 10, color: 'var(--orbit-text-3)', marginTop: 2 }}>Accès octroyés</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', color: 'var(--waka-orange)' }}><i className="bi bi-chevron-right"></i></div>
            <div style={{ padding: '12px 14px', background: 'rgba(232,131,42,.08)', border: '1px solid var(--waka-orange)', textAlign: 'center' }}>
              <div style={{ fontSize: 10, color: 'var(--waka-orange)', letterSpacing: 2, fontWeight: 700 }}>WAKA · ORBIT-MCP</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--orbit-text-1)', marginTop: 4 }}>Serveur MCP Ezy</div>
              <div style={{ fontSize: 10, color: 'var(--orbit-text-3)', marginTop: 2 }}>Key Vault · Managed Id.</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', color: 'var(--waka-orange)' }}><i className="bi bi-chevron-right"></i></div>
            <div style={{ padding: '12px 14px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border-strong)', textAlign: 'center' }}>
              <div style={{ fontSize: 10, color: 'var(--orbit-text-3)', letterSpacing: 2, fontWeight: 700 }}>AGENT IA</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--waka-orange)', marginTop: 4 }}>Tool-calling agentic</div>
              <div style={{ fontSize: 10, color: 'var(--orbit-text-3)', marginTop: 2 }}>Actions autonomes</div>
            </div>
          </div>

          {/* Capabilities exposed */}
          <div style={{ paddingTop: 14, borderTop: '1px solid var(--orbit-border)' }}>
            <div className="label" style={{ marginBottom: 8 }}>Outils Ezy mis à disposition de l'agent</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8 }}>
              {[
                { ic: 'check2-circle', t: "Vérification d'éligibilité Fibre/ADSL" },
                { ic: 'cart-fill', t: "Constitution & envoi de panier" },
                { ic: 'pencil-square', t: "Pré-souscription & signature" },
                { ic: 'arrow-repeat', t: "Suivi de dossier client" },
              ].map((o, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border)' }}>
                  <i className={`bi bi-${o.ic}`} style={{ color: 'var(--red-green)', fontSize: 15 }}></i>
                  <span style={{ fontSize: 13, color: 'var(--orbit-text-1)', fontWeight: 600 }}>{o.t}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ fontSize: 11, color: 'var(--orbit-text-3)', fontStyle: 'italic', textAlign: 'center', paddingTop: 6 }}>
            Aucun secret en clair · Rotation automatique · Logs HMAC-SHA256 · Conforme RGPD by design
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="06 · Différentiation" />
  </>
);

Object.assign(window, { Slide05_Platform, Slide06_Capabilities, Slide07_Architecture });