@extends('layouts.nova')

@push('head')
    <link rel="canonical" href="{{ $page_canonical ?? url('/categories') }}">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Skinbase">
    <meta property="og:title" content="{{ $page_title ?? 'Categories' }}">
    <meta property="og:description" content="{{ $page_meta_description ?? '' }}">
    <meta property="og:url" content="{{ $page_canonical ?? url('/categories') }}">
    @if(!empty($structured_data ?? null))
        <script type="application/ld+json">{!! json_encode($structured_data, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}</script>
    @endif
@endpush

@section('main-class', '')

@section('content')
    <script id="categories-page-props" type="application/json">
        {!! json_encode([
            'apiUrl' => route('api.categories.index'),
            'pageTitle' => $page_title ?? 'Categories',
            'pageDescription' => $page_meta_description ?? null,
        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!}
    </script>

    <div id="categories-page-root" class="min-h-screen bg-[radial-gradient(circle_at_top,rgba(34,211,238,0.14),transparent_28%),radial-gradient(circle_at_80%_20%,rgba(249,115,22,0.16),transparent_30%),linear-gradient(180deg,#050b13_0%,#09111c_42%,#050913_100%)]">
        <div class="mx-auto flex min-h-[60vh] max-w-7xl items-center justify-center px-6 py-20">
            <div class="flex items-center gap-3 rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm text-white/70 shadow-[0_18px_60px_rgba(0,0,0,0.28)] backdrop-blur">
                <span class="h-2.5 w-2.5 animate-pulse rounded-full bg-cyan-300"></span>
                Loading categories
            </div>
        </div>
    </div>

    @vite(['resources/js/Pages/CategoriesPage.jsx'])
@endsection