/* Section 3 — Concept Qui a la Fibre + Process */

const Slide08_Concept = () => (
  <>
    <ChromeTop section="L'idée" slideNum={8} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">07</span>L'idée<span className="bar"></span></div>
      <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:64, flex:1, alignItems:'center'}}>
        <div>
          <div style={{fontSize:18, fontWeight:600, color:'var(--orbit-text-3)', textTransform:'uppercase', letterSpacing:3, marginBottom:18}}>Notre proposition opérationnelle</div>
          <div className="title-l" style={{fontSize:88}}>Une communauté d'entraide indépendante,<span style={{color:'var(--waka-orange)'}}> opérée par Waka.</span></div>
          <div className="body-l" style={{marginTop:28, maxWidth:680}}>Nous opérons une page <b style={{color:'var(--orbit-text-1)'}}>Qui a la Fibre ?</b> — communauté d'entraide entre utilisateurs FAI — animée par un agent IA qui écoute, oriente et convertit. Mention RED en bio comme partenaire.</div>
          <div style={{display:'flex', gap:10, marginTop:28, flexWrap:'wrap'}}>
            <span className="tag orange">100% opéré par Waka</span>
            <span className="tag green">Mention RED en bio</span>
            <span className="tag cyan">Communauté indépendante</span>
          </div>
        </div>
        <div className="card" style={{padding:0}}>
          <div style={{padding:'18px 24px', borderBottom:'1px solid var(--orbit-border)', background:'var(--orbit-bg-surface)', display:'flex', alignItems:'center', gap:12}}>
            <div style={{width:40, height:40, background:'linear-gradient(135deg,var(--waka-orange),var(--red-green))', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:800}}>QF</div>
            <div>
              <div style={{fontSize:16, fontWeight:700, color:'var(--orbit-text-1)'}}>Qui a la Fibre ?</div>
              <div style={{fontSize:12, color:'var(--orbit-text-3)'}}>Page communauté · Facebook / Instagram / TikTok</div>
            </div>
          </div>
          <div style={{padding:'28px 24px'}}>
            <div className="label" style={{marginBottom:10}}>Bio de la page</div>
            <div style={{fontSize:22, lineHeight:1.5, color:'var(--orbit-text-1)', fontStyle:'italic'}}>« Qui a la fibre, qui a galéré, qui a changé, qui a trouvé mieux. On en parle entre nous. »</div>
            <div style={{marginTop:24, paddingTop:20, borderTop:'1px solid var(--orbit-border)', display:'flex', justifyContent:'space-between', fontSize:13, color:'var(--orbit-text-3)'}}>
              <span>Communauté indépendante</span>
              <span>opérée en partenariat avec <b style={{color:'var(--red-green)'}}>RED by SFR</b></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="07 · L'idée" />
  </>
);

