// charte-tabs.jsx
// PREVIEW-ONLY — design-system documentation tab content. Not a production template.
// Glyphs (⚠, ✓, ★, ✕, etc.) used here are for in-app docs only and will NEVER ship to PDF/KDP.
// Production templates live in stress-pages.jsx + charte-pages.jsx and use <Icon k="…" /> exclusively.
// Tab content panels for the Allo Education design-system mini-site.

/* ---------- Tab: Vue d'ensemble ---------- */
function TabOverview() {
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 28, alignItems: "stretch" }}>
          <div className="doc-card" style={{ padding: 28, background: "linear-gradient(135deg, #1B3FB8 0%, #102A85 100%)", color: "white", border: 0, position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: -30, right: -30, width: 180, height: 180, background: "rgba(255,197,51,.18)", borderRadius: "50%" }}></div>
            <div style={{ position: "absolute", bottom: -40, left: -40, width: 140, height: 140, background: "rgba(245,120,28,.18)", borderRadius: "50%" }}></div>
            <div style={{ position: "relative" }}>
              <div style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "#FFC533", fontWeight: 700, marginBottom: 14 }}>
                Charte graphique · v1.2 · LOCK FINAL
              </div>
              <h2 style={{ color: "white", fontSize: 36, lineHeight: 1.05, maxWidth: "16ch" }}>
                Une collection.<br/>Une seule identité.
              </h2>
              <p style={{ marginTop: 16, fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,.85)", maxWidth: "44ch" }}>
                Cette charte définit les règles visuelles, structurelles et éditoriales pour générer
                <b style={{ color: "white" }}> 50+ templates cohérents</b>, du CP à la Terminale,
                multi-matières, imprimables KDP et pilotés par <code style={{ color: "#FFC533" }}>theme.json</code>.
              </p>
            </div>
          </div>

          <div className="doc-card" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={{ fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--ae-orange)", fontWeight: 700 }}>
              Principes
            </div>
            {[
              ["Premium éducatif", "Chaleureux, rassurant, jamais bébé."],
              ["Lisibilité d'abord", "Print 300 dpi, KDP, texte ≥ 0.12in."],
              ["Système, pas pages", "Header / footer / grille communs ; seules les données changent."],
              ["Ketty utile", "Astuce, méthode, encouragement — jamais décoratif."],
            ].map(([t, d]) => (
              <div key={t} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                <div style={{ width: 22, height: 22, borderRadius: 6, background: "var(--ae-primary-soft)", color: "var(--ae-primary)", display: "grid", placeItems: "center", flex: "0 0 auto", fontFamily: "var(--ae-font-title)", fontWeight: 700 }}>✓</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 13.5, color: "var(--ae-primary-deep)" }}>{t}</div>
                  <div style={{ fontSize: 12.5, color: "var(--ae-muted)", lineHeight: 1.45 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Architecture du système</h2>
        <p className="section-sub">
          Chaque page du livre se compose d'un <b>shell commun</b> (header + footer + grille) et d'un
          <b> centre de page</b> qui change selon le template. Tout est piloté par tokens.
        </p>

        <div className="doc-card" style={{ padding: 24 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
            {[
              ["1", "theme.json", "primary, niveau, density, qrVisible, scoreVisible…", "var(--ae-primary)"],
              ["2", "tokens CSS", "couleurs, typographies, espacements, radii, échelle pouces.", "var(--ae-orange)"],
              ["3", "composants", "<Header>, <Footer>, <KettySlot>, <Exercice>, <QCM>, <Bilan>…", "var(--ae-success)"],
            ].map(([n, t, d, c]) => (
              <div key={n} style={{ border: `1.5px solid ${c}`, borderRadius: 12, padding: 16, background: "white", position: "relative" }}>
                <div style={{ position: "absolute", top: -12, left: 16, background: c, color: "white", borderRadius: 999, padding: "3px 12px", fontSize: 11, fontWeight: 700, fontFamily: "var(--ae-font-title)" }}>
                  Étape {n}
                </div>
                <div style={{ fontFamily: "var(--ae-font-mono)", fontWeight: 700, color: c, marginTop: 8, fontSize: 14 }}>{t}</div>
                <div style={{ fontSize: 12.5, color: "var(--ae-muted)", marginTop: 6, lineHeight: 1.5 }}>{d}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, padding: "10px 14px", background: "var(--ae-yellow-soft)", border: "1px solid var(--ae-yellow-dark)", borderRadius: 8, fontSize: 12.5, color: "var(--ae-primary-deep)" }}>
            <b>Règle d'or :</b> on ne redessine pas le header / footer à chaque template.
            Pour créer un nouveau cahier, on configure son <code>theme.json</code>, on choisit
            les composants à insérer dans le centre, et on génère.
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Sommaire</h2>
        <div className="info-grid">
          {[
            ["01", "Couleurs", "Palette principale, sémantique, règles d'usage."],
            ["02", "Typographie", "Fredoka × Nunito Sans, échelle, lisibilité print."],
            ["03", "Grille 8.5×11", "Marges, colonnes, zones interdites."],
            ["04", "Header / Footer", "Shell commun à toutes les pages."],
            ["05", "Composants", "Leçon, exercice, QCM, Ketty, QR, bilan…"],
            ["06", "Ketty", "Slot mascotte 3D, poses, règles d'usage."],
            ["07", "Variantes par niveau", "CP/CE1 → Lycée."],
            ["08", "Densité", "Aéré · Standard · Dense."],
            ["09", "Do / Don't", "Bonnes pratiques, erreurs à éviter."],
            ["10", "Templates", "3 pages exemples : Primaire / Collège / Lycée."],
            ["11", "Tokens", "theme.json + variables CSS."],
          ].map(([n, t, d]) => (
            <div key={n} className="info-chip">
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span className="lbl">{n}</span>
                <span style={{ fontFamily: "var(--ae-font-title)", fontSize: 14, color: "var(--ae-primary-deep)", fontWeight: 600 }}>{t}</span>
              </div>
              <div className="desc">{d}</div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

/* ---------- Tab: Couleurs ---------- */
function Swatch({ name, hex, varName, dark = false, ratio }) {
  return (
    <div className="swatch">
      <div className={"chip" + (dark ? " dark" : "")} style={{ background: hex }}>
        {ratio && <span className="ratio">{ratio}</span>}
      </div>
      <div className="meta">
        <div className="name">{name}</div>
        <div className="hex">{hex}</div>
        <div className="var">{varName}</div>
      </div>
    </div>
  );
}

function TabColors() {
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Palette principale</h2>
        <p className="section-sub">
          L'identité Allo Education s'appuie sur trois couleurs primaires : un <b>bleu profond</b> rassurant,
          un <b>orange énergie</b>, et un <b>jaune accent</b>. Le blanc et un cream très clair structurent les fonds.
        </p>
        <div className="swatch-row">
          <Swatch name="Bleu Allo" hex="#1B3FB8" varName="--ae-primary" dark ratio="AAA · 9.6:1" />
          <Swatch name="Bleu profond" hex="#102A85" varName="--ae-primary-dark" dark ratio="AAA" />
          <Swatch name="Bleu deep" hex="#0B1F66" varName="--ae-primary-deep" dark ratio="AAA · 13:1" />
          <Swatch name="Bleu soft" hex="#E8EEFB" varName="--ae-primary-soft" />
          <Swatch name="Orange énergie" hex="#F5781C" varName="--ae-orange" dark ratio="AA · 4.5:1" />
          <Swatch name="Orange dark" hex="#D85F0A" varName="--ae-orange-dark" dark ratio="AA · 5.7:1" />
          <Swatch name="Jaune accent" hex="#FFC533" varName="--ae-yellow" ratio="3.4:1*" />
          <Swatch name="Jaune soft" hex="#FFF6D6" varName="--ae-yellow-soft" />
        </div>
      </section>

      <section className="section">
        <h2>Couleurs sémantiques</h2>
        <p className="section-sub">À utiliser <b>uniquement</b> pour les états indiqués. Ne jamais détourner pour de la décoration.</p>
        <div className="swatch-row">
          <Swatch name="Succès / méthode" hex="#1F9E5A" varName="--ae-success" dark ratio="AA · 4.6:1" />
          <Swatch name="Succès soft" hex="#E2F4EA" varName="--ae-success-soft" />
          <Swatch name="Erreur / piège" hex="#D62E2E" varName="--ae-error" dark ratio="AA · 5.6:1" />
          <Swatch name="Erreur soft" hex="#FCE7E7" varName="--ae-error-soft" />
          <Swatch name="Pink (réservé)" hex="#E91E78" varName="--ae-pink" dark ratio="cover only" />
        </div>
      </section>

      <section className="section">
        <h2>Neutres & fonds</h2>
        <div className="swatch-row">
          <Swatch name="Texte" hex="#0F1A3D" varName="--ae-text" dark ratio="AAA" />
          <Swatch name="Texte soft" hex="#2B3656" varName="--ae-text-soft" dark />
          <Swatch name="Muted" hex="#6A748F" varName="--ae-muted" />
          <Swatch name="Border" hex="#D8DEEC" varName="--ae-border" />
          <Swatch name="Page" hex="#FFFFFF" varName="--ae-bg" />
          <Swatch name="Cream alt" hex="#FBF8F1" varName="--ae-bg-cream" />
          <Swatch name="Cool alt" hex="#F6F8FC" varName="--ae-bg-cool" />
        </div>
      </section>

      <section className="section">
        <h2>Règles d'usage</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {[
            ["Ratio dominant 60 / 30 / 10", "60% blanc + bleu Allo en aplats forts (header, titres). 30% neutres et accents bleu soft. 10% orange + jaune pour accentuer.", "var(--ae-primary)"],
            ["Pas plus de 3 couleurs par bloc", "Sur un encadré, on ne mélange jamais plus de 3 couleurs en aplat (hors texte noir).", "var(--ae-orange)"],
            ["Un encadré = une intention", "Bleu = exercice. Orange = QCM / défi. Jaune = leçon / je retiens. Vert = méthode. Rouge = piège.", "var(--ae-success)"],
            ["Pink uniquement en couverture", "Le rose vif (#E91E78) est réservé aux titres de couvertures. Jamais à l'intérieur du livre.", "var(--ae-pink)"],
          ].map(([t, d, c]) => (
            <div key={t} className="doc-card" style={{ padding: 18, borderLeft: `4px solid ${c}` }}>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)", fontSize: 15, marginBottom: 6 }}>{t}</div>
              <div style={{ fontSize: 13, color: "var(--ae-text-soft)", lineHeight: 1.55 }}>{d}</div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

/* ---------- Tab: Typographie ---------- */
function TabTypography() {
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Familles</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          <div className="doc-card" style={{ padding: 28, background: "var(--ae-primary)", color: "white", border: 0 }}>
            <div style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "#FFC533", fontWeight: 700, marginBottom: 8 }}>Titres · joyeux</div>
            <div style={{ fontFamily: "var(--ae-font-title)", fontSize: 64, lineHeight: 0.95, fontWeight: 600, color: "white", letterSpacing: "-0.01em" }}>Fredoka</div>
            <div style={{ marginTop: 16, fontSize: 13, color: "rgba(255,255,255,.8)", lineHeight: 1.55 }}>
              Ronde, scolaire, chaleureuse. Utilisée pour les titres, sous-titres, badges,
              numéros d'exercice, formules encadrées et tout élément joyeux.
              <br/><br/>Poids utilisés : <b style={{ color: "white" }}>500 / 600 / 700</b>.
            </div>
          </div>
          <div className="doc-card" style={{ padding: 28, background: "white" }}>
            <div style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ae-orange)", fontWeight: 700, marginBottom: 8 }}>Corps · lecture</div>
            <div style={{ fontFamily: "var(--ae-font-body)", fontSize: 60, lineHeight: 0.95, fontWeight: 700, color: "var(--ae-primary-deep)", letterSpacing: "-0.005em" }}>Nunito Sans</div>
            <div style={{ marginTop: 16, fontSize: 13, color: "var(--ae-muted)", lineHeight: 1.55 }}>
              Très lisible en print, douce et moderne. Corps de texte, consignes,
              questions, corrections, légendes et métadonnées.
              <br/><br/>Poids utilisés : <b style={{ color: "var(--ae-primary-deep)" }}>400 / 600 / 700 / 800</b>.
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Échelle (mesures print)</h2>
        <p className="section-sub">
          Toutes les tailles sont définies en <b>pouces</b> pour rester stables en impression. Le minimum
          absolu pour le corps de texte est <b>0.12in</b> (≈ 9pt). En-dessous : illisible imprimé.
        </p>
        <div className="doc-card" style={{ padding: "8px 22px" }}>
          {[
            ["Display cover", "Fredoka 600", "0.9in", "≈ 65pt", "Couvertures uniquement", { fontFamily: "Fredoka", fontSize: 86, lineHeight: 1, fontWeight: 700 }, "Cahier"],
            ["Titre H1", "Fredoka 600", "0.36in", "≈ 26pt", "Titres de leçon / chapitre", { fontFamily: "Fredoka", fontSize: 34, fontWeight: 600, color: "var(--ae-primary-deep)" }, "Le théorème de Pythagore"],
            ["Titre H2", "Fredoka 600", "0.22in", "≈ 16pt", "Sections / encadrés titrés", { fontFamily: "Fredoka", fontSize: 22, fontWeight: 600, color: "var(--ae-primary-deep)" }, "Vocabulaire"],
            ["Titre H3", "Fredoka 500", "0.18in", "≈ 13pt", "Sous-sections", { fontFamily: "Fredoka", fontSize: 18, fontWeight: 500, color: "var(--ae-primary-deep)" }, "Je retiens"],
            ["Consigne", "Nunito Sans 700", "0.15in", "≈ 11pt", "Énoncés d'exercice", { fontFamily: "Nunito Sans", fontSize: 15, fontWeight: 700, color: "var(--ae-text)" }, "Coche la bonne réponse."],
            ["Corps", "Nunito Sans 400", "0.13in", "≈ 9.5pt", "Texte courant", { fontFamily: "Nunito Sans", fontSize: 14, fontWeight: 400, color: "var(--ae-text)", lineHeight: 1.55 }, "Léa range deux sandwichs et une pomme dans son sac."],
            ["Corps min print", "Nunito Sans 600", "0.12in", "≈ 9pt", "Légendes, métadonnées (jamais sous cette taille)", { fontFamily: "Nunito Sans", fontSize: 13, fontWeight: 600, color: "var(--ae-text-soft)" }, "Document 1 · schéma de la traduction"],
            ["Eyebrow", "Nunito Sans 800", "0.1in", "≈ 7.5pt · uppercase, +letter-spacing", "Étiquettes / surtitres uniquement", { fontFamily: "Nunito Sans", fontSize: 11, fontWeight: 800, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ae-orange)" }, "Compétences B.O."],
          ].map(([name, font, size, ptSize, role, sampleStyle, sampleText]) => (
            <div key={name} className="type-specimen">
              <div className="sp-meta">
                <div className="lbl">{name}</div>
                {font}
                <br/>{role}
              </div>
              <div className="sp-sample" style={sampleStyle}>{sampleText}</div>
              <div className="sp-size">
                <div style={{ color: "var(--ae-primary)", fontWeight: 700 }}>{size}</div>
                {ptSize}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <h2>Règles de lisibilité</h2>
        <div className="info-grid">
          {[
            ["Interligne (line-height)", "1.45 – 1.6 sur le corps. 1.05 – 1.15 sur les titres."],
            ["Mesure de ligne", "55–80 caractères. Au-delà, fatigue de lecture."],
            ["Contraste", "Min 4.5:1 corps. AAA visé sur fond blanc."],
            ["Justification", "Texte aligné à gauche. Jamais justifié dur (rivières)."],
            ["Italique", "Réservé aux citations / mots étrangers. Jamais sur paragraphes entiers."],
            ["Majuscules", "Uniquement eyebrow / labels < 0.12in. Pas de titres tout caps."],
            ["Mathématiques", "Nunito Sans en exposant via <sup>. Fallback Arial pour symboles rares."],
            ["Veuves / orphelines", "Jamais une ligne seule en bas / haut de page."],
          ].map(([l, d]) => (
            <div key={l} className="info-chip">
              <div className="lbl">{l}</div>
              <div className="desc">{d}</div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

/* ---------- Tab: Grille ---------- */
function TabGrid() {
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Page 8.5 × 11 in</h2>
        <p className="section-sub">
          Format officiel : portrait, 8.5 × 11 pouces (215.9 × 279.4 mm), exporté en PDF 300 dpi
          pour Amazon KDP. Grille à <b>6 colonnes</b>, gouttière 0.18in, marges latérales 0.55in.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 24, alignItems: "stretch" }}>
          {/* Diagram */}
          <div className="grid-diagram">
            <svg viewBox="0 0 340 440">
              {/* Page outline */}
              <rect x="20" y="20" width="300" height="400" fill="white" stroke="#0F1A3D" strokeWidth="1"/>
              {/* Header band */}
              <rect x="20" y="20" width="300" height="38" fill="#1B3FB8"/>
              <path d="M20 58 Q170 80 320 58 L320 60 Q170 82 20 60 Z" fill="#1B3FB8"/>
              <text x="170" y="42" textAnchor="middle" fill="white" fontSize="9" fontFamily="var(--ae-font-title)" fontWeight="600">Header — 0.95 in</text>
              {/* Footer band */}
              <rect x="20" y="385" width="300" height="35" fill="#FBF8F1"/>
              <text x="170" y="408" textAnchor="middle" fill="#0F1A3D" fontSize="9" fontFamily="var(--ae-font-title)" fontWeight="600">Footer — 0.85 in</text>
              {/* Content area with margins */}
              <rect x="40" y="80" width="260" height="290" fill="none" stroke="#F5781C" strokeWidth="1" strokeDasharray="3 2"/>
              {/* 6 columns */}
              {[0,1,2,3,4,5].map(i => {
                const colW = (260 - 5*6) / 6;
                const x = 40 + i * (colW + 6);
                return <rect key={i} x={x} y={82} width={colW} height={286} fill="rgba(27,63,184,.06)" stroke="rgba(27,63,184,.4)" strokeWidth="0.5"/>;
              })}
              {/* Margins labels */}
              <text x="30" y="220" textAnchor="middle" fontSize="7" fill="#6A748F" transform="rotate(-90 30 220)">marge 0.55 in</text>
              <text x="310" y="220" textAnchor="middle" fontSize="7" fill="#6A748F" transform="rotate(90 310 220)">marge 0.55 in</text>
              <text x="170" y="76" textAnchor="middle" fontSize="7" fill="#6A748F">zone utile · 7.4 in × 8.7 in</text>
              <text x="170" y="380" textAnchor="middle" fontSize="7" fill="#6A748F">marge basse 0.5 in</text>
              {/* Header label */}
              <text x="20" y="14" fontSize="7" fill="#6A748F">8.5 in</text>
              <text x="0" y="220" fontSize="7" fill="#6A748F" transform="rotate(-90 8 220)">11 in</text>
            </svg>
          </div>

          {/* Specs */}
          <div className="info-grid">
            <div className="info-chip"><div className="lbl">Page</div><div className="val">8.5 × 11 in</div><div className="desc">Portrait · 215.9 × 279.4 mm · KDP</div></div>
            <div className="info-chip"><div className="lbl">Marges latérales</div><div className="val">0.55 in</div><div className="desc">Côté reliure : prévoir +0.125in</div></div>
            <div className="info-chip"><div className="lbl">Marges haut · bas</div><div className="val">0.5 in</div></div>
            <div className="info-chip"><div className="lbl">Header</div><div className="val">0.95 in</div><div className="desc">Bord à bord (full-bleed bleu)</div></div>
            <div className="info-chip"><div className="lbl">Footer</div><div className="val">0.85 in</div></div>
            <div className="info-chip"><div className="lbl">Zone utile</div><div className="val">7.4 × 8.7 in</div></div>
            <div className="info-chip"><div className="lbl">Colonnes</div><div className="val">6</div><div className="desc">Permet 1 / 2 / 3 / 6 colonnes</div></div>
            <div className="info-chip"><div className="lbl">Gouttière</div><div className="val">0.18 in</div></div>
            <div className="info-chip"><div className="lbl">Baseline grid</div><div className="val">0.21 in</div><div className="desc">Lignes de réponse manuscrites</div></div>
            <div className="info-chip"><div className="lbl">Bleed</div><div className="val">0.125 in</div><div className="desc">Sur le full-bleed bleu uniquement</div></div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Visualisation</h2>
        <p className="section-sub">Grille verticale (orange) + zone de marge (bleu pointillé) projetées sur une page-test.</p>
        <PageFrame label="8.5 × 11 in · grille visible" scale={0.55}>
          <AePage matiere="Modèle" niveau="Grille" page={1} scale={1} showGrid showMargins>
            <div className="ae-title"><span className="underline">Titre de leçon</span></div>
            <div className="ae-lesson" style={{ paddingTop: "0.2in" }}>
              <div className="ae-lesson-title"><span className="ic">📖</span> Bloc leçon</div>
              <p style={{ fontSize: "0.13in" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut metus vitae enim consequat tincidunt.</p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.18in" }}>
              <div className="ae-exo" style={{ minHeight: "1.6in" }}>
                <div className="ae-exo-tab"><span style={{ fontSize: "0.13in" }}>Exercice 1</span></div>
              </div>
              <div className="ae-exo exo-orange" style={{ minHeight: "1.6in" }}>
                <div className="ae-exo-tab"><span style={{ fontSize: "0.13in" }}>Exercice 2</span></div>
              </div>
            </div>
          </AePage>
        </PageFrame>
      </section>

      <section className="section">
        <h2>Zones interdites</h2>
        <p className="section-sub">Pour que rien ne soit rogné en impression / massicotage.</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
          {[
            ["⚠ Reliure", "0.125 in supplémentaires côté reliure : ne jamais y placer texte critique, QR, ni numéro de page."],
            ["⚠ Bord de page", "Aucun contenu utile dans les 0.25 in extérieurs. Seul le full-bleed du header peut s'y prolonger."],
            ["⚠ Sous le header", "0.32 in de respiration sous la courbe du header avant tout contenu."],
            ["⚠ Au-dessus du footer", "0.16 in de respiration au-dessus du footer."],
            ["⚠ QR central", "0.6 × 0.6 in minimum, jamais collé à une autre forme. Toujours sur fond blanc."],
            ["⚠ Pied de bloc", "Une zone de réponse ne peut pas se terminer à moins de 0.2 in du footer."],
          ].map(([t, d]) => (
            <div key={t} className="doc-card" style={{ padding: 14, fontSize: 12.5, color: "var(--ae-text-soft)", lineHeight: 1.5 }}>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-error)", fontSize: 13, marginBottom: 4 }}>{t}</div>
              {d}
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

/* ---------- Tab: Header / Footer ---------- */
function TabHeaderFooter() {
  return (
    <>
      <section className="section" style={{ marginTop: 0 }}>
        <h2>Header commun</h2>
        <p className="section-sub">
          Hauteur fixe <b>0.95 in</b>, full-bleed bleu Allo, courbe douce sur le bord inférieur.
          Structure <b>logo / matière-niveau / page</b>. Identique sur 100% des pages intérieures.
        </p>

        {/* Live header preview */}
        <div className="doc-card" style={{ padding: 0, overflow: "hidden", borderRadius: 14 }}>
          <div style={{ width: "8.5in", maxWidth: "100%", margin: "0 auto", transform: "scale(0.85)", transformOrigin: "top left", height: "1.3in" }}>
            <PageHeader matiere="Maths" niveau="Collège 4ᵉ" page={"Bloc 1 · Page 12"} />
          </div>
          <div style={{ borderTop: "1px solid var(--ae-border)", padding: "16px 20px", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, fontSize: 12.5, color: "var(--ae-text-soft)" }}>
            <div>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)" }}>Logo (gauche)</div>
              Toque + texte "Allo / Education / Éditions". Toujours blanc + orange sur bleu. Hauteur logo = 0.42in.
            </div>
            <div>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)" }}>Pill matière · niveau</div>
              Capsule centrée. Format : <code>Matière · Niveau</code>. Fredoka 0.2in. Border blanc 1.5px.
            </div>
            <div>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)" }}>Badge page (droite)</div>
              Pill jaune sur bleu deep. Texte au choix : <code>Page 12</code>, <code>Bloc 1 · Page 12</code>, ou <code>Défi · Page 74</code>.
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Variantes Header</h2>
        <p className="section-sub">Toutes les variantes conservent la même hauteur, le bleu Allo et la courbe basse. On change uniquement les <b>données</b> et l'éventuel badge spécial.</p>
        <div style={{ display: "grid", gap: 14 }}>
          {[
            ["Standard primaire", { matiere: "Français", niveau: "CM2", page: 12 }],
            ["Collège — bloc + page", { matiere: "Maths", niveau: "Collège 4ᵉ", page: "Bloc 1 · Page 12" }],
            ["Lycée — chapitre", { matiere: "SVT", niveau: "Première", page: "Chap. 3 · Page 47" }],
            ["Défi / spécial", { matiere: "Maths", niveau: "Brevet 3ᵉ", page: "Défi · Page 74" }],
            ["Mode d'emploi", { matiere: "Mode d'emploi", niveau: "Primaire", page: "Page 3" }],
          ].map(([label, props]) => (
            <div key={label} className="doc-card" style={{ padding: 0, overflow: "hidden" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 16px", background: "var(--ae-bg-cool)", borderBottom: "1px solid var(--ae-border)", fontSize: 12, fontWeight: 700, color: "var(--ae-primary-deep)" }}>
                <span>{label}</span>
                <code style={{ fontSize: 11, color: "var(--ae-muted)" }}>{`<Header matiere="${props.matiere}" niveau="${props.niveau}" page="${props.page}" />`}</code>
              </div>
              <div style={{ height: "0.95in", width: "8.5in", maxWidth: "100%" }}>
                <PageHeader {...props} />
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <h2>Footer commun</h2>
        <p className="section-sub">
          Hauteur <b>0.85 in</b>. Trois zones : <b>score à gauche</b>, <b>QR centré</b>, <b>numéro de page à droite</b>.
        </p>
        <div className="doc-card" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ width: "8.5in", maxWidth: "100%", height: "0.85in", position: "relative" }}>
            <PageFooter page={12} />
          </div>
          <div style={{ borderTop: "1px solid var(--ae-border)", padding: "16px 20px", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, fontSize: 12.5, color: "var(--ae-text-soft)" }}>
            <div>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)" }}>Score</div>
              Capsule pointillée bleue. Format : <code>Score : ___ / N</code>. Fredoka 0.18in.
            </div>
            <div>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)" }}>QR + texte</div>
              Disque bleu 0.55in + label "Corriger avec Ketty / sur alloeducation.fr". URL en orange.
            </div>
            <div>
              <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, color: "var(--ae-primary-deep)" }}>Page</div>
              Cercle bleu 0.55in, chiffre Fredoka 0.22in en blanc.
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <h2>Règles de visibilité</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {[
            ["qrVisible = false", "Ex. mode d'emploi, ouverture de chapitre, bilan trimestriel.", "Le bloc QR + texte est masqué. Le numéro de page reste à droite. Le score peut rester."],
            ["scoreVisible = false", "Ex. page théorique sans exercice, lexique, tableau récapitulatif.", "La capsule score est masquée. Le QR et le numéro de page restent."],
            ["Les deux à false", "Pages éditoriales : préface, sommaire, ouverture de partie.", "Footer minimal : numéro de page seul, centré."],
            ["Page double / annexes", "Glossaires, corrigés, planches d'autocollants.", "Footer remplacé par un footer minimaliste : page + URL alloeducation.fr."],
          ].map(([t, ex, r]) => (
            <div key={t} className="doc-card" style={{ padding: 16 }}>
              <code style={{ fontSize: 12, color: "var(--ae-orange-dark)", fontWeight: 700 }}>{t}</code>
              <div style={{ fontSize: 13, color: "var(--ae-text)", marginTop: 6, fontWeight: 600 }}>{ex}</div>
              <div style={{ fontSize: 12.5, color: "var(--ae-muted)", marginTop: 4, lineHeight: 1.45 }}>{r}</div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

Object.assign(window, {
  TabOverview, TabColors, TabTypography, TabGrid, TabHeaderFooter,
});