<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', config('app.name', 'Tienda'))</title>

    {{-- Fuentes de Google: Playfair Display (títulos) + Lato (texto) --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

    {{-- Tailwind por CDN con paleta personalizada --}}
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        beige: '#F7F3EE',
                        olive: '#4A5D4D',
                    },
                    fontFamily: {
                        display: ['"Playfair Display"', 'serif'],
                        sans: ['Lato', 'sans-serif'],
                    },
                },
            },
        };
    </script>

    {{-- Alpine.js para interacciones ligeras (menú móvil, etc.) --}}
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <style>body{font-family:'Lato',sans-serif;}</style>
</head>
<body class="bg-beige text-gray-800 antialiased">

    {{-- Cabecera --}}
    <header class="bg-beige/95 backdrop-blur sticky top-0 z-40 border-b border-olive/10" x-data="{open:false}">
        <div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
            <a href="{{ route('store.home') }}" class="font-display text-2xl text-olive">{{ config('app.name', 'Tienda') }}</a>
            <nav class="hidden md:flex items-center gap-8 text-sm">
                <a href="{{ route('store.home') }}" class="hover:text-olive">Inicio</a>
                <a href="{{ route('cart.index') }}" class="hover:text-olive">
                    Carrito ({{ collect(session('cart', []))->sum('quantity') }})
                </a>
            </nav>
            <button @click="open=!open" class="md:hidden text-olive" aria-label="Menú">☰</button>
        </div>
        <div x-show="open" x-cloak class="md:hidden px-4 pb-4 space-y-2">
            <a href="{{ route('store.home') }}" class="block">Inicio</a>
            <a href="{{ route('cart.index') }}" class="block">Carrito</a>
        </div>
    </header>

    {{-- Mensajes flash --}}
    @if(session('success'))
        <div class="bg-olive text-beige text-center py-2 text-sm">{{ session('success') }}</div>
    @endif

    <main>
        @yield('content')
    </main>

    {{-- Pie --}}
    <footer class="bg-olive text-beige mt-16">
        <div class="max-w-7xl mx-auto px-4 py-10 text-center">
            <p class="font-display text-xl">{{ config('app.name', 'Tienda') }}</p>
            <p class="text-sm text-beige/70 mt-2">&copy; {{ date('Y') }}. Todos los derechos reservados.</p>
        </div>
    </footer>

    <style>[x-cloak]{display:none!important;}</style>
</body>
</html>
