---
// Interactive page template — for pages that genuinely need client-side
// behaviour (the full guide, the review desk).
//
// The page itself is still server-rendered. Only the islands hydrate.
// If you are copying this for a page that has no interaction, use
// chapter.astro instead.

import BaseLayout from '../layouts/BaseLayout.astro';
import Island from '../components/islands/Island.astro';
import { getCollection } from 'astro:content';

const entries = await getCollection('guide');
const lang = 'en'; // TODO: wire to the language toggle decision (task 03)

const items = entries.map((entry) => ({
  id: entry.id,
  label: entry.data.title[lang],
  body: entry.data.copy[lang],
}));
---

<BaseLayout title="Full field guide" description="TODO">
  <!-- Static content is server-rendered. No hydration cost. -->
  <section class="hero">
    <p class="eyebrow">The full guide</p>
    <h1>Ship the <em>system.</em></h1>
  </section>

  <!--
    client:visible, not client:load — this is below the fold and the page must
    stay interactive-free until it matters. Justification belongs in the PR:
    "tab panel requires click-driven state; no server equivalent."
  -->
  <Island client:visible items={items} />

  <!-- More static content after the island. Islands are leaves, not wrappers. -->
  <slot />
</BaseLayout>

<style>
  .hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; }
  h1 { font-size: var(--step-display); line-height: .86; letter-spacing: -.08em; }
  h1 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; }
</style>