---
// Chapter page template — for the numbered chapters (models, agents, skills,
// rules). These ship ZERO JavaScript today and must continue to.
//
// Copy to src/pages/<slug>.astro. The route must match the existing URL
// exactly, trailing slash included.

import ChapterLayout from '../layouts/ChapterLayout.astro';
import GridGroup from '../components/blocks/GridGroup.astro';
import StaticBlock from '../components/blocks/StaticBlock.astro';
import { getEntry } from 'astro:content';

// Content comes from a collection, never hard-coded in the page.
// Both `en` and `pt` are required by the schema.
const chapter = await getEntry('chapters', 'models');
const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
---

<ChapterLayout
  number={chapter.data.number}
  title={chapter.data.title[lang]}
  description={chapter.data.description[lang]}
>
  <section class="hero">
    <p class="eyebrow">{chapter.data.eyebrow[lang]}</p>
    <h1 set:html={chapter.data.heading[lang]} />
    <p class="lede">{chapter.data.lede[lang]}</p>
  </section>

  <GridGroup label="Chapter sections" columns={3}>
    {chapter.data.sections.map((section) => (
      <StaticBlock
        eyebrow={section.eyebrow[lang]}
        title={section.title[lang]}
        body={section.body[lang]}
      />
    ))}
  </GridGroup>
</ChapterLayout>

<style>
  /* Page-level layout only. Anything reusable belongs in a component. */
  .hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; }

  h1 {
    margin: 16px 0 24px;
    font-size: var(--step-display);
    line-height: .86;
    letter-spacing: -.08em;
  }

  /* Georgia is a real system font and DOES render — unlike Manrope/DM Mono.
     See .agents/context/design-system.md */
  h1 :global(em) {
    color: var(--blue);
    font-family: Georgia, serif;
    font-weight: 400;
  }

  .lede { max-width: 570px; color: var(--muted); line-height: 1.65; }
</style>