// template-pack-2-francais-langues.jsx
// PACK 2 · FRANÇAIS / LANGUES / LECTURE / ÉCRITURE — Allo Education Books v1.2
// 10 production templates centrés sur le texte. Strictement composés à partir
// des blocs verrouillés (PageShell, PageTitle, Box, Cols, KettyBubble, QRBlock,
// TableBlock, FigureBlock). Aucun emoji, tous les pictos via iconKey / <Icon>.

const { Fragment: P2_F } = React;

/* ────────────────────────────────────────────────────────────────────────
   Helpers locaux — composent les primitives sans les redéfinir
   ──────────────────────────────────────────────────────────────────────── */

function P2NumTag({ n, tone = "primary" }) {
  return (
    <span style={{
      display: "inline-grid", placeItems: "center",
      width: "0.22in", height: "0.22in", borderRadius: "999px",
      background: tone === "orange" ? "var(--ae-orange)" : "var(--ae-primary)",
      color: "white",
      fontFamily: "var(--ae-font-title)", fontWeight: 600,
      fontSize: "0.12in", flex: "0 0 auto",
    }}>{n}</span>
  );
}

function VFCell2() {
  return (
    <span style={{
      display: "inline-block", width: "0.22in", height: "0.22in",
      border: "1.5px solid var(--ae-text-soft)", borderRadius: "0.04in",
      verticalAlign: "middle",
    }} />
  );
}

function P2WritingLines({ lines = 6 }) {
  return (
    <div style={{
      borderRadius: "0.06in",
      border: "1px solid var(--ae-border)",
      background: "white",
      padding: "0.06in 0.1in",
    }}>
      {Array.from({ length: lines }).map((_, i) => (
        <div key={i} style={{
          height: "0.28in",
          borderBottom: "1px dashed var(--ae-border)",
        }} />
      ))}
    </div>
  );
}

