{checked &&

}

); const PrimaryBtn = ({ children, onClick, disabled, color='var(--blue)', style }) => ( ); // ── Typewriter ──────────────────────────────────────────────────────────── const TypewriterText = ({ text, speed=18, onDone, skippable=true, style, textStyle }) => { const [displayed, setDisplayed] = React.useState(''); const [done, setDone] = React.useState(false); const idx = React.useRef(0); const timer = React.useRef(null); const finish = React.useCallback(() => { clearInterval(timer.current); setDisplayed(text); setDone(true); onDone && onDone(); }, [text, onDone]); React.useEffect(() => { idx.current = 0; setDisplayed(''); setDone(false); timer.current = setInterval(() => { idx.current += 1; setDisplayed(text.slice(0, idx.current)); if (idx.current >= text.length) { clearInterval(timer.current); setDone(true); onDone && onDone(); } }, speed); return () => clearInterval(timer.current); }, [text, speed]); return ( {displayed} {!done && } ); }; // ── Forced Timer Button ──────────────────────────────────────────────────── const TimerButton = ({ seconds=12, label, onClick, color='var(--red)' }) => { const [rem, setRem] = React.useState(seconds); const [ready, setReady] = React.useState(false); React.useEffect(() => { if (rem <= 0) { setReady(true); return; } const t = setTimeout(() => setRem(r=>r-1), 1000); return () => clearTimeout(t); }, [rem]); const pct = ((seconds-rem)/seconds)*100; return ( ); }; // ── Confidence Slider ───────────────────────────────────────────────────── const ConfidenceGate = ({ stepLabel, onConfirm }) => { const [val, setVal] = React.useState(null); const opts = [ { id:'low', label:'Pas sûr(e)', color:'var(--amber)', emoji:'🤔' }, { id:'mid', label:'Assez sûr(e)', color:'var(--blue)', emoji:'🙂' }, { id:'high', label:'Certain(e)', color:'var(--green)', emoji:'💪' }, ]; return (

Avant de répondre à {stepLabel}

À quel point êtes-vous confiant(e) dans votre réponse ?

{opts.map(o => (

setVal(o.id)} style={{ flex:1, padding:'9px 6px', borderRadius:9, textAlign:'center', cursor:'pointer', background:val===o.id?`${o.color}18`:'var(--surface3)', border:`1.5px solid ${val===o.id?o.color:'var(--border)'}`, transition:'all 0.15s' }}>

{o.emoji}

{o.label}

))}

onConfirm(val)} disabled={!val} color="var(--purple)"> Commencer l'étape

); }; // ── Confidence Inline ───────────────────────────────────────────────────── // Appears after an answer is selected, before submit. Compact 3-button picker. const ConfidenceInline = ({ value, onChange }) => { const opts = [ { id:'low', label:'Pas sûr(e)', color:'var(--amber)', emoji:'🤔' }, { id:'mid', label:'Assez sûr(e)',color:'var(--blue)', emoji:'🙂' }, { id:'high', label:'Certain(e)', color:'var(--green)', emoji:'💪' }, ]; return (

Votre confiance dans cette réponse ?

{opts.map(o => (

onChange(o.id)} style={{ flex:1, padding:'7px 4px', borderRadius:8, textAlign:'center', cursor:'pointer', background:value===o.id?`${o.color}18`:'var(--surface3)', border:`1.5px solid ${value===o.id?o.color:'var(--border)'}`, transition:'all 0.15s' }}>

{o.emoji}

{o.label}

))}

); }; // ── Feedback Card ───────────────────────────────────────────────────────── const FeedbackCard = ({ type, title, text, consequence, earnedPts, maxPts, onContinue, onRetry, retrySeconds=12, isFirstRun=true }) => { const cfg = { correct: { bg:'rgba(34,197,94,0.06)', border:'rgba(34,197,94,0.22)', accent:'#22C55E', sym:'✓' }, acceptable:{ bg:'rgba(245,158,11,0.06)', border:'rgba(245,158,11,0.22)', accent:'#F59E0B', sym:'~' }, critical: { bg:'rgba(239,68,68,0.06)', border:'rgba(239,68,68,0.28)', accent:'#EF4444', sym:'✕' }, info: { bg:'rgba(59,130,246,0.06)', border:'rgba(59,130,246,0.22)', accent:'#3B82F6', sym:'→' }, }; const c = cfg[type]||cfg.info; const speeds = { correct:28, acceptable:38, critical:52, info:32 }; const speed = speeds[type]||18; const [textDone, setTextDone] = React.useState(!isFirstRun); const [consDone, setConsDone] = React.useState(!isFirstRun || !consequence); const allDone = textDone && consDone; return (

