// charte-tabs-2.jsx
// PREVIEW-ONLY — design-system documentation tab content. Not a production template.
// The "À éviter" example INTENTIONALLY contains emojis to illustrate the rule.
// All other glyphs are doc chrome and will NEVER ship to PDF/KDP.
// Tab content panels — part 2.
// Components, Ketty, Levels, Density, Do/Don't, Templates, Tokens.

/* ---------- Tab: Composants ---------- */
function ComponentDemo({ title, code, children }) {
  return (
    <div className="doc-card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "12px 18px", background: "var(--ae-bg-cool)", borderBottom: "1px solid var(--ae-border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)", fontSize: 14 }}>{title}</div>
        {code && <code style={{ fontSize: 11, color: "var(--ae-muted)" }}>{code}</code>}
      </div>
      <div style={{ padding: "26px 24px", background: "white" }}>
        {children}
      </div>
    </div>
  );
}

function TabComponents() {
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Composants graphiques standards</h2>
        <p className="section-sub">
          Les briques réutilisables de la collection. Chaque composant est représenté
          ici à l'échelle réelle (in), tel qu'il apparaîtra en page 8.5×11.
        </p>

        <div style={{ display: "grid", gap: 18 }}>
          {/* Carte de leçon */}
          <ComponentDemo title="Carte de leçon · « Je retiens »" code="<LessonCard tone='yellow' />">
            <div className="ae-lesson" style={{ paddingTop: "0.2in" }}>
              <div className="ae-lesson-title"><span className="ic">💡</span> Je retiens</div>
              <p style={{ fontSize: "0.13in", marginTop: "0.04in" }}>
                Encadré pédagogique pour énoncer une règle, une définition ou une formule.
                Fond jaune soft + bordure jaune dark + tab pill jaune sur le bord supérieur.
              </p>
              <div className="formula">A² + B² = C²</div>
            </div>
          </ComponentDemo>

          {/* Encadré méthode */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <ComponentDemo title="Encadré méthode" code="<Method />">
              <div className="ae-method" style={{ paddingTop: "0.16in" }}>
                <div className="lab">Méthode</div>
                <ol style={{ paddingLeft: "0.2in", margin: 0, fontSize: "0.13in", lineHeight: 1.5 }}>
                  <li>Identifie le côté connu</li>
                  <li>Pose la formule</li>
                  <li>Calcule étape par étape</li>
                </ol>
              </div>
            </ComponentDemo>
            <ComponentDemo title="Erreur à éviter" code="<Pitfall />">
              <div className="ae-warn" style={{ paddingTop: "0.16in" }}>
                <div className="lab">Erreur à éviter</div>
                <p style={{ fontSize: "0.13in", margin: 0 }}>
                  Ne pas utiliser le théorème de Pythagore si le triangle <b>n'est pas rectangle</b>.
                  Vérifie toujours la présence d'un angle droit.
                </p>
              </div>
            </ComponentDemo>
          </div>

          {/* Bulle Ketty */}
          <ComponentDemo title="Bulle Ketty (astuce)" code="<KettyBubble pose='pointing' />">
            <div style={{ display: "grid", gridTemplateColumns: "1in 1fr", gap: "0.18in", alignItems: "stretch" }}>
              <KettySlot pose="pointing" />
              <div className="ae-ketty" style={{ alignItems: "stretch" }}>
                <div className="k-bubble">
                  <div className="k-lab">Astuce Ketty</div>
                  <div style={{ fontSize: "0.13in", lineHeight: 1.45 }}>
                    Repère d'abord l'hypoténuse : c'est <b>toujours</b> le côté opposé à l'angle droit.
                  </div>
                </div>
              </div>
            </div>
          </ComponentDemo>

          {/* Exercice + QCM */}
          <ComponentDemo title="Exercice standard" code="<Exercice number='1' />">
            <div className="ae-exo">
              <div className="ae-exo-tab">
                <span style={{ fontSize: "0.13in" }}>Exercice 1</span>
              </div>
              <div style={{ marginTop: "0.04in", fontFamily: "var(--ae-font-title)", fontWeight: 500, fontSize: "0.15in", color: "var(--ae-primary-deep)" }}>
                Résous chaque opération.
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.1in 0.3in", marginTop: "0.1in", fontSize: "0.13in" }}>
                <div style={{ display: "flex", gap: "0.1in" }}><span className="ae-q-num">1</span> 35 + 28 = <span className="ae-answer-line"></span></div>
                <div style={{ display: "flex", gap: "0.1in" }}><span className="ae-q-num">2</span> 84 − 47 = <span className="ae-answer-line"></span></div>
                <div style={{ display: "flex", gap: "0.1in" }}><span className="ae-q-num">3</span> 12 × 6 = <span className="ae-answer-line"></span></div>
                <div style={{ display: "flex", gap: "0.1in" }}><span className="ae-q-num">4</span> 96 ÷ 8 = <span className="ae-answer-line"></span></div>
              </div>
            </div>
          </ComponentDemo>

          <ComponentDemo title="QCM" code="<QCM />">
            <div className="ae-exo exo-orange">
              <div className="ae-exo-tab">
                <span style={{ fontSize: "0.13in" }}>QCM</span>
              </div>
              <div style={{ marginTop: "0.04in", fontFamily: "var(--ae-font-title)", fontWeight: 500, fontSize: "0.15in", color: "var(--ae-primary-deep)", marginBottom: "0.06in" }}>
                Coche la bonne réponse.
              </div>
              <div style={{ display: "flex", gap: "0.18in", flexWrap: "wrap", fontSize: "0.13in" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.06in" }}><span className="ae-qcm-letter">A</span> 5 cm</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.06in" }}><span className="ae-qcm-letter">B</span> 7 cm</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.06in" }}><span className="ae-qcm-letter">C</span> 9 cm</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.06in" }}><span className="ae-qcm-letter">D</span> 13 cm</span>
              </div>
            </div>
          </ComponentDemo>

          {/* Zones de réponse */}
          <ComponentDemo title="Zones de réponse" code="<AnswerLine /> · <AnswerBox /> · <RuledArea />">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "0.2in" }}>
              <div>
                <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, fontSize: "0.13in", marginBottom: "0.06in" }}>Ligne pointillée</div>
                Réponds : <span className="ae-answer-line" style={{ width: "1.4in" }}></span>
                <div style={{ fontSize: "0.1in", color: "var(--ae-muted)", marginTop: "0.06in" }}>1 mot · 1 chiffre · réponse courte</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, fontSize: "0.13in", marginBottom: "0.06in" }}>Boîte vide</div>
                <div className="ae-answer-box short"></div>
                <div style={{ fontSize: "0.1in", color: "var(--ae-muted)", marginTop: "0.06in" }}>1 phrase · calcul posé court</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, fontSize: "0.13in", marginBottom: "0.06in" }}>Lignes guidées</div>
                <div className="ae-answer-box ruled" style={{ height: "0.84in" }}></div>
                <div style={{ fontSize: "0.1in", color: "var(--ae-muted)", marginTop: "0.06in" }}>Rédaction · 2-4 lignes · 0.21in entre lignes</div>
              </div>
            </div>
          </ComponentDemo>

          {/* Tableau */}
          <ComponentDemo title="Tableau" code="<Table />">
            <table className="ae-table" style={{ fontSize: "0.13in" }}>
              <thead>
                <tr><th>Mot</th><th>Sens</th><th>Synonyme</th></tr>
              </thead>
              <tbody>
                <tr><td><b>curieux</b></td><td>qui veut découvrir</td><td>……………………</td></tr>
                <tr><td><b>tendre</b></td><td>donner avec la main</td><td>……………………</td></tr>
                <tr><td><b>souvenir</b></td><td>image en mémoire</td><td>……………………</td></tr>
              </tbody>
            </table>
          </ComponentDemo>

          {/* Checklist */}
          <ComponentDemo title="Checklist" code="<Checklist />">
            <ul className="ae-checklist" style={{ padding: 0, margin: 0 }}>
              {["J'ai relu la consigne.", "J'ai vérifié mes calculs.", "J'ai écrit lisiblement.", "J'ai mis les unités."].map(t => (
                <li key={t}><span className="ae-check lg"></span> <span style={{ fontSize: "0.13in" }}>{t}</span></li>
              ))}
            </ul>
          </ComponentDemo>

          {/* QR Block */}
          <ComponentDemo title="Bloc QR" code="<QRBlock label='...' />">
            <div className="ae-qr-block">
              <div className="qr"><QRPlaceholder size="0.8in" seed={88} /></div>
              <div className="copy">
                Scanne pour retrouver <span style={{ color: "var(--ae-orange)" }}>Ketty</span><br/>
                et des bonus en ligne&nbsp;!
              </div>
            </div>
          </ComponentDemo>

          {/* Bilan + Mini-défi */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <ComponentDemo title="Bilan / score" code="<Bilan />">
              <div className="ae-bilan">
                <div className="stamp">★</div>
                <div style={{ flex: 1, fontSize: "0.135in", lineHeight: 1.4 }}>
                  <b style={{ fontFamily: "var(--ae-font-title)" }}>Bilan&nbsp;: </b>
                  tu as révisé l'addition à retenue. Bravo&nbsp;!
                </div>
              </div>
            </ComponentDemo>
            <ComponentDemo title="Mini-défi" code="<Defi />">
              <div className="ae-defi">
                <div className="badge">Défi Ketty</div>
                <div style={{ fontSize: "0.13in", lineHeight: 1.4 }}>
                  Trouve trois mots qui riment avec <b>« souvenir »</b>.
                </div>
              </div>
            </ComponentDemo>
          </div>

          {/* Correction compacte */}
          <ComponentDemo title="Correction compacte (page corrigés)" code="<Correction />">
            <div style={{ background: "var(--ae-bg-cream)", border: "1.5px solid var(--ae-border)", borderRadius: "var(--ae-r-md)", padding: "0.14in 0.18in", fontSize: "0.13in" }}>
              <div style={{ fontFamily: "var(--ae-font-title)", color: "var(--ae-primary-deep)", fontWeight: 600, marginBottom: "0.06in", fontSize: "0.15in", display: "flex", alignItems: "center", gap: "0.1in" }}>
                <span style={{ background: "var(--ae-success)", color: "white", padding: "0.02in 0.1in", borderRadius: 999, fontSize: "0.12in" }}>Corrigé</span>
                Page 12 · Exercice 1
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.06in 0.2in", color: "var(--ae-text-soft)" }}>
                <div><span className="ae-q-num green">1</span> AB = 10 cm</div>
                <div><span className="ae-q-num green">3</span> BC ≈ 7,9 cm</div>
                <div><span className="ae-q-num green">2</span> AC = 24 cm</div>
                <div><span className="ae-q-num green">4</span> BC = 12 cm</div>
              </div>
            </div>
          </ComponentDemo>
        </div>
      </section>
    </>
  );
}

