// charte-tabs-pack6.jsx — preview navigation around Pack 6 (Fin de livre · QR · Collection · Commercial).

const { useState: __useStateP6 } = React;

const P6_TEMPLATES = [
  { id: "completion-certificate",     num: "01", label: "Diplôme · certificat",   comp: F1Certificate,
    note: "Diplôme premium · prénom · cahier · 12 chapitres / 186 ex / 94 % · date · signatures parent + prof · réf." },
  { id: "final-self-assessment",      num: "02", label: "Bilan final",            comp: F2SelfAssessment,
    note: "Score circulaire 86/100 · 8 compétences (maîtrisé / presque / à revoir) · zones fier / améliorer · conseil Ketty." },
  { id: "qr-resources-hub",           num: "03", label: "Hub QR ressources",      comp: F3QRHub,
    note: "QR principal hero + 4 ressources (corrections, exercices, quiz, Ketty) · avertissement disponibilité." },
  { id: "continue-with-alloeducation",num: "04", label: "Continuer · CTA douce",  comp: F4Continue,
    note: "3 cartes Réviser · S'entraîner · Progresser avec Ketty · QR pédagogique · pas d'abonnement obligatoire." },
  { id: "collection-showcase",        num: "05", label: "Dans la même collection",comp: F5Collection,
    note: "6 mini-couvertures (Maths, Français, Vacances, Anglais, Histoire-Géo, Brevet) · QR collection · note parents." },
  { id: "final-bonus-challenge",      num: "06", label: "Défi final · 3 niveaux", comp: F6BonusChallenge,
    note: "Facile / Moyen / Défi · étoiles ★ ★★ ★★★ · score __/3 par niveau · QR bonus interactif · conseil Ketty." },
  { id: "notes-draft-page",           num: "07", label: "Brouillon premium",      comp: F7NotesDraft,
    note: "En-tête sujet/page/ex · grille 0.32 in pleine page · tag « Brouillon libre » · note jamais corrigé." },
  { id: "mistakes-to-review",         num: "08", label: "Carnet d'erreurs",       comp: F8Mistakes,
    note: "Méthode en 3 étapes · table page/notion/erreur/correction/à refaire/fait · 5 lignes pré-remplies + 4 vides." },
  { id: "revision-planner",           num: "09", label: "Planning révision",      comp: F9RevisionPlanner,
    note: "7 jours · objectif court · durée · pages · case fait · astuces planning · message Ketty pas de culpabilité." },
  { id: "legal-edition-page",         num: "10", label: "Mentions · édition",     comp: F10Legal,
    note: "Édition · ISBN · dépôt légal · KDP · charte v1.2 release · avertissement QR · crédits · copyright." },
  { id: "inner-cover-collection",     num: "11", label: "Couverture intérieure",  comp: F11InnerCover,
    note: "Bloc hero dégradé primary · titre 0.7 in · niveau · tags matières · zone propriétaire · 3 promesses." },
  { id: "chapter-transition-page",    num: "12", label: "Ouverture de chapitre",  comp: F12ChapterTransition,
    note: "Hero chapitre + badge n° · durée / niveau / difficulté · objectifs en 3 étapes · compétences · Ketty." },
];

