// Résonance — Nuance flow screens (S6 Selector, S7 Record, S8 Analyze, S9 Result, S10 Reply)

const { useState: uS, useEffect: uE, useRef: uR } = React;

// ═════════════════════════════════════════════════════════════
// S5 — Tabs wrapper (Journal / Nuance / Echo)
// ═════════════════════════════════════════════════════════════
function S5_Journal({ go, ctx }) {
  const populated = (window.__rzTweaks?.journalPopulated ?? true);
  const sessions = populated ? MOCK_SESSIONS : [];
  return (
    <Screen intent="journal" tabBar={<TabBar active="journal" onChange={id => go(id === 'journal' ? 'S5_Journal' : id === 'nuance' ? 'S6_Selector' : 'S13_Echo')}/>}>
      <TopBar
        title=""
        trailing={<div onClick={() => go('S15_Settings')} style={{ width:36, height:36, borderRadius:'50%', background:'rgba(255,255,255,0.6)', border:'1px solid rgba(255,255,255,0.7)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="settings" size={18}/></div>}
      />
      <div style={{ padding: '0 20px 120px' }}>
        <div style={{ fontSize: 32, fontWeight: 700, color: RZ.fg1, letterSpacing: -0.5, marginBottom: 4 }}>Journal</div>
        <div style={{ fontSize: 13, color: RZ.fg2, marginBottom: 24 }}>Bonjour Nayoul 👋</div>

        {ctx?.toast && <Toast icon="run" onDismiss={() => {}}>
          <div style={{ fontSize: 13, fontWeight: 600, color: RZ.fg1 }}>Course de 10 km détectée</div>
          <div style={{ fontSize: 12, color: RZ.fg2 }}>Tu veux me raconter comment ça s'est passé ? 🎙️</div>
        </Toast>}

        {!populated ? (
          <EmptyJournal go={go}/>
        ) : (
          <>
            <div style={{ fontSize: 12, fontWeight: 500, color: RZ.fg3, textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 10 }}>Cette semaine</div>
            {sessions.slice(0, 4).map((s, i) => (
              <SessionCard key={i} session={s} onClick={() => go('S12_Detail', { session: s })}/>
            ))}
            <div style={{ fontSize: 12, fontWeight: 500, color: RZ.fg3, textTransform: 'uppercase', letterSpacing: 0.8, margin: '20px 0 10px' }}>Semaine passée</div>
            {sessions.slice(4).map((s, i) => (
              <SessionCard key={i} session={s} onClick={() => go('S12_Detail', { session: s })}/>
            ))}
          </>
        )}
      </div>
      {populated && (
        <div onClick={() => go('S6_Selector')} style={{
          position: 'absolute', right: 20, bottom: 104, zIndex: 35,
          width: 56, height: 56, borderRadius: '50%', background: RZ.black,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          boxShadow: '0 12px 28px -8px rgba(24,20,15,0.35)',
        }}>
          <Icon name="plus" size={22} color={RZ.white} strokeWidth={2}/>
        </div>
      )}
    </Screen>
  );
}

const MOCK_SESSIONS = [
  { id: 1, type: 'run',    title: 'Course matinale',    date: "Aujourd'hui · 07:12", dist: '10.2 km', dur: '52 min', hr: '148 bpm', state: 'resonance', transcript: "J'ai pris mon temps ce matin, les jambes étaient légères et la tête bien dégagée.", reflection: "Tes mots disent « léger », tes données disent « régulier ». Il y a quelque chose qui s'aligne ici — tu cours comme tu te sens.", question: "Qu'est-ce qui a rendu ce matin différent ?" },
  { id: 2, type: 'bike',   title: 'Sortie vélo',         date: 'Hier · 18:30',       dist: '38 km',   dur: '1h 28', hr: '152 bpm', state: 'dissonance', transcript: "Je me sentais vide dès le départ mais je me suis forcé.", reflection: "Ton corps a produit, mais quelque chose ne suivait pas. Ce n'est pas un défaut — c'est une information.", question: "Qu'est-ce qui aurait pu rendre cette sortie plus douce ?" },
  { id: 3, type: 'swim',   title: 'Natation',            date: 'Lundi · 12:15',      dist: '1.5 km',  dur: '35 min', state: null, transcript: null },
  { id: 4, type: 'strength', title: 'Séance salle',      date: 'Dimanche · 10:00',   dist: '—',       dur: '45 min', state: 'equilibre', transcript: "Forme ok, un peu de fatigue dans les épaules.", reflection: "Tu as posé une séance propre malgré les signaux. Écouter un corps qui tient sans forcer — c'est déjà un choix.", question: "Comment tu veux traiter cette petite fatigue ?" },
  { id: 5, type: 'trail',  title: 'Trail Fontainebleau', date: 'Samedi · 09:00',     dist: '16 km',   dur: '2h 10', hr: '144 bpm', state: 'resonance', transcript: "Super sortie, complètement absorbé par le paysage.", reflection: "Il y a des séances où le compteur disparaît. C'est rare et précieux.", question: "Comment recréer cet état ?" },
  { id: 6, type: 'run',    title: 'Fractionné piste',    date: 'Vendredi · 18:45',   dist: '8 km',    dur: '42 min', hr: '168 bpm', state: 'tension', transcript: "Les jambes répondaient pas vraiment.", reflection: "Performance correcte sur le papier, ressenti plus nuancé. Tension ≠ alerte — ton corps te parle.", question: null },
];

function SportIcon({ type, color }) {
  const map = { run: 'run', bike: 'bike', swim: 'swim', trail: 'trail', strength: 'strength' };
  return <Icon name={map[type] || 'run'} size={16} color={color || RZ.fg1}/>;
}

function SessionCard({ session, onClick }) {
  const hasState = !!session.state;
  const m = hasState ? STATE_META[session.state] : null;
  const accent = hasState ? m.color : RZ.fg3;
  return (
    <Glass onClick={onClick} style={{
      padding: 14, marginBottom: 10, cursor: 'pointer',
      borderStyle: hasState ? 'solid' : 'dashed',
      borderColor: hasState ? 'rgba(255,255,255,0.70)' : 'rgba(24,20,15,0.14)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', right: -30, top: -30, width: 110, height: 110, borderRadius: '50%', background: `radial-gradient(closest-side, ${accent} 0%, ${accent}00 70%)`, opacity: 0.18, filter: 'blur(22px)' }}/>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, position: 'relative' }}>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(24,20,15,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <SportIcon type={session.type}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 2 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: RZ.fg1, letterSpacing: -0.1 }}>{session.title}</div>
            {hasState ? <StateBadge state={session.state}/> : (
              <span style={{ padding: '3px 9px', borderRadius: 20, background: 'rgba(24,20,15,0.06)', color: RZ.fg3, fontSize: 10, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <Icon name="mic" size={10} color={RZ.fg3}/> + Nuance
              </span>
            )}
          </div>
          <div style={{ fontSize: 11, color: RZ.fg3, letterSpacing: 0.2, marginBottom: 10 }}>{session.date}</div>
          <div style={{ display: 'flex', gap: 18 }}>
            <div><div style={{ fontSize: 13, fontWeight: 600, color: RZ.fg1 }}>{session.dist}</div><div style={{ fontSize: 9, color: RZ.fg3, textTransform: 'uppercase', letterSpacing: 0.6, marginTop: 1 }}>Distance</div></div>
            <div><div style={{ fontSize: 13, fontWeight: 600, color: RZ.fg1 }}>{session.dur}</div><div style={{ fontSize: 9, color: RZ.fg3, textTransform: 'uppercase', letterSpacing: 0.6, marginTop: 1 }}>Durée</div></div>
            {session.hr && <div><div style={{ fontSize: 13, fontWeight: 600, color: RZ.fg1 }}>{session.hr}</div><div style={{ fontSize: 9, color: RZ.fg3, textTransform: 'uppercase', letterSpacing: 0.6, marginTop: 1 }}>FC moy</div></div>}
          </div>
        </div>
      </div>
    </Glass>
  );
}

function EmptyJournal({ go }) {
  return (
    <div style={{ textAlign: 'center', padding: '40px 20px' }}>
      <div style={{ margin: '0 auto 24px' }}><NuanceViz state="dissonance" size={160} animated/></div>
      <div style={{ fontSize: 17, fontWeight: 600, color: RZ.fg1, marginBottom: 8 }}>Ton journal est encore vide.</div>
      <div style={{ fontSize: 13, color: RZ.fg2, lineHeight: 1.55, marginBottom: 24 }}>
        Connecte Strava pour voir tes séances ici,<br/>ou commence une nuance libre.
      </div>
      <PrimaryBtn onClick={() => go('S6_Selector')}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon name="mic" size={16} color={RZ.white}/>Commencer une nuance</span>
      </PrimaryBtn>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// S6 — Nuance selector
// ═════════════════════════════════════════════════════════════
function S6_Selector({ go }) {
  return (
    <Screen intent="nuance" tabBar={<TabBar active="nuance" onChange={id => go(id === 'journal' ? 'S5_Journal' : id === 'nuance' ? 'S6_Selector' : 'S13_Echo')}/>}>
      <TopBar trailing={<div onClick={() => go('S5_Journal')} style={{ padding: 8, cursor: 'pointer' }}><Icon name="close" size={18}/></div>}/>
      <div style={{ padding: '0 20px 120px' }}>
        <div style={{ fontSize: 28, fontWeight: 700, color: RZ.fg1, letterSpacing: -0.4, marginBottom: 6 }}>Déposer une nuance</div>
        <div style={{ fontSize: 13, color: RZ.fg2, lineHeight: 1.5, marginBottom: 24 }}>Parle-moi. Je t'écoute.</div>

        <Glass raised onClick={() => go('S7_Record', { kind: 'post' })} style={{ padding: 18, marginBottom: 12, cursor: 'pointer', border: `1px solid ${RZ.orange}40`, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -40, top: -40, width: 160, height: 160, borderRadius: '50%', background: `radial-gradient(closest-side, ${RZ.orange} 0%, transparent 70%)`, opacity: 0.25, filter: 'blur(30px)' }}/>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, position: 'relative' }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(252,68,44,0.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="run" size={20} color="#A82E1A"/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                <div style={{ fontSize: 15, fontWeight: 600, color: RZ.fg1 }}>Post-activité</div>
                <span style={{ fontSize: 9, fontWeight: 600, padding: '3px 8px', borderRadius: 20, background: 'rgba(252,68,44,0.18)', color: '#A82E1A', letterSpacing: 0.3 }}>Récent</span>
              </div>
              <div style={{ fontSize: 12, color: RZ.fg2, lineHeight: 1.5, marginBottom: 10 }}>Comment s'est passée ta course ?</div>
              <div style={{ fontSize: 11, color: RZ.fg3, paddingTop: 8, borderTop: '1px dashed rgba(24,20,15,0.10)' }}>Course de 10 km · il y a 12 min</div>
            </div>
          </div>
        </Glass>

        <Glass onClick={() => go('S7_Record', { kind: 'state' })} style={{ padding: 18, marginBottom: 12, cursor: 'pointer' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(23,114,254,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="sun" size={20} color={RZ.blue}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: RZ.fg1, marginBottom: 4 }}>État du jour</div>
              <div style={{ fontSize: 12, color: RZ.fg2, lineHeight: 1.5 }}>Comment vas-tu en ce moment ?</div>
            </div>
          </div>
        </Glass>

        <Glass onClick={() => go('S7_Record', { kind: 'free' })} style={{ padding: 18, cursor: 'pointer' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(138,91,149,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="chat" size={20} color={RZ.mauve}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: RZ.fg1, marginBottom: 4 }}>Expression libre</div>
              <div style={{ fontSize: 12, color: RZ.fg2, lineHeight: 1.5 }}>Tu veux juste parler — pas d'activité, pas de contexte.</div>
            </div>
          </div>
        </Glass>
      </div>
    </Screen>
  );
}

// ═════════════════════════════════════════════════════════════
// S7 — Record
// ═════════════════════════════════════════════════════════════
function S7_Record({ go, ctx }) {
  const [rec, setRec] = uS(false);
  const [t, setT] = uS(0);
  const variant = window.__rzTweaks?.voiceVariant || 'rings';

  uE(() => {
    if (!rec) return;
    const iv = setInterval(() => setT(x => x + 1), 1000);
    return () => clearInterval(iv);
  }, [rec]);

  const mmss = `${String(Math.floor(t/60)).padStart(1,'0')}:${String(t%60).padStart(2,'0')}`;
  const prompts = { post: "Comment s'est passée ta course ?", state: 'Comment te sens-tu là, maintenant ?', free: "Qu'est-ce qui t'occupe l'esprit ?" };
  const prompt = prompts[ctx?.kind || 'post'];

  return (
    <Screen intent="nuance">
      <TopBar onBack={() => go('S6_Selector')} trailing={<div onClick={() => go('S6_Selector')} style={{ padding: 8, cursor: 'pointer' }}><Icon name="close" size={18}/></div>}/>
      <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100% - 80px)', padding: '0 24px 40px', alignItems: 'center' }}>
        {ctx?.kind === 'post' && (
          <div style={{ padding: '6px 14px', background: 'rgba(252,68,44,0.10)', borderRadius: 20, fontSize: 11, fontWeight: 500, color: '#A82E1A', display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 24 }}>
            <Icon name="run" size={12} color="#A82E1A"/> Course · 10.2 km · 52 min
          </div>
        )}
        <div style={{ fontSize: 24, fontWeight: 600, color: RZ.fg1, letterSpacing: -0.3, textAlign: 'center', marginBottom: 8, lineHeight: 1.3, maxWidth: 280 }}>
          {prompt}
        </div>
        <div style={{ fontSize: 12, color: RZ.fg3, textAlign: 'center', marginBottom: 40 }}>Parle librement — comment tu te sens, pas comment tu as performé.</div>

        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }}>
          <VoiceButton variant={variant} rec={rec}/>
        </div>

        <div style={{ fontSize: 32, fontWeight: 300, color: RZ.fg2, fontVariantNumeric: 'tabular-nums', letterSpacing: 1, marginBottom: 8 }}>{mmss}</div>

        <div onClick={() => rec ? go('S8_Analyze') : setRec(true)} style={{ cursor: 'pointer', padding: '10px 20px' }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: RZ.fg1 }}>
            {rec ? 'Appuie pour terminer' : 'Appuie pour parler'}
          </div>
        </div>
      </div>
    </Screen>
  );
}

function VoiceButton({ variant, rec }) {
  if (variant === 'waveform') {
    return (
      <div style={{ position: 'relative', width: 240, height: 180, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {rec && (
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
            {[...Array(32)].map((_, i) => (
              <div key={i} className="rz-wave-bar" style={{
                width: 3, borderRadius: 3,
                background: i < 16 ? RZ.orange : RZ.blue,
                animationDelay: `${i * 60}ms`,
              }}/>
            ))}
          </div>
        )}
        <div style={{
          position: 'relative', zIndex: 2, width: 96, height: 96, borderRadius: '50%', background: RZ.black,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 12px 32px -8px rgba(24,20,15,0.3)',
        }}>
          <Icon name={rec ? 'pause' : 'mic'} size={30} color={RZ.white}/>
        </div>
      </div>
    );
  }
  if (variant === 'orb') {
    return (
      <div style={{ position: 'relative', width: 220, height: 220, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div className={rec ? 'rz-breath-fast' : 'rz-breath'} style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          background: `radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), ${RZ.mauve}30 60%)`,
          filter: 'blur(0.5px)',
        }}/>
        <div className={rec ? 'rz-drift' : ''} style={{ position:'absolute', inset:-20, borderRadius:'50%', background:`radial-gradient(closest-side,${RZ.orange} 0%,${RZ.orange}00 60%)`, opacity:0.45, filter:'blur(32px)' }}/>
        <div className={rec ? 'rz-drift' : ''} style={{ position:'absolute', inset:-20, borderRadius:'50%', background:`radial-gradient(closest-side,${RZ.blue} 0%,${RZ.blue}00 60%)`, opacity:0.45, filter:'blur(32px)', animationDelay:'1.5s' }}/>
        <div style={{
          position: 'relative', width: 88, height: 88, borderRadius: '50%', background: 'rgba(24,20,15,0.85)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(10px)',
          boxShadow: '0 12px 32px -8px rgba(24,20,15,0.3)',
        }}>
          <Icon name={rec ? 'pause' : 'mic'} size={28} color={RZ.white}/>
        </div>
      </div>
    );
  }
  // rings (default)
  return (
    <div style={{ position: 'relative', width: 180, height: 180, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {rec && <>
        <div className="rz-ring-pulse" style={{ position: 'absolute', inset: -10, borderRadius: '50%', border: `2px solid ${RZ.orange}`, opacity: 0.55 }}/>
        <div className="rz-ring-pulse-2" style={{ position: 'absolute', inset: 10, borderRadius: '50%', border: `2px solid ${RZ.blue}`, opacity: 0.8 }}/>
      </>}
      <div style={{
        width: 96, height: 96, borderRadius: '50%', background: RZ.black,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 12px 32px -8px rgba(24,20,15,0.3)',
      }}>
        <Icon name={rec ? 'pause' : 'mic'} size={30} color={RZ.white}/>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// S8 — Analyze
// ═════════════════════════════════════════════════════════════
function S8_Analyze({ go }) {
  const [phase, setPhase] = uS(0);
  const phrases = ["J'écoute ton ressenti…", 'Je consulte tes données Strava…', 'Je cherche ce qui résonne…'];
  uE(() => {
    const t1 = setTimeout(() => setPhase(1), 2200);
    const t2 = setTimeout(() => setPhase(2), 4400);
    const t3 = setTimeout(() => go('S9_Result'), 6600);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, []);
  return (
    <Screen intent="nuance" noStatus>
      <StatusBar/>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', alignItems: 'center', justifyContent: 'center', padding: 24, textAlign: 'center' }}>
        <div style={{ position: 'relative', width: 260, height: 260, marginBottom: 40 }}>
          <div className="rz-drift" style={{ position:'absolute', width:180, height:180, left:10, top:30, borderRadius:'50%', background:`radial-gradient(closest-side,${RZ.orange},${RZ.orange}00 70%)`, filter:'blur(40px)', opacity:0.7 }}/>
          <div className="rz-drift" style={{ position:'absolute', width:180, height:180, right:10, bottom:30, borderRadius:'50%', background:`radial-gradient(closest-side,${RZ.blue},${RZ.blue}00 70%)`, filter:'blur(40px)', opacity:0.7, animationDelay:'1.5s' }}/>
          <div className="rz-breath" style={{ position:'absolute', width:120, height:120, left:'50%', top:'50%', transform:'translate(-50%,-50%)', borderRadius:'50%', background:`radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85), ${RZ.mauve}50 70%)`, boxShadow:'inset 0 0 40px rgba(255,255,255,0.5), 0 12px 32px rgba(138,91,149,0.25)' }}/>
        </div>
        <div style={{ fontSize: 18, fontWeight: 500, color: RZ.fg1, minHeight: 28, transition: 'opacity 400ms', letterSpacing: -0.2 }}>
          {phrases[phase]}
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
          {phrases.map((_, i) => (
            <div key={i} style={{ width: 6, height: 6, borderRadius: '50%', background: i <= phase ? RZ.mauve : 'rgba(138,91,149,0.2)', transition: 'background 300ms' }}/>
          ))}
        </div>
      </div>
    </Screen>
  );
}

// ═════════════════════════════════════════════════════════════
// S9 — Result (tweakable state)
// ═════════════════════════════════════════════════════════════
function S9_Result({ go }) {
  const state = window.__rzTweaks?.resultState || 'resonance';
  const m = STATE_META[state];
  const content = {
    resonance:  { subtitle: 'Corps et esprit alignés.',    reflection: "Ton souffle dit « léger ». Tes données disent « régulier ». Il y a quelque chose qui s'aligne ici — tu cours comme tu te sens. Rare et précieux.", question: "Qu'est-ce qui a rendu ce matin différent ?" },
    equilibre:  { subtitle: 'Proche, mais avec un signal.', reflection: "Ton corps tient le rythme, mais j'entends une fatigue douce derrière les mots. Ce n'est pas une alerte — c'est une nuance à garder en tête.", question: "De quoi aurais-tu besoin aujourd'hui ?" },
    tension:    { subtitle: 'Un décalage modéré.',          reflection: "Tes jambes ont livré, mais la tête n'était pas tout à fait là. Tension ≠ échec — c'est une information sur ta journée, pas sur ta valeur.", question: "Qu'est-ce qui prenait de la place en toi aujourd'hui ?" },
    dissonance: { subtitle: 'Un fort décalage.',            reflection: "Ton corps a produit de beaux chiffres. Pourtant tu me dis que c'était dur. Les deux sont vrais en même temps — et ça, ça mérite qu'on s'y arrête.", question: "Qu'est-ce qui t'aurait aidé à traverser cette séance autrement ?" },
    alerte:     { subtitle: 'Signaux de surcharge.',        reflection: "Plusieurs signaux convergent. Je ne te dis pas d'arrêter — je te dis que ton corps te parle assez fort pour qu'on l'écoute.", question: "Qu'est-ce que tu pourrais t'offrir comme récupération ?" },
  }[state];

  return (
    <Screen intent={m.tag}>
      <TopBar trailing={<div onClick={() => go('S5_Journal')} style={{ padding: 8, cursor: 'pointer' }}><Icon name="close" size={18}/></div>}/>
      <div style={{ padding: '0 20px 120px', textAlign: 'center' }}>
        <div style={{ margin: '8px auto 20px' }}>
          <NuanceViz state={state} size={220}/>
        </div>
        <div style={{ fontSize: 10, fontWeight: 600, color: m.text, textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 6 }}>Ta nuance</div>
        <div style={{ fontSize: 28, fontWeight: 700, color: RZ.fg1, letterSpacing: -0.4, marginBottom: 4 }}>{m.label}</div>
        <div style={{ fontSize: 13, color: RZ.fg2, marginBottom: 28 }}>{content.subtitle}</div>

        <Glass raised style={{ padding: 18, marginBottom: 14, textAlign: 'left' }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: RZ.fg3, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name="sparkle" size={12} color={RZ.mauve}/> Réflexion
          </div>
          <div style={{ fontSize: 14, color: RZ.fg1, lineHeight: 1.65 }}>{content.reflection}</div>
        </Glass>

        <Glass style={{ padding: 18, marginBottom: 20, textAlign: 'left', background: 'rgba(255,255,255,0.80)' }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: RZ.fg3, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }}>Une question pour toi</div>
          <div style={{ fontSize: 15, color: RZ.fg1, lineHeight: 1.55, fontStyle: 'italic', marginBottom: 14 }}>« {content.question} »</div>
          <div onClick={() => go('S10_Reply', { question: content.question })} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 16px',
            background: 'rgba(255,255,255,0.6)', border: '1px solid rgba(24,20,15,0.10)',
            borderRadius: 20, cursor: 'pointer',
          }}>
            <Icon name="mic" size={14}/>
            <span style={{ fontSize: 13, fontWeight: 500, color: RZ.fg1 }}>Répondre</span>
          </div>
          <span style={{ fontSize: 10, color: RZ.fg3, marginLeft: 10 }}>optionnel</span>
        </Glass>

        <PrimaryBtn onClick={() => go('S5_Journal')}>Sauvegarder dans le journal →</PrimaryBtn>
        <GhostBtn onClick={() => go('S5_Journal')} style={{ marginTop: 4 }}>Ignorer</GhostBtn>
      </div>
    </Screen>
  );
}

// ═════════════════════════════════════════════════════════════
// S10 — Reply
// ═════════════════════════════════════════════════════════════
function S10_Reply({ go, ctx }) {
  const [rec, setRec] = uS(false);
  return (
    <Screen intent="nuance">
      <TopBar onBack={() => go('S9_Result')}/>
      <div style={{ padding: '0 24px 40px', display: 'flex', flexDirection: 'column', height: 'calc(100% - 80px)', alignItems: 'center' }}>
        <Glass raised style={{ padding: 16, marginBottom: 24, width: '100%', textAlign: 'left' }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: RZ.fg3, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 6 }}>Sa question</div>
          <div style={{ fontSize: 14, color: RZ.fg1, lineHeight: 1.55, fontStyle: 'italic' }}>« {ctx?.question || 'Qu\'est-ce qui a rendu ce matin différent ?'} »</div>
        </Glass>
        <div style={{ fontSize: 12, color: RZ.fg2, textAlign: 'center', lineHeight: 1.5, marginBottom: 'auto', maxWidth: 260 }}>
          Ta réponse s'ajoute à ta réflexion. Elle n'est pas réanalysée — c'est un espace pour toi.
        </div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
          <VoiceButton variant={window.__rzTweaks?.voiceVariant || 'rings'} rec={rec}/>
        </div>
        <div onClick={() => rec ? go('S9_Result') : setRec(true)} style={{ cursor: 'pointer', padding: '12px 20px', marginTop: 20 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: RZ.fg1 }}>{rec ? 'Noté 🌊' : 'Appuie pour répondre'}</div>
        </div>
      </div>
    </Screen>
  );
}

Object.assign(window, { S5_Journal, S6_Selector, S7_Record, S8_Analyze, S9_Result, S10_Reply, MOCK_SESSIONS, SessionCard, SportIcon });