// charte-tabs-pack5.jsx — preview navigation around Pack 5 (Primaire CP/CE1/CE2).

const { useState: __useStateP5 } = React;

const P5_TEMPLATES = [
  { id: "phonics-syllables-sheet",     num: "01", label: "Son · syllabes",      comp: P1Phonics,
    note: "Son [ou] · 8 syllabes · 4 mots-images · entoure le son · 3 phrases lues à voix haute · QR audio." },
  { id: "word-reading-sheet",          num: "02", label: "Lecture de mots",     comp: P2WordReading,
    note: "3 niveaux · syllabes colorées · grille confiance lu seul / aide / à retravailler · phrase mystère." },
  { id: "primary-reading-comprehension",num:"03", label: "Compréhension courte",comp: P3PrimaryReading,
    note: "Texte 6 lignes · 4 questions phrases complètes · QCM colorié · phrase à recopier · QR audio." },
  { id: "handwriting-practice",        num: "04", label: "Écriture · graphisme",comp: P4Handwriting,
    note: "Variantes cursive / script / majuscule · lignes Seyès · auto-check soin · astuce posture Ketty." },
  { id: "primary-spelling-dictation",  num: "05", label: "Dictée préparée",     comp: P5Dictation,
    note: "6 mots à observer · pièges · zone entraînement · 5 lignes Seyès · 4 points d'auto-correction." },
  { id: "primary-mental-math",         num: "06", label: "Calcul mental",       comp: P6MentalMath,
    note: "3 séries × 8 calculs · additions, doubles/moitiés, tables ×2 ×5 · score /24 · conseil Ketty." },
  { id: "written-calculation",         num: "07", label: "Calcul posé",         comp: P7WrittenCalc,
    note: "Exemple guidé avec retenues · 3 additions · 2 soustractions · 2 multiplications par un chiffre." },
  { id: "primary-word-problems",       num: "08", label: "Petits problèmes",    comp: P8WordProblems,
    note: "Méthode 4 étapes · 3 problèmes · données utiles · choix d'opération · phrase de réponse." },
  { id: "number-sense-sheet",          num: "09", label: "Numération",          comp: P9NumberSense,
    note: "Nombre du jour 348 · chiffres + lettres · décomposition C/D/U · 3 comparaisons · droite graduée." },
  { id: "primary-geometry-sheet",      num: "10", label: "Géométrie",           comp: P10Geometry,
    note: "Reconnaître 4 formes · tracer un carré · compléter un rectangle · côtés/sommets coloriés." },
  { id: "primary-revision-sheet",      num: "11", label: "Je révise (jour)",    comp: P11RevisionSheet,
    note: "4 mini-blocs : lecture, écriture, calcul, problème · étoiles par bloc · encouragement Ketty." },
  { id: "teacher-printable-worksheet", num: "12", label: "Fiche prof / parent", comp: P12TeacherPrintable,
    note: "Bandeau prénom/niveau/date · objectif · 3 exercices · score · mention Allo Education discrète." },
];

function TabPack5Primaire({ tweaks }) {
  const [active, setActive] = __useStateP5("phonics-syllables-sheet");
  const tpl = P5_TEMPLATES.find(t => t.id === active);
  const Comp = tpl.comp;

  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Pack 5 — Primaire CP / CE1 / CE2</h2>
        <p className="section-sub">
          12 templates imprimables pensés pour le primaire : fiches gratuites parents/profs,
          cahiers vacances, lecture CP/CE1, sons, écriture, calcul, petits problèmes,
          générateur. Tous strictement composés à partir de la charte V1.2 — même
          <code>PageShell</code>, mêmes tokens, mêmes blocs (Box, Cols, ExerciseCard,
          KettyBubble, ScoreBox). Police body plus large, lignes Seyès SVG, zones
          d'écriture larges. Plus doux que collège, jamais bébé. Aucun emoji ;
          pictos via <code>&lt;Icon&gt;</code>. QR &amp; Ketty pilotables par props.
        </p>

        <div className="stress-rail">
          {P5_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">Lisibilité primaire</span>
            <span className="meta-pill">Print-ready</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 niveaux &amp; usages</h2>
        <div className="info-grid">
          <div className="info-chip">
            <div className="lbl">CP · décodage</div>
            <div className="desc"><code>phonics-syllables-sheet</code> · <code>word-reading-sheet</code> · <code>handwriting-practice</code> — sons, syllabes, lecture de mots, cursive.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">CE1 · automatismes</div>
            <div className="desc"><code>primary-reading-comprehension</code> · <code>primary-mental-math</code> · <code>primary-revision-sheet</code> — lecture, calcul mental, révision quotidienne.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">CE2 · structuration</div>
            <div className="desc"><code>written-calculation</code> · <code>primary-word-problems</code> · <code>primary-spelling-dictation</code> — calcul posé, problèmes, dictées préparées.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Numération &amp; géométrie</div>
            <div className="desc"><code>number-sense-sheet</code> · <code>primary-geometry-sheet</code> — nombre du jour, droite graduée, formes planes, tracés.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Cahiers vacances primaire</div>
            <div className="desc"><code>primary-revision-sheet</code> + Pack 4 (labyrinthe, coloriage, énigmes) — combinaisons fiches courtes &amp; pages détente.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Fiches gratuites · lead magnets</div>
            <div className="desc"><code>teacher-printable-worksheet</code> — modèle propre prêt à offrir, mention Allo Education discrète, QR ressources.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Générateur de fiches</div>
            <div className="desc">Tous les templates sont alimentés par <code>data</code> (mots, calculs, problèmes, comparaisons) — branchables sur le générateur.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Parents accompagnants</div>
            <div className="desc">Bandeau prénom + objectif + score, méthode en 4 étapes, conseils Ketty — la fiche se lit sans formation pédagogique.</div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Vérifications charte V1.2 · primaire</h2>
        <div className="info-grid">
          <div className="info-chip"><div className="lbl">Même PageShell</div><div className="desc">Tous les templates 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 %. Lignes Seyès et grilles dimensionnées en pouces.</div></div>
          <div className="info-chip"><div className="lbl">Lisibilité renforcée</div><div className="desc">Corps de texte 0.16 → 0.22 in. Mots de lecture en titre. Cases d'écriture min 0.32 in.</div></div>
          <div className="info-chip"><div className="lbl">Lignes Seyès SVG</div><div className="desc">Composant <code>SeyesLines</code> · baseline + dashed mid + ascender/descender · pleine largeur impression.</div></div>
          <div className="info-chip"><div className="lbl">Pas d'emoji</div><div className="desc">Étoiles, trophée, loupe, crayon, livre, cible — uniquement <code>&lt;Icon&gt;</code>.</div></div>
          <div className="info-chip"><div className="lbl">Doux mais pas bébé</div><div className="desc">Pas de mascotte locale, pas de palette flashy : tokens charte, Ketty officielle, ton calme.</div></div>
          <div className="info-chip"><div className="lbl">Print-ready N/B</div><div className="desc">Cases d'écriture vides, contrastes ≥ AA, contours en couleur sombre, pas de fond saturé.</div></div>
          <div className="info-chip"><div className="lbl">Pilotable par data</div><div className="desc">Mots, syllabes, calculs, problèmes, comparaisons, niveaux : toute la fiche en JSON props.</div></div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { TabPack5Primaire, P5_TEMPLATES });