const Slide09_TwoHats = () => (
  <>
    <ChromeTop section="L'agent" slideNum={9} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">08</span>L'agent au cœur du dispositif<span className="bar"></span></div>
      <div className="title-l" style={{maxWidth:1500}}>Un seul agent IA. <span style={{color:'var(--orbit-text-3)'}}>Deux casquettes simultanées.</span></div>
      <div className="subtitle">La double posture qui rend le projet simple à raconter — et industriel à opérer.</div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, flex:1, marginTop:'auto'}}>
        {[
          {n:"01", t:"ANIMER", h:"Faire vivre la communauté", c:'orange', items:["Répond aux questions des membres","Relance les sujets, crée des sondages","Publie des comparatifs hebdo","Modère les échanges 24/7"]},
          {n:"02", t:"ÉCOUTER", h:"Capter les signaux publics", c:'green', items:["Abonné aux pages FAI concurrents","Surveille les pages réclamations","Scanne les groupes d'entraide","Classe en temps réel par intention"]},
        ].map((c,i)=>(
          <div key={i} className="card" style={{padding:36, borderLeft:`3px solid ${c.c==='orange'?'var(--waka-orange)':'var(--red-green)'}`, display:'flex', flexDirection:'column'}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:24}}>
              <div style={{fontSize:120, fontWeight:800, color:c.c==='orange'?'var(--waka-orange)':'var(--red-green)', lineHeight:.85, letterSpacing:-4}}>{c.n}</div>
              <span className={`tag ${c.c}`}>CASQUETTE {c.n}</span>
            </div>
            <div style={{fontSize:20, fontWeight:700, color:c.c==='orange'?'var(--waka-orange)':'var(--red-green)', letterSpacing:3, marginBottom:8}}>{c.t}</div>
            <div style={{fontSize:38, fontWeight:800, color:'var(--orbit-text-1)', lineHeight:1.1, marginBottom:28}}>{c.h}</div>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:14, marginTop:'auto'}}>
              {c.items.map((it,j)=>(
                <li key={j} style={{display:'flex', gap:14, fontSize:18, color:'var(--orbit-text-2)', alignItems:'center'}}>
                  <span style={{width:22, height:22, display:'flex', alignItems:'center', justifyContent:'center', background:'var(--orbit-bg-surface)', border:'1px solid var(--orbit-border)', fontSize:11, fontWeight:700, color:'var(--orbit-text-3)'}}>{j+1}</span>
                  {it}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
    <ChromeBottom chapter="08 · L'agent" />
  </>
);

const Slide10_Terrains = () => {
  const t = [
    {n:"01", h:"Pages FAI concurrents", l:"Orange · Free · Bouygues · Sosh", d:"Commentaires sous chaque post officiel des concurrents. C'est là que les clients mécontents se défoulent publiquement avant même de penser à changer."},
    {n:"02", h:"Pages réclamations conso", l:"UFC Que Choisir · 60 Millions · Signal Conso", d:"Pages officielles des associations où les gens postent leurs litiges. Signaux ultra-qualifiés de rupture active avec leur FAI."},
    {n:"03", h:"Groupes d'entraide", l:"Arnaqué par… · Box qui rame · Fibre France", d:"Groupes Facebook thématiques où les utilisateurs s'échangent entre eux. Forte densité de signaux, ton direct, intention proche de l'acte."},
  ];
  return (
    <>
      <ChromeTop section="Terrains d'écoute" slideNum={10} total={23} />
      <div className="slide-body">
        <div className="eyebrow"><span className="num">09</span>Casquette 2 — Écouter<span className="bar"></span></div>
        <div className="title-m">Trois terrains d'écoute, en permanence.</div>
        <div className="body-m" style={{maxWidth:1100, marginBottom:32}}>Là où les signaux d'intention d'achat FAI émergent publiquement, chaque jour.</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18, flex:1}}>
          {t.map((x,i)=>(
            <div key={i} className="card" style={{display:'flex', flexDirection:'column', padding:30}}>
              <div style={{fontSize:11, fontWeight:700, letterSpacing:3, color:'var(--waka-orange)', textTransform:'uppercase', marginBottom:16}}>TERRAIN {x.n}</div>
              <div style={{fontSize:32, fontWeight:800, color:'var(--orbit-text-1)', lineHeight:1.1, marginBottom:18}}>{x.h}</div>
              <div style={{padding:'12px 14px', background:'var(--orbit-bg-surface)', border:'1px solid var(--orbit-border)', fontSize:13, color:'var(--waka-orange)', fontWeight:600, marginBottom:18, letterSpacing:.5}}>{x.l}</div>
              <div style={{fontSize:17, lineHeight:1.55, color:'var(--orbit-text-2)'}}>{x.d}</div>
            </div>
          ))}
        </div>
      </div>
      <ChromeBottom chapter="09 · Terrains d'écoute" />
    </>
  );
};

