{{ define "main" }}

<!-- Pass articles data to JavaScript for Alpine.js -->
<script>
window.articlesData = [
  {{ range (where .Site.RegularPages "Section" "articles") }}
  {
    title: '{{ .Title | safeJS }}',
    url: '{{ .Permalink }}',
    date: '{{ .Date.Format "Jan 02, 2006" }}',
    content: '{{ (.Summary | plainify | safeJS) }}'
  },
  {{ end }}
];
</script>

<main class="min-h-screen px-4 py-12">
  <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
    <div class="text-center">
    <!-- 404 Heading -->
    <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
      404
    </h1>

    <!-- Error Message -->
    <h2 class="text-3xl md:text-4xl font-bold mb-6">
      Page Not Found
    </h2>

    <p class="text-lg text-text-dim mb-8">
      Sorry, the page you're looking for doesn't exist. Try searching or browse the articles below.
    </p>

    <!-- Search Box -->
    <div class="mb-12">
      <form id="search-form" class="flex flex-col gap-4">
        <label for="search-input" class="sr-only">Search articles...</label>
        <input
          id="search-input"
          type="text"
          placeholder="Search articles..."
          class="px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
          @input="filterArticles($el.value)"
        />
      </form>
      <div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0">
        <template x-for="article in filteredArticles" :key="article.title">
          <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
            <a :href="article.url" class="block text-left">
              <h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4>
              <p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
            </a>
          </div>
        </template>
      </div>
      <div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim">
        No articles found matching your search.
      </div>
    </div>

    <!-- Recent Articles Section -->
    <div class="mb-12">
      <h3 class="text-2xl font-bold mb-6">Recent Articles</h3>
      <div class="space-y-4">
        {{ range first 5 (where .Site.RegularPages "Section" "articles") }}
        <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
          <a href="{{ .Permalink }}" class="block text-left">
            <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
            <p class="text-sm text-text-dim mt-1">
              {{ .Date.Format "Jan 02, 2006" }}
            </p>
          </a>
        </div>
        {{ end }}
      </div>
    </div>

    <!-- Navigation Links -->
    <div class="space-y-4 flex flex-col items-center mb-12">
      <a href="/" class="btn btn-primary">
        Go Home
      </a>
      <a href="/articles/" class="btn btn-secondary">
        Browse Articles
      </a>
      <a href="/is/here/" class="btn btn-outline">
        Get in Touch
      </a>
    </div>

    <!-- Easter Egg Trigger -->
    <div class="mt-12 pt-8 border-t border-border">
      <button
        type="button"
        @click="toggleEasterEgg()"
        class="text-sm text-text-dim hover:text-accent transition-colors underline"
      >
        Follow the white rabbit...
      </button>
    </div>

      <!-- Easter Egg Modal (Hidden by default) -->
      <div
        class="fixed inset-0 z-50"
        :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !showEasterEgg }"
        x-show="showEasterEgg"
        x-cloak
      >
        <!-- Overlay -->
        <div
          class="absolute inset-0 bg-black/50"
          @click="showEasterEgg = false"
        ></div>

        <!-- Modal Content -->
        <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
          <h2 class="text-2xl font-bold mb-6 text-accent">Choose Your Path</h2>

          <div class="space-y-4">
            <button
              type="button"
              @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'"
              class="w-full btn btn-primary"
            >
              💊 Stay Here
            </button>

            <button
              type="button"
              @click="goToRandomArticle()"
              class="w-full btn btn-secondary"
            >
              🐰 Show Me More
            </button>
          </div>

          <button
            type="button"
            @click="showEasterEgg = false"
            class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
            aria-label="Close modal"
          >
            ✕
          </button>
        </div>
      </div>
    </div>
  </div>
</main>

{{ end }}