<!doctype html>
<html lang="en" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', 'Dashboard') · Dewemoji</title>
    <link rel="icon" href="/favicon.ico">
    <link rel="preload" href="/assets/fonts/PlusJakartaSans-Regular.ttf" as="font" type="font/ttf" crossorigin>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
                        display: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
                    },
                    colors: {
                        ink: '#0b0b10',
                        paper: '#f7f6f2',
                        dune: '#e7e1d6',
                        ocean: '#1d4ed8',
                        ember: '#f97316',
                    },
                    boxShadow: {
                        'panel': '0 18px 60px rgba(15, 23, 42, 0.12)',
                    }
                }
            }
        };
    </script>
    <style>
        @font-face {
            font-family: "Plus Jakarta Sans";
            src: url("/assets/fonts/PlusJakartaSans-Regular.ttf") format("truetype");
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "Plus Jakarta Sans";
            src: url("/assets/fonts/PlusJakartaSans-Medium.ttf") format("truetype");
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "Plus Jakarta Sans";
            src: url("/assets/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: "Plus Jakarta Sans";
            src: url("/assets/fonts/PlusJakartaSans-Bold.ttf") format("truetype");
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }
    </style>
</head>
<body class="h-full bg-paper text-slate-900">
@php
    $user = auth()->user();
    $isAdmin = Gate::allows('admin');

    $navUser = [
        ['label' => 'Overview', 'href' => route('dashboard.overview')],
        ['label' => 'Usage', 'href' => route('dashboard.usage')],
        ['label' => 'API Keys', 'href' => route('dashboard.api-keys')],
        ['label' => 'Billing', 'href' => route('dashboard.billing')],
        ['label' => 'Preferences', 'href' => route('dashboard.preferences')],
    ];
    $navAdmin = [
        ['label' => 'Overview', 'href' => route('dashboard.overview')],
        ['label' => 'Users', 'href' => route('dashboard.admin.users')],
        ['label' => 'Subscriptions', 'href' => route('dashboard.admin.subscriptions')],
        ['label' => 'Pricing', 'href' => route('dashboard.admin.pricing')],
        ['label' => 'Webhooks', 'href' => route('dashboard.admin.webhooks')],
        ['label' => 'Settings', 'href' => route('dashboard.admin.settings')],
    ];
    $nav = $isAdmin ? $navAdmin : $navUser;
@endphp

<div class="min-h-screen bg-gradient-to-br from-[#f8f5ef] via-[#f6f7fb] to-[#e8eefc]">
    <div class="mx-auto flex max-w-7xl flex-col lg:flex-row lg:items-start lg:gap-6">
        <aside class="w-full lg:w-72 lg:shrink-0 lg:self-start">
            <div class="p-6 lg:sticky lg:top-6">
                <div class="rounded-3xl bg-white shadow-panel border border-[#e8e3d7] p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-xs uppercase tracking-[0.2em] text-slate-400">Dewemoji</div>
                            <div class="text-2xl font-semibold text-slate-900">Dashboard</div>
                        </div>
                        <span class="rounded-full bg-ink text-paper text-xs px-3 py-1">
                            {{ $isAdmin ? 'Admin' : 'User' }}
                        </span>
                    </div>

                    <div class="mt-6 rounded-2xl bg-[#0f172a] text-white p-4">
                        <div class="text-sm opacity-70">Signed in as</div>
                        <div class="mt-1 font-semibold">
                            {{ $user?->name ?? 'Guest' }}
                        </div>
                        <div class="text-xs opacity-60">
                            {{ $user?->email ?? 'no-session' }}
                        </div>
                    </div>

                    <nav class="mt-6">
                        <div class="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Menu</div>
                        <ul class="mt-4 space-y-2">
                            @foreach ($nav as $item)
                                <li>
                                    <a href="{{ $item['href'] }}"
                                       class="flex items-center justify-between rounded-xl border border-transparent px-3 py-2 text-sm font-medium text-slate-700 transition hover:border-[#d9d3c7] hover:bg-[#f5f1ea]">
                                        <span>{{ $item['label'] }}</span>
                                        <span class="text-xs text-slate-400">→</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </nav>

                    <div class="mt-6 rounded-2xl border border-dashed border-[#d8d2c6] bg-[#faf7f1] p-4 text-sm text-slate-600">
                        <div class="font-semibold text-slate-800">Tip</div>
                        <div class="mt-1">Menu items are shared layout; only the sidebar changes by role.</div>
                    </div>
                </div>
            </div>
        </aside>

        <main class="flex-1 min-w-0 p-6 lg:p-10">
            <div class="rounded-[32px] border border-[#e2deca] bg-white/70 shadow-panel backdrop-blur">
                <div class="border-b border-[#ece7db] p-6 lg:p-8">
                    <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                        <div>
                            <div class="text-xs uppercase tracking-[0.25em] text-slate-400">Workspace</div>
                            <h1 class="mt-2 text-3xl font-semibold text-slate-900">
                                @yield('page_title', 'Dashboard Overview')
                            </h1>
                            <p class="mt-2 text-sm text-slate-600">@yield('page_subtitle', 'Everything you need in one calm, focused place.') </p>
                        </div>
                        <div class="flex gap-2">
                            <button class="rounded-full bg-ink px-5 py-2 text-sm font-semibold text-paper">
                                Quick action
                            </button>
                            <button class="rounded-full border border-[#d9d3c7] px-5 py-2 text-sm font-semibold text-slate-700">
                                Export
                            </button>
                        </div>
                    </div>
                </div>

                <div class="p-6 lg:p-8">
                    @yield('content')
                </div>
            </div>
        </main>
    </div>
</div>
</body>
</html>
