/* Section 1 — Diagnostic + Pourquoi Waka */

/* Slide 2 — Le constat */
const Slide02_Constat = () => (
  <>
    <ChromeTop section="Diagnostic" slideNum={2} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">01</span>Le constat<span className="bar"></span></div>
      <div className="title-l" style={{maxWidth:1500}}>Les gens parlent déjà.<br/><span style={{color:'var(--orbit-text-3)'}}>Personne ne les écoute à l'échelle.</span></div>
      <div className="subtitle">Chaque jour, des milliers de signaux publics d'intention d'achat FAI se déversent dans les commentaires. Aucun opérateur français ne les capte de manière industrielle.</div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18, marginTop:'auto'}}>
        {[
          {tag:"Hier · Facebook", q:"Ma box Orange rame depuis deux semaines, vous avez pareil ?", src:"Groupe « Box qui rame »", color:"orange"},
          {tag:"Avant-hier · UFC", q:"Free vient d'augmenter de 5€ sans prévenir, qu'est-ce qu'il y a de mieux ?", src:"UFC Que Choisir", color:"cyan"},
          {tag:"Cette semaine · Forum", q:"Mon engagement SFR se termine, je cherche sérieux et pas cher.", src:"Forum entraide consommateurs", color:"green"},
        ].map((c,i)=>(
          <div key={i} className="card" style={{display:'flex', flexDirection:'column', gap:18, minHeight:240}}>
            <span className={`tag ${c.color}`}>{c.tag}</span>
            <div style={{fontSize:24, lineHeight:1.4, color:'var(--orbit-text-1)', fontStyle:'italic', flex:1}}>« {c.q} »</div>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:14, borderTop:'1px solid var(--orbit-border)'}}>
              <span style={{fontSize:13, color:'var(--orbit-text-3)'}}>{c.src}</span>
              <span style={{fontSize:11, color:'var(--orbit-text-3)', letterSpacing:1.5, textTransform:'uppercase'}}>Signal non capté</span>
            </div>
          </div>
        ))}
      </div>

      <div style={{marginTop:24, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'20px 28px', background:'var(--orbit-bg-surface)', border:'1px solid var(--orbit-border)'}}>
        <div style={{display:'flex', alignItems:'center', gap:24}}>
          <div style={{fontSize:42, fontWeight:800, color:'var(--waka-orange)'}}>~12 000</div>
          <div style={{fontSize:16, color:'var(--orbit-text-2)', maxWidth:520, lineHeight:1.4}}>signaux publics quotidiens estimés sur les pages des 4 FAI principaux et les forums consommateurs en France.</div>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:24}}>
          <div style={{fontSize:42, fontWeight:800, color:'var(--red-green)'}}>0%</div>
          <div style={{fontSize:16, color:'var(--orbit-text-2)', maxWidth:380, lineHeight:1.4}}>de ces signaux ne sont aujourd'hui captés à l'échelle industrielle par les opérateurs.</div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="01 · Diagnostic" />
  </>
);

/* Slide 3 — Pourquoi Waka comprend RED — Nabil */
const Slide03_Nabil = () => (
  <>
    <ChromeTop section="Pourquoi Waka" slideNum={3} total={23} />
    <div className="slide-body" style={{padding:'56px 80px'}}>
      <div style={{display:'grid', gridTemplateColumns:'480px 1fr', gap:64, height:'100%'}}>
        {/* Left — portrait card */}
        <div style={{display:'flex', flexDirection:'column'}}>
          <div className="eyebrow"><span className="num">02</span>Pourquoi Waka</div>
          <div className="card" style={{padding:0, overflow:'hidden', flex:1, display:'flex', flexDirection:'column'}}>
            <div style={{height:340, background:'linear-gradient(135deg, #1F2937 0%, #0F1418 100%)', display:'flex', alignItems:'center', justifyContent:'center', position:'relative', borderBottom:'1px solid var(--orbit-border)'}}>
              <div style={{fontSize:200, fontWeight:800, color:'var(--waka-orange)', letterSpacing:-6, lineHeight:1}}>NG</div>
              <div style={{position:'absolute', top:16, left:16, display:'flex', gap:6}}>
                <span className="tag green">COO EMEA</span>
              </div>
              <div style={{position:'absolute', bottom:16, right:16, fontSize:11, color:'var(--orbit-text-3)', letterSpacing:1.5}}>WAKACOM S.L.</div>
            </div>
            <div style={{padding:'24px 28px', flex:1, display:'flex', flexDirection:'column', gap:14}}>
              <div>
                <div className="label">Présenté par</div>
                <div style={{fontSize:36, fontWeight:800, color:'var(--orbit-text-1)', letterSpacing:-1, marginTop:4}}>Nabil Ghanem</div>
                <div style={{fontSize:15, color:'var(--waka-orange)', marginTop:2, fontWeight:600}}>Chief Operating Officer EMEA</div>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:8}}>
                <div style={{padding:'10px 0', borderTop:'1px solid var(--orbit-border)'}}>
                  <div style={{fontSize:11, color:'var(--orbit-text-3)', letterSpacing:1.5, textTransform:'uppercase'}}>Avant Waka</div>
                  <div style={{fontSize:14, color:'var(--orbit-text-1)', fontWeight:600, marginTop:4}}>Teleperformance</div>
                  <div style={{fontSize:12, color:'var(--orbit-text-2)'}}>Directeur Activité</div>
                </div>
                <div style={{padding:'10px 0', borderTop:'1px solid var(--orbit-border)'}}>
                  <div style={{fontSize:11, color:'var(--orbit-text-3)', letterSpacing:1.5, textTransform:'uppercase'}}>Période</div>
                  <div style={{fontSize:14, color:'var(--orbit-text-1)', fontWeight:600, marginTop:4}}>2014 – 2022</div>
                  <div style={{fontSize:12, color:'var(--orbit-text-2)'}}>8 années</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Right — story */}
        <div style={{display:'flex', flexDirection:'column', justifyContent:'center'}}>
          <div className="title-l" style={{fontSize:72}}>RED by SFR n'est pas un client comme un autre <span style={{color:'var(--waka-orange)'}}>pour nous.</span></div>
          <div className="quote-block" style={{marginTop:32, marginBottom:36}}>
            <div className="q" style={{fontSize:30}}>« Pendant 8 ans, j'ai piloté les opérations de télévente RED by SFR chez Teleperformance. Je connais la marque, les offres, les irritants, et surtout — la barre de qualité qu'elle attend de ses partenaires. »</div>
            <div className="author">Nabil Ghanem · COO EMEA Waka</div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14}}>
            <div className="card surface" style={{padding:22}}>
              <div className="kpi">
                <div className="label">Périmètre géré</div>
                <div className="val orange">8 ans</div>
                <div className="delta">Direction de l'activité télévente RED</div>
              </div>
            </div>
            <div className="card surface" style={{padding:22}}>
              <div className="kpi">
                <div className="label">Bench prestataires</div>
                <div className="val green">90%</div>
                <div className="delta">du temps en <b style={{color:'var(--orbit-text-1)'}}>1<sup>re</sup> place</b> du classement RED</div>
              </div>
            </div>
            <div className="card surface" style={{padding:22}}>
              <div className="kpi">
                <div className="label">Connaissance marque</div>
                <div className="val cyan">Native</div>
                <div className="delta">Process, scripts, KPIs, tone of voice RED</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="02 · Pourquoi Waka" />
  </>
);

