// charte-tabs-pack3.jsx — preview navigation around Pack 3 (Histoire-Géo / Sciences).

const { useState: __useStateP3 } = React;

const P3_TEMPLATES = [
  { id: "timeline-lesson",            num: "01", label: "Frise chronologique",     comp: P3TimelineLesson,
    note: "Axe horizontal · 6 événements · légende couleur · question de repérage · Ketty." },
  { id: "map-labeling",               num: "02", label: "Carte à compléter",       comp: P3MapLabeling,
    note: "Carte muette SVG · 5 repères · légende avec mots à utiliser · 3 questions." },
  { id: "historical-document-study",  num: "03", label: "Étude de document",       comp: P3HistoricalDocStudy,
    note: "Identité · document encadré · 5 questions · zone conclusion en une phrase." },
  { id: "image-analysis",             num: "04", label: "Analyse d'image",          comp: P3ImageAnalysis,
    note: "Image placeholder · décris / explique · questions guidées · vocabulaire utile." },
  { id: "geo-sketch",                 num: "05", label: "Croquis géographique",    comp: P3GeoSketch,
    note: "Croquis SVG · légende I/II/III avec hachures · auto-check 4 critères." },
  { id: "science-protocol",           num: "06", label: "Protocole expérimental",  comp: P3ScienceProtocol,
    note: "Question · hypothèse · matériel · 5 étapes · sécurité · observation · conclusion." },
  { id: "science-diagram-labeling",   num: "07", label: "Schéma à légender",       comp: P3DiagramLabeling,
    note: "Schéma central · 4 repères numérotés · étiquettes à associer · question bonus." },
  { id: "classification-table",       num: "08", label: "Tableau de classification",comp: P3ClassificationTable,
    note: "Tableau critères × éléments · 5 lignes · ligne d'exemple · auto-évaluation." },
  { id: "chemistry-equation",         num: "09", label: "Équation chimique",       comp: P3ChemistryEquation,
    note: "Méthode · réaction illustrée (atomes pastilles) · 3 équations à équilibrer." },
  { id: "science-concept-card",       num: "10", label: "Fiche notion scientifique",comp: P3ScienceConceptCard,
    note: "Définition · schéma · exemple concret · erreur à éviter · mini-exercice V/F." },
];

function TabPack3HGSciences({ tweaks }) {
  const [active, setActive] = __useStateP3("timeline-lesson");
  const tpl = P3_TEMPLATES.find(t => t.id === active);
  const Comp = tpl.comp;

  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Pack 3 — Histoire-Géo / Sciences</h2>
        <p className="section-sub">
          10 templates qui valident la charte V1.2 sur les pages visuelles complexes :
          frises, cartes, schémas, protocoles, documents et tableaux. Tous strictement
          composés à partir des blocs verrouillés (PageShell, PageTitle, Box, Cols,
          ExerciseCard, KettyBubble, QRBlock) + helpers SVG locaux. Aucun emoji.
          Pictos via <code>iconKey</code> / <code>&lt;Icon&gt;</code>.
        </p>

        <div className="stress-rail">
          {P3_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">SVG natifs · pas d'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>Couverture matières</h2>
        <div className="info-grid">
          <div className="info-chip">
            <div className="lbl">Histoire</div>
            <div className="desc"><code>timeline-lesson</code> · <code>historical-document-study</code> — frises et études de sources.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Géographie</div>
            <div className="desc"><code>map-labeling</code> · <code>geo-sketch</code> — cartes muettes et croquis avec légende organisée.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Histoire des arts</div>
            <div className="desc"><code>image-analysis</code> — décrire / expliquer une œuvre, vocabulaire utile.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">SVT</div>
            <div className="desc"><code>science-diagram-labeling</code> · <code>classification-table</code> — schémas légendés et tableaux à double entrée.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Physique-Chimie</div>
            <div className="desc"><code>science-protocol</code> · <code>chemistry-equation</code> · <code>science-concept-card</code> — protocoles, équations, fiches notion.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">Technologie</div>
            <div className="desc">Réutilise <code>science-protocol</code> et <code>science-concept-card</code> (circuit, mécanisme).</div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Vérifications charte V1.2</h2>
        <div className="info-grid">
          <div className="info-chip"><div className="lbl">PageShell unique</div><div className="desc">Tous les templates wrappent leur contenu. Aucun header/footer recréé.</div></div>
          <div className="info-chip"><div className="lbl">Format 8.5 × 11</div><div className="desc">Vérifié en aperçu à 70 %. Les schémas/cartes ont une hauteur fixe en pouces.</div></div>
          <div className="info-chip"><div className="lbl">QR officiel</div><div className="desc">Slugs format <code>AE-{`{niv}`}-{`{mat}`}-…</code>. URL <code>alloeducation.fr/qr/{`{slug}`}</code>.</div></div>
          <div className="info-chip"><div className="lbl">Pas d'emoji</div><div className="desc">Tous les pictos passent par <code>iconKey</code> ou <code>&lt;Icon&gt;</code>. Schémas SVG natifs.</div></div>
          <div className="info-chip"><div className="lbl">Print-ready</div><div className="desc">@page 8.5×11 hérité du shell. Aucun overflow horizontal.</div></div>
          <div className="info-chip"><div className="lbl">Densité 3 niveaux</div><div className="desc">Light / Std / Dense pilotables depuis Tweaks.</div></div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { TabPack3HGSciences, P3_TEMPLATES });