---
import BaseLayout from '../layouts/BaseLayout.astro';
import chaptersStylesheet from '../../chapters.css?url';

const base = import.meta.env.BASE_URL;
const introduction =
  'This guide turns AI work into a shape: frame the problem, choose the model and agent, isolate changes, teach repeatable decisions, and verify the result.';
---

<BaseLayout title="AI For Dummies — Route map" description="">
  <link slot="styles" rel="stylesheet" href={chaptersStylesheet} />
  <main>
    <header class="top">
      <a href={`${base}full-guide/`}>← AI FOR DUMMIES</a>
      <span>00 / ROUTE MAP</span>
      <a href={`${base}skills-review/`}>review desk ↗</a>
    </header>
    <section class="hero">
      <p class="eyebrow">Start here</p>
      <h1>Ship the<br /><em>system.</em></h1>
      <p>{introduction}</p>
    </section>
    <section class="grid">
      <article class="card">
        <b>01</b><h2>Models</h2><p>Capability and effort are separate knobs.</p><a
          href={`${base}models/`}>Open chapter →</a
        >
      </article>
      <article class="card">
        <b>02</b><h2>Agents & trees</h2><p>Bound roles, handoffs, and worktrees.</p><a
          href={`${base}agents/`}>Open chapter →</a
        >
      </article>
      <article class="card">
        <b>03</b><h2>Skills</h2><p>Capture repeatable decisions.</p><a href={`${base}skills/`}
          >Open chapter →</a
        >
      </article>
      <article class="card">
        <b>04</b><h2>Rules</h2><p>Connect guidance to enforcement.</p><a href={`${base}rules/`}
          >Open chapter →</a
        >
      </article>
      <article class="card">
        <b>05</b><h2>Practice</h2><p>Compare prompts and skill-enabled runs.</p><a
          href={`${base}hands-on/starter/`}>Open lab →</a
        >
      </article>
      <article class="card">
        <b>06</b><h2>Review desk</h2><p>Browse original files and improved drafts.</p><a
          href={`${base}skills-review/`}>Open desk →</a
        >
      </article>
    </section>
    <nav class="links">
      <a href={`${base}full-guide/`}>Full field guide</a>
      <a href={`${base}docs/operations-guide.md`}>Operations guide</a>
    </nav>
    <footer>
      Each chapter stands alone; the order follows a real task becoming a reliable change.
    </footer>
  </main>
</BaseLayout>
