<!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>{{ config('app.name', 'Maison') }}</title>

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=cormorant-garamond:400,500,600,700i&display=swap" rel="stylesheet" />
    <link href="https://fonts.bunny.net/css?family=dm-sans:300,400,500&display=swap" rel="stylesheet" />

    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        :root {
            --charcoal:    #1a1814;
            --ink:         #2c2820;
            --warm-gray:   #6b6560;
            --mist:        #c8c2b8;
            --cream:       #f4f0e8;
            --ivory:       #faf8f4;
            --amber:       #c8883a;
            --amber-light: #e8a84a;
            --terracotta:  #b85c38;
            --sage:        #6b7c6b;
            --success:     #4a7c59;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--ivory);
            color: var(--ink);
            font-size: 15px;
            line-height: 1.6;
        }

        .serif { font-family: 'Cormorant Garamond', Georgia, serif; }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--cream); }
        ::-webkit-scrollbar-thumb { background: var(--mist); border-radius: 3px; }

        /* Page fade-in */
        @keyframes pageReveal {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        main { animation: pageReveal 0.5s ease-out; }

        /* Alert animations */
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .alert-animate { animation: slideDown 0.4s ease-out; }
        [x-cloak] { display: none !important; }
    </style>
</head>
<body>
    <div class="min-h-screen" style="background: var(--ivory);">
        @include('layouts.navigation')

        @isset($header)
        <header style="background: var(--charcoal); border-bottom: 1px solid rgba(255,255,255,0.06);">
            <div class="max-w-7xl mx-auto py-5 px-4 sm:px-6 lg:px-8">
                {{ $header }}
            </div>
        </header>
        @endisset

        <main>{{ $slot }}</main>

        <!-- Footer -->
        <footer style="background: var(--charcoal); color: var(--mist); margin-top: 6rem; padding: 3rem 0 2rem;">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 2.5rem; margin-bottom: 1.5rem;">
                    <div>
                        <div class="serif" style="font-size: 1.8rem; color: var(--cream); letter-spacing: 0.08em; font-weight: 600; margin-bottom: 0.5rem;">MAISON</div>
                        <p style="font-size: 0.8rem; color: var(--warm-gray); max-width: 240px; line-height: 1.8;">
                            Curated goods for the discerning eye. Quality above all.
                        </p>
                    </div>
                    <div style="display: flex; gap: 3rem; flex-wrap: wrap;">
                        <div>
                            <div style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--amber); font-weight: 500; margin-bottom: 1rem;">Shop</div>
                            <ul style="list-style: none; space-y: 0.5rem;">
                                <li style="margin-bottom: 0.5rem;"><a href="{{ route('home') }}" style="color: var(--mist); text-decoration: none; font-size: 0.875rem; transition: color 0.2s;" onmouseover="this.style.color='var(--cream)'" onmouseout="this.style.color='var(--mist)'">All Products</a></li>
                                <li style="margin-bottom: 0.5rem;"><a href="{{ route('cart.index') }}" style="color: var(--mist); text-decoration: none; font-size: 0.875rem; transition: color 0.2s;" onmouseover="this.style.color='var(--cream)'" onmouseout="this.style.color='var(--mist)'">Cart</a></li>
                            </ul>
                        </div>
                        <div>
                            <div style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--amber); font-weight: 500; margin-bottom: 1rem;">Account</div>
                            <ul style="list-style: none;">
                                @auth
                                <li style="margin-bottom: 0.5rem;"><a href="{{ route('order.index') }}" style="color: var(--mist); text-decoration: none; font-size: 0.875rem;" onmouseover="this.style.color='var(--cream)'" onmouseout="this.style.color='var(--mist)'">My Orders</a></li>
                                <li style="margin-bottom: 0.5rem;"><a href="{{ route('profile.edit') }}" style="color: var(--mist); text-decoration: none; font-size: 0.875rem;" onmouseover="this.style.color='var(--cream)'" onmouseout="this.style.color='var(--mist)'">Profile</a></li>
                                @else
                                <li style="margin-bottom: 0.5rem;"><a href="{{ route('login') }}" style="color: var(--mist); text-decoration: none; font-size: 0.875rem;" onmouseover="this.style.color='var(--cream)'" onmouseout="this.style.color='var(--mist)'">Log In</a></li>
                                <li style="margin-bottom: 0.5rem;"><a href="{{ route('register') }}" style="color: var(--mist); text-decoration: none; font-size: 0.875rem;" onmouseover="this.style.color='var(--cream)'" onmouseout="this.style.color='var(--mist)'">Register</a></li>
                                @endauth
                            </ul>
                        </div>
                    </div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
                    <p style="font-size: 0.75rem; color: var(--warm-gray);">© {{ date('Y') }} Maison. All rights reserved.</p>
                    <p style="font-size: 0.75rem; color: var(--warm-gray);">Crafted with care.</p>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>