---
// Layout for long-form organizer guides authored as Markdown pages under /events/.
import Base from './Base.astro';

interface Frontmatter {
  title: string;
  summary?: string;
}
const { frontmatter } = Astro.props as { frontmatter: Frontmatter };

const guides = [
  { slug: 'hackathon', label: 'Hackathon' },
  { slug: 'meetup', label: 'Meetup' },
  { slug: 'unconference', label: 'Unconference' },
];
const current = Astro.url.pathname.replace(/\/$/, '').split('/').pop();
const others = guides.filter((g) => g.slug !== current);
---

<Base lang="en" title={frontmatter.title}>
  <section class="hero">
    <p class="guide-back"><a href="/events">Back to events</a></p>
    <h1 class="display page-title">{frontmatter.title}</h1>
    {frontmatter.summary && <p>{frontmatter.summary}</p>}
  </section>

  <section class="section prose">
    <slot />
  </section>

  <nav class="guide-nav">
    <p class="label">Other guides</p>
    <div class="guide-nav-links">
      {others.map((g) => (
        <a class="guide-card" href={`/events/${g.slug}`}>
          <span class="guide-title">{g.label}</span>
        </a>
      ))}
    </div>
    <p class="guide-nav-back"><a href="/events">← All events</a></p>
  </nav>
</Base>