{% extends "base.html" %}

{% block title %}Dashboard Corporativo | Sublimaciones Matiguan{% endblock %}

{% block content %}
<div class="space-y-6">
  <section class="rounded-3xl bg-gradient-to-r from-blue-600 to-indigo-600 p-6 text-white shadow-soft">
    <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div>
        <p class="text-sm uppercase tracking-[0.18em] text-blue-100">Panel corporativo</p>
        <h3 class="mt-2 text-3xl font-bold">Dashboard operativo</h3>
      </div>
      <button class="rounded-2xl bg-white/10 px-4 py-2 text-sm font-medium text-white ring-1 ring-white/20">Exportar reporte</button>
    </div>
  </section>

  <section class="grid gap-4 md:grid-cols-4">
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><p class="text-sm text-slate-500">Ingresos</p><p class="mt-4 text-3xl font-bold text-slate-900">$48.2K</p><p class="mt-2 text-sm text-emerald-600">+18.2%</p></article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><p class="text-sm text-slate-500">Clientes</p><p class="mt-4 text-3xl font-bold text-slate-900">486</p><p class="mt-2 text-sm text-blue-600">+12%</p></article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><p class="text-sm text-slate-500">Pedidos</p><p class="mt-4 text-3xl font-bold text-slate-900">128</p><p class="mt-2 text-sm text-violet-600">+9.3%</p></article>
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><p class="text-sm text-slate-500">Producción</p><p class="mt-4 text-3xl font-bold text-slate-900">95%</p><p class="mt-2 text-sm text-amber-600">Meta cumplida</p></article>
  </section>

  <section class="grid gap-6 xl:grid-cols-[1.5fr_1fr]">
    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <div class="mb-6 flex items-center justify-between"><h4 class="text-xl font-bold text-slate-900">Ventas por semana</h4><span class="text-xs text-slate-500">Últimos 7 días</span></div>
      <div class="flex h-52 items-end gap-3">
        <div class="flex-1 rounded-t-2xl bg-blue-500/80" style="height: 42%;"></div>
        <div class="flex-1 rounded-t-2xl bg-blue-500/80" style="height: 52%;"></div>
        <div class="flex-1 rounded-t-2xl bg-blue-600" style="height: 68%;"></div>
        <div class="flex-1 rounded-t-2xl bg-blue-500" style="height: 75%;"></div>
        <div class="flex-1 rounded-t-2xl bg-indigo-500" style="height: 88%;"></div>
        <div class="flex-1 rounded-t-2xl bg-blue-500" style="height: 62%;"></div>
        <div class="flex-1 rounded-t-2xl bg-blue-700" style="height: 92%;"></div>
      </div>
    </article>

    <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <h4 class="text-xl font-bold text-slate-900">Tareas pendientes</h4>
      <div class="mt-5 space-y-4">
        <div class="rounded-2xl bg-slate-50 p-3"><p class="font-medium text-slate-900">Revisión de stock</p><p class="text-sm text-slate-500">Hoy · 3 materiales</p></div>
        <div class="rounded-2xl bg-slate-50 p-3"><p class="font-medium text-slate-900">Entrega por pagar</p><p class="text-sm text-slate-500">Mañana · 5 clientes</p></div>
        <div class="rounded-2xl bg-slate-50 p-3"><p class="font-medium text-slate-900">Producción grupo Norte</p><p class="text-sm text-slate-500">Viernes · 120 piezas</p></div>
      </div>
    </article>
  </section>
</div>
{% endblock %}