---
import BaseLayout from '../layouts/BaseLayout.astro';
import EventFilterSearch from '../components/EventFilterSearch.jsx';

const eventFiles = Object.values(await import.meta.glob('../../content/events/*.md', { eager: true })) as any[];
const events = eventFiles;
const sortedEvents = events.sort((a, b) => new Date(b.frontmatter?.date || 0).getTime() - new Date(a.frontmatter?.date || 0).getTime());
---

<BaseLayout>
  <!-- Page Header (modern) -->
  <section class="brand-surface relative py-20 px-4 text-center text-white overflow-hidden" data-animate-on-scroll="fade-in">
    <div class="relative z-10 max-w-4xl mx-auto">
      <div class="flex items-center justify-center gap-2 mb-4 text-sm text-white/90">
        <a href="/" class="hover:underline">Home</a>
        <span class="opacity-60">/</span>
        <span>Events</span>
      </div>
      <h1 class="font-headline text-5xl md:text-6xl font-extrabold mb-4 leading-tight">Events</h1>
      <p class="text-lg md:text-xl opacity-90 max-w-2xl mx-auto">Find community gatherings, cultural celebrations, and programs across the Netherlands.</p>
    </div>
  </section>

  <section class="section" data-animate-on-scroll="fade-in">
    <div class="container">
      <EventFilterSearch events={sortedEvents} client:load />
    </div>
  </section>
</BaseLayout>