/* Section 4 — Scoring & contact (fusionné), parcours Léa */

const Slide12_Scoring = () => {
  const lvls = [
    { n: "N1", h: "Simple échange", q: "« Tiens, pareil chez moi cette semaine. »", c: '#6E727E', mode: "Observation silencieuse", action: "L'agent mémorise le signal pour recontextualiser plus tard. Aucun engagement." },
    { n: "N2", h: "Intérêt latent", q: "« Un jour faudra que je compare les offres. »", c: 'var(--waka-cyan)', mode: "Réponse publique utile", action: "Conseil objectif dans le fil. Pas de pitch RED. On construit la crédibilité et l'affinité." },
    { n: "N3", h: "Intention active", q: "« Je cherche à changer, des suggestions ? »", c: 'var(--waka-orange)', mode: "Invitation en messagerie", action: "Réponse publique + bascule en DM pour qualification fine : adresse, usage, budget." },
    { n: "N4", h: "Urgence immédiate", q: "« Je résilie demain, il me faut une box lundi. »", c: 'var(--red-green)', mode: "Rappel vocal immédiat", action: "WakaVoice rappelle dans la minute. Présentation offre RED, signature électronique. Le timing fait tout." },
  ];
  return (
    <>
      <ChromeTop section="Scoring & contact" slideNum={12} total={23} />
      <div className="slide-body">
        <div className="eyebrow"><span className="num">11</span>Scoring d'intention &amp; stratégie de contact<span className="bar"></span></div>
        <div className="title-m">Quatre niveaux. Quatre stratégies. Une seule logique.</div>
        <div className="body-m" style={{ maxWidth: 1200, marginBottom: 24 }}>Chaque signal capté est classé en temps réel. Le niveau d'intention détermine le mode d'engagement — gradation respectueuse, jamais d'intrusion prématurée.</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14, flex: 1 }}>
          {lvls.map((l, i) => (
            <div key={i} className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', borderTop: `4px solid ${l.c}` }}>
              <div style={{ fontSize: 50, fontWeight: 800, color: l.c, lineHeight: 1, letterSpacing: -2, marginBottom: 10 }}>{l.n}</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--orbit-text-1)', marginBottom: 12 }}>{l.h}</div>
              <div style={{ fontSize: 13, fontStyle: 'italic', color: 'var(--orbit-text-1)', padding: '12px 14px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border)', lineHeight: 1.45, marginBottom: 14 }}>{l.q}</div>
              <div style={{ padding: '8px 12px', background: 'var(--orbit-bg-surface)', borderLeft: `3px solid ${l.c}`, marginBottom: 10 }}>
                <div className="label" style={{ color: l.c, marginBottom: 2 }}>Mode d'engagement</div>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--orbit-text-1)' }}>{l.mode}</div>
              </div>
              <div style={{ fontSize: 13, color: 'var(--orbit-text-2)', lineHeight: 1.5, marginTop: 'auto' }}>{l.action}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18, padding: '14px 22px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 13, color: 'var(--orbit-text-3)', textTransform: 'uppercase', letterSpacing: 2 }}>Engagement Waka</div>
          <div style={{ display: 'flex', gap: 32, fontSize: 13, color: 'var(--orbit-text-2)' }}>
            <span><b style={{ color: 'var(--waka-orange)' }}>Réactivité N4 &lt; 3 min</b> entre détection et appel</span>
            <span><b style={{ color: 'var(--waka-cyan)' }}>0 % d'intrusion</b> sur N1/N2 — pas de spam</span>
            <span><b style={{ color: 'var(--red-green)' }}>100 %</b> de scripts validés conjointement avec RED</span>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="11 · Scoring &amp; contact" />
    </>
  );
};

