// example-pages.jsx — V1.1
// All three pages compose ONLY locked blocks (PageShell + Box variants).
// Same margins, same vertical rhythm, same type scale. The contents
// change per matière/niveau — never the structure.

/* =================================================================
   PRIMAIRE — Français CM2 — Lecture compréhension
   ================================================================= */
function PrimaireFrancais({ density = "std", qrVisible = true, scoreVisible = true, scale = 1 }) {
  return (
    <PageShell
      matiere="Français" niveau="CM2" page={12}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrLabel="Corrige avec Ketty"
      scale={scale}
    >
      <PageTitle
        eyebrow="Lecture · Bloc 2"
        title="Le pique-nique de Léa"
        subtitle="Lis le texte puis réponds aux questions."
      />

      <Box tone="neutral" label="Texte" iconKey="icon-livre">
        <p style={{ fontSize: "var(--ae-fs-body)", lineHeight: "var(--ae-line-h)" }}>
          Léa range deux sandwichs et une pomme dans son sac. Son grand frère Tom
          ajoute une bouteille d'eau et le plaid à carreaux qu'ils gardent toujours
          pour les sorties. « N'oublie pas le frisbee&nbsp;! » crie maman depuis la
          cuisine. Léa rit&nbsp;: c'est <i>elle</i> qui l'avait sorti la première.
          Devant la maison, le soleil chauffe déjà le portail.
        </p>
      </Box>

      <ExerciseCard number={1} consigne="Réponds aux questions par une phrase complète.">
        <QInput n={1}>Que met Léa dans son sac ? <AnswerLine width="2.4in" /></QInput>
        <QInput n={2}>Qui ajoute la bouteille d'eau ? <AnswerLine width="2.4in" /></QInput>
        <QInput n={3}>D'après toi, où vont-ils ? <AnswerLine width="2.4in" /></QInput>
      </ExerciseCard>

      <KettyBubble pose="pointing" tone="yellow" label="Astuce Ketty">
        Pour répondre, retrouve d'abord la phrase exacte dans le texte, puis
        reformule-la avec tes propres mots.
      </KettyBubble>

      <ExerciseCard number={2} tone="orange" title="QCM" consigne="Coche la bonne réponse.">
        <QInput n={1}>Que prend Tom ?
          <QCMRow options={[["A", "un livre"], ["B", "une bouteille"], ["C", "le frisbee"]]} />
        </QInput>
      </ExerciseCard>

      <Cols ratio="1.2fr 1fr">
        <ChallengeBox title="Mini-défi">
          Trouve trois mots du texte qui riment avec <b>« sac »</b>.
          <div style={{ marginTop: "0.08in" }}>
            <AnswerLine width="1.2in" /> · <AnswerLine width="1.2in" /> · <AnswerLine width="1.2in" />
          </div>
        </ChallengeBox>
        <ScoreBox label="Mon bilan" message="Ai-je bien compris l'histoire ?" />
      </Cols>
    </PageShell>
  );
}

/* =================================================================
   COLLÈGE — Maths 4ᵉ — Théorème de Pythagore
   ================================================================= */
