feat: agregar secciones de ejemplos básicos y avanzados, mejorar contenido y diseño en la documentación EJS

src/server/views/partials/sections/creacion-contenido.ejs

@@ -1,50 +1,116 @@
 <section id="creacion-contenido" class="rounded-3xl bg-gradient-to-br from-red-900/20 to-orange-900/20 backdrop-blur-xl border border-red-500/30 p-8 shadow-2xl">
   <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-red-200 to-orange-200">🎨 Creación de Contenido</h2>
-  <p class="text-slate-100">Todo desde Discord, sin tocar código: editores con botones y modales para crear items, áreas, mobs, recetas y ofertas.</p>
+  <p class="text-slate-100">Guía técnica paso a paso para crear <strong>items</strong>, <strong>áreas/niveles</strong>, <strong>mobs</strong> y <strong>ofertas</strong> directamente desde Discord. Requiere permiso <span class="font-mono">Manage Guild</span> o rol de staff.</p>
 
   <div class="grid gap-6 md:grid-cols-2">
     <div class="space-y-3 rounded-2xl border border-white/5 bg-black/20 p-5">
       <h3 class="text-lg font-semibold text-white">📦 Items: crear/editar</h3>
       <div class="bg-black/30 p-3 rounded-lg text-sm">
-        <pre class="text-orange-200 whitespace-pre-wrap">!item-crear &lt;key&gt;
-Base → nombre, descripción, stackable, icon
-Tags → etiquetas
-Props (JSON) → tool/food/breakable/…
-Receta → ingredientes y output (⭐ nuevo)</pre>
+        <pre class="text-orange-200 whitespace-pre-wrap">1) Crear base
+!item-crear iron_sword
+Base → Nombre: "Espada de Hierro", Descripción, Stackable: false,1
+Tags → weapon, tier2
+
+2) Props (JSON) comunes
+{
+  "tool": { "type": "sword", "tier": 2 },
+  "damage": 15,
+  "breakable": { "enabled": true, "maxDurability": 200 }
+}
+
+3) Receta (modal ⭐)
+Habilitar: true
+Produce: 1
+Ingredientes: iron_ingot:3, wood_plank:1
+
+4) Guardar → ✅ Item creado
+Prueba: !craftear iron_sword</pre>
       </div>
       <p class="text-slate-300 text-sm">Usa <span class="font-mono">!item-editar</span>, <span class="font-mono">!item-ver</span>, <span class="font-mono">!items-lista</span> para gestionar.</p>
     </div>
     <div class="space-y-3 rounded-2xl border border-white/5 bg-black/20 p-5">
-      <h3 class="text-lg font-semibold text-white">🧭 Áreas y Niveles</h3>
+      <h3 class="text-lg font-semibold text-white">🧭 Áreas y Niveles (MINE/LAGOON/FIGHT/FARM)</h3>
       <div class="bg-black/30 p-3 rounded-lg text-sm">
-        <pre class="text-orange-200 whitespace-pre-wrap">!area-crear mine.iron_cavern
+  <pre class="text-orange-200 whitespace-pre-wrap">1) Crear área
+!area-crear mine.iron_cavern
+Config (JSON): {
+  "cooldownSeconds": 60,
+  "description": "Caverna rica en hierro",
+  "icon": "⛏️"
+}
+Guardar → ✅ Área creada
+
+2) Crear nivel 1
 !area-nivel mine.iron_cavern 1