const Slide14_Lea = () => {
  const t = [
    { h: "10:14", a: "Léa commente sous un post Orange", q: "« Franchement je paye 45€ pour un service qui rame, je commence à regarder ailleurs. »", b: "Détection N3", c: 'var(--waka-orange)' },
    { h: "10:17", a: "L'agent répond en public", q: "« Tu es libre de ton engagement quand exactement ? Plusieurs membres de Qui a la Fibre ? sont passés par là, on pourrait comparer. »", b: "Réponse publique", c: 'var(--waka-cyan)' },
    { h: "10:23", a: "Léa rejoint la communauté → DM", q: "Adresse, usage (télétravail + streaming), budget. Qualification en 4 messages.", b: "DM qualification", c: 'var(--waka-orange)' },
    { h: "10:29", a: "L'agent propose un rappel", q: "« Je peux te faire rappeler par un conseiller RED dans 2 minutes — ça te va ? »", b: "Bascule N4", c: 'var(--red-green)' },
    { h: "10:33", a: "WakaVoice l'appelle, elle souscrit", q: "Présentation, objections, signature électronique. Commentaire → souscription : 19 minutes.", b: "Closing", c: 'var(--red-green)' },
  ];
  return (
    <>
      <ChromeTop section="Parcours type" slideNum={13} total={23} />
      <div className="slide-body">
        <div className="eyebrow"><span className="num">12</span>Incarnation — un parcours<span className="bar"></span></div>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 36, flex: 1 }}>
          <div>
            <div className="title-m" style={{ fontSize: 42 }}>Léa, 29 ans, Lyon.</div>
            <div className="card" style={{ padding: 24, marginTop: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
                <div style={{ width: 64, height: 64, background: 'linear-gradient(135deg, var(--waka-orange), var(--red-green))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 28, fontWeight: 800 }}>L</div>
                <div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--orbit-text-1)' }}>Léa</div>
                  <div style={{ fontSize: 13, color: 'var(--orbit-text-3)' }}>Graphiste freelance</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14 }}>
                <div style={{ paddingBottom: 12, borderBottom: '1px solid var(--orbit-border)' }}><div className="label">FAI actuel</div><div style={{ color: 'var(--orbit-text-1)', marginTop: 4 }}>Orange — depuis 2 ans</div></div>
                <div style={{ paddingBottom: 12, borderBottom: '1px solid var(--orbit-border)' }}><div className="label">Contexte</div><div style={{ color: 'var(--orbit-text-1)', marginTop: 4 }}>Engagement fini dans 1 mois</div></div>
                <div><div className="label">Point de douleur</div><div style={{ color: 'var(--orbit-text-1)', marginTop: 4 }}>Tarif augmenté 2×, SAV lent</div></div>
              </div>
              <div style={{ marginTop: 18, padding: '14px 16px', background: 'var(--red-green-glow)', border: '1px solid rgba(45,190,96,.35)', textAlign: 'center' }}>
                <div className="label" style={{ color: 'var(--red-green)' }}>Résultat</div>
                <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--red-green)', marginTop: 4 }}>Commentaire → souscription</div>
                <div style={{ fontSize: 32, fontWeight: 800, color: 'var(--orbit-text-1)', marginTop: 6 }}>19 min</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--orbit-text-3)', textTransform: 'uppercase', letterSpacing: 2, marginBottom: 6 }}>Mardi · ligne du temps</div>
            {t.map((x, i) => (
              <div key={i} className="card" style={{ padding: '16px 22px', display: 'grid', gridTemplateColumns: '80px 1fr 140px', gap: 24, alignItems: 'center' }}>
                <div style={{ fontSize: 24, fontWeight: 800, color: x.c, fontFamily: 'monospace' }}>{x.h}</div>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--orbit-text-1)', marginBottom: 4 }}>{x.a}</div>
                  <div style={{ fontSize: 14, color: 'var(--orbit-text-2)', fontStyle: 'italic', lineHeight: 1.4 }}>{x.q}</div>
                </div>
                <div style={{ textAlign: 'right' }}><span className="tag" style={{ color: x.c, borderColor: x.c, background: 'transparent' }}>{x.b}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <ChromeBottom chapter="12 · Parcours" />
    </>
  );
};

/* Slide13_ContactStrategy supprimé — fusionné dans Slide12_Scoring */
const Slide13_ContactStrategy = Slide14_Lea; // alias pour compat HTML existant

