// charte-tabs-stress.jsx
// PREVIEW-ONLY — navigation chrome around the stress-test pages.
// The 10 stress pages themselves (stress-pages.jsx) are emoji-free; only the wrapping
// chrome here uses doc glyphs and will NEVER ship to PDF/KDP.
// Tab: "Stress Test Pack" — 10 test pages built only from locked blocks.
// One nav strip lets you flip between the 10 templates; one frame at 8.5×11.

const { useState: __useStateStress } = React;

const STRESS_TEMPLATES = [
  { id: "diagnostic",       num: "01", label: "Diagnostic de départ",     comp: StressDiagnostic,
    note: "Test rapide d'entrée · 10 questions · score à reporter sur le footer." },
  { id: "lesson-exercise",  num: "02", label: "Mini-leçon + exercices",   comp: StressLessonExercise,
    note: "Méthode + exemple guidé + 4 exercices courts. Pattern le plus utilisé du cahier." },
  { id: "problem-exercise", num: "03", label: "Exercice problème",         comp: StressProblem,
    note: "Énoncé long, données utiles, étapes guidées, zone de réponse rédigée." },
  { id: "table-exercise",   num: "04", label: "Tableau à compléter",       comp: StressTable,
    note: "Composant TableBlock testé en proportionnalité ET conjugaison sur la même page." },
  { id: "figure-graph",     num: "05", label: "Graphique / figure",        comp: StressFigure,
    note: "FigureBlock + SVG natif (graphique de fonction + triangle rectangle)." },
  { id: "correction-compact", num: "06", label: "Correction compacte",     comp: StressCorrection,
    note: "Densité dense forcée. 6 corrigés alignés sur grille 2×3 sans casser la grille principale." },
  { id: "mini-exam",        num: "07", label: "Mini-sujet examen",         comp: StressExam,
    note: "Bandeau Durée · Barème · Conditions, puis 3 ExerciseCard avec AnswerBox réglés." },
  { id: "mindmap",          num: "08", label: "Carte mentale",             comp: StressMindmap,
    note: "FigureBlock haut (2.4in), MindMap SVG, branche perso à compléter." },
  { id: "qr-resources",     num: "09", label: "Ressources QR",             comp: StressQrResources,
    note: "4 cartes ressource + QR principal grand format. Page 100% numérique." },
  { id: "diploma",          num: "10", label: "Diplôme · fin de cahier",   comp: StressDiploma,
    note: "Densité light. Bordure double, sceau SVG, KettyBubble celebrating." },
];

function TabStressTest({ tweaks }) {
  const [active, setActive] = __useStateStress("diagnostic");
  const tpl = STRESS_TEMPLATES.find(t => t.id === active);
  const Comp = tpl.comp;

  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Template Stress Test Pack — 10 pages</h2>
        <p className="section-sub">
          Vérification finale de la charte : 10 pages réalistes, du CP à la Terminale,
          construites <b>strictement</b> avec les composants verrouillés. Même <code>PageShell</code>,
          même header, même footer, mêmes tokens. Si ces 10 pages tiennent l'harmonie,
          la charte peut être verrouillée pour produire les 50+ cahiers.
        </p>

        <div className="stress-rail">
          {STRESS_TEMPLATES.map(t => (
            <button
              key={t.id}
              className={"stress-chip" + (active === t.id ? " active" : "")}
              onClick={() => setActive(t.id)}
            >
              <span className="num">{t.num}</span>
              <span className="lab">{t.label}</span>
            </button>
          ))}
        </div>

        <div className="stress-meta">
          <div className="stress-meta-num">{tpl.num}</div>
          <div className="stress-meta-body">
            <div className="stress-meta-title">{tpl.label}</div>
            <div className="stress-meta-note">{tpl.note}</div>
          </div>
          <div className="stress-meta-pills">
            <span className="meta-pill">8.5 × 11 in</span>
            <span className="meta-pill">PageShell verrouillé</span>
            <span className="meta-pill">Tweaks live</span>
          </div>
        </div>

        <div className="page-preview" style={{ background: "var(--ae-bg-cool)", padding: "30px 0", borderRadius: 14, border: "1px solid var(--ae-border)" }}>
          <div style={{ width: `calc(8.5in * 0.7)`, height: `calc(11in * 0.7)`, position: "relative", overflow: "hidden", boxShadow: "0 12px 40px rgba(15,26,61,.18)" }}>
            <Comp
              density={tweaks.density}
              qrVisible={tweaks.qrVisible}
              scoreVisible={tweaks.scoreVisible}
              scale={0.7}
            />
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Ce que ce pack prouve</h2>
        <div className="info-grid">
          <div className="info-chip">
            <div className="lbl">1 · Shell verrouillé</div>
            <div className="desc">Header, footer, hauteurs, position du logo, du QR, du n° de page : identiques sur les 10 pages, sans exception.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">2 · Grille centrale stable</div>
            <div className="desc">Tous les blocs partagent <code>--ae-block-gap</code> et la même marge latérale, qu'ils contiennent un texte, un tableau ou une figure SVG.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">3 · Échelle typo unique</div>
            <div className="desc">Aucune page n'a redéfini une taille de texte en dur. La densité (light / std / dense) est le seul levier d'ajustement.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">4 · QR cohérent</div>
            <div className="desc">Footer, bloc <code>QRBlock</code>, ressources, diplôme : même placeholder réaliste V4, mêmes proportions, même contraste.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">5 · Ketty composée</div>
            <div className="desc">Une seule API : <code>&lt;KettyBubble pose label tone&gt;</code>. La pose change, le composant ne change pas.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">6 · Niveaux unifiés</div>
            <div className="desc">CP, CM2, 6ᵉ, 4ᵉ, 3ᵉ, 1ʳᵉ — l'identité reste la même, seuls le contenu et la densité s'adaptent.</div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Verdict</h2>
        <div className="stress-verdict">
          <div className="stress-verdict-stamp">✓</div>
          <div>
            <div className="stress-verdict-title">Charte prête à être verrouillée</div>
            <div className="stress-verdict-text">
              Les 10 templates restent harmonieux entre eux malgré leurs contenus
              très différents. La production des 50+ cahiers Allo Education Books
              peut maintenant démarrer sur cette base : un seul fichier <code>theme.json</code>,
              un seul shell, un catalogue de blocs verrouillés.
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { TabStressTest, STRESS_TEMPLATES });