// charte-tabs-maths-brevet.jsx — preview navigation around the Maths Brevet pack.

const { useState: __useStateMB } = React;

const MB_TEMPLATES = [
  { id: "math-lesson-exercise",     num: "01", label: "Leçon + exemple guidé",  comp: MBLessonExercise,
    note: "Objectif · à retenir · exemple guidé · 4 exercices courts · réflexes à cocher." },
  { id: "math-progressive-exercise",num: "02", label: "Exercice progressif",    comp: MBProgressive,
    note: "Méthode express · 3 niveaux (facile / moyen / défi) · auto-évaluation." },
  { id: "math-guided-problem",      num: "03", label: "Problème guidé",         comp: MBGuidedProblem,
    note: "Situation · données · étapes guidées · zone calculs · phrase réponse · piège." },
  { id: "math-grid-practice",       num: "04", label: "Calculs en grille",      comp: MBGridPractice,
    note: "20 calculs en 10 min · priorités · relatifs · fractions · score." },
  { id: "math-qcm",                 num: "05", label: "QCM bilan",              comp: MBQCM,
    note: "6 questions A/B/C · zone justification · score." },
  { id: "algebra-equation-page",    num: "06", label: "Équations / littéral",   comp: MBAlgebra,
    note: "Je développe / je réduis / je factorise · résolution + auto-check." },
  { id: "proportionality-table",    num: "07", label: "Proportionnalité",       comp: MBProportionality,
    note: "Tableau de proportionnalité · coefficient · méthode passer par l'unité." },
  { id: "percentage-scale-page",    num: "08", label: "Pourcentages / échelles",comp: MBPercentage,
    note: "Hausse / baisse · échelle · conversions · soldes pratiques." },
  { id: "function-table-graph",     num: "09", label: "Fonctions",              comp: MBFunctions,
    note: "Formule · tableau de valeurs · repère orthonormé · image / antécédent." },
  { id: "stats-probability-page",   num: "10", label: "Stats / probas",         comp: MBStatsProba,
    note: "Tableau · diagramme en barres · moyenne / médiane / étendue · probas." },
  { id: "geometry-figure-page",     num: "11", label: "Géométrie · figure",     comp: MBGeometry,
    note: "Figure SVG · données · questions · zone calculs · phrase réponse." },
  { id: "geometry-pythagoras",      num: "12", label: "Pythagore",              comp: MBPythagoras,
    note: "Variant pythagoras · condition · formule · figure · piège." },
  { id: "geometry-pythagoras-r",    num: "12b",label: "Pythagore (réciproque)", comp: MBPythagorasConverse,
    note: "Variant pythagoras-converse · démontrer rectangle." },
  { id: "geometry-thales",          num: "12c",label: "Thalès",                 comp: MBThales,
    note: "Variant thales · alignement + parallélisme · 3 rapports égaux." },
  { id: "geometry-trigonometry",    num: "12d",label: "Trigonométrie",          comp: MBTrigonometry,
    note: "Variant trigonometry · SOH CAH TOA · identification opp/adj/hyp." },
  { id: "solids-volume-page",       num: "16", label: "Solides & volumes",     comp: MBSolidsVolume,
    note: "Cube · pavé droit · cylindre — formule + 3 calculs + erreur fréquente." },
  { id: "volume-units-page",        num: "17", label: "Conversions volumes",    comp: MBVolumeUnits,
    note: "L / cm³ / dm³ / m³ · règle clé · tableau · 4 conversions + problème aquarium." },
  { id: "geometry-transformations-page", num: "18", label: "Transformations",   comp: MBTransformations,
    note: "Translation · rotation · symétrie axiale · homothétie · effets longueurs/angles." },
  { id: "algorithm-tableur-page",   num: "19", label: "Algo / Scratch / tableur", comp: MBAlgoTableur,
    note: "Programme de calcul · blocs Scratch · formule tableur · démonstration." },
  { id: "math-formula-sheet",       num: "13", label: "Formulaire express",     comp: MBFormulaSheet,
    note: "Calculs · géométrie · stats / probas · mini-rappels méthode." },
  { id: "brevet-mini-exam",         num: "14", label: "Mini-sujet brevet",      comp: MBMiniExam,
    note: "Temps + barème + stratégie · 3 exercices type brevet." },
  { id: "math-compact-correction",  num: "15", label: "Correction compacte",    comp: MBCompactCorrection,
    note: "Références pages · étapes essentielles · réponses surlignées · QR." },
];

function TabMathsBrevet({ tweaks }) {
  const [active, setActive] = __useStateMB("math-lesson-exercise");
  const tpl = MB_TEMPLATES.find(t => t.id === active);
  const Comp = tpl.comp;

  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>AlloBrevet — Maths 3ᵉ</h2>
        <p className="section-sub">
          Pack maths Brevet : 15 templates pour générer les 100 pages d'<i>Objectif Brevet
          Maths 3e — Réviser, s'entraîner, progresser</i> à partir d'un JSON structuré.
          Tous les templates utilisent strictement le PageShell V1.2 et les helpers
          maths (MathExpr, Frac, StepBlock, AxisGrid, BarChart, TriangleFigure, ProportionalityTable).
          Les QR slugs suivent le format de production : <code>AE-3E-MATH-001-2026-V1-PXXX</code>.
        </p>

        <div className="stress-rail">
          {MB_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">Slug AE-3E-MATH-001…</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>Mapping chemin de fer ↔ templates</h2>
        <div className="info-grid">
          <div className="info-chip">
            <div className="lbl">P012 → P019 · Automatismes</div>
            <div className="desc"><code>math-grid-practice</code> + <code>math-lesson-exercise</code> — priorités, relatifs, fractions, puissances.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">P021 → P035 · Calcul littéral</div>
            <div className="desc"><code>algebra-equation-page</code> + <code>math-progressive-exercise</code> — développer, réduire, factoriser, équations.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">P036 → P045 · Proportionnalité &amp; %</div>
            <div className="desc"><code>proportionality-table</code> + <code>percentage-scale-page</code> — coefficient, hausse / baisse, échelles.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">P046 → P050 · Fonctions</div>
            <div className="desc"><code>function-table-graph</code> — formule, tableau de valeurs, repère orthonormé, image / antécédent.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">P051 → P055 · Stats &amp; probas</div>
            <div className="desc"><code>stats-probability-page</code> — moyenne, médiane, étendue, diagramme en barres, probas simples.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">P056 → P070 · Géométrie</div>
            <div className="desc"><code>geometry-figure-page</code> + <code>geometry-theorem-page</code> (4 variants : pythagoras, pythagoras-converse, thales, trigonometry).</div>
          </div>
          <div className="info-chip">
            <div className="lbl">P075 · Bilan</div>
            <div className="desc"><code>math-qcm</code> — 6 questions A/B/C avec score et justification.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">P079 → P080 · Formulaire</div>
            <div className="desc"><code>math-formula-sheet</code> — toutes les formules en 2 colonnes, lisible et imprimable.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">P081 → P087 · Brevets blancs</div>
            <div className="desc"><code>brevet-mini-exam</code> — temps + barème + stratégie + 3 exercices type brevet.</div>
          </div>
          <div className="info-chip">
            <div className="lbl">P089 → P096 · Corrections</div>
            <div className="desc"><code>math-compact-correction</code> — référence pages · étapes essentielles · réponses surlignées · QR vidéo.</div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { TabMathsBrevet, MB_TEMPLATES });