<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'ChatSell OS')</title>
    <meta name="description" content="@yield('metaDescription', 'One place for all your sales conversations. Turn Instagram and WhatsApp leads into quotes and orders.')">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @vite('resources/js/app.tsx')
    @stack('styles')
</head>
<body class="min-h-screen bg-slate-950 text-white antialiased">
    <div class="mx-auto flex min-h-screen max-w-[1440px] flex-col px-4 sm:px-6 lg:px-8">
        <header class="sticky top-0 z-50 border-b border-white/10 bg-slate-950/90 backdrop-blur-md">
            <nav class="flex h-16 items-center justify-between gap-4">
                <a href="{{ route('home') }}" class="flex items-center gap-3 rounded-xl py-2 pr-3 transition hover:opacity-90">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/20 text-sm font-bold text-emerald-400 ring-1 ring-emerald-400/30">
                        CS
                    </div>
                    <div>
                        <span class="text-sm font-semibold uppercase tracking-wider text-white">ChatSell OS</span>
                        <span class="mt-0.5 block text-xs text-slate-400">Sell more from chat</span>
                    </div>
                </a>

                <div class="flex items-center gap-2 sm:gap-4">
                    <a href="{{ route('tutorial') }}" class="rounded-xl px-3 py-2.5 text-sm font-medium text-slate-300 transition hover:bg-white/5 hover:text-white sm:px-4 {{ request()->routeIs('tutorial') ? 'bg-white/10 text-white' : '' }}">
                        Tutorial
                    </a>
                    <a href="{{ route('login') }}" class="rounded-xl px-3 py-2.5 text-sm font-semibold text-slate-300 transition hover:bg-white/5 hover:text-white sm:px-4">
                        Sign in
                    </a>
                    <a href="{{ route('register') }}" class="rounded-xl bg-emerald-500 px-4 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-emerald-400">
                        Start free
                    </a>
                </div>
            </nav>
        </header>

        <main class="flex-1">
            @yield('content')
        </main>

        <footer class="border-t border-white/10 py-6 text-center text-sm text-slate-500">
            <a href="{{ route('home') }}" class="hover:text-slate-400">ChatSell OS</a>
            <span class="mx-2">·</span>
            <a href="{{ route('tutorial') }}" class="hover:text-slate-400">Tutorial</a>
            <span class="mx-2">·</span>
            <a href="{{ route('login') }}" class="hover:text-slate-400">Sign in</a>
            <span class="mx-2">·</span>
            <a href="{{ route('register') }}" class="hover:text-slate-400">Start free</a>
        </footer>
    </div>
</body>
</html>
