<section id="misiones" 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">
  <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">📝 Misiones</h2>
  <p class="text-slate-200">Tareas con objetivos y recompensas. Úsalas para guiar la progresión diaria y semanal.</p>

  <div class="grid gap-6 md:grid-cols-2">
    <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">📋 Ver y Reclamar</h3>
      <ul class="list-disc space-y-1 pl-5 text-sm text-slate-200">
        <li><code class="text-indigo-200">!misiones</code> — Ver misiones disponibles</li>
        <li><code class="text-indigo-200">!mision-reclamar &lt;key&gt;</code> — Reclamar recompensa</li>
      </ul>
    </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">🛠️ Crear como Admin</h3>
      <div class="space-y-2 text-sm">
        <div class="bg-slate-900/50 p-3 rounded-lg overflow-x-auto">
          <pre class="text-indigo-200 whitespace-pre-wrap">!mision-crear daily_mining_quest
Base: Nombre, Descripción, Tipo (daily/weekly/one_time)
Requisitos (JSON): { "type": "mine_count", "count": 10 }
Recompensas (JSON): { "coins": 1000, "xp": 500 }</pre>
        </div>
        <p class="text-slate-300">Edita desde Discord con botones y modales; no necesitas código.</p>
      </div>
    </div>
  </div>

  <div class="mt-6 rounded-2xl border border-sky-500/30 bg-sky-500/10 p-5 text-sm text-sky-100">
    <strong class="block text-base font-semibold text-sky-200 mb-2">Tipos y requisitos comunes</strong>
    <ul class="list-disc pl-5 space-y-1">
      <li><span class="text-white">Tipos:</span> daily, weekly, one_time, repeatable</li>
      <li><span class="text-white">Requisitos:</span> mine_count, fish_count, fight_count, collect_items, defeat_mobs</li>
    </ul>
  </div>
</section>
