---
// /agents/ — chapter page. Migrated from agents/index.html in task 13.
// Identical URL (/agents/), zero client JS, copy lives in
// src/content/chapters/agents.json.

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

// Required-field guard. The chapters schema marks section eyebrow /
// panelLabel / panelCode / steps / copy as optional because the schema
// does not know which page consumes which shape. These four pages do
// consume them — fail loudly here rather than rendering a blank section.
function requireField<T>(value: T | undefined, name: string): T {
  if (value === undefined) {
    throw new Error(`agents chapter: missing required field "${name}"`);
  }
  return value;
}

const base = import.meta.env.BASE_URL;
const chapter = await getEntry('chapters', 'agents');
if (!chapter) {
  throw new Error('agents chapter: missing collection entry');
}
const lede = chapter.data.lede.en;
const title = chapter.data.title.en;
const eyebrow = chapter.data.eyebrow.en;
const cards = chapter.data.cards ?? [];
const sections = chapter.data.sections ?? [];
const treeSection = sections[0];
const handoffSection = sections[1];
if (!treeSection) {
  throw new Error('agents chapter: missing sections[0]');
}
if (!handoffSection) {
  throw new Error('agents chapter: missing sections[1]');
}
// Narrow the section fields this page renders. Each `requireField` either
// returns a non-null value or throws — TS narrows from `T | undefined` to `T`.
const treeEyebrow = requireField(treeSection.eyebrow, 'sections[0].eyebrow');
const treePanelLabel = requireField(treeSection.panelLabel, 'sections[0].panelLabel');
const treePanelCode = requireField(treeSection.panelCode, 'sections[0].panelCode');
const handoffEyebrow = requireField(handoffSection.eyebrow, 'sections[1].eyebrow');
const handoffSteps = requireField(handoffSection.steps, 'sections[1].steps');
---

<ChapterLayout title="AI For Dummies — Agents and trees" description={lede.replace(/<[^>]+>/g, '')}>
  <a slot="top-previous" href={`${base}summary/`}>← ROUTE MAP</a>
  <span slot="top-center">02 / AGENTS & TREES</span>
  <a slot="top-next" href={`${base}full-guide/`}>field guide ↗</a>

  <ChapterHero eyebrow={eyebrow}>
    <span slot="title" set:html={title} />
    <p>{lede}</p>
  </ChapterHero>

  <section class="pipeline">
    <div>
      <p class="eyebrow">{treeEyebrow.en}</p>
      <h2 set:html={treeSection.title.en} />
    </div>
    <div class="panel">
      <strong>{treePanelLabel.en}</strong>
      <code>{treePanelCode.en}</code>
    </div>
  </section>

  <section class="grid">
    {
      cards.map((card) => (
        <article class="card">
          <b>{card.label.en}</b>
          <h2>{card.title.en}</h2>
          <p>{card.copy.en}</p>
        </article>
      ))
    }
  </section>

  <section class="practice">
    <div>
      <p class="eyebrow">{handoffEyebrow.en}</p>
      <h2 set:html={handoffSection.title.en} />
    </div>
    <div class="steps">
      {
        handoffSteps.map((step, index) => (
          <article>
            <b>{String(index + 1).padStart(2, '0')}</b>
            <div>
              <strong>{step.label.en}</strong>
              <span>{step.copy.en}</span>
            </div>
          </article>
        ))
      }
    </div>
  </section>

  <nav slot="footer-links" class="links" aria-label="Chapter navigation">
    <a href={`${base}models/`}>Previous: models →</a>
    <a href={`${base}rules/`}>Rules case study →</a>
    <a href={`${base}hands-on/rules/`}>Try the rules lab →</a>
  </nav>
</ChapterLayout>