<section id="primeros-pasos" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10 backdrop-blur">
  <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🚀 Primeros Pasos</h2>
  <p class="text-slate-200">
    ¡Bienvenido a <strong class="text-white">Amayo Bot</strong>! Este bot transforma tu servidor de Discord en una experiencia de juego completa con economía, minijuegos, misiones y mucho más.
  </p>
  
  <div class="space-y-4 rounded-2xl border border-indigo-500/30 bg-indigo-500/10 p-5 text-slate-200">
    <h3 class="text-lg font-semibold text-indigo-200">✨ ¿Qué puedes hacer con Amayo?</h3>
    <ul class="list-disc space-y-2 pl-5 text-sm">
      <li><strong class="text-white">Jugar Minijuegos:</strong> Mina recursos, pesca, pelea contra enemigos y cultiva en granjas</li>
      <li><strong class="text-white">Economía Completa:</strong> Gana monedas, compra en la tienda, craftea items y gestiona tu inventario</li>
      <li><strong class="text-white">Sistema de Progresión:</strong> Sube de nivel, completa misiones, desbloquea logros y mantén tu racha diaria</li>
      <li><strong class="text-white">Personalización:</strong> Equipa armas, armaduras y capas para mejorar tus estadísticas</li>
      <li><strong class="text-white">IA Conversacional:</strong> Chatea con Gemini AI directamente desde Discord</li>
      <li><strong class="text-white">Sistema de Alianzas:</strong> Comparte enlaces de invitación y gana puntos para tu servidor</li>
    </ul>
  </div>

  <div class="grid gap-6 md:grid-cols-2 py-5">
    <div class="space-y-3 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white">⚡ Prefix del Bot</h3>
      <p class="text-sm text-slate-200 py-5">
        El prefix por defecto es <code class="rounded bg-indigo-500/15 px-2 py-1 font-mono text-sm text-indigo-200">!</code>
      </p>
      <p class="text-xs text-slate-300 mt-2">
        Los administradores pueden cambiarlo con <code class="rounded bg-indigo-500/15 px-1.5 py-0.5 font-mono text-xs text-indigo-200">!configuracion</code>
      </p>
    </div>
    <div class="space-y-3 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white">❓ Obtener Ayuda</h3>
      <p class="text-sm text-slate-200">
        Usa <code class="rounded bg-indigo-500/15 px-2 py-1 font-mono text-sm text-indigo-200">!ayuda</code> para ver todos los comandos disponibles
      </p>
      <p class="text-xs text-slate-300 mt-2">
        También puedes usar <code class="rounded bg-indigo-500/15 px-1.5 py-0.5 font-mono text-xs text-indigo-200">!ayuda &lt;comando&gt;</code> para detalles específicos
      </p>
    </div>
  </div>
</section>
