// charte-tabs-pack7.jsx — preview chrome around Pack 7 (Design Patterns).
// Onglet "Pack 7 · Patterns" — montre une seule planche de design (pas un livre).

function TabPack7Patterns() {
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Pack 7 — Design Patterns &amp; Composition Rules</h2>
        <p className="section-sub">
          La <b>planche design</b> qui manquait. Ce n'est pas un nouveau template de page,
          c'est l'outil de référence partagé : rédacteur (combien d'items écrire),
          dev (quels blocs existent), auditeur PDF (ce qui est valide ou non).
          18 blocs documentés visuellement avec version standard et version compacte,
          5 compositions recommandées, 5 à éviter, plus les règles d'espacement.
        </p>

        <div className="info-grid" style={{ marginBottom: 18 }}>
          <div className="info-chip"><div className="lbl">18 blocs</div><div className="desc">Objectif, À retenir, Méthode, Exemple, Exercices, QCM, Problème, Figure, Tableau, Graphique, Auto-éval, Ketty, QR, Mini-sujet, Correction, Formulaire, Fin de livre.</div></div>
          <div className="info-chip"><div className="lbl">Pour chaque bloc</div><div className="desc">Nom · usage · standard + compact · max items · max lignes · combinaisons OK · combinaisons KO · règles anti-overflow.</div></div>
          <div className="info-chip"><div className="lbl">Compositions</div><div className="desc">5 pages canoniques recommandées (leçon, exo progressif, problème, mini-sujet, correction) + 5 à éviter avec hachure rouge.</div></div>
          <div className="info-chip"><div className="lbl">Espacement</div><div className="desc">Trois densités verrouillées (air / standard / dense) · checklist auditeur anti-trous-blancs.</div></div>
        </div>

        <Pack7DesignPatterns />
      </section>

      <section className="section">
        <h2>Comment l'utiliser au quotidien</h2>
        <div className="info-grid">
          <div className="info-chip">
            <div className="lbl">Rédacteur</div>
            <div className="desc">
              Avant d'écrire, ouvre Pack 7, lis « Max items » et « Max lignes ».
              Si ton contenu dépasse, c'est qu'il faut deux pages, pas une.
            </div>
          </div>
          <div className="info-chip">
            <div className="lbl">Dev / template author</div>
            <div className="desc">
              Avant de créer un nouveau template, vérifie qu'il existe une <b>composition recommandée</b>
              dans Pack 7. Si non, propose-la avant de coder.
            </div>
          </div>
          <div className="info-chip">
            <div className="lbl">Auditeur PDF</div>
            <div className="desc">
              Pour chaque page exportée, vérifie : ≥ 3 blocs distincts, ≤ 6 blocs principaux,
              gap ≥ 0.14 in, pas de zone vide &gt; 1.5 in. Si un test échoue → page à refaire.
            </div>
          </div>
          <div className="info-chip">
            <div className="lbl">Designer (variations)</div>
            <div className="desc">
              N'invente <b>jamais</b> un bloc qui n'est pas listé. Si un besoin réel apparaît,
              il faut d'abord l'ajouter ici, dans Pack 7, avec ses règles.
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Ce que Pack 7 verrouille (et corrige rétroactivement)</h2>
        <div className="info-grid">
          <div className="info-chip"><div className="lbl">Densité</div><div className="desc">Trois valeurs seulement : <code>air</code> (CP/CE1), <code>std</code> (par défaut), <code>dense</code> (lycée). Plus jamais de gap improvisé.</div></div>
          <div className="info-chip"><div className="lbl">Hiérarchie</div><div className="desc">Objectif TOUJOURS en haut. Auto-évaluation TOUJOURS en bas. QR au pied de page ou bas-droit. Jamais l'inverse.</div></div>
          <div className="info-chip"><div className="lbl">Ketty</div><div className="desc">Max 2 par page, 2-3 lignes par bulle. Au-delà, c'est un paragraphe — coupe.</div></div>
          <div className="info-chip"><div className="lbl">Mini-sujet</div><div className="desc">Le mini-sujet mange la page : aucune Méthode, aucun Exemple, aucun Ketty à côté.</div></div>
          <div className="info-chip"><div className="lbl">Correction compacte</div><div className="desc">Aucun développement. L'explication va dans le QR, pas sur la page.</div></div>
          <div className="info-chip"><div className="lbl">Problèmes guidés</div><div className="desc">Max 2 par page. 3 → deux pages. Pas de négociation.</div></div>
          <div className="info-chip"><div className="lbl">Figures &amp; tableaux</div><div className="desc">Une seule grosse figure OU un seul gros tableau, jamais les deux ensemble sur la même page.</div></div>
          <div className="info-chip"><div className="lbl">Footer</div><div className="desc">Le footer porte 1 QR et le score. Si un autre QR figure en page, il doit être visuellement distinct.</div></div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { TabPack7Patterns });