/* Slide 14 — Profiling Marketing Intelligence : schéma humain + RED Fit Score + appétence offres */
const Slide14b_Profiling = () => {
  // Data points captured around the human silhouette (positioned with absolute coordinates)
  const dataPts = [
    { x: '8%', y: '18%', ic: 'wifi', t: "FAI actuel", v: "Orange · 2 ans" },
    { x: '4%', y: '46%', ic: 'cash-coin', t: "Tranche budget", v: "35–55 € / mois" },
    { x: '8%', y: '74%', ic: 'geo-alt-fill', t: "Géo · Habitat", v: "Lyon 7e · Appart." },
    { x: '30%', y: '92%', ic: 'people-fill', t: "Foyer", v: "1 adulte · 0 enfant" },
    { x: '70%', y: '92%', ic: 'broadcast-pin', t: "Usages", v: "Télétravail · Streaming" },
    { x: '88%', y: '74%', ic: 'phone-fill', t: "Équipement mobile", v: "Forfait Free 19€" },
    { x: '92%', y: '46%', ic: 'chat-quote-fill', t: "Sentiment", v: "Frustration tarif × 2" },
    { x: '88%', y: '18%', ic: 'clock-history', t: "Maturité décision", v: "Engagement fin · 1 mois" },
  ];
  const fitAxes = [
    { l: "Adéquation tarif RED", v: 92, c: 'var(--red-green)' },
    { l: "Adéquation produit (Fibre + Mobile)", v: 88, c: 'var(--waka-orange)' },
    { l: "Probabilité de souscrire", v: 81, c: 'var(--waka-cyan)' },
    { l: "Risque de churn post-30j", v: 14, c: '#9B59B6', invert: true },
    { l: "Valeur lifetime estimée", v: 76, c: 'var(--waka-yellow)' },
  ];
  const offers = [
    { o: "RED Fibre 500M", fit: 94, c: 'var(--red-green)' },
    { o: "RED Fibre + Mobile 5G", fit: 87, c: 'var(--waka-orange)' },
    { o: "RED Fibre 1G premium", fit: 62, c: 'var(--waka-cyan)' },
    { o: "RED Mobile seul", fit: 34, c: '#6E727E' },
  ];
  return (
    <>
      <ChromeTop section="Profiling marketing" slideNum={14} total={23} />
      <div className="slide-body">
        <div className="eyebrow"><span className="num">13</span>Profiling marketing &amp; appétence RED<span className="bar"></span></div>
        <div className="title-m">Chaque signal devient un profil. Chaque profil, un score d'appétence RED.</div>
        <div className="body-m" style={{ maxWidth: 1300, marginBottom: 18 }}>Au-delà de la conversion immédiate, Waka livre à RED une <b style={{ color: 'var(--orbit-text-1)' }}>matière marketing actionnable</b> : profils-types, freins, déclencheurs, et appétence par offre. Une donnée que vos équipes acquisition n'ont pas aujourd'hui.</div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 20, flex: 1, minHeight: 0 }}>

          {/* LEFT — Human + orbiting data points */}
          <div className="card" style={{ padding: 24, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <div>
                <div className="label" style={{ color: 'var(--waka-orange)' }}>Persona reconstitué en temps réel</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--orbit-text-1)', marginTop: 2 }}>Léa · 29 ans · Lyon</div>
              </div>
              <span className="tag orange">DONNÉES CAPTURÉES · 8 AXES</span>
            </div>

            <div style={{ position: 'relative', flex: 1, minHeight: 340 }}>
              {/* Halo concentric */}
              <svg viewBox="0 0 600 460" preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 1 }}>
                <defs>
                  <radialGradient id="halo" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stopColor="#E8832A" stopOpacity="0.30" />
                    <stop offset="60%" stopColor="#E8832A" stopOpacity="0.06" />
                    <stop offset="100%" stopColor="#E8832A" stopOpacity="0" />
                  </radialGradient>
                </defs>
                <circle cx="300" cy="230" r="200" fill="url(#halo)" />
                <circle cx="300" cy="230" r="170" fill="none" stroke="#E8832A" strokeWidth="1" strokeDasharray="2,4" opacity=".4" />
                <circle cx="300" cy="230" r="120" fill="none" stroke="#2DBE60" strokeWidth="1" strokeDasharray="2,4" opacity=".35" />
                {/* Human silhouette */}
                <g transform="translate(300, 230)">
                  {/* head */}
                  <circle cx="0" cy="-60" r="26" fill="#1E1E26" stroke="#E8832A" strokeWidth="2" />
                  {/* body */}
                  <path d="M -42 -30 Q -42 -10 -36 8 L -38 70 L -22 70 L -18 20 L 18 20 L 22 70 L 38 70 L 36 8 Q 42 -10 42 -30 Q 42 -38 28 -40 Q 14 -34 0 -34 Q -14 -34 -28 -40 Q -42 -38 -42 -30 Z" fill="#1E1E26" stroke="#E8832A" strokeWidth="2" />
                  {/* heart pulse */}
                  <circle cx="0" cy="-12" r="5" fill="#2DBE60">
                    <animate attributeName="r" values="4;7;4" dur="1.6s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.7;1;0.7" dur="1.6s" repeatCount="indefinite" />
                  </circle>
                </g>
                {/* connecting lines from points to body — 8 lines */}
                {[
                  { x1: 90, y1: 80 }, { x1: 50, y1: 215 }, { x1: 80, y1: 345 },
                  { x1: 215, y1: 415 }, { x1: 415, y1: 415 }, { x1: 520, y1: 345 },
                  { x1: 540, y1: 215 }, { x1: 510, y1: 80 },
                ].map((l, i) => (
                  <line key={i} x1={l.x1} y1={l.y1} x2="300" y2="230" stroke="#E8832A" strokeWidth="0.8" strokeDasharray="3,4" opacity=".35" />
                ))}
              </svg>
              {/* Data point chips overlaid */}
              {dataPts.map((p, i) => (
                <div key={i} style={{ position: 'absolute', left: p.x, top: p.y, transform: 'translate(-50%,-50%)', zIndex: 3, background: 'var(--orbit-bg-raised)', border: '1px solid var(--orbit-border-strong)', padding: '8px 12px', minWidth: 140, boxShadow: '0 6px 20px rgba(0,0,0,.4)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                    <i className={`bi bi-${p.ic}`} style={{ color: 'var(--waka-orange)', fontSize: 13 }}></i>
                    <div style={{ fontSize: 9, color: 'var(--orbit-text-3)', textTransform: 'uppercase', letterSpacing: 1.5, fontWeight: 700 }}>{p.t}</div>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--orbit-text-1)', fontWeight: 700, lineHeight: 1.2 }}>{p.v}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 8, padding: '10px 14px', background: 'var(--orbit-bg-surface)', border: '1px solid var(--orbit-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, color: 'var(--orbit-text-3)' }}>
              <span><i className="bi bi-shield-check" style={{ color: 'var(--red-green)', marginRight: 6 }}></i>Aucune donnée nominative · RGPD by design</span>
              <span style={{ fontFamily: 'monospace', color: 'var(--orbit-text-2)' }}>profile_id: 7f2a · v.2026.04</span>
            </div>
          </div>

          {/* RIGHT — Score + axes + appetence */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {/* RED Fit Score gauge */}
            <div className="card" style={{ padding: 22, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24, alignItems: 'center', borderTop: '3px solid var(--red-green)' }}>
              <div style={{ position: 'relative', width: 130, height: 130 }}>
                <svg viewBox="0 0 100 100" style={{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }}>
                  <circle cx="50" cy="50" r="42" fill="none" stroke="var(--orbit-bg-surface)" strokeWidth="10" />
                  <circle cx="50" cy="50" r="42" fill="none" stroke="var(--red-green)" strokeWidth="10" strokeDasharray={`${0.86 * 264} 264`} strokeLinecap="round" />
                </svg>
                <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                  <div style={{ fontSize: 38, fontWeight: 800, color: 'var(--orbit-text-1)', lineHeight: 1 }}>86<span style={{ fontSize: 20, color: 'var(--orbit-text-3)' }}>/100</span></div>
                  <div style={{ fontSize: 9, color: 'var(--red-green)', letterSpacing: 2, fontWeight: 700, textTransform: 'uppercase', marginTop: 2 }}>RED FIT</div>
                </div>
              </div>
              <div>
                <div className="label" style={{ color: 'var(--red-green)' }}>Score d'adaptation à RED</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--orbit-text-1)', marginTop: 4, lineHeight: 1.2 }}>Profil <span style={{ color: 'var(--red-green)' }}>très favorable</span> à une bascule RED.</div>
                <div style={{ fontSize: 12.5, color: 'var(--orbit-text-2)', marginTop: 8, lineHeight: 1.5 }}>Calculé à partir des 8 axes captés, croisé avec la base de connaissance des offres RED. Mis à jour à chaque interaction.</div>
              </div>
            </div>

            {/* Axes breakdown */}
            <div className="card" style={{ padding: 18, flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div className="label" style={{ marginBottom: 10 }}>Détail des 5 axes du score</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1, justifyContent: 'space-around' }}>
                {fitAxes.map((a, i) => (
                  <div key={i}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                      <span style={{ fontSize: 12.5, color: 'var(--orbit-text-1)', fontWeight: 600 }}>{a.l}</span>
                      <span style={{ fontSize: 14, fontWeight: 800, color: a.c, fontFamily: 'monospace' }}>{a.v}{a.invert ? '%' : '/100'}</span>
                    </div>
                    <div style={{ height: 6, background: 'var(--orbit-bg-surface)', overflow: 'hidden' }}>
                      <div style={{ width: `${a.v}%`, height: '100%', background: a.c }}></div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Appétence par offre RED */}
            <div className="card" style={{ padding: 18, borderLeft: '3px solid var(--waka-orange)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                <div className="label" style={{ color: 'var(--waka-orange)' }}>Appétence par offre RED</div>
                <span style={{ fontSize: 10, color: 'var(--orbit-text-3)', letterSpacing: 1.5 }}>RAG catalogue RED</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {offers.map((o, i) => (
                  <div key={i} style={{ padding: '8px 10px', background: 'var(--orbit-bg-surface)', borderLeft: `3px solid ${o.c}` }}>
                    <div style={{ fontSize: 10, color: 'var(--orbit-text-3)', letterSpacing: 1, fontWeight: 700, textTransform: 'uppercase', marginBottom: 2 }}>{o.o}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div style={{ flex: 1, height: 5, background: 'var(--orbit-bg)', marginRight: 8, overflow: 'hidden' }}>
                        <div style={{ width: `${o.fit}%`, height: '100%', background: o.c }}></div>
                      </div>
                      <span style={{ fontSize: 14, fontWeight: 800, color: o.c, fontFamily: 'monospace', minWidth: 40, textAlign: 'right' }}>{o.fit}%</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 16, padding: '14px 22px', background: 'linear-gradient(90deg, rgba(232,131,42,.14), rgba(45,190,96,.10))', border: '1px solid var(--orbit-border-strong)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
          <div style={{ display: 'flex', gap: 32 }}>
            <div><div className="label" style={{ color: 'var(--waka-orange)' }}>Livré dans Fabric</div><div style={{ fontSize: 14, color: 'var(--orbit-text-1)', fontWeight: 700, marginTop: 2 }}>Cohortes · Personae · Funnel</div></div>
            <div><div className="label" style={{ color: 'var(--waka-cyan)' }}>Fréquence</div><div style={{ fontSize: 14, color: 'var(--orbit-text-1)', fontWeight: 700, marginTop: 2 }}>Hebdo · Quotidien sur demande</div></div>
            <div><div className="label" style={{ color: 'var(--red-green)' }}>Activable par RED</div><div style={{ fontSize: 14, color: 'var(--orbit-text-1)', fontWeight: 700, marginTop: 2 }}>Acquisition · CRM · Produit</div></div>
          </div>
          <div style={{ fontSize: 13, color: 'var(--orbit-text-2)', fontStyle: 'italic', textAlign: 'right', maxWidth: 420 }}>« On ne vous livre pas que des souscriptions — on vous livre la <b style={{ color: 'var(--orbit-text-1)' }}>compréhension</b> de votre marché. »</div>
        </div>
      </div>
      <ChromeBottom chapter="13 · Profiling marketing" />
    </>
  );
};

Object.assign(window, { Slide12_Scoring, Slide13_ContactStrategy, Slide14_Lea, Slide14b_Profiling });