-Config → cooldown, descripción, icono
-Requisitos → herramienta/tier
-Recompensas → tabla y pesos
-Mobs → tabla y pesos</pre>
+Requisitos (JSON): {
+  "tool": { "required": true, "toolType": "pickaxe", "minTier": 2 }
+}
+Recompensas (JSON): {
+  "draws": 2,
+  "table": [
+    { "type": "coins", "amount": 50, "weight": 10 },
+    { "type": "item",  "itemKey": "iron_ore", "qty": 2, "weight": 8 }
+  ]
+}
+Mobs (JSON, opcional): {
+  "draws": 1,
+  "table": [ { "mobKey": "cave_spider", "weight": 10 } ]
+}
+Guardar → ✅ Nivel guardado</pre>
+      </div>
+      <div class="bg-black/30 p-3 rounded-lg text-xs">
+        <div class="text-orange-200 font-semibold mb-1">Errores comunes</div>
+        <ul class="list-disc pl-5 space-y-1 text-orange-100">
+          <li><span class="font-mono">mobKey</span> o <span class="font-mono">itemKey</span> inexistente → crea primero o corrige la key</li>
+          <li>Pesos mal balanceados → revisa <span class="font-mono">weight</span> (no negativos; no tienen que sumar 100)</li>
+          <li>Herramienta requerida mal configurada → revisa <span class="font-mono">toolType</span> y <span class="font-mono">minTier</span></li>
+        </ul>
       </div>
     </div>
   </div>
 
   <div class="grid gap-6 md:grid-cols-2 mt-6">
     <div class="space-y-3 rounded-2xl border border-white/5 bg-black/20 p-5">
-      <h3 class="text-lg font-semibold text-white">👹 Mobs</h3>
+      <h3 class="text-lg font-semibold text-white">👹 Mobs (enemigos/NPCs)</h3>
       <div class="bg-black/30 p-3 rounded-lg text-sm">
-        <pre class="text-orange-200 whitespace-pre-wrap">!mob-crear goblin
-Base → nombre, categoría
-Stats (JSON) → attack, hp, defense, xp
-Drops (JSON) → tabla con pesos</pre>
+        <pre class="text-orange-200 whitespace-pre-wrap">1) Crear mob
+!mob-crear goblin
+Base → Nombre: Goblin, Categoría: enemies
+Stats (JSON): { "attack": 10, "hp": 50, "defense": 3, "xpReward": 25 }
+Drops (JSON): {
+  "draws": 2,
+  "table": [
+    { "type": "coins", "amount": 20, "weight": 10 },
+    { "type": "item",  "itemKey": "leather", "qty": 1, "weight": 5 }
+  ]
+}
+Guardar → ✅ Mob creado</pre>
       </div>
+      <p class="text-slate-300 text-xs">Revisa con <span class="font-mono">!mobs-lista</span> y <span class="font-mono">!mob-eliminar &lt;key&gt;</span> si necesitas limpiar datos de prueba.</p>
     </div>
     <div class="space-y-3 rounded-2xl border border-white/5 bg-black/20 p-5">
       <h3 class="text-lg font-semibold text-white">🛒 Ofertas de Tienda</h3>
       <div class="bg-black/30 p-3 rounded-lg text-sm">
-        <pre class="text-orange-200 whitespace-pre-wrap">!offer-crear
-Base → itemKey, habilitada
-Precio (JSON) → coins y/o items
-Límites → por usuario / stock global
-Ventana → fechas inicio/fin</pre>
+        <pre class="text-orange-200 whitespace-pre-wrap">1) Crear oferta
+!offer-crear
+Base → itemKey: iron_sword, Habilitada: true
+Precio (JSON): { "coins": 100 }
+— o —
+Precio (JSON): {
+  "coins": 50,
+  "items": [ { "itemKey": "iron_ore", "qty": 5 } ]
+}
+Límites → por usuario: 5, stock global: 100
+Ventana → inicio/fin ISO (opcional)
+Guardar → ✅ Oferta guardada</pre>
+      </div>
+      <div class="bg-black/30 p-3 rounded-lg text-xs">
+        <div class="text-orange-200 font-semibold mb-1">Errores comunes</div>
+        <ul class="list-disc pl-5 space-y-1 text-orange-100">
+          <li><span class="font-mono">itemKey</span> no existe → crea el ítem primero</li>
+          <li>Formato de precio inválido → respeta estructura de <span class="font-mono">coins</span> e <span class="font-mono">items</span></li>
+          <li>Ventana inválida → usa fechas ISO: <span class="font-mono">YYYY-MM-DDTHH:MM:SSZ</span></li>
+        </ul>
       </div>
     </div>
   </div>