{% extends "base.html" %}

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

{% block content %}
<div class="space-y-6">
  <section class="rounded-3xl bg-gradient-to-r from-violet-600 via-fuchsia-600 to-pink-500 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-violet-100">Premium</p>
        <h3 class="mt-2 text-3xl font-bold">Executive overview</h3>
      </div>
      <button class="rounded-2xl bg-white/10 px-4 py-2 text-sm font-medium text-white ring-1 ring-white/20">Ver estrategia</button>
    </div>
  </section>

  <section class="grid gap-4 md:grid-cols-4">
    <article class="rounded-3xl border border-violet-100 bg-gradient-to-br from-violet-50 to-white p-5 shadow-soft"><p class="text-sm text-violet-700">Revenue</p><p class="mt-4 text-3xl font-bold text-slate-900">$92.4K</p><p class="mt-2 text-sm text-emerald-600">+24.8%</p></article>
    <article class="rounded-3xl border border-pink-100 bg-gradient-to-br from-pink-50 to-white p-5 shadow-soft"><p class="text-sm text-pink-700">Orders</p><p class="mt-4 text-3xl font-bold text-slate-900">214</p><p class="mt-2 text-sm text-pink-600">+13.1%</p></article>
    <article class="rounded-3xl border border-sky-100 bg-gradient-to-br from-sky-50 to-white p-5 shadow-soft"><p class="text-sm text-sky-700">Retention</p><p class="mt-4 text-3xl font-bold text-slate-900">89%</p><p class="mt-2 text-sm text-blue-600">+4.5%</p></article>
    <article class="rounded-3xl border border-emerald-100 bg-gradient-to-br from-emerald-50 to-white p-5 shadow-soft"><p class="text-sm text-emerald-700">NPS</p><p class="mt-4 text-3xl font-bold text-slate-900">72</p><p class="mt-2 text-sm text-emerald-600">Excelente</p></article>
  </section>

  <section class="grid gap-6 xl:grid-cols-[1.3fr_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">Performance</h4><span class="rounded-full bg-violet-100 px-3 py-1 text-xs font-medium text-violet-700">Q3</span></div>
      <div class="grid h-52 grid-cols-7 items-end gap-3">
        <div class="rounded-t-2xl bg-violet-200" style="height: 40%;"></div>
        <div class="rounded-t-2xl bg-violet-300" style="height: 55%;"></div>
        <div class="rounded-t-2xl bg-violet-400" style="height: 60%;"></div>
        <div class="rounded-t-2xl bg-violet-500" style="height: 75%;"></div>
        <div class="rounded-t-2xl bg-violet-600" style="height: 90%;"></div>
        <div class="rounded-t-2xl bg-violet-700" style="height: 80%;"></div>
        <div class="rounded-t-2xl bg-violet-800" style="height: 95%;"></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">Top clientes</h4>
      <div class="mt-5 space-y-4">
        <div class="flex items-center justify-between rounded-2xl bg-slate-50 p-3"><span class="font-medium text-slate-900">Andrea Ruiz</span><span class="text-sm text-slate-500">$8.4K</span></div>
        <div class="flex items-center justify-between rounded-2xl bg-slate-50 p-3"><span class="font-medium text-slate-900">Lina Gómez</span><span class="text-sm text-slate-500">$7.6K</span></div>
        <div class="flex items-center justify-between rounded-2xl bg-slate-50 p-3"><span class="font-medium text-slate-900">Grupo Sol</span><span class="text-sm text-slate-500">$6.7K</span></div>
      </div>
    </article>
  </section>
</div>
{% endblock %}