/* Slide 4 — Ce que Waka N'EST PAS / EST */
const Slide04_NotProvider = () => (
  <>
    <ChromeTop section="Positionnement" slideNum={4} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">03</span>Notre positionnement<span className="bar"></span></div>
      <div className="title-l" style={{maxWidth:1500}}>Waka ne vend pas des agents IA.<br/><span style={{color:'var(--waka-orange)'}}>Waka opère votre business, de bout en bout.</span></div>
      <div className="subtitle">Notre métier n'est pas la fourniture de technologie : c'est l'exploitation d'opérations qui génèrent du chiffre d'affaires. Notre plateforme Orbit est le condensé technologique qui rend cette exploitation possible.</div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginTop:'auto'}}>
        <div className="card" style={{borderColor:'var(--orbit-border)', padding:36, position:'relative'}}>
          <div style={{position:'absolute', top:0, left:0, fontSize:11, fontWeight:700, padding:'6px 14px', background:'var(--orbit-bg-surface)', color:'var(--orbit-text-3)', letterSpacing:2}}>CE QUE NOUS NE SOMMES PAS</div>
          <div style={{marginTop:20}}>
            <div style={{fontSize:36, fontWeight:700, color:'var(--orbit-text-3)', textDecoration:'line-through', textDecorationColor:'var(--orbit-red)', textDecorationThickness:2, lineHeight:1.3, marginBottom:24}}>Un éditeur SaaS qui vend une licence et part.</div>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:14}}>
              {[
                "Pas de license d'agent à configurer",
                "Pas d'outil à intégrer dans vos systèmes",
                "Pas de formation à délivrer en interne",
                "Pas de KPIs à inventer côté client",
              ].map((t,i)=>(
                <li key={i} style={{display:'flex', alignItems:'center', gap:12, fontSize:18, color:'var(--orbit-text-3)'}}>
                  <span style={{width:18, height:1, background:'var(--orbit-text-4)'}}></span>{t}
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="card" style={{borderColor:'var(--waka-orange)', padding:36, position:'relative', background:'linear-gradient(135deg, rgba(232,131,42,.08), transparent)'}}>
          <div style={{position:'absolute', top:0, left:0, fontSize:11, fontWeight:700, padding:'6px 14px', background:'var(--waka-orange)', color:'#fff', letterSpacing:2}}>CE QUE NOUS SOMMES</div>
          <div style={{marginTop:20}}>
            <div style={{fontSize:36, fontWeight:800, color:'var(--orbit-text-1)', lineHeight:1.25, marginBottom:24}}>Un opérateur de campagnes IA, payé au résultat.</div>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:14}}>
              {[
                {b:"Nous prenons l'opération en main", s:"écoute, animation, qualification, contact, transformation"},
                {b:"Nous engageons sur la performance", s:"volume, conversion, qualité, NPS — au choix"},
                {b:"Nous opérons avec notre plateforme", s:"Orbit = 14 microservices, 400+ voix, RAG, MCP"},
                {b:"Nous restituons les résultats", s:"dashboard temps réel, rapports signés HMAC-SHA256"},
              ].map((t,i)=>(
                <li key={i} style={{display:'flex', gap:14, fontSize:18}}>
                  <span style={{width:6, height:6, marginTop:11, background:'var(--waka-orange)', flexShrink:0}}></span>
                  <div><b style={{color:'var(--orbit-text-1)', fontWeight:700}}>{t.b}</b><span style={{color:'var(--orbit-text-2)'}}> — {t.s}</span></div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="03 · Positionnement" />
  </>
);

Object.assign(window, { Slide02_Constat, Slide03_Nabil, Slide04_NotProvider });