---
import SchoolDossier from "../components/SchoolDossier.astro";
import { schoolDossiers } from "../data/education";
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout
  title="Education Dossiers | Dave Gilligan"
  description="Five school dossiers written as a literary magazine issue, with attributed imagery and clearly labeled faux Boris Vian and Vernon Sullivan signatures."
>
  <main class="education-page">
    <section class="education-hero container">
      <div class="education-hero__copy">
        <span class="eyebrow">Special issue / school dossiers</span>
        <h1>The schools, rewritten as a magazine of migration, trade, weather, and nerve.</h1>
        <p class="education-hero__lede">
          This issue treats each school as a chapter in style, place, and formation. The quotes
          are invented on purpose, signed in faux Boris or faux Vernon mode, and labeled so nobody
          mistakes the joke for scholarship.
        </p>
      </div>

      <aside class="education-hero__note panel">
        <div class="capsule__kicker">
          <span>Editorial note</span>
          <span>Draft 1</span>
        </div>
        <ul>
          <li>All faux signatures are clearly marked as invented.</li>
          <li>All images are openly licensed or used as contextual stand-ins with attribution.</li>
          <li>Exact campus replacements can be swapped in once you approve or supply them.</li>
        </ul>
      </aside>
    </section>

    <section class="container dossier-stack">
      {schoolDossiers.map((dossier, index) => (
        <SchoolDossier dossier={dossier} index={index} />
      ))}
    </section>
  </main>
</BaseLayout>