function TabPack6FinLivre({ tweaks }) {
  const [active, setActive] = __useStateP6("completion-certificate");
  const tpl = P6_TEMPLATES.find(t => t.id === active);
  const Comp = tpl.comp;

  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Pack 6 — Fin de livre · QR · Collection · Commercial</h2>
        <p className="section-sub">
          12 templates qui <b>ferment</b> proprement chaque cahier de la collection
          Allo Education Books : diplôme, bilan personnel, hub QR, suite de la collection,
          bonus, brouillon, carnet d'erreurs, planning, mentions légales, couverture
          intérieure, ouverture de chapitre. Strictement même <code>PageShell</code>,
          mêmes tokens, mêmes blocs charte. Ton premium mais sobre — jamais commercial
          agressif, jamais bébé. Aucun emoji ; pictos via <code>&lt;Icon&gt;</code>.
          QR &amp; Ketty pilotables par props. CTA douces et honnêtes (pas
          d'abonnement obligatoire). Pensé pour Amazon KDP &amp; print on demand.
        </p>

        <div className="stress-rail">
          {P6_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">QR pilotable</span>
            <span className="meta-pill">KDP-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>Rôle commercial &amp; pédagogique de chaque page</h2>
        <div className="info-grid">
          <div className="info-chip">
            <div className="lbl">Valoriser l'élève</div>
            <div className="desc"><code>completion-certificate</code> · <code>final-self-assessment</code> — fierté, preuve concrète, partageable.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Distribuer la valeur QR</div>
            <div className="desc"><code>qr-resources-hub</code> — un seul QR principal + 4 ressources granulaires, sans création de compte forcée.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Continuité de marque</div>
            <div className="desc"><code>continue-with-alloeducation</code> · <code>collection-showcase</code> — CTA douces, mise en avant naturelle.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Récompense ludique</div>
            <div className="desc"><code>final-bonus-challenge</code> — 3 niveaux étoilés, dernier shot d'engagement avant la fermeture du cahier.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Outils méta-cognitifs</div>
            <div className="desc"><code>mistakes-to-review</code> · <code>revision-planner</code> · <code>notes-draft-page</code> — l'élève apprend à apprendre.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Conformité éditoriale</div>
            <div className="desc"><code>legal-edition-page</code> — ISBN, dépôt légal, copyright, crédits Ketty &amp; pictos, droits fiches gratuites.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Ouverture &amp; clôture livre</div>
            <div className="desc"><code>inner-cover-collection</code> · <code>chapter-transition-page</code> — couverture intérieure premium &amp; ouverture de chapitre rythmée.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Compatibilité Amazon KDP</div>
            <div className="desc">Format 8.5×11, marges sûres, contraste ≥ AA, pas de bord vif, mention « Imprimé par Amazon KDP » dans les mentions.</div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Vérifications charte V1.2 · fin de livre</h2>
        <div className="info-grid">
          <div className="info-chip"><div className="lbl">Même PageShell</div><div className="desc">Aucun header/footer recréé. Couverture intérieure, diplôme et chapitre passent tous par le shell partagé.</div></div>
          <div className="info-chip"><div className="lbl">QR pilotables</div><div className="desc"><code>P6QRBlock</code> rendu déterministe à partir du <code>slug</code> · taille, tonalité, label/sub configurables.</div></div>
          <div className="info-chip"><div className="lbl">Ketty officielle</div><div className="desc">Tous les conseils passent par <code>KettyBubble</code> · poses : celebrating, thinking, pointing, hello, thumbsup.</div></div>
          <div className="info-chip"><div className="lbl">Pas d'emoji</div><div className="desc">Étoiles, trophée, info, cible, livre, crayon, horloge — uniquement via <code>&lt;Icon&gt;</code>.</div></div>
          <div className="info-chip"><div className="lbl">Tokens charte</div><div className="desc">Couleurs primary / yellow / orange / green · radii / espacements / fontes inchangés.</div></div>
          <div className="info-chip"><div className="lbl">Premium sobre</div><div className="desc">Encadrement diplôme, dégradé hero, ornements coin — luxe maîtrisé, jamais kitsch.</div></div>
          <div className="info-chip"><div className="lbl">Print-ready</div><div className="desc">Pas de bord à fond perdu agressif, contraste élevé, polices web vivantes mais éprouvées en print.</div></div>
          <div className="info-chip"><div className="lbl">Pilotable par data</div><div className="desc">Compétences, livres collection, planning, erreurs, métadonnées éditoriales : tout en JSON props.</div></div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { TabPack6FinLivre, P6_TEMPLATES });