const Slide11_Convergence = () => (
  <>
    <ChromeTop section="Convergence" slideNum={11} total={23} />
    <div className="slide-body">
      <div className="eyebrow"><span className="num">10</span>Convergence<span className="bar"></span></div>
      <div className="title-l" style={{fontSize:72}}>Quatre sources, <span style={{color:'var(--waka-orange)'}}>un seul cerveau d'analyse.</span></div>
      <div className="body-m" style={{maxWidth:1100, marginBottom:32}}>L'agent corrèle, dédoublonne, enrichit. Tout converge vers le moteur d'analyse Orbit-Brain.</div>

      <div style={{flex:1, display:'grid', gridTemplateColumns:'1fr 1.2fr 1fr', gap:36, alignItems:'center'}}>
        {/* Sources */}
        <div style={{display:'flex', flexDirection:'column', gap:14}}>
          {[
            {h:"Communauté", d:"Animation et écoute interne"},
            {h:"Pages FAI concurrents", d:"Commentaires publics"},
            {h:"Pages réclamations", d:"Litiges actifs"},
            {h:"Groupes d'entraide", d:"Échanges entre pairs"},
          ].map((s,i)=>(
            <div key={i} className="card surface" style={{padding:'14px 18px', position:'relative'}}>
              <div style={{fontSize:11, color:'var(--orbit-text-3)', letterSpacing:1.5, textTransform:'uppercase', fontWeight:600}}>Source {String(i+1).padStart(2,'0')}</div>
              <div style={{fontSize:18, fontWeight:700, color:'var(--orbit-text-1)', marginTop:2}}>{s.h}</div>
              <div style={{fontSize:13, color:'var(--orbit-text-3)', marginTop:2}}>{s.d}</div>
              <div style={{position:'absolute', right:-36, top:'50%', transform:'translateY(-50%)', width:36, height:1, background:'var(--orbit-border-strong)'}}></div>
            </div>
          ))}
        </div>
        {/* Brain */}
        <div style={{display:'flex', justifyContent:'center'}}>
          <div className="card" style={{padding:32, borderColor:'var(--waka-orange)', background:'linear-gradient(135deg, rgba(232,131,42,.12), transparent)', width:'100%'}}>
            <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:18}}>
              <i className="bi bi-cpu-fill" style={{fontSize:24, color:'var(--waka-orange)'}}></i>
              <div style={{fontSize:13, fontWeight:700, letterSpacing:2, color:'var(--waka-orange)'}}>ORBIT-BRAIN</div>
            </div>
            <div style={{fontSize:28, fontWeight:800, color:'var(--orbit-text-1)', lineHeight:1.1, marginBottom:20}}>Moteur d'analyse</div>
            <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:12}}>
              {["Classification par intention","Scoring par urgence","Détection de profil","Décision d'action"].map((x,i)=>(
                <li key={i} style={{display:'flex', gap:10, fontSize:16, color:'var(--orbit-text-2)', alignItems:'center'}}>
                  <span style={{width:6, height:6, background:'var(--waka-orange)'}}></span>{x}
                </li>
              ))}
            </ul>
          </div>
        </div>
        {/* Outputs */}
        <div style={{display:'flex', flexDirection:'column', gap:14}}>
          {[
            {h:"N1 · Observer", c:'#6E727E'},
            {h:"N2 · Réponse publique", c:'var(--waka-cyan)'},
            {h:"N3 · DM qualification", c:'var(--waka-orange)'},
            {h:"N4 · Rappel WakaVoice", c:'var(--red-green)'},
          ].map((s,i)=>(
            <div key={i} className="card surface" style={{padding:'14px 18px', borderLeft:`3px solid ${s.c}`, position:'relative'}}>
              <div style={{position:'absolute', left:-36, top:'50%', transform:'translateY(-50%)', width:36, height:1, background:'var(--orbit-border-strong)'}}></div>
              <div style={{fontSize:11, color:'var(--orbit-text-3)', letterSpacing:1.5, textTransform:'uppercase', fontWeight:600}}>Action {String(i+1).padStart(2,'0')}</div>
              <div style={{fontSize:18, fontWeight:700, color:'var(--orbit-text-1)', marginTop:2}}>{s.h}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
    <ChromeBottom chapter="10 · Convergence" />
  </>
);

Object.assign(window, { Slide08_Concept, Slide09_TwoHats, Slide10_Terrains, Slide11_Convergence });