<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo $__env->yieldContent('title', 'Artisanal — Produits Faits Main'); ?> </title>
    <meta name="description" content="<?php echo $__env->yieldContent('description', 'Découvrez nos produits artisanaux faits à la main avec passion.'); ?>">

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Alpine.js CDN -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        serif: ['Playfair Display', 'serif']
                        , sans: ['Inter', 'sans-serif']
                    , }
                    , colors: {
                        primary: {
                            DEFAULT: '#8B5E3C'
                            , light: '#A67C5B'
                            , dark: '#6B4226'
                        }
                        , secondary: {
                            DEFAULT: '#D4A96A'
                            , light: '#E8C99A'
                            , dark: '#B8893A'
                        }
                        , cream: {
                            DEFAULT: '#FDF6EC'
                            , dark: '#F5E8D0'
                        }
                    , }
                , }
            }
        }

    </script>

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
        }

        .font-serif {
            font-family: 'Playfair Display', serif;
        }

        .hero-gradient {
            background: linear-gradient(135deg, #6B4226 0%, #8B5E3C 40%, #D4A96A 100%);
        }

        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(139, 94, 60, 0.2);
        }

        .nav-link {
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #D4A96A;
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .modal-overlay {
            backdrop-filter: blur(4px);
        }

    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body class="bg-cream text-gray-800 antialiased">

    <!-- ── Barre de réseaux sociaux ── -->
    <?php if(isset($socialLinks) && $socialLinks->count()): ?>
    <div class="bg-primary-dark text-white py-2 hidden md:block">
        <div class="max-w-7xl mx-auto px-4 flex justify-between items-center text-sm">
            <span class="opacity-80"><i class="fas fa-leaf mr-1"></i> Produits 100% artisanaux, faits avec amour</span>
            <div class="flex items-center gap-4">
                <?php $__currentLoopData = $socialLinks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $link): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e($link->url); ?>" target="_blank" rel="noopener" class="hover:text-secondary transition-colors" title="<?php echo e($link->platform); ?>">
                    <i class="<?php echo e($link->icon); ?>"></i>
                </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- ── Navigation ── -->
    <nav x-data="{ open: false }" class="bg-white shadow-md sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- Logo -->
                <a href="<?php echo e(route('home')); ?>" class="flex items-center gap-2">
                    <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                        <i class="fas fa-leaf text-white text-lg"></i>
                    </div>
                    <div>
                        <span class="font-serif text-xl font-bold text-primary">ClaupaArt</span>
                        <span class="block text-xs text-gray-500 -mt-1">Fait main avec amour</span>
                    </div>
                </a>
                <!-- Desktop menu -->
                <div class="hidden md:flex items-center gap-8">
                    <a href="<?php echo e(route('home')); ?>" class="nav-link text-gray-700 hover:text-primary font-medium transition-colors py-1 <?php echo e(request()->routeIs('home') ? 'active text-primary' : ''); ?>">
                        Accueil
                    </a>
                    <a href="<?php echo e(route('about')); ?>" class="nav-link text-gray-700 hover:text-primary font-medium transition-colors py-1 <?php echo e(request()->routeIs('about') ? 'active text-primary' : ''); ?>">
                        À propos
                    </a>
                    <a href="<?php echo e(route('products')); ?>" class="nav-link text-gray-700 hover:text-primary font-medium transition-colors py-1 <?php echo e(request()->routeIs('products') ? 'active text-primary' : ''); ?>">
                        Produits
                    </a>
                    <a href="<?php echo e(route('contact')); ?>" class="nav-link text-gray-700 hover:text-primary font-medium transition-colors py-1 <?php echo e(request()->routeIs('contact') ? 'active text-primary' : ''); ?>">
                        Contact
                    </a>
                    <a href="<?php echo e(route('products')); ?>" class="bg-primary text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-primary-dark transition-colors shadow-md hover:shadow-lg">
                        Commander
                    </a>
                </div>

                <!-- Mobile hamburger -->
                <button @click="open = !open" class="md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100">
                    <i class="fas fa-bars text-xl" x-show="!open"></i>
                    <i class="fas fa-times text-xl" x-show="open" x-cloak></i>
                </button>
            </div>
        </div>

        <!-- Mobile menu -->
        <div x-show="open" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="md:hidden bg-white border-t border-gray-100 shadow-lg">
            <div class="px-4 py-4 space-y-3">
                <a href="<?php echo e(route('home')); ?>" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-cream text-gray-700 <?php echo e(request()->routeIs('home') ? 'bg-cream text-primary font-semibold' : ''); ?>">
                    <i class="fas fa-home w-5"></i> Accueil
                </a>
                <a href="<?php echo e(route('about')); ?>" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-cream text-gray-700 <?php echo e(request()->routeIs('about') ? 'bg-cream text-primary font-semibold' : ''); ?>">
                    <i class="fas fa-heart w-5"></i> À propos
                </a>
                <a href="<?php echo e(route('products')); ?>" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-cream text-gray-700 <?php echo e(request()->routeIs('products') ? 'bg-cream text-primary font-semibold' : ''); ?>">
                    <i class="fas fa-shopping-bag w-5"></i> Produits
                </a>
                <a href="<?php echo e(route('contact')); ?>" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-cream text-gray-700 <?php echo e(request()->routeIs('contact') ? 'bg-cream text-primary font-semibold' : ''); ?>">
                    <i class="fas fa-envelope w-5"></i> Contact
                </a>
                <?php if(isset($socialLinks) && $socialLinks->count()): ?>
                <div class="pt-3 border-t border-gray-100 flex gap-4">
                    <?php $__currentLoopData = $socialLinks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $link): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a href="<?php echo e($link->url); ?>" target="_blank" class="text-gray-500 hover:text-primary text-lg">
                        <i class="<?php echo e($link->icon); ?>"></i>
                    </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </nav>

    <!-- ── Notifications flash ── -->
    <?php if(session('success')): ?>
    <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)" class="fixed top-20 right-4 z-50 max-w-md">
        <div class="bg-green-50 border border-green-200 text-green-800 px-5 py-4 rounded-xl shadow-lg flex items-start gap-3">
            <i class="fas fa-check-circle text-green-500 text-xl mt-0.5"></i>
            <div>
                <p class="font-medium">Succès !</p>
                <p class="text-sm mt-0.5"><?php echo e(session('success')); ?></p>
            </div>
            <button @click="show = false" class="ml-auto text-green-400 hover:text-green-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    <?php endif; ?>

    <?php if(session('error')): ?>
    <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)" class="fixed top-20 right-4 z-50 max-w-md">
        <div class="bg-red-50 border border-red-200 text-red-800 px-5 py-4 rounded-xl shadow-lg flex items-start gap-3">
            <i class="fas fa-exclamation-circle text-red-500 text-xl mt-0.5"></i>
            <div>
                <p class="font-medium">Erreur</p>
                <p class="text-sm mt-0.5"><?php echo e(session('error')); ?></p>
            </div>
            <button @click="show = false" class="ml-auto text-red-400 hover:text-red-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    <?php endif; ?>

    <!-- ── Contenu principal ── -->
    <main>
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <!-- ── Footer ── -->
    <footer class="bg-primary-dark text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Brand -->
                <div>
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center">
                            <i class="fas fa-leaf text-white"></i>
                        </div>
                        <span class="font-serif text-xl font-bold">ClaupaArt</span>
                    </div>
                    <p class="text-gray-300 text-sm leading-relaxed">
                        Des produits faits à la main avec passion et savoir-faire, pour apporter authenticité et chaleur dans votre quotidien.
                    </p>
                </div>

                <!-- Navigation rapide -->
                <div>
                    <h3 class="font-serif text-lg font-semibold mb-4 text-secondary">Navigation</h3>
                    <ul class="space-y-2 text-sm text-gray-300">
                        <li><a href="<?php echo e(route('home')); ?>" class="hover:text-secondary transition-colors"><i class="fas fa-chevron-right text-xs mr-2"></i>Accueil</a></li>
                        <li><a href="<?php echo e(route('about')); ?>" class="hover:text-secondary transition-colors"><i class="fas fa-chevron-right text-xs mr-2"></i>À propos</a></li>
                        <li><a href="<?php echo e(route('products')); ?>" class="hover:text-secondary transition-colors"><i class="fas fa-chevron-right text-xs mr-2"></i>Produits</a></li>
                        <li><a href="<?php echo e(route('contact')); ?>" class="hover:text-secondary transition-colors"><i class="fas fa-chevron-right text-xs mr-2"></i>Contact</a></li>
                    </ul>
                </div>

                <!-- Réseaux sociaux & contact -->
                <div>
                    <h3 class="font-serif text-lg font-semibold mb-4 text-secondary">Nous suivre</h3>
                    <?php if(isset($socialLinks) && $socialLinks->count()): ?>
                    <div class="flex flex-wrap gap-3 mb-6">
                        <?php $__currentLoopData = $socialLinks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $link): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <a href="<?php echo e($link->url); ?>" target="_blank" rel="noopener" class="w-10 h-10 bg-white/10 hover:bg-secondary rounded-full flex items-center justify-center transition-all hover:scale-110" title="<?php echo e($link->platform); ?>">
                            <i class="<?php echo e($link->icon); ?>"></i>
                        </a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    <?php endif; ?>
                    <div class="text-sm text-gray-300 space-y-1">
                        <p><i class="fas fa-envelope mr-2 text-secondary"></i>contact@artisanal.ma</p>
                        <p><i class="fas fa-phone mr-2 text-secondary"></i>+225 07 07 07 07 07</p>
                        <p><i class="fas fa-map-marker-alt mr-2 text-secondary"></i>Marcory,Abidjan,Côte d'Ivoire</p>
                    </div>
                </div>
            </div>

            <div class="border-t border-white/10 mt-8 pt-6 flex flex-col sm:flex-row justify-between items-center text-sm text-gray-400">
                <p>&copy; <?php echo e(date('Y')); ?> Artisanal. Tous droits réservés.</p>
                <a href="<?php echo e(route('admin.login')); ?>" class="mt-2 sm:mt-0 hover:text-secondary transition-colors">
                    <i class="fas fa-lock mr-1"></i>Administration
                </a>
            </div>
        </div>
    </footer>

    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH /home/astechc1/public_html/artisanal/resources/views/layouts/app.blade.php ENDPATH**/ ?>