---
// The index page for a section that has subpages: one card per entry,
// linking to its own page. Shared by /features/, /architecture/ and
// /about/ so a fourth such section is a data file plus two three-line
// routes, never another copy of this markup.
//
// The card grid is N-arity by construction — it renders whatever the
// section's `pages` list holds, so adding an entry to that list is the
// whole edit. The number in front of each title comes from that same list
// position, so reordering the data renumbers the section and nothing has
// to be kept in step by hand.
import type { Section } from "../data/section";

interface Props {
  section: Section;
  /** The section's URL prefix, with both slashes, e.g. "/features/". */
  base: string;
}

const { section, base } = Astro.props;
---
<h1>{section.title}</h1>
<p class="lede">{section.intro}</p>
<div class="card-grid">
  {section.pages.map((page, index) => (
    <div class="card">
      <h2>
        <a href={`${base}${page.slug}/`}>
          <span class="ordinal">{index + 1}.</span> {page.title}
        </a>
      </h2>
      <p>{page.lede}</p>
    </div>
  ))}
</div>

<style>
  .ordinal {
    color: var(--ink-dim);
  }
</style>