// charte-tabs-pack2.jsx
// PREVIEW-ONLY — navigation chrome around Pack 2 (Français / Langues).
// The 10 pack 2 pages themselves (template-pack-2-francais-langues.jsx) are emoji-free
// and only the wrapping chrome here uses doc glyphs (will NEVER ship to PDF/KDP).

const { useState: __useStatePack2 } = React;

const PACK2_TEMPLATES = [
  { id: "vocabulary-lesson",     num: "01", label: "Leçon vocabulaire",      comp: P2VocabLesson,
    note: "Mot principal · définition · exemples · synonymes/antonymes · mini-exo · Ketty." },
  { id: "bilingual-vocabulary",  num: "02", label: "Vocabulaire bilingue",   comp: P2BilingualVocab,
    note: "6 cartes mot avec icon + traduction + phrase exemple · zone réécriture · QR audio." },
  { id: "conjugation-lesson",    num: "03", label: "Leçon conjugaison",      comp: P2ConjLesson,
    note: "Verbe · temps · tableau personnes · piège à éviter · 4 phrases à compléter · Ketty." },
  { id: "grammar-exercise",      num: "04", label: "Exercice grammaire",     comp: P2GrammarExercise,
    note: "Nature/fonction + accord du participe passé · tableau d'analyse · auto-éval." },
  { id: "reading-comprehension", num: "05", label: "Lecture compréhension",  comp: P2Reading,
    note: "Texte 12 lignes · 5 questions · 1 question « justifie avec le texte »." },
  { id: "document-study",        num: "06", label: "Étude de document",      comp: P2DocStudy,
    note: "Poème de Rimbaud · identifier · comprendre · analyser (tableau procédés)." },
  { id: "prepared-dictation",    num: "07", label: "Dictée préparée",        comp: P2Dictation,
    note: "Texte · mots difficiles · règle · entraînement + zone dictée lignée · audio QR." },
  { id: "writing-task",          num: "08", label: "Expression écrite",      comp: P2Writing,
    note: "Sujet · boîte à idées · connecteurs utiles · zone d'écriture · auto-éval." },
  { id: "dialogue-conversation", num: "09", label: "Dialogue (anglais)",     comp: P2Dialogue,
    note: "Bulles de dialogue 2 personnages · vocabulaire utile · questions · mini-prod." },
  { id: "translation-exercise",  num: "10", label: "Traduction",             comp: P2Translation,
    note: "5 phrases EN→FR · aide vocab · zone réponse · pièges fréquents · QR corrigés." },
];

function TabPack2FrancaisLangues({ tweaks }) {
  const [active, setActive] = __useStatePack2("vocabulary-lesson");
  const tpl = PACK2_TEMPLATES.find(t => t.id === active);
  const Comp = tpl.comp;

  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Pack 2 — Français / Langues / Lecture / Écriture</h2>
        <p className="section-sub">
          10 templates centrés sur le texte : vocabulaire, conjugaison, grammaire,
          lecture, étude de document, dictée préparée, expression écrite, dialogue,
          traduction. Pages très textuelles testées sur la grille verrouillée — même
          marges, même typo, même rythme typographique que Pack 1.
        </p>

        <div className="stress-rail">
          {PACK2_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">Texte first</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 démontre</h2>
        <div className="info-grid">
          <div className="info-chip">
            <div className="lbl">1 · La charte tient sur le texte long</div>
            <div className="desc">Les pages très textuelles (lecture, dictée, traduction) restent lisibles et harmonisées avec les pages-schémas de Pack 1.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">2 · Multi-langues prêt</div>
            <div className="desc">Anglais, français — la même grille fonctionne. Les <code>VocabCard</code> et <code>DialogueBubble</code> sont neutres et réutilisables (ES, DE, IT).</div>
          </div>
          <div className="info-chip">
            <div className="lbl">3 · QR audio cohérent</div>
            <div className="desc">Tous les templates langues exposent un <code>qrSlug</code> + <code>qrSubLabel</code> dédié à la version audio (locuteur natif).</div>
          </div>
          <div className="info-chip">
            <div className="lbl">4 · Zones d'écriture proportionnées</div>
            <div className="desc"><code>P2WritingLines</code> est calibré à 0.28in / ligne — confortable au stylo, conforme aux standards primaire et collège.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">5 · Zéro emoji sur 10 pages</div>
            <div className="desc">Tous les pictos (cartes vocab, dialogue, étude doc) passent par <code>&lt;Icon k="…"&gt;</code> ou <code>iconKey</code>. KDP-safe.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">6 · Texte source typographié</div>
            <div className="desc">Les blocs « texte / poème / lettre » utilisent une mise en page italique + source en bas, lisible en impression sans grossir la police.</div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { TabPack2FrancaisLangues, PACK2_TEMPLATES });