{c.sym}

{title} {earnedPts !== undefined && ( +{earnedPts}/{maxPts} pts )}

{isFirstRun ? setTextDone(true)} /> : text}

{consequence && (

CE QUI SE SERAIT PASSÉ

{isFirstRun ? setConsDone(true)} /> : consequence}

)} {allDone && (

{onRetry ? : onContinue && ( )}

)}

); }; // ── Flag Modal ───────────────────────────────────────────────────────────── const FlagModal = ({ caseId, onClose }) => { const [diagnosis, setDiagnosis] = React.useState(''); const [reason, setReason] = React.useState(''); const [sent, setSent] = React.useState(false); const [sending, setSending] = React.useState(false); const send = async () => { if (!diagnosis.trim()) return; setSending(true); try { await fetch('https://csmgotkcifydwkdhjsck.supabase.co/rest/v1/flags', { method: 'POST', headers: { 'apikey': 'sb_publishable_nlUeg6raQknjAxuU7cH_Lg_cd2WjSmZ', 'Authorization': 'Bearer sb_publishable_nlUeg6raQknjAxuU7cH_Lg_cd2WjSmZ', 'Content-Type': 'application/json', 'Prefer': 'return=minimal' }, body: JSON.stringify({ case_id: caseId, diagnosis: diagnosis, reason: reason }) }); setSent(true); } catch (e) { alert("Erreur lors de l'envoi du signalement."); } setSending(false); }; return (

e.stopPropagation()}> {sent ? (

✓

Signalement envoyé

L'équipe Phuturistic examinera votre retour.

) : ( <>

Signaler un diagnostic erroné

Vous pensez que le diagnostic affiché est incorrect ? Indiquez le bon diagnostic et expliquez votre raisonnement.

DIAGNOSTIC CORRECT SELON VOUS setDiagnosis(e.target.value)} placeholder="Ex: Vaginose bactérienne…" style={{ width:'100%', background:'var(--surface3)', border:'1px solid var(--border2)', borderRadius:8, padding:'9px 12px', color:'var(--text)', fontSize:13, fontFamily:'var(--font)', outline:'none' }} />

JUSTIFICATION

setReason(e.target.value)} placeholder="Expliquez pourquoi…" rows={3} style={{ width:'100%', background:'var(--surface3)', border:'1px solid var(--border2)', borderRadius:8, padding:'9px 12px', color:'var(--text)', fontSize:13, fontFamily:'var(--font)', outline:'none', resize:'vertical' }} />
            </div>
            <div style={{ display:'flex', gap:8 }}>
              <button onClick={onClose} style={{ flex:1, background:'var(--surface3)', border:'1px solid var(--border)', color:'var(--text-dim)', padding:10, borderRadius:8, fontSize:13, cursor:'pointer' }}>Annuler</button>
              <button onClick={send} disabled={!diagnosis.trim() || sending} style={{ flex:2, background:diagnosis.trim()?'var(--amber)':'var(--surface3)', border:'none', color:diagnosis.trim()?'#080f1e':'var(--text-muted)', padding:10, borderRadius:8, fontSize:13, fontWeight:700, cursor:diagnosis.trim()&&!sending?'pointer':'default' }}>
                {sending ? 'Envoi...' : 'Envoyer'}
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

// ── Waterfall Progress ─────────────────────────────────────────────────────
const STEP_LABELS_V3 = ["Écouter","Extraire","Questionner","Diagnostiquer","Évaluer","Traiter","Conseiller","Débrief"];

// Export all to window
Object.assign(window, {
  Ico, Avatar, Tag, StepLabel, Hint, InfoBox, Mono,
  CheckBox, Radio, PrimaryBtn,
  TypewriterText, TimerButton, ConfidenceGate, ConfidenceInline,
  FeedbackCard, FlagModal, WaterfallProgress,
  STEP_LABELS_V3,
});