---
import { getSectionHref, launchSections } from "../data/site";
import BaseLayout from "../layouts/BaseLayout.astro";

export function getStaticPaths() {
  return launchSections
    .filter(
      (section) =>
        !["education", "business", "ai-lab", "jazz-music", "norway", "cv", "projects"].includes(section.slug),
    )
    .map((section) => ({
      params: { slug: section.slug },
      props: { section },
    }));
}

const { section } = Astro.props;

const relatedSections = launchSections.filter(
  (entry) =>
    entry.slug !== section.slug &&
    !["education", "business", "ai-lab", "jazz-music", "norway", "cv", "projects"].includes(entry.slug),
);
---

<BaseLayout
  title={`${section.title} | Dave Gilligan`}
  description={section.summary}
>
  <main class="section-page">
    <section class="container section-page__hero">
      <div class="section-page__intro">
        <span class="eyebrow">Section {section.label}</span>
        <h1>{section.title}</h1>
        <p class="section-page__strap">{section.strap}</p>
        <p class="section-page__lede">{section.summary}</p>
      </div>

      <aside class="panel section-page__cover">
        <div class="capsule__kicker">
          <span>Cover line</span>
          <span>{section.tone}</span>
        </div>
        <h2>{section.coverline}</h2>
        <p>{section.motif}</p>
      </aside>
    </section>

    <section class="container section-page__columns">
      <article class="panel section-page__main">
        <div class="capsule__kicker">
          <span>What belongs here</span>
          <span>Drafting notes</span>
        </div>
        <ul class="section-page__samples">
          {section.samples.map((sample, index) => (
            <li>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <strong>{sample}</strong>
              <p>{section.motif}</p>
            </li>
          ))}
        </ul>
      </article>

      <article class="panel section-page__side">
        <div class="capsule__kicker">
          <span>Editorial posture</span>
          <span>{section.title}</span>
        </div>
        <p>
          This section is designed to read like a proper feature desk: larger typography, fewer
          dead blocks, more atmosphere, and copy that behaves as though it expects readers with a
          memory.
        </p>
        <p>
          Eventually this will be fed from PHP and SQL, with roles, member access, and AI-backed
          translation controls. For now it is the visual and editorial north star.
        </p>
      </article>
    </section>

    <section class="container section-page__related">
      <div class="section-header">
        <div class="section-header__title">Elsewhere in the paper</div>
        <div class="section-header__meta">
          The point is to make the whole publication feel edited, not merely assembled.
        </div>
      </div>

      <div class="section-grid">
        {relatedSections.slice(0, 6).map((entry) => (
          <a class="section-related-card" href={getSectionHref(entry)}>
            <span>{entry.label}</span>
            <strong>{entry.title}</strong>
            <p>{entry.strap}</p>
          </a>
        ))}
      </div>
    </section>
  </main>
</BaseLayout>