/* ---------- Tab: Ketty ---------- */
function TabKetty() {
  const poses = [
    ["hello", "Accueil, ouverture de chapitre, première rencontre."],
    ["pointing", "Astuce méthode, instruction clé, pointer un élément."],
    ["thinking", "Question ouverte, défi, réflexion, problème difficile."],
    ["celebrating", "Bilan réussi, fin de chapitre, récompense."],
    ["thumbsup", "Validation, encouragement, fin d'exercice court."],
  ];
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Ketty — la coach pédagogique</h2>
        <p className="section-sub">
          Ketty est une mascotte 3D existante de la collection. Elle <b>n'est jamais redessinée</b>
          en SVG ou en illustration plate. Dans la charte, on prévoit un slot
          <code> &lt;KettySlot pose=… /&gt; </code> dans lequel on insère un PNG transparent.
        </p>

        <div className="doc-card" style={{ padding: 24 }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
            {poses.map(([pose, role]) => (
              <div key={pose}>
                <div style={{ width: "100%", height: 160 }}>
                  <KettySlot pose={pose} style={{ height: "100%", aspectRatio: "auto" }} />
                </div>
                <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)", fontSize: 13.5, marginTop: 10 }}>
                  pose=<code style={{ color: "var(--ae-orange-dark)" }}>"{pose}"</code>
                </div>
                <div style={{ fontSize: 12, color: "var(--ae-muted)", marginTop: 4, lineHeight: 1.4 }}>{role}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 18, padding: "10px 14px", background: "var(--ae-primary-soft)", borderRadius: 8, fontSize: 12.5, color: "var(--ae-primary-deep)" }}>
            <b>Important :</b> dans une maquette sans le PNG final, afficher le slot avec la mention
            « <i>Ketty PNG transparent — pose à insérer ici</i> » exactement comme ci-dessus.
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Règles d'usage</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {[
            ["Ketty est utile, jamais décorative", "Toujours associée à une bulle pédagogique : astuce, méthode, encouragement, défi. Pas de Ketty « pour faire joli »."],
            ["Maximum 2 apparitions par page", "1 apparition pédagogique + éventuellement 1 mini bilan / encouragement. Au-delà, le contenu disparaît derrière la mascotte."],
            ["Côté droit ou dans un encadré", "Ne jamais coller Ketty contre la bordure gauche d'un exercice. Elle vit à droite, ou dans un bloc dédié."],
            ["Taille modérée", "Largeur conseillée : 0.85 in (compact) à 1.2 in (héros). Au-delà → propre encadré, pas dans le flux."],
            ["Pas pour collège+ en mascotte géante", "À partir de la 4ᵉ, Ketty est plus discrète : portrait + bulle, pas pleine page."],
            ["Ne pas redessiner / re-styliser", "Pas de Ketty SVG, pas de version flat, pas de copie d'autre mascotte."],
          ].map(([t, d]) => (
            <div key={t} className="doc-card" style={{ padding: 16 }}>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)", fontSize: 14, marginBottom: 6 }}>✓ {t}</div>
              <div style={{ fontSize: 12.5, color: "var(--ae-text-soft)", lineHeight: 1.5 }}>{d}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <h2>Patterns de bulle</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {[
            ["Astuce Ketty", "var(--ae-primary)", "Repère d'abord l'hypoténuse : c'est toujours le côté opposé à l'angle droit."],
            ["Méthode", "var(--ae-success)", "1) Lis la consigne · 2) Identifie ce qu'on cherche · 3) Pose le calcul."],
            ["Erreur à éviter", "var(--ae-error)", "Ne pas oublier l'unité de mesure ! Une longueur sans unité n'est pas une réponse."],
            ["Défi Ketty", "var(--ae-orange)", "Trouve trois autres exemples dans ton quotidien. Note-les sur ton cahier."],
            ["Bravo !", "var(--ae-success)", "Tu as terminé. Vérifie ton score et passe à la page suivante."],
          ].map(([lab, color, txt]) => (
            <div key={lab} className="doc-card" style={{ padding: 18 }}>
              <div className="ae-ketty">
                <div className="k-bubble" style={{ borderColor: color, marginLeft: 0 }}>
                  <div className="k-lab" style={{ background: color }}>{lab}</div>
                  <div style={{ fontSize: "0.13in", lineHeight: 1.45 }}>{txt}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

/* ---------- Tab: Variantes par niveau ---------- */
function TabLevels() {
  const levels = [
    { key: "cp", label: "CP / CE1", age: "6–7 ans", color: "Bleu + jaune dominants, orange ponctuel.", density: "Très aéré · 3 blocs / page max.", text: "0.16 – 0.18 in", illu: "Beaucoup. Ketty très présente.", meter: 1, tone: "Doux, illustré, ludique." },
    { key: "ce", label: "CE2 / CM1 / CM2", age: "8–10 ans", color: "Palette complète, jaune généreux.", density: "Aéré · 4–5 blocs / page.", text: "0.14 – 0.16 in", illu: "Régulière. Ketty 1×/page.", meter: 2, tone: "Chaleureux, structuré." },
    { key: "6e", label: "6ᵉ / 5ᵉ", age: "11–12 ans", color: "Bleu dominant, jaune en accent.", density: "Standard · 5–6 blocs / page.", text: "0.13 – 0.14 in", illu: "Mesurée. Ketty en astuce.", meter: 3, tone: "Motivant, clair." },
    { key: "4e", label: "4ᵉ / 3ᵉ", age: "13–14 ans", color: "Bleu + neutres, accent orange ciblé.", density: "Standard · 6–7 blocs / page.", text: "0.13 in", illu: "Fonctionnelle. Ketty discrète.", meter: 4, tone: "Structuré, efficace." },
    { key: "lyc", label: "Lycée", age: "15–18 ans", color: "Bleu + neutres, accents très contrôlés.", density: "Dense · 7–9 blocs / page.", text: "0.12 – 0.13 in", illu: "Schémas / docs, peu de Ketty.", meter: 5, tone: "Sobre, académique, premium." },
  ];
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>5 variantes pilotées par <code>theme.level</code></h2>
        <p className="section-sub">
          La même charte se décline en 5 niveaux d'intensité. On change la <b>densité</b>,
          la <b>taille de texte</b>, la <b>quantité d'illustrations</b> et la <b>présence de Ketty</b>.
          Les couleurs et la structure (header / footer / grille) restent identiques.
        </p>

        <div className="levels-grid">
          {levels.map(l => (
            <div key={l.key} className="level-card">
              <div>
                <span className="pill">{l.age}</span>
                <h4 style={{ marginTop: 8 }}>{l.label}</h4>
              </div>
              <div style={{ fontSize: 11.5, color: "var(--ae-orange-dark)", fontWeight: 700, fontStyle: "italic" }}>{l.tone}</div>
              <div className="meter">
                {[1,2,3,4,5].map(i => <span key={i} className={i <= l.meter ? "on" : ""}></span>)}
              </div>
              <ul>
                <li><b>Couleur :</b> {l.color}</li>
                <li><b>Densité :</b> {l.density}</li>
                <li><b>Texte :</b> {l.text}</li>
                <li><b>Illustrations :</b> {l.illu}</li>
              </ul>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <h2>Recommandations transversales</h2>
        <div className="info-grid">
          <div className="info-chip"><div className="lbl">CP/CE1 — éviter</div><div className="desc">Texte mass, paragraphes &gt; 4 lignes, QCM &gt; 3 options, formules abstraites.</div></div>
          <div className="info-chip"><div className="lbl">CE2/CM2 — viser</div><div className="desc">Variétés de blocs (lecture, exo, défi), Ketty pédagogique 1×/page.</div></div>
          <div className="info-chip"><div className="lbl">6e/5e — viser</div><div className="desc">Méthodes pas-à-pas, Je retiens systématique, défis bonus.</div></div>
          <div className="info-chip"><div className="lbl">4e/3e — éviter</div><div className="desc">Surcharge décorative, Ketty pleine page, jaune en grand aplat.</div></div>
          <div className="info-chip"><div className="lbl">Lycée — viser</div><div className="desc">Documents authentiques, schémas denses, cours structuré 2 colonnes.</div></div>
          <div className="info-chip"><div className="lbl">Lycée — éviter</div><div className="desc">Tons enfantins, bulles « bravo », emojis dans l'iconographie.</div></div>
        </div>
      </section>

      <section className="section">
        <h2>Densité — 3 réglages</h2>
        <p className="section-sub">Indépendant du niveau : le mode <b>aéré</b> peut être imposé sur un cahier de vacances lycée pour respirer, et le mode <b>dense</b> sur un brevet blanc.</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
          {[
            ["Aéré", "0.26in", "3–5 blocs / page · 1.6 line-height · zones de réponse +20%", "var(--ae-success)"],
            ["Standard", "0.20in", "5–7 blocs / page · 1.5 line-height · zones standard", "var(--ae-primary)"],
            ["Dense", "0.14in", "7–9 blocs / page · 1.45 line-height · zones compactes", "var(--ae-orange)"],
          ].map(([t, gap, d, c]) => (
            <div key={t} className="doc-card" style={{ padding: 18, borderTop: `4px solid ${c}` }}>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)", fontSize: 16 }}>{t}</div>
              <div style={{ fontFamily: "var(--ae-font-mono)", fontSize: 12, color: "var(--ae-orange-dark)", marginTop: 4 }}>block-gap {gap}</div>
              <div style={{ fontSize: 12.5, color: "var(--ae-text-soft)", marginTop: 8, lineHeight: 1.5 }}>{d}</div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

/* ---------- Tab: Do / Don't ---------- */
function DoDontCard({ kind, title, body, visual }) {
  return (
    <div className={`dd-card ${kind}`}>
      <div className="dd-visual">{visual}</div>
      <div className="dd-head">
        <span style={{ fontSize: 16 }}>{kind === "do" ? "✓" : "✕"}</span>
        {kind === "do" ? "À faire" : "À éviter"} — {title}
      </div>
      <div className="dd-body">{body}</div>
    </div>
  );
}
function TabDoDont() {
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Do / Don't</h2>
        <p className="section-sub">Quelques cas concrets pour calibrer le système.</p>
        <div className="dd-grid">
          <DoDontCard
            kind="do"
            title="Hiérarchie claire"
            body="Un titre Fredoka, une consigne Nunito 700, des items numérotés. La page se lit en un coup d'œil."
            visual={
              <div>
                <div style={{ fontFamily: "Fredoka", fontWeight: 600, color: "var(--ae-primary-deep)", fontSize: 22 }}>Le théorème</div>
                <div style={{ fontFamily: "Nunito Sans", fontWeight: 700, fontSize: 13, marginTop: 6 }}>Résous les problèmes.</div>
                <div style={{ fontSize: 12, marginTop: 4, display: "flex", gap: 8 }}><span className="ae-q-num" style={{ width: 18, height: 18, fontSize: 11 }}>1</span> AC = 6 cm, BC = 8 cm…</div>
              </div>
            }
          />
          <DoDontCard
            kind="dont"
            title="Hiérarchie plate"
            body="Tout au même poids : le lecteur ne sait pas par quoi commencer. Pas de tailles différenciées."
            visual={
              <div style={{ fontSize: 13, fontFamily: "Nunito Sans" }}>
                <div>Le théorème de Pythagore</div>
                <div>Résous les problèmes</div>
                <div>1. AC = 6 cm, BC = 8 cm</div>
                <div>2. AC = 12 cm, AB = 13 cm</div>
              </div>
            }
          />

          <DoDontCard
            kind="do"
            title="Zones de réponse réalistes"
            body="0.6 in pour une phrase, 0.84+ in pour une rédaction. L'élève doit pouvoir écrire confortablement."
            visual={
              <div>
                <div style={{ fontSize: 12 }}>Réponds :</div>
                <div className="ae-answer-box ruled" style={{ height: "0.7in", marginTop: 6 }}></div>
              </div>
            }
          />
          <DoDontCard
            kind="dont"
            title="Cases trop petites ou énormes"
            body="Une ligne de 0.2 in pour une rédaction, ou un encadré de 3 in pour un seul mot : bannis."
            visual={
              <div>
                <div style={{ fontSize: 12 }}>Réponds :</div>
                <div style={{ borderBottom: "1px dotted #6A748F", height: "0.05in", marginTop: 8 }}></div>
                <div style={{ fontSize: 11, color: "var(--ae-error)", marginTop: 14, fontStyle: "italic" }}>← trop courte</div>
              </div>
            }
          />

          <DoDontCard
            kind="do"
            title="QR fonctionnel + texte clair"
            body="QR ≥ 0.6 in, sur fond blanc, accompagné d'une instruction (« Scanne pour… ») et de l'URL."
            visual={
              <div className="ae-qr-block" style={{ padding: "0.08in 0.1in" }}>
                <div className="qr" style={{ width: "0.55in", height: "0.55in" }}><QRPlaceholder size="0.5in" seed={12} /></div>
                <div style={{ fontSize: 11, fontFamily: "Fredoka", color: "var(--ae-primary-deep)", lineHeight: 1.3 }}>Scanne pour la correction · alloeducation.fr</div>
              </div>
            }
          />
          <DoDontCard
            kind="dont"
            title="QR décoratif"
            body="QR illisible, trop petit, sur fond coloré, sans texte. C'est un visuel, pas un outil."
            visual={
              <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                <div style={{ background: "var(--ae-orange)", padding: 4, borderRadius: 4 }}>
                  <QRPlaceholder size="0.3in" seed={5} fg="#fff" bg="var(--ae-orange)" />
                </div>
                <div style={{ fontSize: 11, color: "var(--ae-error)", fontStyle: "italic" }}>← trop petit, fond orange, sans texte</div>
              </div>
            }
          />

          <DoDontCard
            kind="do"
            title="3 couleurs max par bloc"
            body="Sur un encadré : 1 fond + 1 bordure + 1 accent. Le texte reste noir / bleu deep."
            visual={
              <div className="ae-lesson" style={{ padding: "0.12in 0.16in", paddingTop: "0.18in" }}>
                <div className="ae-lesson-title" style={{ top: -10, fontSize: 11 }}><span className="ic" style={{ width: 14, height: 14, fontSize: 10 }}>💡</span> Je retiens</div>
                <div style={{ fontSize: 11 }}>Une règle simple, des couleurs maîtrisées.</div>
              </div>
            }
          />
          <DoDontCard
            kind="dont"
            title="Arc-en-ciel"
            body="Bordure rouge + fond rose + tab vert + texte bleu + emojis multicolores : illisible et incohérent."
            visual={
              <div style={{ border: "2px solid var(--ae-error)", background: "#FFE4F2", padding: 8, borderRadius: 6 }}>
                <div style={{ display: "inline-block", background: "var(--ae-success)", color: "white", fontSize: 10, padding: "1px 6px", borderRadius: 4 }}>Note</div>
                <div style={{ fontSize: 11, color: "var(--ae-primary)", marginTop: 4 }}>🎉 ⭐ 🌈 ❤ Une règle simple ✨</div>
              </div>
            }
          />

          <DoDontCard
            kind="do"
            title="Alignements stricts"
            body="Tous les blocs s'alignent sur la grille à 6 colonnes. Marges latérales identiques."
            visual={
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
                <div style={{ background: "var(--ae-primary-soft)", border: "1px solid var(--ae-primary)", height: 50, borderRadius: 4 }}></div>
                <div style={{ background: "var(--ae-primary-soft)", border: "1px solid var(--ae-primary)", height: 50, borderRadius: 4 }}></div>
                <div style={{ gridColumn: "1 / 3", background: "var(--ae-yellow-soft)", border: "1px solid var(--ae-yellow-dark)", height: 30, borderRadius: 4 }}></div>
              </div>
            }
          />
          <DoDontCard
            kind="dont"
            title="Alignements aléatoires"
            body="Chaque bloc commence à une marge différente : la page paraît brouillonne, la lecture fatigue."
            visual={
              <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                <div style={{ marginLeft: 0, width: "70%", background: "var(--ae-primary-soft)", border: "1px solid var(--ae-primary)", height: 24, borderRadius: 4 }}></div>
                <div style={{ marginLeft: 30, width: "60%", background: "var(--ae-primary-soft)", border: "1px solid var(--ae-primary)", height: 24, borderRadius: 4 }}></div>
                <div style={{ marginLeft: 12, width: "85%", background: "var(--ae-primary-soft)", border: "1px solid var(--ae-primary)", height: 24, borderRadius: 4 }}></div>
              </div>
            }
          />

          <DoDontCard
            kind="do"
            title="Ketty utile"
            body="Une astuce pédagogique, courte (≤ 2 lignes), reliée à l'exercice qui suit."
            visual={
              <div style={{ display: "flex", gap: 6, alignItems: "stretch" }}>
                <div style={{ width: 38 }}>
                  <KettySlot pose="pointing" style={{ height: "100%", aspectRatio: "auto" }} />
                </div>
                <div style={{ flex: 1, border: "1.5px solid var(--ae-primary)", borderRadius: 6, padding: 6, fontSize: 10, lineHeight: 1.3 }}>
                  <div style={{ background: "var(--ae-primary)", color: "white", fontSize: 9, padding: "1px 6px", borderRadius: 999, display: "inline-block" }}>Astuce</div>
                  <div style={{ marginTop: 3 }}>Repère d'abord l'hypoténuse.</div>
                </div>
              </div>
            }
          />
          <DoDontCard
            kind="dont"
            title="Ketty décorative géante"
            body="Ketty pleine page « pour faire joli », sans texte attaché. Elle prend la place du contenu."
            visual={
              <div style={{ display: "flex", justifyContent: "center" }}>
                <div style={{ width: 70, height: 90 }}>
                  <KettySlot pose="hello" style={{ height: "100%", aspectRatio: "auto" }} />
                </div>
              </div>
            }
          />
        </div>
      </section>
    </>
  );
}

Object.assign(window, {
  TabComponents, TabKetty, TabLevels, TabDoDont,
});