<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title || `${appName} | Guía Completa` %></title>
  <meta name="description" content="Guía completa de Amayo Bot: comandos, minijuegos, economía, misiones, logros, creación de contenido y más">
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- highlight.js (ligero y CDN) -->
  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          animation: {
            'gradient': 'gradient 8s linear infinite',
            'float': 'float 6s ease-in-out infinite',
            'glow': 'glow 3s ease-in-out infinite',
            'slide-in': 'slideIn 0.5s ease-out',
          },
          keyframes: {
            gradient: {
              '0%, 100%': { backgroundPosition: '0% 50%' },
              '50%': { backgroundPosition: '100% 50%' },
            },
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-20px)' },
            },
            glow: {
              '0%, 100%': { opacity: '0.4' },
              '50%': { opacity: '0.8' },
            },
            slideIn: {
              '0%': { transform: 'translateY(20px)', opacity: '0' },
              '100%': { transform: 'translateY(0)', opacity: '1' },
            },
          },
        },
      },
    };
  </script>
  <link rel="stylesheet" href="/assets/css/styles.css">
  <% if (typeof head !== 'undefined' && head) { %>
    <%= head %>
  <% } %>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100 antialiased pt-14">

  <%- await include('../partials/navbar', { appName }) %>

  <!-- Animated Background Blobs -->
  <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
    <div class="absolute top-0 left-1/4 w-96 h-96 bg-purple-500/20 rounded-full mix-blend-screen filter blur-3xl animate-float"></div>
    <div class="absolute top-1/3 right-1/4 w-96 h-96 bg-indigo-500/20 rounded-full mix-blend-screen filter blur-3xl animate-float" style="animation-delay: 2s;"></div>
    <div class="absolute bottom-0 left-1/3 w-96 h-96 bg-pink-500/15 rounded-full mix-blend-screen filter blur-3xl animate-float" style="animation-delay: 4s;"></div>
  </div>

  <div class="relative z-10">
    <%- body %>
  </div>

  <footer class="border-t border-white/5 bg-slate-950/80 py-10 text-center">
    <div class="mx-auto max-w-5xl px-6">
      <div class="mb-6">
        <p class="text-2xl font-bold text-white mb-2"><%= appName %></p>
        <p class="text-sm text-slate-400">Sistema completo de juego, economía y gestión para Discord</p>
      </div>
      
      <div class="flex flex-wrap justify-center gap-4 mb-6 text-sm">
        <a href="#primeros-pasos" class="text-indigo-300 transition hover:text-indigo-200">Primeros Pasos</a>
        <span class="text-slate-600">•</span>
        <a href="#comandos-basicos" class="text-indigo-300 transition hover:text-indigo-200">Comandos</a>
        <span class="text-slate-600">•</span>
        <a href="#minijuegos" class="text-indigo-300 transition hover:text-indigo-200">Minijuegos</a>
        <span class="text-slate-600">•</span>
        <a href="#faq" class="text-indigo-300 transition hover:text-indigo-200">FAQ</a>
      </div>

      <div class="border-t border-white/5 pt-6">
        <p class="text-xs text-slate-400 mb-3">
          Versión <%= version %> • Discord.js <%= djsVersion %> • <%= currentDateHuman %>
        </p>
        <p class="text-xs text-slate-500">
          Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord
        </p>
      </div>

      <div class="mt-6">
        <a class="inline-flex items-center gap-2 text-indigo-300 transition hover:text-indigo-200" href="#primeros-pasos">
          <span aria-hidden="true">↑</span>
          Volver arriba
        </a>
      </div>
    </div>
  </footer>

  <script src="/assets/js/main.js" type="module"></script>
  <script src="/assets/js/code.js" defer></script>
  <% if (typeof scripts !== 'undefined' && scripts) { %>
    <%= scripts %>
  <% } %>
</body>
</html>
