<!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>
  
  <!-- Modern Pixel Art CSS -->
  <link rel="stylesheet" href="/assets/css/modern-pixel.css?v=<%= version || '2.0.0' %>">
  <link rel="stylesheet" href="/assets/css/modern-sections.css?v=<%= version || '2.0.0' %>">
  <link rel="stylesheet" href="/assets/css/styles.css?v=<%= version || '2.0.0' %>">
  <% if (typeof head !== 'undefined' && head) { %>
    <%= head %>
  <% } %>
</head>
<body class="min-h-screen pixel-grid-bg pt-14" style="background-image: url('/assets/images/background.svg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;">

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

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

    <footer class="pixel-box mt-16 mx-4 mb-8">
    <div class="max-w-6xl mx-auto">
      <div class="text-center mb-8">
        <h3 class="mb-4">Amayo Bot</h3>
        <p class="text-sm pixel-text-dim">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 items-center">
        <span class="pixel-leaf" style="width: 16px; height: 10px;"></span>
        <a href="#primeros-pasos">Primeros Pasos</a>
        <span>✦</span>
        <a href="#comandos-basicos">Comandos</a>
        <span>✦</span>
        <a href="#minijuegos">Minijuegos</a>
        <span>✦</span>
        <a href="#faq">FAQ</a>
        <span class="pixel-leaf" style="width: 16px; height: 10px; transform: rotate(20deg);"></span>
      </div>

      <div class="pixel-border p-4 mb-6" style="background: linear-gradient(135deg, var(--pixel-bg-dark) 0%, var(--pixel-bg-medium) 100%);">
        <div class="flex items-center justify-center gap-4 text-sm" style="color: var(--text-secondary);">
          <span class="pixel-pumpkin" style="width: 16px; height: 16px;"></span>
          <span>VER <%= version %></span>
          <span>•</span>
          <span>DJS <%= djsVersion %></span>
          <span>•</span>
          <span><%= currentDateHuman %></span>
          <span class="pixel-ghost" style="width: 16px; height: 20px;"></span>
        </div>
      </div>

      <p class="text-center text-sm mb-6 flex items-center justify-center gap-3" style="color: var(--text-muted);">
        <span class="pixel-star-halloween">✦</span>
        <span>Amayo © <%= new Date().getFullYear() %> — Documentación para usuarios finales de Discord</span>
        <span class="pixel-star-halloween">✦</span>
      </p>

      <div class="text-center">
        <a class="pixel-btn-secondary pixel-btn inline-block" href="#primeros-pasos">
          ↑ 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>