function CollegeMaths({ density = "std", qrVisible = true, scoreVisible = true, scale = 1 }) {
  return (
    <PageShell
      matiere="Maths" niveau="Collège 4ᵉ" page={"Bloc 1 · Page 28"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      scale={scale}
    >
      <PageTitle
        eyebrow="Géométrie · Chapitre 3"
        title="Le théorème de Pythagore"
        subtitle="Calculer une longueur dans un triangle rectangle."
      />

      <ObjectiveBox
        title="Objectifs"
        items={[
          "Reconnaître l'hypoténuse dans un triangle rectangle.",
          "Appliquer la formule pour calculer une longueur manquante.",
          "Justifier ses calculs avec les unités correctes.",
        ]}
      />

      <LessonBox title="Je retiens" formula="BC² = AB² + AC²">
        Dans un triangle rectangle, le carré de l'hypoténuse est égal à la somme
        des carrés des deux autres côtés. L'hypoténuse est <b>toujours</b> le côté
        opposé à l'angle droit.
      </LessonBox>

      <Cols ratio="1fr 1fr">
        <MethodSteps
          title="Méthode"
          steps={[
            "Identifie l'hypoténuse (face à l'angle droit).",
            "Pose : c² = a² + b².",
            "Remplace par les valeurs connues, puis calcule.",
          ]}
        />
        <WarningBox title="Erreur à éviter">
          N'applique jamais Pythagore si le triangle <b>n'est pas rectangle</b>.
          Vérifie d'abord la présence de l'angle droit.
        </WarningBox>
      </Cols>

      <ExerciseCard number={1} consigne="Calcule la longueur manquante. Donne la valeur arrondie au mm.">
        <QInput n={1}>AB = 6 cm · AC = 8 cm · BC = <AnswerLine width="1in" /></QInput>
        <QInput n={2}>AB = 5 cm · BC = 13 cm · AC = <AnswerLine width="1in" /></QInput>
      </ExerciseCard>

      <ExerciseCard number={2} tone="orange" title="QCM" consigne="Une seule bonne réponse.">
        <QInput n={1}>Si AB = 3 cm et AC = 4 cm, alors BC vaut :
          <QCMRow options={[["A", "5 cm"], ["B", "7 cm"], ["C", "12 cm"]]} />
        </QInput>
      </ExerciseCard>

      <Cols ratio="1.4fr 1fr">
        <SelfCheck
          title="Je vérifie"
          items={[
            "J'ai identifié l'hypoténuse.",
            "Je n'ai pas oublié les unités.",
            "J'ai vérifié mon résultat avec le bon sens.",
          ]}
        />
        <QRBlock title="Correction en vidéo" url="alloeducation.fr/maths/4e/p28" seed={97} />
      </Cols>
    </PageShell>
  );
}

/* =================================================================
   LYCÉE — SVT 1ʳᵉ — La synthèse des protéines
   ================================================================= */
function LyceeSVT({ density = "std", qrVisible = true, scoreVisible = true, scale = 1 }) {
  return (
    <PageShell
      matiere="SVT" niveau="Première générale" page={"Chap. 3 · Page 47"}
      density={density === "light" ? "std" : "dense"}  /* lycée → toujours plus dense */
      qrVisible={qrVisible} scoreVisible={scoreVisible}
      scale={scale}
    >
      <PageTitle
        eyebrow="Thème 1 — Génétique"
        title="La synthèse des protéines"
        subtitle="De l'ADN à la protéine : transcription et traduction."
      />

      <ObjectiveBox
        title="Compétences B.O."
        items={[
          "Décrire les étapes de la transcription dans le noyau.",
          "Identifier le rôle de l'ARNm et des ribosomes.",
          "Schématiser le code génétique à partir d'un document.",
        ]}
      />

      <Cols ratio="1.3fr 1fr">
        <Box tone="neutral" label="Cours" iconKey="icon-section">
          <p>
            La <b>transcription</b> a lieu dans le noyau&nbsp;: une portion d'ADN
            est copiée en ARN messager (ARNm) par l'ARN polymérase. L'ARNm sort
            ensuite vers le cytoplasme, où il est <b>traduit</b> en protéine par
            les ribosomes, codon par codon, selon le code génétique.
          </p>
        </Box>
        <FigureBlock
          label="Document 1"
          caption="Schéma de la traduction dans le cytoplasme."
          height="1.6in"
        />
      </Cols>

      <LessonBox title="À retenir" iconKey="icon-sigma">
        Un gène = une séquence d'ADN qui code, via un ARNm, l'enchaînement
        d'acides aminés d'une protéine. Le code génétique est <b>universel</b>
        et <b>redondant</b>.
      </LessonBox>

      <ExerciseCard number={1} consigne="À partir du document 1, complète le tableau suivant.">
        <TableBlock
          columns={["Étape", "Lieu", "Acteur principal", "Produit"]}
          rows={[
            ["Transcription", "Noyau", "…………………", "…………………"],
            ["Traduction",    "…………", "Ribosome",      "Protéine"],
          ]}
        />
      </ExerciseCard>

      <Cols ratio="1fr 1fr">
        <ExerciseCard number={2} tone="orange" title="QCM" consigne="Une bonne réponse.">
          <QInput n={1}>L'ARNm est traduit :
            <QCMRow options={[["A", "dans le noyau"], ["B", "au ribosome"], ["C", "dans la mitochondrie"]]} />
          </QInput>
        </ExerciseCard>
        <ChallengeBox title="Pour aller plus loin">
          Cite une <b>maladie génétique</b> liée à une mutation modifiant la
          séquence d'une protéine. Justifie en deux phrases.
          <div style={{ marginTop: "0.08in" }}><AnswerBox height="0.6in" ruled /></div>
        </ChallengeBox>
      </Cols>

      <ScoreBox label="Auto-évaluation" message="Je sais expliquer la transcription et la traduction." />
    </PageShell>
  );
}

Object.assign(window, { PrimaireFrancais, CollegeMaths, LyceeSVT });