{% extends "admin_base.html" %}

{% block page_title %}Catalog{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-7xl space-y-6 px-4 py-5 sm:px-6 lg:py-8">
    <header class="rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7">
        <p class="text-sm font-semibold uppercase tracking-wide text-brand">Store management</p>
        <h1 class="mt-2 text-2xl font-bold text-foreground sm:text-3xl">Catalog</h1>
        <p class="mt-2 max-w-2xl text-sm leading-6 text-muted sm:text-base">Manage products and organize the way customers browse your store.</p>
    </header>

    <nav class="grid gap-4 md:grid-cols-3" aria-label="Catalog management">
        <a href="/plugins/catalog/products" class="group flex min-h-44 flex-col rounded-2xl border border-divider bg-surface p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-brand hover:shadow-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand sm:p-6">
            <span class="grid size-12 place-items-center rounded-xl bg-brand/10 text-xl text-brand"><i class="fas fa-box" aria-hidden="true"></i></span>
            <span class="mt-4 text-lg font-semibold text-foreground">Products</span>
            <span class="mt-1 text-sm leading-5 text-muted">Add products, update prices and variants, and control storefront visibility.</span>
            <span class="mt-auto pt-4 text-sm font-semibold text-brand">Manage products <span aria-hidden="true">→</span></span>
        </a>
        <a href="/plugins/catalog/categories" class="group flex min-h-44 flex-col rounded-2xl border border-divider bg-surface p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-brand hover:shadow-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand sm:p-6">
            <span class="grid size-12 place-items-center rounded-xl bg-brand/10 text-xl text-brand"><i class="fas fa-tags" aria-hidden="true"></i></span>
            <span class="mt-4 text-lg font-semibold text-foreground">Categories</span>
            <span class="mt-1 text-sm leading-5 text-muted">Build a clear category tree so customers can find products quickly.</span>
            <span class="mt-auto pt-4 text-sm font-semibold text-brand">Manage categories <span aria-hidden="true">→</span></span>
        </a>
        <a href="/plugins/catalog/collections" class="group flex min-h-44 flex-col rounded-2xl border border-divider bg-surface p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-brand hover:shadow-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand sm:p-6">
            <span class="grid size-12 place-items-center rounded-xl bg-brand/10 text-xl text-brand"><i class="fas fa-layer-group" aria-hidden="true"></i></span>
            <span class="mt-4 text-lg font-semibold text-foreground">Collections</span>
            <span class="mt-1 text-sm leading-5 text-muted">Group related products for seasonal, featured, or curated storefront pages.</span>
            <span class="mt-auto pt-4 text-sm font-semibold text-brand">Manage collections <span aria-hidden="true">→</span></span>
        </a>
    </nav>
</main>
{% endblock %}