<header class="relative overflow-hidden py-20 sm:py-28">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
    <div class="max-w-5xl mx-auto text-center space-y-12">
      <!-- Badge Moderno con decoraciones sutiles -->
      <div class="inline-block relative">
        <img src="/assets/images/fantasma.svg" alt="fantasma" class="absolute" style="left: -40px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; animation: softFloat 3.5s ease-in-out infinite;">
        <div class="pixel-badge">
          <%= appName %> • v<%= version %>
        </div>
        <img src="/assets/images/fantasma.svg" alt="fantasma" class="absolute" style="right: -40px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; animation: softFloat 3.5s ease-in-out infinite;">
      </div>

      <!-- Título Principal -->
      <div class="space-y-4">
        <h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-tight">
          Guía Completa
        </h1>
        <h2 class="text-4xl sm:text-5xl md:text-6xl" style="font-family: 'Press Start 2P', monospace; background: linear-gradient(135deg, #a78bfa, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
          <%= appName %>
        </h2>
      </div>

      <!-- Decoraciones sutiles -->
      <div class="flex justify-center gap-6 items-center">
        <span class="pixel-star-halloween">✦</span>
        <img src="/assets/images/calabaza.svg" alt="calabaza" style="width: 32px; height: 32px; animation: softBounce 3s ease-in-out infinite;">
        <span class="pixel-star-halloween" style="animation-delay: 0.5s;">✦</span>
        <img src="/assets/images/fantasma.svg" alt="fantasma" style="width: 32px; height: 32px; animation: softFloat 3.5s ease-in-out infinite; animation-delay: 1s;">
        <span class="pixel-star-halloween" style="animation-delay: 1.5s;">✦</span>
      </div>

      <!-- Botones de Acción -->
      <div class="flex flex-col sm:flex-row gap-6 justify-center items-center pt-4">
        <a href="#primeros-pasos" class="block hover:scale-105 transition-transform duration-300">
          <img src="/assets/images/boton_entrar.svg" alt="Comenzar ahora" class="w-full h-auto" style="max-width: 450px; filter: drop-shadow(0 4px 12px rgba(255, 179, 71, 0.3));">
        </a>
      </div>

      <!-- Stats Footer con SVG Backgrounds mejorados -->
      <!-- Stats Footer con SVG Backgrounds más pequeños -->
      <div class="flex flex-wrap md:flex-nowrap justify-center gap-4 pt-8 px-4 w-full max-w-6xl mx-auto">
          <!-- Discord.js Version -->
          <div class="relative flex-1 min-w-[240px] max-w-[320px]">
            <img src="/assets/images/snap1.svg" alt="card background" class="w-full h-auto" style="display: block;">
            <div class="absolute inset-0 flex flex-col items-center justify-center gap-2 py-4 px-4" style="min-height: 64px;">
              <span class="pixel-leaf text-xl" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));"></span>
              <div class="text-center">
                <p class="text-[10px] pixel-text-dim mb-1 uppercase tracking-widest font-semibold" style="text-shadow: 0 1px 2px rgba(0,0,0,0.5);">Discord.js</p>
                <p class="text-sm font-bold text-white" style="text-shadow: 0 2px 4px rgba(0,0,0,0.5);"><%= djsVersion %></p>
              </div>
            </div>
          </div>

          <!-- Fecha de actualización -->
          <div class="relative flex-1 min-w-[240px] max-w-[320px]">
            <img src="/assets/images/snap1.svg" alt="card background" class="w-full h-auto" style="display: block;">
            <div class="absolute inset-0 flex flex-col items-center justify-center gap-2 py-4 px-4" style="min-height: 64px;">
              <span class="text-xl" style="filter: drop-shadow(0 2px 4px rgba(255,179,71,0.4));">✦</span>
              <div class="text-center">
                <p class="text-[10px] pixel-text-dim mb-1 uppercase tracking-widest font-semibold" style="text-shadow: 0 1px 2px rgba(0,0,0,0.5);">Actualizado</p>
                <p class="text-sm font-bold text-white" style="text-shadow: 0 2px 4px rgba(0,0,0,0.5);"><%= currentDateHuman %></p>
              </div>
            </div>
          </div>
          <!-- Tercer badge: Secciones -->
          <div class="relative flex-1 min-w-[240px] max-w-[320px]">
            <img src="/assets/images/snap2.svg" alt="card background" class="w-full h-auto" style="display: block;">
            <div class="absolute inset-0 flex items-center justify-center gap-2 py-4 px-4" style="min-height: 64px;">
              <span class="text-xl" aria-hidden="true" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));">🎮</span>
              <p class="text-sm font-semibold text-white" style="text-shadow: 0 2px 4px rgba(0,0,0,0.5);">23 Secciones</p>
            </div>
          </div>
      </div>
    </div>
  </div>
</header>

<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
  <div class="flex min-h-screen flex-col">

    <div class="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-10 px-6 pb-16 lg:flex-row lg:px-10">
  <%- await include('../partials/toc') %>

      <main class="flex-1">
        <div class="mx-auto flex w-full max-w-3xl flex-col gap-8">
          <%- await include('../partials/sections/primeros-pasos') %>
          <%- await include('../partials/sections/comandos-basicos') %>
          <%- await include('../partials/sections/sistema-juego') %>
          <%- await include('../partials/sections/minijuegos') %>
          <%- await include('../partials/sections/inventario-equipo') %>
          <%- await include('../partials/sections/economia') %>
          <%- await include('../partials/sections/tienda') %>
          <%- await include('../partials/sections/crafteo') %>
          <%- await include('../partials/sections/logros') %>
          <%- await include('../partials/sections/misiones') %>
          <%- await include('../partials/sections/racha') %>
          <%- await include('../partials/sections/consumibles') %>
          <%- await include('../partials/sections/cofres') %>
          <%- await include('../partials/sections/encantamientos') %>
          <%- await include('../partials/sections/fundicion') %>
          <%- await include('../partials/sections/ia') %>
          <%- await include('../partials/sections/recordatorios') %>
          <%- await include('../partials/sections/alianzas') %>
          <%- await include('../partials/sections/admin') %>
          <%- await include('../partials/sections/creacion-contenido') %>
          <%- await include('../partials/sections/ejemplos-avanzados') %>
          <%- await include('../partials/sections/configuracion') %>
          <%- await include('../partials/sections/estadisticas') %>
          <%- await include('../partials/sections/tips') %>
          <%- await include('../partials/sections/faq') %>
        </div>
      </main>
    </div>
  </div>
</div>
