<section id="comandos-basicos" 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">⚡ Comandos Básicos</h2>
  <p class="text-slate-200">
    Estos son los comandos esenciales que necesitas conocer para empezar.
  </p>

  <div class="space-y-4">
    <div class="rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white mb-3">📋 Información y Utilidad</h3>
      <div class="space-y-3 text-sm">
        <div class="flex flex-col gap-1">
          <code class="rounded bg-indigo-500/15 px-2 py-1 font-mono text-indigo-200 w-fit">!ayuda [comando|categoría]</code>
          <p class="text-slate-300 pl-2">Muestra la lista de comandos. También puedes usar <code class="text-xs">!help</code>, <code class="text-xs">!comandos</code> o <code class="text-xs">!cmds</code></p>
        </div>
        <div class="flex flex-col gap-1">
          <code class="rounded bg-indigo-500/15 px-2 py-1 font-mono text-indigo-200 w-fit">!ping</code>
          <p class="text-slate-300 pl-2">Verifica la latencia del bot. También: <code class="text-xs">!latency</code>, <code class="text-xs">!pong</code></p>
        </div>
        <div class="flex flex-col gap-1">
          <code class="rounded bg-indigo-500/15 px-2 py-1 font-mono text-indigo-200 w-fit">!player [@usuario]</code>
          <p class="text-slate-300 pl-2">Muestra tu perfil completo de jugador con estadísticas, equipo e inventario. También: <code class="text-xs">!perfil</code>, <code class="text-xs">!profile</code>, <code class="text-xs">!yo</code>, <code class="text-xs">!me</code></p>
        </div>
      </div>
    </div>
  </div>
</section>
