<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Support Team - {{ config('app.name', 'ViZuTrade') }}</title>

        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800&display=swap" rel="stylesheet" />

        <script>
            if (
                localStorage.theme === 'dark' ||
                (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
            ) {
                document.documentElement.classList.add('dark');
            }
        </script>

        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <div x-data="{ sidebarOpen: false }" class="min-h-screen bg-slate-50 text-slate-900 transition-colors duration-300 dark:bg-slate-950 dark:text-slate-100">
            <div class="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.14),transparent_32rem)] dark:bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.18),transparent_34rem)]"></div>

            <div x-cloak x-show="sidebarOpen" x-transition.opacity class="fixed inset-0 z-30 bg-slate-900/50 lg:hidden" @click="sidebarOpen = false"></div>

            <aside
                class="fixed inset-y-0 left-0 z-40 flex w-72 -translate-x-full flex-col border-r border-blue-100/80 bg-white/95 shadow-2xl shadow-blue-950/5 backdrop-blur-xl transition-transform duration-300 ease-out lg:translate-x-0 dark:border-blue-900/50 dark:bg-slate-950/95 dark:shadow-black/20"
                :class="{ 'translate-x-0': sidebarOpen }"
            >
                <div class="flex h-16 items-center gap-3 border-b border-blue-100/80 px-6 dark:border-blue-900/50">
                    <a href="{{ route('support-team.dashboard') }}" class="flex min-w-0 items-center">
                        <x-application-logo class="h-10 w-44 drop-shadow-sm" />
                    </a>
                </div>

                <div class="px-4 pt-5">
                    <div class="rounded-lg border border-blue-100 bg-blue-50/70 p-4 dark:border-blue-900/50 dark:bg-blue-950/30">
                        <p class="text-xs font-semibold uppercase tracking-wide text-blue-700 dark:text-blue-300">Support Team</p>
                        <p class="mt-1 text-sm font-semibold text-slate-950 dark:text-white">Ticket workspace</p>
                    </div>
                </div>

                <nav class="min-h-0 flex-1 space-y-2 overflow-y-auto px-4 py-5">
                    <x-sidebar-link :href="route('support-team.dashboard')" :active="request()->routeIs('support-team.dashboard')">
                        {{ __('Dashboard') }}
                    </x-sidebar-link>

                    <x-sidebar-link :href="route('support-team.tickets.index')" :active="request()->routeIs('support-team.tickets.*')">
                        {{ __('Tickets') }}
                    </x-sidebar-link>

                    <x-sidebar-link :href="route('support.create')" :active="false">
                        {{ __('Public Support Form') }}
                    </x-sidebar-link>
                </nav>

                <div class="border-t border-blue-100/80 p-4 dark:border-blue-900/50">
                    <div class="rounded-lg border border-blue-100 bg-white p-4 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                        <p class="text-sm font-semibold text-slate-900 dark:text-white">{{ Auth::user()->name }}</p>
                        <p class="mt-1 truncate text-sm text-slate-600 dark:text-slate-400">{{ Auth::user()->email }}</p>
                    </div>

                    <form method="POST" action="{{ route('logout') }}" class="mt-4">
                        @csrf
                        <button type="submit" class="w-full rounded-lg border border-blue-200 px-4 py-2 text-sm font-semibold text-blue-700 transition hover:bg-blue-50 dark:border-blue-800 dark:text-blue-300 dark:hover:bg-blue-950/60">
                            {{ __('Log Out') }}
                        </button>
                    </form>
                </div>
            </aside>

            <div class="relative lg:pl-72">
                <header class="sticky top-0 z-20 border-b border-blue-100/80 bg-white/85 backdrop-blur-xl transition-colors duration-300 dark:border-blue-900/50 dark:bg-slate-950/80">
                    <div class="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
                        <div class="flex items-center gap-3">
                            <button type="button" class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-blue-100 text-blue-700 transition hover:bg-blue-50 lg:hidden dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60" @click="sidebarOpen = true" aria-label="Open sidebar">
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75Zm0 5A.75.75 0 0 1 2.75 9h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 9.75Zm0 5A.75.75 0 0 1 2.75 14h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 14.75Z" clip-rule="evenodd" />
                                </svg>
                            </button>

                            <div>
                                <p class="text-sm font-medium text-slate-500 dark:text-slate-400">{{ __('Welcome back') }}</p>
                                <h1 class="text-lg font-bold text-slate-950 dark:text-white">{{ Auth::user()->name }}</h1>
                            </div>
                        </div>

                        <x-theme-toggle class="bg-transparent shadow-none" />
                    </div>
                </header>

                @isset($header)
                    <section class="border-b border-blue-100/80 bg-white/70 backdrop-blur transition-colors duration-300 dark:border-blue-900/50 dark:bg-slate-950/40">
                        <div class="px-4 py-6 sm:px-6 lg:px-8">
                            {{ $header }}
                        </div>
                    </section>
                @endisset

                <main class="px-4 py-8 sm:px-6 lg:px-8">
                    @if (session('success'))
                        <div class="mb-6 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200">
                            {{ session('error') }}
                        </div>
                    @endif

                    {{ $slot }}
                </main>
            </div>
        </div>
    </body>
</html>
