/* Shared components — Waka × RED deck */

const ChromeTop = ({ section, slideNum, total = 23 }) =>
<div className="slide-chrome-top">
    <div className="left">
      <span className="dot"></span>
      <span style={{ fontWeight: 800, color: 'var(--waka-orange)', letterSpacing: 2 }}>WAKA</span>
      <span className="x">×</span>
      <span className="red">RED by SFR</span>
      <span className="x">·</span>
      <span style={{ textTransform: 'uppercase', letterSpacing: 2, fontSize: 12 }}>{section}</span>
    </div>
    <div className="right">
      <span className="live"><span className="ld"></span>CONFIDENTIEL</span>
      <span>{String(slideNum).padStart(2, '0')} / {String(total).padStart(2, '0')}</span>
    </div>
  </div>;


const ChromeBottom = ({ chapter, label }) =>
<div className="slide-chrome-bottom">
    <div className="breadcrumb"><b>WAKA</b> · Plateforme d'opérations IA · Présentation RED by SFR · 26 avril 2026</div>
    <div className="meta">
      <span><i>◆</i> Wakacom S.L.</span>
      <span><i>◆</i> {chapter || 'Pitch opérationnel'}</span>
    </div>
  </div>;


/* Section divider slide — repeated layout */
const SectionDivider = ({ num, label, title, kicker, slideNum, total }) =>
<>
    <ChromeTop section={label} slideNum={slideNum} total={total} />
    <div className="section-divider">
      <div className="top">
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 3, color: 'var(--waka-orange)' }}>SECTION {num}</span>
          <span style={{ width: 60, height: 1, background: 'var(--orbit-border-strong)' }}></span>
          <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: 2, color: 'var(--orbit-text-3)', textTransform: 'uppercase' }}>{label}</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <span className="tag">PARTIE {num}/6</span>
        </div>
      </div>
      <div className="center">
        <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--waka-orange)', textTransform: 'uppercase', letterSpacing: 4, marginBottom: 32 }}>{kicker}</div>
        <div style={{ fontSize: 140, fontWeight: 800, lineHeight: 0.92, letterSpacing: -4, color: 'var(--orbit-text-1)', maxWidth: 1500 }}>{title}</div>
      </div>
      <div className="bottom">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <span style={{ fontSize: 11, color: 'var(--orbit-text-3)', letterSpacing: 2, textTransform: 'uppercase' }}>Présenté par</span>
          <span style={{ fontSize: 18, color: 'var(--orbit-text-1)', fontWeight: 600 }}>Nabil Ghanem · COO EMEA</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 48 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
            <span style={{ fontSize: 11, color: 'var(--orbit-text-3)', letterSpacing: 2, textTransform: 'uppercase' }}>Prochain chapitre</span>
            <span style={{ fontSize: 14, color: 'var(--orbit-text-2)' }}>→</span>
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter={`Section ${num}`} />
  </>;


