<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'ChatSell OS' }}</title>
    @vite('resources/js/app.tsx')
</head>
<body class="min-h-screen bg-slate-100 text-slate-900">
    <div class="min-h-screen">
        <header class="border-b border-slate-200 bg-white">
            <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-600">ChatSell OS</p>
                    <h1 class="text-lg font-semibold">{{ auth()->user()->tenant->company_name }}</h1>
                </div>

                <div class="flex items-center gap-3 text-sm text-slate-600">
                    <span>{{ auth()->user()->full_name }}</span>

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button class="rounded-lg border border-slate-300 px-3 py-2 font-medium text-slate-700 hover:bg-slate-50">
                            Log out
                        </button>
                    </form>
                </div>
            </div>
        </header>

        <div class="mx-auto grid max-w-7xl grid-cols-1 gap-6 px-6 py-8 lg:grid-cols-[240px_minmax(0,1fr)]">
            <aside class="rounded-2xl bg-slate-900 p-5 text-sm text-slate-300">
                <nav class="space-y-2">
                    <a href="{{ route('dashboard') }}" class="block rounded-lg px-3 py-2 hover:bg-slate-800">Dashboard</a>
                    <a href="{{ route('onboarding.show') }}" class="block rounded-lg px-3 py-2 hover:bg-slate-800">Onboarding</a>
                </nav>
            </aside>

            <main class="space-y-6">
                @if (session('status'))
                    <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
                        {{ session('status') }}
                    </div>
                @endif

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