<!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>{{ $title ?? config('app.name', 'Blog') }}</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=playfair-display:400,500,600,700|dm-sans:300,400,500,600,700&display=swap" rel="stylesheet" />
    
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <style>
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="antialiased bg-stone-50 text-stone-900 min-h-screen">
    <!-- Navigation -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-xl border-b border-stone-200/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16 lg:h-20">
                <!-- Logo -->
                <a href="{{ route('home') }}" class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                        </svg>
                    </div>
                    <span class="font-serif text-xl lg:text-2xl font-semibold tracking-tight">Muse</span>
                </a>
                
                <!-- Desktop Navigation -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="{{ route('home') }}" class="text-sm font-medium text-stone-600 hover:text-stone-900 transition-colors">首页</a>
                    @php
                        $navCategories = \App\Models\Category::active()->ordered()->take(4)->get();
                    @endphp
                    @foreach($navCategories as $cat)
                        <a href="{{ route('category', $cat) }}" class="text-sm font-medium text-stone-600 hover:text-stone-900 transition-colors">{{ $cat->name }}</a>
                    @endforeach
                </div>
                
                <!-- Search -->
                <div class="flex items-center space-x-4">
                    <form action="{{ route('search') }}" method="GET" class="relative hidden sm:block">
                        <input type="text" name="q" placeholder="搜索文章..." value="{{ request('q') }}"
                            class="w-48 lg:w-64 pl-10 pr-4 py-2 text-sm bg-stone-100 border-0 rounded-full focus:ring-2 focus:ring-fuchsia-500/50 focus:bg-white transition-all">
                        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </form>
                    
                    <!-- Mobile Menu Button -->
                    <button type="button" class="md:hidden p-2 rounded-lg hover:bg-stone-100 transition-colors" 
                            onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden border-t border-stone-200/50 bg-white">
            <div class="px-4 py-4 space-y-3">
                <form action="{{ route('search') }}" method="GET" class="relative sm:hidden">
                    <input type="text" name="q" placeholder="搜索文章..." value="{{ request('q') }}"
                        class="w-full pl-10 pr-4 py-2.5 text-sm bg-stone-100 border-0 rounded-full focus:ring-2 focus:ring-fuchsia-500/50">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </form>
                <a href="{{ route('home') }}" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-stone-50 rounded-lg">首页</a>
                @foreach($navCategories as $cat)
                    <a href="{{ route('category', $cat) }}" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-stone-50 rounded-lg">{{ $cat->name }}</a>
                @endforeach
            </div>
        </div>
    </nav>
    
    <!-- Main Content -->
    <main class="pt-16 lg:pt-20">
        {{ $slot }}
    </main>
    
    <!-- Footer -->
    <footer class="bg-stone-900 text-stone-300 mt-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
                <!-- Brand -->
                <div class="col-span-1 md:col-span-2">
                    <a href="{{ route('home') }}" class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                            </svg>
                        </div>
                        <span class="font-serif text-xl font-semibold text-white">Muse</span>
                    </a>
                    <p class="text-stone-400 max-w-md">
                        记录生活中的美好瞬间，分享独特的视角与思考。每一篇文章都是一次心灵的旅行。
                    </p>
                </div>
                
                <!-- Categories -->
                <div>
                    <h4 class="text-white font-semibold mb-4">分类</h4>
                    <ul class="space-y-2">
                        @foreach($navCategories as $cat)
                            <li>
                                <a href="{{ route('category', $cat) }}" class="text-stone-400 hover:text-white transition-colors">{{ $cat->name }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                
                <!-- Links -->
                <div>
                    <h4 class="text-white font-semibold mb-4">链接</h4>
                    <ul class="space-y-2">
                        <li><a href="{{ route('home') }}" class="text-stone-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="/admin" class="text-stone-400 hover:text-white transition-colors">管理后台</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-stone-800 mt-12 pt-8 text-center text-stone-500 text-sm">
                <p>&copy; {{ date('Y') }} Muse Blog. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