/* ═══ Slide 1 — Cover with video ═══ */
const SlideCover = () =>
<>
    {/* Background video */}
    <video autoPlay muted loop playsInline style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0, opacity: 0.45 }}>
      <source src="assets/waka-bg.mp4" type="video/mp4" />
    </video>
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(15,15,18,0.85) 0%, rgba(15,15,18,0.65) 50%, rgba(15,15,18,0.92) 100%)', zIndex: 1 }}></div>
    <div className="grid-bg" style={{ zIndex: 1 }}></div>
    <div style={{ position: 'absolute', inset: 0, padding: '72px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', zIndex: 2 }}>
      {/* Top bar */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <img src="assets/waka-logo.jpg" style={{ width: 72, height: 72, objectFit: 'cover', border: '1px solid var(--orbit-border)' }} />
          <div>
            <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--waka-orange)', letterSpacing: 1 }}>WAKA</div>
            <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--orbit-text-3)', letterSpacing: 3, textTransform: 'uppercase' }}>Wakacom S.L. · Voice AI Operations</div>
          </div>
          <div style={{ height: 48, width: 1, background: 'var(--orbit-border-strong)', margin: '0 8px' }}></div>
          <img src="assets/red-logo.svg" style={{ height: 42, filter: 'brightness(1.1)' }} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <span className="tag">CONFIDENTIEL</span>
          <span className="tag orange">PROPOSITION COMMERCIALE</span>
          <div style={{ borderLeft: '1px solid var(--orbit-border-strong)', paddingLeft: 20, fontSize: 12, color: 'var(--orbit-text-3)', textTransform: 'uppercase', letterSpacing: 2 }}>26 avril 2026</div>
        </div>
      </div>

      {/* Center — title */}
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 80, marginBottom: -20 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 4, color: 'var(--waka-orange)', textTransform: 'uppercase', marginBottom: 24, display: 'flex', alignItems: 'center', gap: 18 }}>
            <span style={{ width: 48, height: 1, background: 'var(--waka-orange)' }}></span>
            Opération d'acquisition pour RED by SFR
          </div>
          <div style={{ fontSize: 130, fontWeight: 800, lineHeight: 0.88, letterSpacing: -5, color: 'var(--orbit-text-1)' }}>
            Signal<br />Detection<br /><span style={{ color: 'var(--red-green)' }}>+ Agentic AI.</span>
          </div>
          <div style={{ fontSize: 26, color: 'var(--orbit-text-2)', maxWidth: 900, lineHeight: 1.45, marginTop: 32, fontWeight: 400 }}>
            Une opération d'acquisition de nouveaux clients <span style={{ color: 'var(--red-green)', fontWeight: 700 }}>RED by SFR</span>, basée sur la détection intelligente des signaux d'intention et des agents IA Agentic en temps réel.
          </div>
        </div>
        <div style={{ width: 340, display: 'flex', flexDirection: 'column', gap: 14, paddingBottom: 8 }}>
          <div className="card" style={{ padding: '18px 22px' }}>
            <div className="label" style={{ marginBottom: 6 }}>Opérateur</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--orbit-text-1)' }}>Wakacom S.L.</div>
            <div style={{ fontSize: 13, color: 'var(--orbit-text-3)', marginTop: 4 }}>Madrid · Paris ·Casablanca</div>
          </div>
          <div className="card" style={{ padding: '18px 22px' }}>
            <div className="label" style={{ marginBottom: 6 }}>Partenaire</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--red-green)' }}>RED by SFR</div>
            <div style={{ fontSize: 13, color: 'var(--orbit-text-3)', marginTop: 4 }}>Direction des Opérations</div>
          </div>
          <div className="card" style={{ padding: '18px 22px' }}>
            <div className="label" style={{ marginBottom: 6 }}>Format</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--orbit-text-1)' }}>Pitch opérationnel · 45 min</div>
          </div>
        </div>
      </div>

      {/* Bottom strip */}
      <div className="strip" style={{ justifyContent: 'space-between' }}>
        <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Microsoft Partner</span>
        <span className="sep">/</span>
        <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> ISO 27001 (en cours)</span>
        <span className="sep">/</span>
        <span><span style={{ color: 'var(--red-green)' }}>◆</span> ISO 9001 (en cours)</span>
        <span className="sep">/</span>
        <span><span style={{ color: 'var(--waka-yellow)' }}>◆</span> Conformité RGPD</span>
        <span className="sep">/</span>
        <span><span style={{ color: 'var(--waka-blue)' }}>◆</span> Azure francecentral</span>
        <span className="sep">/</span>
        <span>14 microservices · 400+ voix · 140+ langues</span>
      </div>
    </div>
    {/* Decorative orbit ring corner */}
    <div style={{ position: 'absolute', top: '-60px', right: '-60px', width: 400, height: 400, opacity: 0.4 }}>
      <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, { ChromeTop, ChromeBottom, SectionDivider, SlideCover });