{% extends "base.html" %}

{% block title %}Productos | Sublimaciones Matiguan{% endblock %}

{% block content %}
<div class="space-y-6">
  <section class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
    <div>
      <p class="text-sm font-medium uppercase tracking-[0.18em] text-amber-600">Productos</p>
      <h3 class="mt-2 text-3xl font-bold tracking-tight text-slate-900">Catálogo y variantes</h3>
    </div>
    <button class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-amber-500 to-orange-500 px-4 py-2.5 text-sm font-medium text-white shadow-lg shadow-amber-500/20 transition hover:translate-y-[-1px]">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8h-16" />
      </svg>
      Nuevo producto
    </button>
  </section>

  <section class="grid gap-4 md:grid-cols-3">
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Productos</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">132</p>
      <p class="mt-2 text-sm text-emerald-600">+15% en catálogo</p>
    </article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Variantes</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">204</p>
      <p class="mt-2 text-sm text-blue-600">12 nuevas esta semana</p>
    </article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <p class="text-sm text-slate-500">Más vendidos</p>
      <p class="mt-4 text-3xl font-bold text-slate-900">34</p>
      <p class="mt-2 text-sm text-violet-600">Top por demanda</p>
    </article>
  </section>

  <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
    <div class="flex items-center justify-between border-b border-slate-200 pb-4">
      <h4 class="text-xl font-bold text-slate-900">Productos destacados</h4>
      <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">Catálogo activo</span>
    </div>

    <div class="mt-4 space-y-3">
      <div class="grid grid-cols-4 gap-4 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
        <span class="font-semibold text-slate-900">Camiseta premium</span>
        <span>Poliéster</span>
        <span>30x40 cm</span>
        <span class="text-right">$24.900</span>
      </div>
      <div class="grid grid-cols-4 gap-4 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
        <span class="font-semibold text-slate-900">Vaso térmico</span>
        <span>Acero</span>
        <span>250 ml</span>
        <span class="text-right">$18.500</span>
      </div>
      <div class="grid grid-cols-4 gap-4 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
        <span class="font-semibold text-slate-900">Llavero</span>
        <span>Metal</span>
        <span>6 cm</span>
        <span class="text-right">$6.200</span>
      </div>
    </div>
  </section>
</div>
{% endblock %}