// charte-tabs-pack4.jsx — preview navigation around Pack 4 (Jeux éducatifs).

const { useState: __useStateP4 } = React;

const P4_TEMPLATES = [
  { id: "crossword-game",        num: "01", label: "Mots croisés",        comp: J1Crossword,
    note: "Grille 10×8 · cases noires · 5 horiz. + 2 vert. · score · QR correction." },
  { id: "word-search-game",      num: "02", label: "Mots mêlés",          comp: J2WordSearch,
    note: "Grille 11×10 · 13 mots à entourer · liste à cocher · QR mots cachés." },
  { id: "secret-code-game",      num: "03", label: "Code secret",         comp: J3SecretCode,
    note: "Table A=1…Z=26 · 5 calculs · cases lettres · mot mystère · indice Ketty." },
  { id: "odd-one-out-game",      num: "04", label: "Jeu de l'intrus",     comp: J4OddOneOut,
    note: "6 séries thématiques · entoure · zone justification · score double." },
  { id: "true-false-game",       num: "05", label: "Vrai / Faux express", comp: J5TrueFalse,
    note: "8 affirmations · cases V/F colorées · bloc erreur fréquente · score." },
  { id: "matching-game",         num: "06", label: "Relier / associer",   comp: J6Matching,
    note: "Colonnes EN/FR · pastilles à relier · report des paires en bas." },
  { id: "ordering-game",         num: "07", label: "Remettre dans l'ordre",comp: J7Ordering,
    note: "6 cartes mélangées · cases d'ordre · frise lettres · mini-exemple." },
  { id: "maze-game",             num: "08", label: "Labyrinthe",          comp: J8Maze,
    note: "Labyrinthe SVG · 5 stations question · QCM · départ/fin · QR tracé." },
  { id: "magic-coloring-game",   num: "09", label: "Coloriage magique",   comp: J9MagicColoring,
    note: "Papillon zoné · 5 calculs · code couleur 1→5 · imprimable N/B." },
  { id: "coordinate-pixel-art",  num: "10", label: "Pixel art (x ; y)",   comp: J10PixelArt,
    note: "Repère 12×10 · liste de coordonnées · 2 cases amorces · défi pixel." },
  { id: "memory-pairs-game",     num: "11", label: "Memory · paires",     comp: J11Memory,
    note: "12 cartes à découper · 6 paires EN ↔ FR · score solo et duo." },
  { id: "riddle-game",           num: "12", label: "Énigmes",             comp: J12Riddles,
    note: "5 devinettes · difficulté en étoiles · indice optionnel · zone réponse." },
];

function TabPack4JeuxEducatifs({ tweaks }) {
  const [active, setActive] = __useStateP4("crossword-game");
  const tpl = P4_TEMPLATES.find(t => t.id === active);
  const Comp = tpl.comp;

  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Pack 4 — Jeux éducatifs universels</h2>
        <p className="section-sub">
          12 templates ludiques utilisables dans <b>tous les cahiers</b> : maths, français,
          langues, sciences, histoire-géo, cahiers de vacances, bonus imprimables et lead
          magnets PDF. Tous strictement composés à partir de la charte V1.2 — même
          PageShell, mêmes tokens, mêmes blocs (Box, Cols, ExerciseCard, KettyBubble,
          ScoreBox, FigureBlock, ChallengeBox, WarningBox, TableBlock).
          Aucun emoji. Pictos via <code>iconKey</code> / <code>&lt;Icon&gt;</code>.
          Grilles, labyrinthe, coloriage, repère et cartes memory en SVG/HTML natifs.
        </p>

        <div className="stress-rail">
          {P4_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">Ludique · pas bébé</span>
            <span className="meta-pill">Imprimable</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>Couverture matières</h2>
        <div className="info-grid">
          <div className="info-chip">
            <div className="lbl">Maths · logique</div>
            <div className="desc"><code>secret-code-game</code> · <code>magic-coloring-game</code> · <code>coordinate-pixel-art</code> — calcul mental, repérage, codage.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Français</div>
            <div className="desc"><code>crossword-game</code> · <code>odd-one-out-game</code> · <code>matching-game</code> — vocabulaire, classes de mots, synonymes.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Langues</div>
            <div className="desc"><code>matching-game</code> · <code>memory-pairs-game</code> · <code>word-search-game</code> — vocabulaire EN/ES/DE, traductions, paires.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Sciences</div>
            <div className="desc"><code>word-search-game</code> · <code>ordering-game</code> · <code>true-false-game</code> — vocabulaire, cycles, idées reçues.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Histoire-Géo</div>
            <div className="desc"><code>crossword-game</code> · <code>true-false-game</code> · <code>ordering-game</code> — vocabulaire, faits, frises.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Cahiers de vacances</div>
            <div className="desc"><code>maze-game</code> · <code>riddle-game</code> · <code>magic-coloring-game</code> — pages détentes encadrées par la charte.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Bonus / lead magnets PDF</div>
            <div className="desc">Tous les templates s'exportent isolés : page de couverture du shell + 1 jeu = mini-PDF prêt à offrir.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Primaire ↔ collège</div>
            <div className="desc">Niveau ajustable via <code>data</code> (CE2 → 4ᵉ). Coloriage magique = primaire, énigmes 3 ★ = 6ᵉ/5ᵉ.</div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Vérifications charte V1.2</h2>
        <div className="info-grid">
          <div className="info-chip"><div className="lbl">Même PageShell</div><div className="desc">Tous les jeux wrappent leur contenu. Aucun header/footer recréé localement.</div></div>
          <div className="info-chip"><div className="lbl">Format 8.5 × 11</div><div className="desc">Aperçu vérifié à 70 %. Grilles et SVG dimensionnés en pouces.</div></div>
          <div className="info-chip"><div className="lbl">QR officiel</div><div className="desc">Slugs <code>{`{matiere}`}-{`{niveau}`}-{`{jeu}`}</code>. URL <code>alloeducation.fr/qr/{`{slug}`}</code> via le shell.</div></div>
          <div className="info-chip"><div className="lbl">Ketty officielle</div><div className="desc">Posées via <code>kettyPose</code>. Bubbles via <code>&lt;KettyBubble&gt;</code>. Pas d'illustration locale.</div></div>
          <div className="info-chip"><div className="lbl">Pas d'emoji</div><div className="desc">Étoiles de difficulté, infos, alerte, trophée — uniquement <code>&lt;Icon&gt;</code>.</div></div>
          <div className="info-chip"><div className="lbl">Print-ready N/B</div><div className="desc">Coloriage magique : zones blanches + numéros visibles à l'impression noire.</div></div>
          <div className="info-chip"><div className="lbl">Ludique pas bébé</div><div className="desc">Difficulté étoilée, scores, défi pixel, mini-exemples. Niveau collège-primaire adaptable.</div></div>
          <div className="info-chip"><div className="lbl">Pilotable par data</div><div className="desc">Listes de mots, calculs, paires, devinettes : tout passe en JSON props.</div></div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { TabPack4JeuxEducatifs, P4_TEMPLATES });