<section id="crafteo" 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">🛠️ Crafteo</h2>
  <p class="text-slate-200">Combina materiales para crear objetos. Algunas recetas requieren nivel mínimo o herramientas específicas.</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 Recetas</h3>
      <div class="bg-slate-900/50 p-3 rounded-lg text-sm">
        <code class="text-indigo-200">!recetas</code>
      </div>
      <p class="text-slate-300 text-sm">Lista de recetas disponibles y sus requisitos.</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">🧪 Crear un Objeto</h3>
      <div class="bg-slate-900/50 p-3 rounded-lg text-sm">
        <code class="text-indigo-200">!craftear &lt;receta&gt; [cantidad]</code>
      </div>
      <p class="text-slate-300 text-sm">Ejemplo: <span class="font-mono">!craftear espada 1</span></p>
    </div>
  </div>

  <div class="mt-6 grid gap-6 md:grid-cols-2">
    <div class="rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white">🧭 Cómo craftear (paso a paso)</h3>
      <ol class="list-decimal list-inside mt-2 space-y-2 text-slate-300 text-sm">
        <li>Escribe <span class="font-mono">!recetas</span> y elige el <em>nombre clave</em> de la receta (por ejemplo: <span class="font-mono">espada</span>).</li>
        <li>Revisa los ingredientes requeridos y tu inventario con <span class="font-mono">!inventario</span>.</li>
        <li>Si la receta exige nivel/herramienta, verifica tu estado: <span class="font-mono">!perfil</span> y tu equipo con <span class="font-mono">!equipo</span>.</li>
        <li>Ejecuta <span class="font-mono">!craftear &lt;receta&gt; [cantidad]</span>. Ejemplos:
          <div class="mt-2 space-y-1">
            <div class="bg-slate-900/50 p-2 rounded"><code class="text-indigo-200">!craftear espada</code></div>
            <div class="bg-slate-900/50 p-2 rounded"><code class="text-indigo-200">!craftear espada 3</code></div>
          </div>
        </li>
        <li>Si cumples los requisitos, recibirás el/los objeto(s) al instante en tu inventario.</li>
      </ol>
      <p class="text-slate-400 text-xs mt-3">Consejo: si una receta admite múltiples resultados o variantes, en <span class="font-mono">!recetas</span> verás notas adicionales.</p>
    </div>

    <div class="rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white">📌 Requisitos típicos</h3>
      <ul class="mt-2 space-y-2 text-slate-300 text-sm">
        <li>Ingredientes exactos en cantidad suficiente.</li>
        <li>Nivel mínimo del jugador para la receta.</li>
        <li>Herramienta adecuada equipada (si aplica).</li>
      </ul>
      <div class="mt-3 rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3 text-yellow-100 text-xs">
        Algunas recetas avanzadas podrían requerir materiales raros o pasos previos (p. ej., procesar un material en <em>fundición</em> antes de craftear).
      </div>
    </div>
  </div>

  <div class="mt-6 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
    <h3 class="text-lg font-semibold text-white">✅ Mensajes esperados</h3>
    <ul class="mt-2 space-y-2 text-slate-300 text-sm">
      <li>Éxito: “Has crafteado <span class="font-mono">&lt;objeto&gt;</span> x<span class="font-mono">&lt;cantidad&gt;</span>”.</li>
      <li>Faltan materiales: “No tienes suficientes <span class="font-mono">&lt;material&gt;</span>”.</li>
      <li>Requisito: “Nivel insuficiente para esta receta” o “Necesitas <span class="font-mono">&lt;herramienta&gt;</span> equipada”.</li>
    </ul>
  </div>

  <div class="mt-6 rounded-2xl border border-indigo-500/30 bg-indigo-500/10 p-5 text-sm text-indigo-100">
    <strong class="block text-base font-semibold text-indigo-200 mb-2">Nota</strong>
    <p>Las recetas pueden actualizarse con nuevos parches. Revisa <span class="font-mono">!recetas</span> después de una actualización.</p>
  </div>

  <div class="mt-4 rounded-2xl border border-rose-500/30 bg-rose-500/10 p-5 text-sm text-rose-100">
    <strong class="block text-base font-semibold text-rose-200 mb-2">Errores comunes y cómo resolverlos</strong>
    <ul class="list-disc list-inside space-y-2">
      <li><span class="font-semibold">Receta no encontrada:</span> Asegúrate de usar el nombre correcto tal como aparece en <span class="font-mono">!recetas</span>.</li>
      <li><span class="font-semibold">Faltan materiales:</span> Junta los recursos con minijuegos o compra/intercambia y vuelve a intentar.</li>
      <li><span class="font-semibold">Nivel insuficiente:</span> Sube de nivel con actividades del juego hasta cumplir el requisito.</li>
      <li><span class="font-semibold">Herramienta incorrecta o sin durabilidad:</span> Equipa la herramienta adecuada o repárala/sustitúyela.</li>
      <li><span class="font-semibold">Cantidad demasiado alta:</span> Reduce la cantidad o craftea en varios intentos.</li>
    </ul>
  </div>
</section>
