/* Diagnostic B — Écrans (sauf restitution).
   Une question par écran (l'empilement de la version précédente a été retiré).
   Le carnet conserve sa structure en 3 chapitres : intro de chapitre + questions au sein du chapitre.
*/

const { useState, useMemo, useEffect } = React;

// ─────────────────────────────────────────────────────────────────
// Chrome (en-tête + chips d'axes)
// ─────────────────────────────────────────────────────────────────
function Chrome({ activeChapter, doneChapters, showChips = true }) {
  return (
    <div className="db-chrome">
      <span className="db-brand">
        <span className="db-diamond" /> SEREL
      </span>
      {showChips ? (
        <div className="db-axis-row">
          {CHAPTERS.map(ch => {
            const cls =
              ch.id === activeChapter ? 'is-active' :
              doneChapters.includes(ch.id) ? 'is-done' : '';
            return (
              <div key={ch.id} className={'db-axis-chip ' + cls}>
                <span className="db-diamond" /> {ch.shortName || ch.name}
              </div>
            );
          })}
        </div>
      ) : (
        <span className="db-brand-meta">Diagnostic · Mentoring Marie Andrade</span>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// Footer de progression
// ─────────────────────────────────────────────────────────────────
function ProgressFooter({ answers, currentQid, style }) {
  // style: 'axes' (par axe) | 'linear' (barre fine) | 'diamonds' (15 marqueurs) | 'minimal' (compteur seul) | 'none'
  if (style === 'none') return null;

  const total = QUESTIONS.length;
  const done = QUESTIONS.filter(q => answers[q.id] != null && (q.type !== 'multi' || (answers[q.id] || []).length > 0)).length;
  const currentIdx = QUESTIONS.findIndex(q => q.id === currentQid);

  if (style === 'minimal') {
    return (
      <div className="db-foot" style={{ justifyContent: 'flex-end' }}>
        <span className="db-progress-counter">
          <strong>{currentIdx >= 0 ? String(currentIdx + 1).padStart(2, '0') : String(done).padStart(2, '0')}</strong> / {total}
        </span>
      </div>
    );
  }

  if (style === 'diamonds') {
    return (
      <div className="db-foot">
        <span className="db-progress-counter">
          <strong>{currentIdx >= 0 ? String(currentIdx + 1).padStart(2, '0') : String(done).padStart(2, '0')}</strong> / {total}
        </span>
        <div className="db-progress-diamonds" aria-hidden="true">
          {QUESTIONS.map((q, i) => {
            const isDone = i < (currentIdx >= 0 ? currentIdx : done);
            const isCurr = i === currentIdx;
            return <span key={q.id} className={'d ' + (isCurr ? 'curr' : isDone ? 'done' : '')} />;
          })}
        </div>
      </div>
    );
  }

  if (style === 'linear') {
    const pct = Math.round(((currentIdx >= 0 ? currentIdx : done) / total) * 100);
    return (
      <div className="db-foot">
        <span className="db-progress-counter">
          <strong>{currentIdx >= 0 ? String(currentIdx + 1).padStart(2, '0') : String(done).padStart(2, '0')}</strong> / {total}
        </span>
        <div className="db-progress-line"><div className="fill" style={{ width: pct + '%' }} /></div>
      </div>
    );
  }

  // axes (par défaut)
  return (
    <div className="db-foot">
      <div className="db-progress-axes">
        {CHAPTERS.map(ch => {
          const qs = QUESTIONS.filter(q => q.chapter === ch.id);
          const doneIn = qs.filter(q => answers[q.id] != null && (q.type !== 'multi' || (answers[q.id] || []).length > 0)).length;
          const curIn = qs.findIndex(q => q.id === currentQid);
          const isActive = curIn !== -1;
          const isDone = doneIn === qs.length;
          return (
            <div key={ch.id} className="axis-block">
              <div className={'lbl ' + (isActive ? 'on' : isDone ? 'done' : '')}>
                <span>{ch.name}</span>
                <span>{doneIn}/{qs.length}</span>
              </div>
              <div className="bar">
                {qs.map((_, i) => {
                  const cls = i < doneIn ? 'done' : (i === curIn ? 'curr' : '');
                  return <span key={i} className={cls} />;
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// ÉCRAN — Accueil (page de garde · §14.3)
// ─────────────────────────────────────────────────────────────────
function WelcomeScreen({ onStart, firstName = 'Capucine', variant = 'standard' }) {
  // variants: 'standard' | 'already-done' | 'invalid-token'
  if (variant === 'invalid-token') {
    return (
      <>
        <Chrome showChips={false} />
        <div className="db-body db-fade">
          <div className="db-narrow" style={{ maxWidth: 540 }}>
            <div className="db-kicker" style={{ marginBottom: 22 }}>Accès restreint</div>
            <h1 className="db-h1" style={{ marginBottom: 28 }}>
              Ce diagnostic est réservé aux clients en mentoring.
            </h1>
            <hr className="db-rule" style={{ marginBottom: 28 }} />
            <p className="db-body-text" style={{ marginBottom: 12 }}>
              Pour recevoir votre lien personnalisé, contactez-moi&nbsp;:
            </p>
            <p className="db-body-text" style={{ marginBottom: 36 }}>
              <a href="mailto:marie@serel-ia.com" style={{ color: 'var(--db-accent)', textDecoration: 'none', borderBottom: '1px solid var(--db-accent)' }}>marie@serel-ia.com</a>
            </p>
            <p className="db-body-text s" style={{ color: 'var(--db-text-3)' }}>
              Diagnostic IA pour dirigeants · Marie Andrade · SEREL
            </p>
          </div>
        </div>
      </>
    );
  }

  if (variant === 'already-done') {
    return (
      <>
        <Chrome showChips={false} />
        <div className="db-body db-fade">
          <div className="db-narrow" style={{ maxWidth: 580 }}>
            <div className="db-kicker" style={{ marginBottom: 22 }}>Diagnostic IA pour dirigeants</div>
            <h1 className="db-h1" style={{ marginBottom: 22 }}>Bienvenue {firstName}.</h1>
            <hr className="db-rule" style={{ marginBottom: 28 }} />
            <p className="db-body-text" style={{ marginBottom: 36 }}>
              Vous avez déjà rempli ce diagnostic le 14 mai 2026. Vous pouvez consulter
              vos résultats à tout moment, ou recommencer si vous le souhaitez.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 40 }}>
              <button className="db-btn" onClick={onStart}>Voir mes résultats</button>
              <button className="db-btn ghost">Recommencer</button>
            </div>
            <p className="db-body-text s" style={{ color: 'var(--db-text-3)' }}>
              Diagnostic IA pour dirigeants · Marie Andrade · SEREL
            </p>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <Chrome showChips={false} />
      <div className="db-body db-fade">
        <div className="db-narrow" style={{ maxWidth: 620 }}>
          <div className="db-kicker" style={{ marginBottom: 22 }}>Diagnostic IA pour dirigeants</div>
          <p className="db-body-text" style={{ marginBottom: 8, color: 'var(--db-text-2)' }}>
            Bienvenue {firstName}.
          </p>
          <h1 className="db-h1" style={{ marginBottom: 24 }}>Le point de départ.</h1>
          <hr className="db-rule" style={{ marginBottom: 28 }} />

          <p className="db-body-text" style={{ marginBottom: 36 }}>
            Ce diagnostic prolonge notre première séance. L'idée n'est pas de refaire ce
            qu'on a abordé ensemble, mais de m'aider à voir ce que vous n'avez pas
            spontanément mis en avant. Vous y trouverez peut-être des angles morts
            intéressants pour nos prochaines séances.
          </p>

          <div className="db-kicker muted" style={{ marginBottom: 14 }}>Ce qui va se passer</div>
          <ul className="db-welcome-list">
            <li>15 questions courtes sur 3 axes : impacts de l'IA, vos usages, l'actualité</li>
            <li>Environ 5 minutes</li>
            <li>Vous recevrez vos résultats par mail à la fin</li>
          </ul>

          <p className="db-body-text s" style={{ color: 'var(--db-text-3)', marginBottom: 28, lineHeight: 1.55 }}>
            Vos réponses, votre profil et votre note libre me sont transmis (Marie Andrade,
            SEREL) et conservés le temps de notre programme, puis supprimés. <a href="#politique" style={{ color: 'var(--db-text-2)', textDecoration: 'underline', textUnderlineOffset: 2 }}>En savoir plus</a>
          </p>

          <button className="db-btn" onClick={onStart}>Commencer</button>

          <p className="db-body-text s" style={{ color: 'var(--db-text-3)', marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--db-border)' }}>
            Diagnostic IA pour dirigeants · Marie Andrade · SEREL
          </p>
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────────
// ÉCRAN — Ouverture de chapitre
// ─────────────────────────────────────────────────────────────────
function ChapterIntroScreen({ chapter, answers, doneChapters, onStart, onBack, showQuote }) {
  return (
    <>
      <Chrome activeChapter={chapter.id} doneChapters={doneChapters} />
      <div className="db-body db-fade" style={{ justifyContent: 'space-between' }}>
        <div />
        <div className="db-narrow">
          <div className="db-chapter-tag" style={{ marginBottom: 32 }}>
            <span className="num">{chapter.num}</span>
            <span className="name">{chapter.name}</span>
            <span className="meta">{chapter.count} questions · {chapter.duration}</span>
          </div>

          {showQuote && (
            <p className="db-italic-quote" style={{ marginBottom: 28 }}>
              {chapter.quote}
            </p>
          )}
          <p className="db-body-text" style={{ marginBottom: 40, maxWidth: 540 }}>
            {chapter.intro}
          </p>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button className="db-btn" onClick={onStart}>Continuer</button>
            {onBack && (
              <button className="db-btn linkish" onClick={onBack}>← Retour</button>
            )}
          </div>
        </div>
        <div />
      </div>
      <ProgressFooter answers={answers} currentQid={null} style="axes" />
    </>
  );
}

// ─────────────────────────────────────────────────────────────────
// ÉCRAN — Question (single ou multi)
// ─────────────────────────────────────────────────────────────────
function QuestionScreen({
  question, chapter, answers, doneChapters,
  onAnswer, onNext, onBack, progressStyle, optionsDensity, numbering,
}) {
  const value = answers[question.id];
  const isMulti = question.type === 'multi';

  const qInChapter = QUESTIONS.filter(q => q.chapter === chapter.id);
  const qPos = qInChapter.findIndex(q => q.id === question.id) + 1;

  const numLabel = numbering === 'continuous'
    ? `Q${question.num} · ${question.short}`
    : `Question ${qPos}/${qInChapter.length} · ${question.short}`;

  const toggle = (i) => {
    if (isMulti) {
      const cur = new Set(value || []);
      // dernière option = "Aucune ..." exclusive
      if (question.exclusiveLast) {
        const lastIdx = question.options.length - 1;
        if (i === lastIdx) {
          onAnswer(question.id, cur.has(lastIdx) ? [] : [lastIdx]);
          return;
        }
        cur.delete(lastIdx);
      }
      if (cur.has(i)) cur.delete(i); else cur.add(i);
      onAnswer(question.id, Array.from(cur).sort((a, b) => a - b));
    } else {
      onAnswer(question.id, i);
    }
  };

  const canContinue = isMulti
    ? Array.isArray(value) && value.length > 0
    : value != null;

  const continueLabel = 'Continuer';

  return (
    <>
      <Chrome activeChapter={chapter.id} doneChapters={doneChapters} />
      <div className="db-body db-fade">
        <div className="db-narrow">
          <div className="db-chapter-tag" style={{ marginBottom: 32 }}>
            <span className="num">{chapter.num}</span>
            <span className="name">{chapter.name}</span>
            <span className="meta">Question {qPos} sur {qInChapter.length}</span>
          </div>

          <div className="db-kicker" style={{ marginBottom: 12 }}>{numLabel}</div>
          <h2 className="db-h2" style={{ marginBottom: question.helper ? 10 : 28 }}>
            {question.title}
          </h2>
          {question.helper && (
            <p className="db-body-text s" style={{ fontStyle: 'italic', marginBottom: 24 }}>
              {question.helper}
            </p>
          )}

          <div className={'db-options' + (optionsDensity === 'compact' ? ' compact' : '')}>
            {question.options.map((opt, i) => {
              const selected = isMulti ? (value || []).includes(i) : value === i;
              return (
                <button
                  key={i}
                  className={'db-option' + (selected ? ' is-selected' : '')}
                  onClick={() => toggle(i)}
                  type="button"
                >
                  <span className={'mark ' + (isMulti ? 'check' : 'radio')} />
                  <span className="body">{opt}</span>
                </button>
              );
            })}
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 28, gap: 12, flexWrap: 'wrap' }}>
            <button className="db-btn linkish" onClick={onBack} disabled={!onBack}>← Retour</button>
            <button className="db-btn" onClick={onNext} disabled={!canContinue}>
              {continueLabel}
            </button>
          </div>
        </div>
      </div>
      <ProgressFooter answers={answers} currentQid={question.id} style={progressStyle} />
    </>
  );
}

// ─────────────────────────────────────────────────────────────────
// ÉCRAN — Question ressenti (multi-select, hors scoring)
// 4 layouts au choix via tweak `feelingLayout`
//   • 'editorial' (défaut) — liste éditoriale aérée
//   • 'columns'              — deux colonnes : ce qui porte / ce qui pèse
//   • 'map'                  — carte 2D énergie×confort
//   • 'tags'                 — tags compacts (ancien comportement)
// ─────────────────────────────────────────────────────────────────
function FeelingScreen({ answers, doneChapters, value, onChange, onNext, onBack, progressStyle, layout = 'editorial' }) {
  const sel = new Set(value || []);
  const toggle = (i) => {
    const next = new Set(sel);
    if (next.has(i)) next.delete(i); else next.add(i);
    onChange(Array.from(next).sort((a, b) => a - b));
  };

  // Coordonnées pour le layout 'map' (énergie x →, confort y ↑)
  // x: 0 → calme, 1 → intense   |   y: 0 → inconfort, 1 → confort
  const MAP_COORDS = [
    { x: 0.85, y: 0.78 }, // Excitation, curiosité forte
    { x: 0.35, y: 0.82 }, // Curiosité tranquille
    { x: 0.22, y: 0.68 }, // Confiance sereine
    { x: 0.78, y: 0.38 }, // Sentiment d'urgence
    { x: 0.88, y: 0.22 }, // Pression, FOMO
    { x: 0.50, y: 0.30 }, // Doute
    { x: 0.25, y: 0.18 }, // Lassitude
    { x: 0.68, y: 0.10 }, // Anxiété
  ];

  // En-tête commun
  const Header = (
    <>
      <div className="db-kicker" style={{ marginBottom: 14 }}>Avant de conclure · Ressenti</div>
      <h2 className="db-h2" style={{ marginBottom: 12, fontSize: 28, lineHeight: 1.2 }}>{FEELING.title}</h2>
      <p className="db-body-text s" style={{ fontStyle: 'italic', marginBottom: 36, color: 'var(--db-text-3)' }}>
        {FEELING.helper}
      </p>
    </>
  );

  const Footer = (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginTop: 40 }}>
      <button className="db-btn linkish" onClick={onBack}>← Retour</button>
      <button className="db-btn" onClick={onNext}>Continuer</button>
    </div>
  );

  let body;

  // ———————— LAYOUT 1 : Liste éditoriale aérée ————————
  if (layout === 'editorial') {
    body = (
      <ul className="db-feeling-list">
        {FEELING.options.map((opt, i) => {
          const isOn = sel.has(i);
          return (
            <li key={i}>
              <button
                type="button"
                className={'db-feeling-item' + (isOn ? ' is-selected' : '')}
                onClick={() => toggle(i)}
              >
                <span className="mark" aria-hidden="true">
                  <span className="dot" />
                </span>
                <span className="label">{opt.label}</span>
              </button>
            </li>
          );
        })}
      </ul>
    );
  }

  // ———————— LAYOUT 2 : Deux colonnes (élans / frictions) ————————
  else if (layout === 'columns') {
    const porte = FEELING.options.map((o, i) => ({ ...o, i })).filter(o => o.tone === 'porte');
    const pese  = FEELING.options.map((o, i) => ({ ...o, i })).filter(o => o.tone === 'pese');
    const Col = ({ title, items, accent }) => (
      <div className="db-feeling-col">
        <div className="db-kicker muted" style={{ marginBottom: 16, color: accent }}>{title}</div>
        <ul className="db-feeling-list dense">
          {items.map(({ label, i }) => {
            const isOn = sel.has(i);
            return (
              <li key={i}>
                <button
                  type="button"
                  className={'db-feeling-item' + (isOn ? ' is-selected' : '')}
                  onClick={() => toggle(i)}
                >
                  <span className="mark" aria-hidden="true"><span className="dot" /></span>
                  <span className="label">{label}</span>
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    );
    body = (
      <div className="db-feeling-cols">
        <Col title="Ce qui vous porte" items={porte} accent="var(--db-accent)" />
        <Col title="Ce qui pèse"      items={pese}  accent="var(--db-text-3)" />
      </div>
    );
  }

  // ———————— LAYOUT 3 : Carte 2D énergie×confort ————————
  else if (layout === 'map') {
    body = (
      <div>
        <div className="db-feeling-map" role="group" aria-label="Carte des ressentis">
          {/* axes */}
          <div className="axis x" aria-hidden="true"><span>calme</span><span>intense</span></div>
          <div className="axis y" aria-hidden="true"><span>inconfort</span><span>confort</span></div>
          <div className="quadrant tl">élans calmes</div>
          <div className="quadrant tr">élans intenses</div>
          <div className="quadrant bl">frictions calmes</div>
          <div className="quadrant br">frictions intenses</div>
          <div className="grid" aria-hidden="true"><div /><div /><div /><div /></div>
          {FEELING.options.map((opt, i) => {
            const isOn = sel.has(i);
            const { x, y } = MAP_COORDS[i];
            return (
              <button
                key={i}
                type="button"
                className={'pin' + (isOn ? ' is-selected' : '') + ' tone-' + opt.tone}
                style={{ left: (x * 100) + '%', top: ((1 - y) * 100) + '%' }}
                onClick={() => toggle(i)}
              >
                <span className="label">{opt.label}</span>
              </button>
            );
          })}
        </div>
        <p className="db-body-text s" style={{ marginTop: 16, color: 'var(--db-text-3)', textAlign: 'center', fontStyle: 'italic' }}>
          Touchez les mots qui vous parlent. Leur position n’est qu’un repère.
        </p>
      </div>
    );
  }

  // ———————— LAYOUT 4 : Tags (ancien) ————————
  else {
    body = (
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {FEELING.options.map((opt, i) => (
          <button
            key={i}
            type="button"
            className={'db-tag-btn' + (sel.has(i) ? ' is-selected' : '')}
            onClick={() => toggle(i)}
          >
            {opt.label}
          </button>
        ))}
      </div>
    );
  }

  return (
    <>
      <Chrome doneChapters={doneChapters} />
      <div className="db-body db-fade">
        <div className="db-narrow" style={{ maxWidth: layout === 'map' ? 640 : 560 }}>
          {Header}
          {body}
          {Footer}
        </div>
      </div>
      <ProgressFooter answers={answers} currentQid={null} style={progressStyle} />
    </>
  );
}

// ─────────────────────────────────────────────────────────────────
// ÉCRAN — Champ libre final
// ─────────────────────────────────────────────────────────────────
function FreeformScreen({ answers, doneChapters, value, onChange, onSubmit, onBack, progressStyle }) {
  const v = value || '';
  return (
    <>
      <Chrome doneChapters={doneChapters} />
      <div className="db-body db-fade">
        <div className="db-narrow">
          <div className="db-kicker" style={{ marginBottom: 14 }}>Dernière étape · Note libre</div>
          <h2 className="db-h2" style={{ marginBottom: 10 }}>{FREEFORM.title}</h2>
          <p className="db-body-text s" style={{ fontStyle: 'italic', marginBottom: 6 }}>
            {FREEFORM.helper}
          </p>
          <p className="db-body-text m" style={{ marginBottom: 22 }}>
            {FREEFORM.desc}
          </p>

          <textarea
            className="db-textarea"
            placeholder="Optionnel. 500 caractères."
            value={v}
            onChange={e => onChange(e.target.value.slice(0, FREEFORM.max))}
          />
          <div className="db-charcount">{v.length} / {FREEFORM.max}</div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginTop: 28 }}>
            <button className="db-btn linkish" onClick={onBack}>← Retour</button>
            <button className="db-btn" onClick={onSubmit}>Voir mes résultats</button>
          </div>
        </div>
      </div>
      <ProgressFooter answers={answers} currentQid={null} style={progressStyle} />
    </>
  );
}

// ─────────────────────────────────────────────────────────────────
// ÉCRAN — Chargement (§14.9) — 3 variantes
//   • 'phrases' (défaut) — phrases qui se succèdent en fondu
//   • 'line'              — ligne fine terracotta qui se trace
//   • 'diamond'           — diamond ◆ qui respire
// ─────────────────────────────────────────────────────────────────
function LoadingScreen({ variant = 'phrases', phrases: phrasesProp }) {
  const phrases = phrasesProp || [
    'Je relis vos réponses…',
    'Je regarde l’ensemble…',
    'Voici votre point de départ.',
  ];
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    if (variant !== 'phrases') return;
    const t = setInterval(() => setIdx(i => (i + 1) % phrases.length), 1400);
    return () => clearInterval(t);
  }, [variant]);

  return (
    <>
      <Chrome showChips={false} />
      <div className="db-body db-fade" style={{ justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
        <div style={{ textAlign: 'center', maxWidth: 520 }}>
          {variant === 'phrases' && (
            <div className="db-loading-phrase-wrap">
              <p key={idx} className="db-loading-phrase fade-enter">
                {phrases[idx]}
              </p>
            </div>
          )}
          {variant === 'line' && (
            <>
              <p className="db-italic-quote" style={{ marginBottom: 8 }}>
                Je prépare votre point de départ…
              </p>
              <div className="db-loading-line" aria-hidden="true" />
            </>
          )}
          {variant === 'diamond' && (
            <>
              <p className="db-italic-quote" style={{ marginBottom: 8 }}>
                Je prépare votre point de départ…
              </p>
              <span className="db-loading-diamond" aria-hidden="true" />
            </>
          )}
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────────
// ÉCRAN — Erreur d'envoi email (§14.10)
// ─────────────────────────────────────────────────────────────────
function ErrorScreen({ onRetry, onContinueAnyway }) {
  return (
    <>
      <Chrome showChips={false} />
      <div className="db-body db-fade">
        <div className="db-narrow" style={{ maxWidth: 540 }}>
          <div className="db-kicker" style={{ marginBottom: 22, color: 'var(--db-text-3)' }}>Quelque chose a coincé</div>
          <h1 className="db-h1" style={{ marginBottom: 24, fontSize: 38 }}>
            L'envoi de vos résultats par email n'a pas abouti.
          </h1>
          <hr className="db-rule" style={{ marginBottom: 28 }} />
          <p className="db-body-text" style={{ marginBottom: 14 }}>
            Vos réponses sont sauvegardées de mon côté.
          </p>
          <p className="db-body-text" style={{ marginBottom: 36 }}>
            Vous pouvez réessayer maintenant, ou me prévenir directement&nbsp;: <a href="mailto:marie@serel-ia.com" style={{ color: 'var(--db-accent)', textDecoration: 'none', borderBottom: '1px solid var(--db-accent)' }}>marie@serel-ia.com</a>.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="db-btn" onClick={onRetry}>Réessayer</button>
            <button className="db-btn ghost" onClick={onContinueAnyway}>Voir mes résultats quand même</button>
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, {
  Chrome, ProgressFooter,
  WelcomeScreen, ChapterIntroScreen, QuestionScreen, FeelingScreen, FreeformScreen,
  LoadingScreen, ErrorScreen,
});