// Petite carte mot — utilisée par le vocabulaire bilingue
function VocabCard({ iconKey, fr, en, sample }) {
  return (
    <div style={{
      border: "1.4px solid var(--ae-primary-soft)",
      background: "white", borderRadius: "0.08in",
      padding: "0.1in 0.12in",
      display: "grid",
      gridTemplateColumns: "0.5in 1fr",
      gap: "0.1in", alignItems: "start",
    }}>
      <div style={{
        width: "0.5in", height: "0.5in", borderRadius: "0.08in",
        background: "var(--ae-primary-soft)",
        color: "var(--ae-primary-deep)",
        display: "grid", placeItems: "center",
      }}>
        <Icon k={iconKey} size="0.28in" />
      </div>
      <div>
        <div style={{
          fontFamily: "var(--ae-font-title)", fontWeight: 600,
          color: "var(--ae-primary-deep)", fontSize: "0.15in",
          lineHeight: 1.1,
        }}>{en}</div>
        <div style={{
          fontSize: "0.11in", color: "var(--ae-text-soft)",
          marginTop: "0.02in", letterSpacing: "0.02em",
          textTransform: "uppercase", fontWeight: 600,
        }}>FR · {fr}</div>
        <div style={{
          fontSize: "0.115in", lineHeight: 1.35, color: "var(--ae-text)",
          marginTop: "0.05in", fontStyle: "italic",
        }}>« {sample} »</div>
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   1 · LEÇON VOCABULAIRE  (template: "vocabulary-lesson")
   ════════════════════════════════════════════════════════════════════════ */
function P2VocabLesson({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Français" niveau="6ᵉ" page={"Vocabulaire · Page 23"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="voc-6-precis"
      qrLabel="Définition + exemples audio"
      scale={scale}
    >
      <PageTitle
        eyebrow="Vocabulaire · Mot du jour"
        title="« Précis » — adjectif"
        subtitle="Un mot, sa définition, ses voisins. À fixer en cinq minutes."
      />

      <Cols ratio="1.3fr 1fr">
        <LessonBox title="Définition" iconKey="icon-ampoule">
          <span style={{ fontFamily: "var(--ae-font-title)", fontWeight: 700, color: "var(--ae-primary-deep)" }}>précis, précise</span>
          {" "}
          <span style={{ color: "var(--ae-text-soft)", fontStyle: "italic" }}>(adj.)</span>
          {" — "}
          Qui est <b>net, exact, sans approximation</b>. On l'utilise pour décrire
          une mesure, une explication, un geste ou un horaire.
          <div style={{ marginTop: "0.08in", padding: "0.08in 0.1in", background: "white", borderRadius: "0.06in", border: "1px solid var(--ae-yellow)" }}>
            <i>Exemple : « Donne-moi l'heure </i><b>précise</b><i> du rendez-vous. »</i>
          </div>
        </LessonBox>

        <Box tone="cool" label="Famille de mots" iconKey="icon-section">
          <div style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.5 }}>
            <b>Synonymes</b> · exact, juste, rigoureux, net.<br/>
            <b>Antonymes</b> · vague, flou, approximatif.<br/>
            <b>Famille</b> · précision <i>(n.f.)</i>, préciser <i>(v.)</i>, précisément <i>(adv.)</i>.
          </div>
        </Box>
      </Cols>

      <ExerciseCard number={1} consigne="Complète chaque phrase avec un mot de la famille de « précis ».">
        <QInput n={1}>Pour réussir un dessin technique, il faut beaucoup de <AnswerLine width="1.4in" />.</QInput>
        <QInput n={2}>Pourrais-tu <AnswerLine width="1.4in" /> ta réponse ?</QInput>
        <QInput n={3}>Le train est arrivé <AnswerLine width="1.4in" /> à 18h12.</QInput>
        <QInput n={4}>Sa description du voleur n'était pas assez <AnswerLine width="1.4in" />.</QInput>
      </ExerciseCard>

      <KettyBubble pose="pointing" tone="primary" label="Astuce mémo">
        Pour retenir un mot, écris-le, lis-le à voix haute, puis utilise-le
        dans <b>une phrase qui parle de toi</b>. Tu vas le retenir d'un coup.
      </KettyBubble>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   2 · FICHE VOCABULAIRE BILINGUE  (template: "bilingual-vocabulary")
   ════════════════════════════════════════════════════════════════════════ */
function P2BilingualVocab({ density, qrVisible, scoreVisible, scale = 1 }) {
  const words = [
    { fr: "livre",       en: "book",      sample: "I read a book every evening.",  iconKey: "icon-livre" },
    { fr: "crayon",      en: "pencil",    sample: "Pass me the red pencil, please.", iconKey: "icon-crayon" },
    { fr: "horloge",     en: "clock",     sample: "The clock says it is six o'clock.", iconKey: "icon-horloge" },
    { fr: "trophée",     en: "trophy",    sample: "She won a small silver trophy.", iconKey: "icon-trophee" },
    { fr: "ampoule",     en: "light bulb",sample: "I have a great idea — like a light bulb!", iconKey: "icon-ampoule" },
    { fr: "loupe",       en: "magnifier", sample: "He used a magnifier to read the map.", iconKey: "icon-loupe" },
  ];
  return (
    <PageShell
      matiere="Anglais" niveau="6ᵉ" page={"Unit 2 · Page 14"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="eng-6-classroom-words"
      qrLabel="Listen to the words"
      qrSubLabel="Audio par un locuteur natif"
      scale={scale}
    >
      <PageTitle
        eyebrow="Vocabulary · Classroom objects"
        title="Six mots à connaître pour cette unité"
        subtitle="Lis, écoute (QR), répète, puis réécris la phrase exemple à la main."
      />

      <ObjectiveBox
        title="Comment travailler"
        items={[
          "Lis chaque mot et sa traduction à voix haute.",
          "Écoute la prononciation native via le QR ci-dessous.",
          "Recopie la phrase exemple en bas de page, sans regarder.",
        ]}
      />

      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr",
        gap: "var(--ae-block-gap)",
      }}>
        {words.map(w => <VocabCard key={w.en} {...w} />)}
      </div>

      <ExerciseCard number={1} consigne="Choisis 3 mots et réécris leur phrase exemple, sans regarder.">
        <P2WritingLines lines={4} />
      </ExerciseCard>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   3 · LEÇON CONJUGAISON  (template: "conjugation-lesson")
   ════════════════════════════════════════════════════════════════════════ */
function P2ConjLesson({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Français" niveau="CM2" page={"Conjugaison · Page 19"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="conj-cm2-imparfait"
      scale={scale}
    >
      <PageTitle
        eyebrow="Conjugaison · Leçon 4"
        title="L'imparfait des verbes en -er"
        subtitle="Un radical à repérer, des terminaisons à mémoriser."
      />

      <Cols ratio="1fr 1fr">
        <LessonBox title="Je retiens" formula="radical + ais · ais · ait · ions · iez · aient">
          À l'imparfait, tous les verbes en <b>-er</b> prennent les mêmes
          terminaisons. On les ajoute au <b>radical</b> du verbe (verbe sans son <i>-er</i>).
        </LessonBox>
        <Box tone="cool" label="Tableau modèle · « chanter »" iconKey="icon-section">
          <TableBlock
            columns={["Personne", "chanter (imparfait)"]}
            rows={[
              ["je",         "chant-ais"],
              ["tu",         "chant-ais"],
              ["il / elle",  "chant-ait"],
              ["nous",       "chant-ions"],
              ["vous",       "chant-iez"],
              ["ils / elles","chant-aient"],
            ]}
          />
        </Box>
      </Cols>

      <WarningBox title="Piège à éviter">
        Pour les verbes en <b>-cer</b> et <b>-ger</b>, on adapte le radical
        devant les terminaisons commençant par <b>a</b> : <i>nous mang<b>e</b>ions</i>,
        <i> il lan<b>ç</b>ait</i>.
      </WarningBox>

      <ExerciseCard number={1} consigne="Conjugue le verbe entre parenthèses à l'imparfait.">
        <QInput n={1}>(jouer) — Je <AnswerLine width="1.4in" /> dans le jardin chaque été.</QInput>
        <QInput n={2}>(chanter) — Nous <AnswerLine width="1.4in" /> tous en chœur.</QInput>
        <QInput n={3}>(manger) — Vous <AnswerLine width="1.4in" /> ensemble le dimanche.</QInput>
        <QInput n={4}>(rêver) — Elles <AnswerLine width="1.4in" /> de partir en voyage.</QInput>
      </ExerciseCard>

      <KettyBubble pose="thumbsup" tone="yellow" label="Truc de Ketty">
        Si tu hésites, dis la phrase à voix haute en commençant par
        <b> « hier… » </b>: ton oreille reconnaît tout de suite l'imparfait.
      </KettyBubble>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   4 · EXERCICE GRAMMAIRE  (template: "grammar-exercise")
   ════════════════════════════════════════════════════════════════════════ */
function P2GrammarExercise({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Français" niveau="5ᵉ" page={"Grammaire · Page 33"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="gram-5-natures-fonctions"
      scale={scale}
    >
      <PageTitle
        eyebrow="Grammaire · Application"
        title="Reconnaître nature et fonction"
        subtitle="Une phrase à la fois. Identifie chaque mot souligné."
      />

      <LessonBox title="Rappel express" iconKey="icon-ampoule">
        La <b>nature</b> dit <i>ce qu'est</i> le mot (nom, verbe, adjectif…).
        La <b>fonction</b> dit <i>à quoi il sert</i> dans la phrase (sujet, COD, COI, complément circonstanciel…).
      </LessonBox>

      <ExerciseCard number={1} consigne="Pour chaque mot souligné, complète le tableau.">
        <TableBlock
          columns={["Phrase", "Mot souligné", "Nature", "Fonction"]}
          rows={[
            ["Le chat dort sur le canapé.",      "chat",      "…", "…"],
            ["Marie offre un livre à son frère.","livre",     "…", "…"],
            ["Hier, nous sommes allés au parc.", "Hier",      "…", "…"],
            ["La voiture rouge appartient à Léa.","rouge",    "…", "…"],
            ["Les enfants jouent dans la cour.", "jouent",    "…", "…"],
          ]}
        />
      </ExerciseCard>

      <Cols ratio="1fr 1fr">
        <ExerciseCard number={2} tone="orange" consigne="Accord du participe passé. Complète.">
          <QInput n={1}>Les fleurs que j'ai cueilli<AnswerLine width="0.4in" /> sont fanées.</QInput>
          <QInput n={2}>Elle a couru<AnswerLine width="0.4in" /> tout le matin.</QInput>
          <QInput n={3}>Les amis sont arrivé<AnswerLine width="0.4in" /> tard.</QInput>
        </ExerciseCard>
        <SelfCheck
          title="Auto-évaluation"
          items={[
            "J'ai écrit la nature avec une majuscule (Nom, Verbe…).",
            "J'ai vérifié l'auxiliaire avant d'accorder.",
            "Mon participe passé s'accorde avec le bon mot.",
          ]}
        />
      </Cols>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   5 · LECTURE COMPRÉHENSION  (template: "reading-comprehension")
   ════════════════════════════════════════════════════════════════════════ */
function ReadingTextCard() {
  return (
    <div style={{
      width: "100%", height: "100%", padding: "0.16in 0.2in",
      background: "white", color: "var(--ae-text)",
      fontFamily: "var(--ae-font-body)", fontSize: "0.13in",
      lineHeight: 1.55, position: "relative",
    }}>
      <div style={{
        fontFamily: "var(--ae-font-title)", fontWeight: 600,
        color: "var(--ae-primary-deep)", fontSize: "0.16in",
        marginBottom: "0.08in",
      }}>« La cabane au fond du jardin »</div>
      <p style={{ margin: 0 }}>
        Léna avait toujours été curieuse. Ce matin-là, en repoussant les
        ronces du fond du jardin, elle découvrit une vieille cabane de bois
        qu'elle n'avait jamais remarquée. La porte, à moitié arrachée,
        grinçait au moindre souffle de vent. À l'intérieur, des étagères
        croulaient sous des livres poussiéreux et, sur un petit bureau,
        une lampe à huile attendait, comme oubliée. Léna s'avança avec
        précaution. Une enveloppe, posée bien en évidence, portait son
        prénom écrit à l'encre violette. Elle hésita un instant, puis
        l'ouvrit doucement. Ce qu'elle lut allait changer sa journée —
        peut-être même sa vie.
      </p>
      <p style={{ margin: "0.08in 0 0", fontStyle: "italic", color: "var(--ae-text-soft)" }}>
        — Extrait d'une nouvelle de C. Bertin, <i>Les Étés en bois</i>, 2019.
      </p>
    </div>
  );
}

function P2Reading({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Français" niveau="CM2" page={"Lecture · Page 41"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="lec-cm2-cabane"
      qrLabel="Texte lu à voix haute"
      scale={scale}
    >
      <PageTitle
        eyebrow="Lecture · Compréhension"
        title="« La cabane au fond du jardin »"
        subtitle="Lis le texte deux fois, puis réponds en t'appuyant sur le texte."
      />

      <FigureBlock label="Texte 1" caption="C. Bertin, Les Étés en bois — extrait, 2019." height="2.4in">
        <ReadingTextCard />
      </FigureBlock>

      <ExerciseCard number={1} consigne="Réponds par une phrase complète.">
        <QInput n={1}>Que découvre Léna au fond du jardin ?</QInput>
        <AnswerLine width="100%" />
        <QInput n={2}>Cite deux éléments qui montrent que la cabane est ancienne.</QInput>
        <AnswerLine width="100%" />
        <QInput n={3}>Pourquoi Léna hésite-t-elle avant d'ouvrir l'enveloppe ?</QInput>
        <AnswerLine width="100%" />
        <QInput n={4}><b>Justifie avec le texte :</b> Léna est-elle une enfant prudente ?</QInput>
        <AnswerBox height="0.5in" ruled />
      </ExerciseCard>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   6 · ÉTUDE DE DOCUMENT (FRANÇAIS)  (template: "document-study")
   ════════════════════════════════════════════════════════════════════════ */
function PoemCard() {
  return (
    <div style={{
      width: "100%", height: "100%", padding: "0.18in 0.22in",
      background: "white", color: "var(--ae-text)",
      fontFamily: "var(--ae-font-body)", fontSize: "0.135in",
      lineHeight: 1.6, position: "relative",
    }}>
      <div style={{
        fontFamily: "var(--ae-font-title)", fontWeight: 600,
        color: "var(--ae-primary-deep)", fontSize: "0.16in",
        marginBottom: "0.1in", textAlign: "center",
      }}>« Le dormeur du val » — extrait</div>
      <div style={{ textAlign: "center", fontStyle: "italic", color: "var(--ae-text)" }}>
        C'est un trou de verdure où chante une rivière<br/>
        Accrochant follement aux herbes des haillons<br/>
        D'argent ; où le soleil, de la montagne fière,<br/>
        Luit : c'est un petit val qui mousse de rayons.
      </div>
      <p style={{ margin: "0.1in 0 0", textAlign: "right", fontStyle: "italic", color: "var(--ae-text-soft)" }}>
        — Arthur Rimbaud, <i>Poésies</i>, 1870.
      </p>
    </div>
  );
}

function P2DocStudy({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Français" niveau="3ᵉ" page={"Poésie · Page 52"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="poesie-rimbaud-dormeur"
      scale={scale}
    >
      <PageTitle
        eyebrow="Étude de document · Poésie"
        title="Lire un quatrain de Rimbaud"
        subtitle="Identifier, comprendre, analyser. Trois étapes, une page."
      />

      <FigureBlock label="Document 1" caption="Arthur Rimbaud, Poésies, 1870." height="1.7in">
        <PoemCard />
      </FigureBlock>

      <Cols ratio="1fr 1fr">
        <Box tone="cool" label="Identifier" iconKey="icon-info">
          <ul className="bk-bullets" style={{ marginBottom: 0 }}>
            <li><span className="dot"></span><b>Nature :</b> <AnswerLine width="1.4in" /></li>
            <li><span className="dot"></span><b>Auteur :</b> <AnswerLine width="1.4in" /></li>
            <li><span className="dot"></span><b>Date :</b> <AnswerLine width="0.7in" /></li>
            <li><span className="dot"></span><b>Thème :</b> <AnswerLine width="1.4in" /></li>
          </ul>
        </Box>
        <ExerciseCard number={1} consigne="Comprendre le passage.">
          <QInput n={1}>Quel paysage est décrit ? Cite 3 éléments.</QInput>
          <AnswerBox height="0.45in" ruled />
        </ExerciseCard>
      </Cols>

      <ExerciseCard number={2} tone="orange" consigne="Analyser — tableau d'analyse.">
        <TableBlock
          columns={["Procédé d'écriture", "Citation du texte", "Effet produit"]}
          rows={[
            ["Personnification",  "« chante une rivière »", "…"],
            ["Métaphore filée",   "« haillons d'argent »",   "…"],
            ["Champ lexical",     "lumière (« luit », « rayons »)", "…"],
          ]}
        />
      </ExerciseCard>

      <Box tone="green" label="Conclusion en 2 phrases" iconKey="icon-fleche">
        <AnswerBox height="0.5in" ruled />
      </Box>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   7 · DICTÉE PRÉPARÉE  (template: "prepared-dictation")
   ════════════════════════════════════════════════════════════════════════ */
function P2Dictation({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Français" niveau="6ᵉ" page={"Orthographe · Page 27"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="dictee-6-automne"
      qrLabel="Écouter la dictée"
      qrSubLabel="Vitesse normale + lente"
      scale={scale}
    >
      <PageTitle
        eyebrow="Dictée préparée · Niveau 6ᵉ"
        title="« Une matinée d'automne »"
        subtitle="Prépare-toi en lisant le texte, repère les pièges, puis écris."
      />

      <Box tone="neutral" label="Texte à mémoriser" iconKey="icon-livre">
        <p style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.55, margin: 0 }}>
          Ce matin d'octobre, les feuilles dorées tombaient lentement des grands
          chênes. Léa enfila son manteau, attrapa son cartable et partit vers
          l'école d'un pas pressé. Les flaques d'eau, qui brillaient sous le
          soleil, témoignaient de l'orage de la veille.
        </p>
      </Box>

      <Cols ratio="1fr 1fr">
        <Box tone="cool" label="Mots difficiles à connaître" iconKey="icon-loupe">
          <div style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.6 }}>
            <b>chênes</b> · accent circonflexe<br/>
            <b>cartable</b> · pas de double consonne<br/>
            <b>témoignaient</b> · imparfait, 3ᵉ pers. plur.<br/>
            <b>brillaient</b> · double l + -aient
          </div>
        </Box>
        <WarningBox title="Règle rappelée">
          Les noms en <b>-eu</b> ne prennent pas de <i>-x</i> au pluriel s'ils sont
          déjà au singulier en -<b>e</b>. Vérifie aussi les accords des participes
          en <i>-é(e)(s)</i> avec leur sujet.
        </WarningBox>
      </Cols>

      <ExerciseCard number={1} consigne="Je m'entraîne — recopie 2 phrases du texte sans regarder.">
        <P2WritingLines lines={3} />
      </ExerciseCard>

      <ExerciseCard number={2} tone="orange" consigne="Ma dictée — écris pendant que le QR diffuse l'audio.">
        <P2WritingLines lines={5} />
      </ExerciseCard>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   8 · EXPRESSION ÉCRITE — version pack 2  (template: "writing-task")
   ════════════════════════════════════════════════════════════════════════ */
function P2Writing({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Français" niveau="5ᵉ" page={"Expression écrite · Page 64"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="ecrit-5-souvenir"
      qrLabel="Exemples de copies"
      scale={scale}
    >
      <PageTitle
        eyebrow="Expression écrite · Le souvenir"
        title="Raconte un souvenir marquant"
        subtitle="Un moment heureux, drôle ou émouvant. À toi de choisir."
      />

      <Box tone="primary" label="Sujet &amp; consigne" iconKey="icon-section">
        <p style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.45, margin: 0 }}>
          Choisis <b>un seul souvenir</b> précis (un anniversaire, une
          rencontre, un voyage, une journée d'école…) et raconte-le en
          <b> 15 à 20 lignes</b>, à la première personne, en utilisant les
          temps du passé.
        </p>
      </Box>

      <Cols ratio="1fr 1fr">
        <Box tone="cool" label="Boîte à idées" iconKey="icon-ampoule">
          <div style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.55 }}>
            <b>Où ?</b> lieu précis · sensations<br/>
            <b>Quand ?</b> saison, heure, météo<br/>
            <b>Avec qui ?</b> 1 à 2 personnages<br/>
            <b>Quoi ?</b> l'évènement principal<br/>
            <b>Et toi ?</b> émotion ressentie
          </div>
        </Box>
        <Box tone="green" label="Connecteurs utiles" iconKey="icon-fleche">
          <div style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.55 }}>
            <b>Temps</b> · ce jour-là, soudain, ensuite, enfin.<br/>
            <b>Ajout</b> · de plus, surtout, par ailleurs.<br/>
            <b>Cause</b> · parce que, car, puisque.<br/>
            <b>Conclusion</b> · finalement, depuis ce jour, je n'oublierai jamais.
          </div>
        </Box>
      </Cols>

      <ExerciseCard number={1} consigne="Mon récit au propre — entre 15 et 20 lignes.">
        <P2WritingLines lines={9} />
      </ExerciseCard>

      <SelfCheck
        title="Critères de réussite"
        items={[
          "Mon récit est à la première personne, au passé.",
          "J'ai utilisé au moins 3 connecteurs différents.",
          "Le souvenir est situé (lieu, époque, personnes).",
          "J'ai relu pour corriger les fautes d'accord.",
        ]}
      />
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   9 · DIALOGUE / CONVERSATION  (template: "dialogue-conversation")
   ════════════════════════════════════════════════════════════════════════ */
function DialogueBubble({ side = "left", name, color = "primary", children }) {
  const isLeft = side === "left";
  const bg = color === "primary" ? "var(--ae-primary-soft)" : "var(--ae-orange-soft, #FFE0C2)";
  const fg = color === "primary" ? "var(--ae-primary-deep)" : "var(--ae-orange)";
  return (
    <div style={{
      display: "flex", flexDirection: isLeft ? "row" : "row-reverse",
      gap: "0.1in", alignItems: "flex-start",
      marginBottom: "0.08in",
    }}>
      <div style={{
        width: "0.5in", height: "0.5in", borderRadius: "999px",
        background: bg, color: fg,
        display: "grid", placeItems: "center",
        flex: "0 0 auto",
        fontFamily: "var(--ae-font-title)", fontWeight: 700,
        fontSize: "0.15in",
      }}>{name[0]}</div>
      <div style={{
        position: "relative",
        background: "white",
        border: `1.4px solid ${color === "primary" ? "var(--ae-primary-soft)" : "var(--ae-orange-soft, #FFE0C2)"}`,
        borderRadius: "0.12in",
        padding: "0.08in 0.12in",
        maxWidth: "70%",
        fontSize: "var(--ae-fs-body)",
        lineHeight: 1.4,
      }}>
        <div style={{
          fontFamily: "var(--ae-font-title)", fontWeight: 600,
          color: fg, fontSize: "0.115in",
          marginBottom: "0.02in",
        }}>{name}</div>
        {children}
      </div>
    </div>
  );
}

function P2Dialogue({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Anglais" niveau="5ᵉ" page={"Unit 4 · Page 38"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="eng-5-dialogue-cafe"
      qrLabel="Listen to the dialogue"
      qrSubLabel="Audio + transcription"
      scale={scale}
    >
      <PageTitle
        eyebrow="Dialogue · At the café"
        title="Sam et Mia commandent un brunch"
        subtitle="Lis, écoute, puis réponds aux questions de compréhension."
      />

      <Box tone="neutral" label="Conversation" iconKey="icon-section">
        <DialogueBubble side="left" name="Sam" color="primary">
          Hi Mia! Are you hungry? Let's order something — I'm starving.
        </DialogueBubble>
        <DialogueBubble side="right" name="Mia" color="orange">
          Yes, I'd love a pancake stack with maple syrup. What about you?
        </DialogueBubble>
        <DialogueBubble side="left" name="Sam" color="primary">
          I think I'll try the avocado toast and a fresh orange juice.
        </DialogueBubble>
        <DialogueBubble side="right" name="Mia" color="orange">
          Good idea! Excuse me, could we order, please?
        </DialogueBubble>
      </Box>

      <Cols ratio="1fr 1fr">
        <Box tone="cool" label="Useful vocabulary" iconKey="icon-loupe">
          <div style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.5 }}>
            <b>to be starving</b> — avoir très faim<br/>
            <b>a pancake stack</b> — une pile de pancakes<br/>
            <b>maple syrup</b> — sirop d'érable<br/>
            <b>could we order?</b> — formule polie pour commander
          </div>
        </Box>
        <ExerciseCard number={1} consigne="Answer in English, in a complete sentence.">
          <QInput n={1}>What does Mia want to order?</QInput>
          <AnswerLine width="100%" />
          <QInput n={2}>Why does Sam say « I'm starving » ?</QInput>
          <AnswerLine width="100%" />
        </ExerciseCard>
      </Cols>

      <ExerciseCard number={2} tone="orange" consigne="Mini-production — Imagine ta propre commande au café (3 lignes).">
        <P2WritingLines lines={3} />
      </ExerciseCard>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   10 · TRADUCTION  (template: "translation-exercise")
   ════════════════════════════════════════════════════════════════════════ */
function P2Translation({ density, qrVisible, scoreVisible, scale = 1 }) {
  const sentences = [
    "She always reads in the garden after lunch.",
    "We didn't know that the museum was closed on Mondays.",
    "If it rains tomorrow, we will stay at home.",
    "He has been learning Spanish for three years.",
    "Could you tell me where the train station is, please?",
  ];
  return (
    <PageShell
      matiere="Anglais" niveau="3ᵉ" page={"Brevet blanc · Page 51"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="eng-3-translation-set-02"
      qrLabel="Corrigés rédigés"
      scale={scale}
    >
      <PageTitle
        eyebrow="Translation · English → French"
        title="5 phrases pour s'entraîner"
        subtitle="Traduis sans dictionnaire, puis vérifie via le QR."
      />

      <Cols ratio="1fr 1fr">
        <Box tone="cool" label="Aide vocabulaire" iconKey="icon-loupe">
          <div style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.5 }}>
            <b>museum</b> — musée<br/>
            <b>to learn (for + duration)</b> — apprendre depuis<br/>
            <b>train station</b> — gare<br/>
            <b>could you?</b> — formule de politesse (cond.)<br/>
            <b>on Mondays</b> — le lundi (habitude)
          </div>
        </Box>
        <WarningBox title="Pièges fréquents">
          Le <i>present perfect</i> se traduit souvent par un <b>présent + depuis</b>.
          <br/>« <i>If it rains</i> » → <b>présent</b> en français, jamais futur.
          <br/>« <i>on Mondays</i> » → <b>« le lundi »</b>, pas « les lundis ».
        </WarningBox>
      </Cols>

      <ExerciseCard number={1} consigne="Traduis chaque phrase en français correct.">
        {sentences.map((s, i) => (
          <P2_F key={i}>
            <div style={{
              display: "flex", alignItems: "flex-start", gap: "0.1in",
              margin: "0.06in 0 0.04in",
            }}>
              <P2NumTag n={i + 1} tone={i % 2 ? "orange" : "primary"} />
              <span style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.4, fontStyle: "italic" }}>{s}</span>
            </div>
            <P2WritingLines lines={1} />
          </P2_F>
        ))}
      </ExerciseCard>
    </PageShell>
  );
}

/* ────────────────────────────────────────────────────────────────────────
   Export
   ──────────────────────────────────────────────────────────────────────── */
Object.assign(window, {
  P2VocabLesson, P2BilingualVocab, P2ConjLesson, P2GrammarExercise,
  P2Reading, P2DocStudy, P2Dictation, P2Writing, P2Dialogue, P2Translation,
});
