{{ define "main" }}

{{ $lang := "en" }}
{{ if in .Permalink "/it/" }}
  {{ $lang = "it" }}
{{ end }}

{{ $translations := dict "en" (dict
  "notFound" "Page Not Found"
  "notFoundMessage" "Sorry, the page you're looking for doesn't exist. Try searching or browse the articles below."
  "searchPlaceholder" "Search articles..."
  "noSearchResults" "No articles found matching your search."
  "recentArticles" "Recent Articles"
  "goHome" "Go Home"
  "browseArticles" "Browse Articles"
  "contactSupport" "Get in Touch"
  "followWhiteRabbit" "Follow the white rabbit..."
  "easterEggTitle" "Choose Your Path"
  "bluePill" "Stay Here"
  "redPill" "Show Me More"
) "it" (dict
  "notFound" "Pagina Non Trovata"
  "notFoundMessage" "Mi dispiace, la pagina che stai cercando non esiste. Prova a cercare o sfoglia gli articoli qui sotto."
  "searchPlaceholder" "Cerca articoli..."
  "noSearchResults" "Nessun articolo trovato che corrisponda alla tua ricerca."
  "recentArticles" "Articoli Recenti"
  "goHome" "Torna a Casa"
  "browseArticles" "Sfoglia Articoli"
  "contactSupport" "Contattami"
  "followWhiteRabbit" "Segui il coniglio bianco..."
  "easterEggTitle" "Scegli il Tuo Percorso"
  "bluePill" "Rimani Qui"
  "redPill" "Mostrami di Più"
) }}

{{ $t := index $translations $lang }}

<!-- Detect language from current URL -->
<script>
window.currentLang = window.location.pathname.startsWith('/it/') ? 'it' : 'en';
</script>

<!-- 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">
      {{ index $t "notFound" }}
    </h2>

    <p class="text-lg text-text-dim mb-8">
      {{ index $t "notFoundMessage" }}
    </p>

    <!-- Search Box -->
    <div class="mb-12">
      <form id="search-form" class="flex flex-col gap-4">
        <label for="search-input" class="sr-only">{{ index $t "searchPlaceholder" }}</label>
        <input
          id="search-input"
          type="text"
          placeholder="{{ index $t "searchPlaceholder" }}"
          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">
        {{ index $t "noSearchResults" }}
      </div>
    </div>

    <!-- Recent Articles Section -->
    <div class="mb-12">
      <h3 class="text-2xl font-bold mb-6">{{ index $t "recentArticles" }}</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" x-data="notFoundNav()">
      <a :href="homeLink" @click.prevent="goHome()" class="btn btn-primary">
        {{ index $t "goHome" }}
      </a>
      <a :href="articlesLink" @click.prevent="goArticles()" class="btn btn-secondary">
        {{ index $t "browseArticles" }}
      </a>
      <a :href="contactLink" @click.prevent="goContact()" class="btn btn-outline">
        {{ index $t "contactSupport" }}
      </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"
      >
        {{ index $t "followWhiteRabbit" }}
      </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">{{ index $t "easterEggTitle" }}</h2>

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

            <button
              type="button"
              @click="goToRandomArticle()"
              class="w-full btn btn-secondary"
            >
              🐰 {{ index $t "redPill" }}
            </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 }}