// charte-tabs-pack1.jsx
// PREVIEW-ONLY — navigation chrome around Pack 1 (Universal templates).
// The 10 universal pages themselves (template-pack-1-universal.jsx) are emoji-free
// and only the wrapping chrome here uses doc glyphs (will NEVER ship to PDF/KDP).

const { useState: __useStatePack1 } = React;

const PACK1_TEMPLATES = [
  { id: "diagnostic",         num: "01", label: "Diagnostic de départ",  comp: U1Diagnostic,
    note: "Test rapide multi-thèmes · 10 questions · score reporté + Ketty + QR optionnel." },
  { id: "problem-exercise",   num: "02", label: "Exercice problème",     comp: U2Problem,
    note: "Énoncé, données utiles, étapes guidées, zone calculs, phrase réponse, auto-check." },
  { id: "table-exercise",     num: "03", label: "Tableau à compléter",   comp: U3Table,
    note: "Consigne + tableau propre + cases à remplir + exemple mini + QR optionnel." },
  { id: "match-exercise",     num: "04", label: "Relier / associer",     comp: U4Match,
    note: "Colonne A ↔ Colonne B + zone d'association + tableau de réponses." },
  { id: "true-false",         num: "05", label: "Vrai / Faux",           comp: U5TrueFalse,
    note: "8 affirmations · cases V/F · justification courte · score." },
  { id: "mini-exam",          num: "06", label: "Mini-sujet examen",     comp: U6Exam,
    note: "Durée + barème + 3 exercices · Ketty stratégie · QR correction." },
  { id: "document-study",     num: "07", label: "Étude de document",     comp: U7Document,
    note: "Document source + nature/auteur/date + questions guidées + conclusion." },
  { id: "writing-task",       num: "08", label: "Expression écrite",     comp: U8Writing,
    note: "Sujet + consignes + critères + zone d'écriture lignée + auto-éval." },
  { id: "mindmap",            num: "09", label: "Carte mentale",         comp: U9Mindmap,
    note: "Nœud central + 6 branches + sous-points courts + branche personnelle." },
  { id: "compact-correction", num: "10", label: "Correction compacte",   comp: U10Compact,
    note: "Pages corrigées + corrections par blocs + étape clé + QR enrichi." },
];

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

  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Pack 1 — Templates universels (10)</h2>
        <p className="section-sub">
          Les 10 templates les plus utilisés de la collection, en version
          harmonisée avec la charte verrouillée v1.2. Diagnostic, problème,
          tableau, association, V/F, mini-sujet, étude de document, expression
          écrite, carte mentale, correction compacte. Tout passe par <code>PageShell</code> —
          mêmes marges, mêmes tokens, mêmes blocs.
        </p>

        <div className="stress-rail">
          {PACK1_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">Zéro emoji</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 apporte</h2>
        <div className="info-grid">
          <div className="info-chip">
            <div className="lbl">1 · Couvre 80 % des cahiers</div>
            <div className="desc">Ces 10 patterns représentent l'écrasante majorité des pages d'un cahier Allo Education : leçon, application, examen, révision, correction.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">2 · Aucune dépendance emoji</div>
            <div className="desc">Tous les pictogrammes passent par <code>iconKey</code> ou par <code>&lt;Icon k="…"&gt;</code>. Print KDP safe à 100 %.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">3 · QR pipeline-ready</div>
            <div className="desc">Chaque template fournit son <code>qrSlug</code>. La route officielle <code>alloeducation.fr/qr/&#123;slug&#125;</code> est appliquée par <code>PageFooter</code>.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">4 · Densité ajustable</div>
            <div className="desc">Toggle <code>light</code> / <code>std</code> / <code>dense</code> dans Tweaks. La correction compacte force <code>dense</code> par design.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">5 · Ketty &amp; props prod</div>
            <div className="desc">Tous les <code>KettyBubble</code> exposent <code>kettyPose</code> + <code>kettyImageSrc</code>. Substitution PNG en production sans toucher au layout.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">6 · Print 8.5 × 11</div>
            <div className="desc"><code>@page</code> verrouillée, <code>page-break-after: always</code> sur chaque <code>.ae-page</code>. Compatible KDP, prêt pour print-to-PDF.</div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { TabPack1Universal, PACK1_TEMPLATES });