<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Boutique - {{ $siteName ?? 'ATARA' }} | Le bijou qui paie vos rêves</title>
    <link rel="icon" type="image/x-icon" href="{{ $siteFavicon ?? asset('favicon.ico') }}">
    
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <style>
        :root {
            --primary: #10b981;
            --primary-dark: #059669;
            --secondary: #14233c;
            --accent: #F59E0B;
            --purple: #8B5CF6;
        }

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

        body {
            font-family: 'Poppins', sans-serif;
            background: #f9fafb;
        }

        h1, h2, h3 {
            font-family: 'Playfair Display', serif;
        }

        /* HEADER aligné avec home (layout), couleurs boutique */
        .header-section {
            background: linear-gradient(135deg, var(--secondary), #1e3a5f);
        }

        .header-top-area {
            background: rgba(0,0,0,0.2);
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .header-social {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 15px;
        }

        .header-social a {
            color: #fff;
            font-size: 14px;
            transition: color 0.3s;
        }

        .header-social a:hover {
            color: var(--accent);
        }

        .header-bottom-area {
            padding: 6px 0;
            background: #fff;
        }

        .site-logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem;
            font-weight: 800;
            color: #000;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        @media (max-width: 1200px) {
            .site-logo {
                font-size: 1.3rem;
            }
        }

        @media (max-width: 768px) {
            .site-logo {
                font-size: 1.1rem;
            }
        }

        @media (max-width: 576px) {
            .site-logo {
                font-size: 0.9rem;
            }
        }

        .site-logo i {
            color: #000;
        }

        .navbar {
            padding: 0;
            flex-direction: row !important;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .navbar-collapse {
            width: 100%;
            justify-content: center;
            order: 3;
        }

        .main-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 6px;
            justify-content: space-between;
            width: 100%;
        }

        .main-menu li {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .main-menu a {
            color: #000;
            text-decoration: none;
            padding: 7px 12px;
            border-radius: 6px;
            transition: all 0.3s;
            font-weight: 500;
            text-transform: uppercase;
            font-size: 0.8rem;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 30px;
        }

        @media (max-width: 768px) {
            .main-menu a {
                padding: 5px 10px;
                font-size: 0.7rem;
                min-height: 28px;
            }
        }

        @media (max-width: 576px) {
            .main-menu a {
                padding: 4px 8px;
                font-size: 0.65rem;
                min-height: 26px;
            }
        }

        .main-menu a:hover {
            background: #fff;
            border-color: #000;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .main-menu a.active {
            background: #000;
            color: #fff;
            border-color: #000;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .header-action {
            display: flex;
            gap: 0;
            align-items: center;
        }

        .auth-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 0 25px;
        }

        .auth-section:first-child {
            border-right: 3px solid #000;
        }

        .auth-section-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #000;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-decoration: underline;
        }

        .auth-buttons {
            display: flex;
            gap: 15px;
        }

        .btn-auth {
            background: transparent;
            color: #000;
            padding: 8px 20px;
            border: 2px solid #000;
            border-radius: 50px;
            text-decoration: underline;
            font-weight: 700;
            transition: all 0.3s;
            display: inline-block;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        @media (max-width: 576px) {
            .btn-auth {
                padding: 6px 15px;
                font-size: 0.8rem;
            }
        }

        .btn-auth:hover {
            background: rgba(0,0,0,0.05);
            color: #000;
        }

        /* Bouton Panier Header */
        .cart-section {
            display: flex;
            align-items: center;
        }

        .cart-btn-header {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 50%;
            color: #fff;
            font-size: 1.2rem;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }

        .cart-btn-header:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
            color: #fff;
        }

        .cart-badge-header {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: #fff;
            font-size: 0.7rem;
            font-weight: 700;
            min-width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff;
        }

        .navbar-toggler {
            border-color: rgba(255,255,255,0.3);
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        @media (max-width: 991px) {
            .main-menu {
                flex-direction: column;
                gap: 10px;
                padding: 15px 0;
            }

            .main-menu a {
                padding: 5px 0;
            }

            .header-action {
                flex-direction: column;
                margin-top: 15px;
                width: 100%;
            }

            .auth-section {
                width: 100%;
                padding: 15px 0;
                border-right: none !important;
                border-bottom: 2px solid #000;
            }

            .auth-section:last-child {
                border-bottom: none;
            }

            .navbar-toggler {
                border-color: rgba(0, 0, 0, 0.3);
            }

            .navbar-toggler-icon {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
            }
        }

        .btn--base {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            padding: 12px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            transition: all 0.3s;
            border: none;
        }

        .btn--base:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
            color: #fff;
        }

        /* HERO HEADER */
        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 100px 0 120px;
            color: #fff;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            top: -300px;
            right: -200px;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(10deg); }
        }

        .page-header h1 {
            font-size: 4rem;
            font-weight: 900;
            position: relative;
            z-index: 2;
            text-shadow: 0 4px 20px rgba(0,0,0,0.2);
            margin-bottom: 20px;
        }

        .page-header p {
            font-size: 1.3rem;
            position: relative;
            z-index: 2;
            opacity: 0.95;
        }

        /* SHOP SECTION */
        .shop-section {
            padding: 80px 0;
            margin-top: -60px;
            position: relative;
            z-index: 10;
        }

        /* SEARCH BAR MODERNE */
        .search-box {
            background: #fff;
            border-radius: 60px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
            padding: 10px;
            margin-bottom: 40px;
        }

        .search-box form {
            display: flex;
            align-items: center;
        }

        .search-box input {
            border: none;
            outline: none;
            flex: 1;
            padding: 15px 25px;
            font-size: 1.1rem;
            border-radius: 50px;
            background: transparent;
        }

        .search-box button {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            border: none;
            padding: 15px 35px;
            border-radius: 50px;
            font-weight: 700;
            transition: all 0.3s;
        }

        .search-box button:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
        }

        /* CATEGORY FILTER SIDEBAR */
        .category-filter {
            background: #fff;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            position: sticky;
            top: 20px;
        }

        .category-filter h4 {
            font-size: 1.5rem;
            margin-bottom: 25px;
            color: var(--secondary);
            font-weight: 700;
        }

        .category-filter h4 i {
            color: var(--primary);
            margin-right: 10px;
        }

        .category-item {
            padding: 15px 20px;
            border-radius: 12px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid transparent;
            text-decoration: none;
            color: #64748b;
            font-weight: 500;
        }

        .category-item:hover, .category-item.active {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
        }

        .category-item .badge {
            background: rgba(0,0,0,0.1);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
        }

        .category-item:hover .badge, .category-item.active .badge {
            background: rgba(255,255,255,0.3);
        }

        /* PRODUCT CARDS ULTRA MODERNES */
        .product-card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.06);
            transition: all 0.4s;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        }

        .product-image {
            height: 300px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .product-card:hover .product-image img {
            transform: scale(1.15) rotate(2deg);
        }

        .product-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(10px);
            color: var(--primary);
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .product-body {
            padding: 25px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .product-category {
            color: var(--primary);
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        /* Badge vendeur partenaire */
        .seller-badge {
            display: inline-flex;
            align-items: center;
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            color: #92400e;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            border: 1px solid #f59e0b;
        }
        
        .seller-badge i.fa-store {
            color: #f59e0b;
        }
        
        .seller-badge strong {
            color: #78350f;
            margin-left: 2px;
        }

        .product-title {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--secondary);
            line-height: 1.3;
        }

        .product-price {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 20px;
            font-family: 'Playfair Display', serif;
        }

        .product-actions {
            margin-top: auto;
        }

        .btn-add-cart {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            border: none;
            padding: 12px 25px;
            border-radius: 50px;
            font-weight: 700;
            transition: all 0.3s;
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-add-cart:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
        }

        /* NAVBAR TOGGLE */
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        /* EMPTY STATE */
        .empty-state {
            text-align: center;
            padding: 80px 20px;
        }

        .empty-state i {
            font-size: 5rem;
            color: #cbd5e1;
            margin-bottom: 25px;
        }

        .empty-state h3 {
            font-size: 2rem;
            color: var(--secondary);
            margin-bottom: 15px;
        }

        /* FOOTER */
        footer {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: #cbd5e1;
            padding: 60px 0 30px;
            margin-top: 80px;
        }

        footer h5 {
            color: #fff;
            font-size: 1.3rem;
            margin-bottom: 20px;
        }

        footer a {
            color: #94a3b8;
            text-decoration: none;
            transition: all 0.3s;
            display: inline-block;
        }

        footer a:hover {
            color: var(--accent);
            transform: translateX(5px);
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            width: 45px;
            height: 45px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .social-links a:hover {
            background: var(--primary);
            transform: translateY(-5px) rotate(5deg);
        }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .page-header h1 {
                font-size: 2.5rem;
            }
            
            .product-image {
                height: 220px;
            }

            .search-box form {
                flex-direction: column;
                gap: 10px;
            }

            .search-box button {
                width: 100%;
            }
        }

        .alert {
            border-radius: 15px;
            border: none;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
    </style>
</head>

<body>

    <header class="header-section">
        <div class="header">
            <div class="header-top-area">
                <div class="container">
                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                        <div class="header-top-left">
                            <div class="social-area">
                                <ul class="header-social">
                                    <li><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                                    <li><a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="header-bottom-area">
                <div class="container">
                    <nav class="navbar navbar-expand-lg">
                        <a class="site-logo" href="{{ url('/') }}">
                            @if(!empty($siteLogo))<img src="{{ $siteLogo }}" alt="{{ $siteName ?? 'ATARA' }}" height="{{ $siteLogoHeight ?? 40 }}">@endif
                            @if($showLogoText)<span>{{ $siteName ?? 'ATARA' }}</span>@endif
                        </a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="navbar-collapse collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav main-menu me-auto ms-auto">
                                <li><a href="{{ url('/') }}">Accueil</a></li>
                                <li><a href="{{ route('about') }}">À Propos</a></li>
                                <li><a href="{{ route('shop.index') }}" class="active">Boutique</a></li>
                                <li><a href="{{ route('public.blog') }}">Blog</a></li>
                                <li><a href="{{ route('public.newsletter') }}">Newsletter</a></li>
                                <li><a href="{{ route('plan') }}">Plan d'investissement</a></li>
                                <li><a href="{{ route('contact') }}">Contact</a></li>
                            </ul>
                            <div class="header-action ms-auto">
                                <div class="auth-section">
                                    <div class="auth-section-title">ESPACE MEMBRE</div>
                                    <div class="auth-buttons">
                                        <a href="{{ route('member.login') }}" class="btn-auth">LOGIN</a>
                                        <a href="{{ route('member.register') }}" class="btn-auth">REGISTER</a>
                                    </div>
                                </div>
                                <div class="auth-section">
                                    <div class="auth-section-title">ESPACE VENDEUR</div>
                                    <div class="auth-buttons">
                                        <a href="{{ route('seller.login') }}" class="btn-auth">LOGIN</a>
                                        <a href="{{ route('seller.register') }}" class="btn-auth">REGISTER</a>
                                    </div>
                                </div>
                                <!-- Bouton Panier -->
                                <div class="cart-section ms-3">
                                    <a href="{{ route('cart.index') }}" class="cart-btn-header">
                                        <i class="fas fa-shopping-cart"></i>
                                        <span class="cart-badge-header" id="cartBadge">{{ count(session('cart', [])) }}</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <!-- HERO HEADER -->
    <section class="page-header">
        <div class="container">
            <h1 data-aos="fade-up">Boutique Bijoux de Luxe</h1>
            <p class="lead mt-3" data-aos="fade-up" data-aos-delay="100">Découvrez notre collection exclusive de bijoux raffinés</p>
        </div>
    </section>

    <section class="shop-section">
        <div class="container">
            
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert" data-aos="fade-down">
                    <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="row">
                <div class="col-lg-3">
                    <div class="category-filter" data-aos="fade-right">
                        <h4><i class="fas fa-filter"></i>Catégories</h4>
                        <a href="{{ route('shop.index') }}" class="category-item {{ !request('category') ? 'active' : '' }}">
                            <span><i class="fas fa-star me-2"></i>Tous les Produits</span>
                            <span class="badge">{{ $categories->sum('products_count') }}</span>
                        </a>
                        @foreach($categories as $category)
                            <a href="{{ route('shop.index', ['category' => $category->id]) }}" class="category-item {{ request('category') == $category->id ? 'active' : '' }}">
                                <span><i class="fas fa-gem me-2"></i>{{ $category->name }}</span>
                                <span class="badge">{{ $category->products_count }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>

                <div class="col-lg-9">
                    <!-- SEARCH BAR -->
                    <div class="search-box" data-aos="zoom-in">
                        <form action="{{ route('shop.index') }}" method="GET">
                            <input type="text" name="search" placeholder="Rechercher un bijou..." value="{{ request('search') }}">
                            <input type="hidden" name="category" value="{{ request('category') }}">
                            <button type="submit">
                                <i class="fas fa-search me-2"></i>Rechercher
                            </button>
                        </form>
                    </div>

                    @if($products->count() > 0)
                        <div class="row gy-4">
                            @foreach($products as $product)
                                <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                                    <div class="product-card">
                                        <div class="product-image">
                                            @if($product->image)
                                                <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" loading="lazy">
                                            @else
                                                <div class="d-flex align-items-center justify-content-center h-100">
                                                    <i class="fas fa-gem" style="font-size: 5rem; color: rgba(0,0,0,0.1);"></i>
                                                </div>
                                            @endif
                                            @if($product->stock > 0 && $product->stock < 10)
                                                <span class="product-badge"><i class="fas fa-fire me-1"></i>Stock Limité</span>
                                            @endif
                                        </div>
                                        <div class="product-body">
                                            <div class="product-category">{{ $product->category->name }}</div>
                                            @if($product->seller)
                                                <div class="seller-badge mb-2">
                                                    <i class="fas fa-store me-1"></i>
                                                    <span>Vendu par <strong>{{ $product->seller->shop_name }}</strong></span>
                                                    @if($product->seller->is_verified)
                                                        <i class="fas fa-check-circle text-success ms-1" title="Vendeur vérifié"></i>
                                                    @endif
                                                </div>
                                            @endif
                                            <h3 class="product-title">{{ $product->name }}</h3>
                                            <div class="product-price">{{ number_format($product->price, 0, ',', ' ') }} XOF</div>
                                            <div class="product-actions">
                                                <div class="d-flex gap-2 mb-2">
                                                    <a href="{{ route('shop.show', $product) }}" class="btn btn-outline-primary flex-grow-1">
                                                        <i class="fas fa-eye me-1"></i> Détails
                                                    </a>
                                                </div>
                                                @if($product->stock > 0)
                                                    <form action="{{ route('cart.add', $product) }}" method="POST">
                                                        @csrf
                                                        <button type="submit" class="btn-add-cart">
                                                            <i class="fas fa-cart-plus"></i> Ajouter au Panier
                                                        </button>
                                                    </form>
                                                @else
                                                    <button class="btn-add-cart" disabled style="opacity: 0.6; cursor: not-allowed;">
                                                        <i class="fas fa-times-circle"></i> Rupture de Stock
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="mt-5 d-flex justify-content-center" data-aos="fade-up">
                            {{ $products->links() }}
                        </div>
                    @else
                        <div class="empty-state" data-aos="fade-up">
                            <i class="fas fa-search"></i>
                            <h3>Aucun produit trouvé</h3>
                            <p class="text-muted">Essayez une autre catégorie ou modifiez votre recherche</p>
                            <a href="{{ route('shop.index') }}" class="btn--base mt-3">
                                <i class="fas fa-redo me-2"></i>Voir tous les produits
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer>
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-4">
                    @if(!empty($siteLogo))<img src="{{ $siteLogo }}" alt="{{ $siteName ?? 'ATARA' }}" height="50" class="mb-3">@endif
                    <h5>{{ $siteName ?? 'ATARA' }}</h5>
                    <p style="color: #94a3b8; line-height: 1.8;">{{ $siteMetaDescription ?? 'Votre destination pour les bijoux de luxe. Qualité, élégance et service exceptionnel.' }}</p>
                    <div class="social-links">
                        @if(!empty($siteFacebook))<a href="{{ $siteFacebook }}" target="_blank"><i class="fab fa-facebook-f"></i></a>@endif
                        @if(!empty($siteInstagram))<a href="{{ $siteInstagram }}" target="_blank"><i class="fab fa-instagram"></i></a>@endif
                        @if(!empty($siteTwitter))<a href="{{ $siteTwitter }}" target="_blank"><i class="fab fa-twitter"></i></a>@endif
                        @if(!empty($siteWhatsapp))<a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $siteWhatsapp) }}" target="_blank"><i class="fab fa-whatsapp"></i></a>@endif
                    </div>
                </div>
                
                <div class="col-lg-2">
                    <h5>Navigation</h5>
                    <div class="d-flex flex-column gap-2">
                        <a href="{{ route('home') }}"><i class="fas fa-home me-2"></i>Accueil</a>
                        <a href="{{ route('about') }}"><i class="fas fa-info-circle me-2"></i>À Propos</a>
                        <a href="{{ route('shop.index') }}"><i class="fas fa-shopping-bag me-2"></i>Boutique</a>
                        <a href="{{ route('plan') }}"><i class="fas fa-chart-line me-2"></i>Plan MLM</a>
                    </div>
                </div>

                <div class="col-lg-3">
                    <h5>Ressources</h5>
                    <div class="d-flex flex-column gap-2">
                        <a href="{{ route('public.blog') }}"><i class="fas fa-blog me-2"></i>Blog</a>
                        <a href="{{ route('public.newsletter') }}"><i class="fas fa-envelope me-2"></i>Newsletter</a>
                        <a href="{{ route('contact') }}"><i class="fas fa-phone me-2"></i>Contact</a>
                        <a href="#"><i class="fas fa-question-circle me-2"></i>FAQ</a>
                    </div>
                </div>

                <div class="col-lg-3">
                    <h5>Contact</h5>
                    <div class="d-flex flex-column gap-2" style="color: #94a3b8;">
                        @if(!empty($siteAddress))<p><i class="fas fa-map-marker-alt me-2" style="color: var(--primary);"></i>{{ $siteAddress }}</p>@endif
                        @if(!empty($sitePhone))<p><i class="fas fa-phone me-2" style="color: var(--primary);"></i><a href="tel:{{ preg_replace('/\s+/', '', $sitePhone) }}" style="color: inherit;">{{ $sitePhone }}</a></p>@endif
                        @if(!empty($siteEmail))<p><i class="fas fa-envelope me-2" style="color: var(--primary);"></i><a href="mailto:{{ $siteEmail }}" style="color: inherit;">{{ $siteEmail }}</a></p>@endif
                    </div>
                </div>
            </div>
            
            <hr style="border-color: rgba(255,255,255,0.1); margin: 40px 0 30px;">
            
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <span style="color: #94a3b8;">© {{ date('Y') }} {{ $siteName ?? 'ATARA' }}. {{ $siteCopyright ?? 'Tous droits réservés.' }}</span>
                <div class="d-flex gap-3">
                    <a href="#">Confidentialité</a>
                    <a href="#">Conditions</a>
                    <a href="#">Mentions légales</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true,
            offset: 100
        });
    </script>

</body>
</html>
