<!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="{{ csrf_token() }}">
    <meta name="description" content="{{ $siteMetaDescription ?? 'ATARA LifeStyle - Plateforme MLM d\'investissement' }}">
    <meta name="keywords" content="{{ $siteMetaKeywords ?? 'atara, investissement, mlm, lifestyle' }}">
    <title>@yield('title', 'Page') - {{ $siteName ?? 'ATARA' }}</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ $siteFavicon ?? asset('favicon.ico') }}">
    <link rel="apple-touch-icon" href="{{ $siteFavicon ?? asset('favicon.ico') }}">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    
    <!-- Fonts -->
    <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@400;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
    <!-- Custom Styles (instead of Vite) -->
    @stack('styles')
    
    <style>
        :root {
            --primary: #9333ea;
            --secondary: #7c3aed;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --info: #3b82f6;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f9fafb;
        }
        
        .navbar {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: white !important;
        }
        
        .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            transition: color 0.3s ease;
        }
        
        .nav-link:hover {
            color: white !important;
        }
        
        footer {
            background-color: #1f2937;
            color: #9ca3af;
            margin-top: 4rem;
        }
        
        footer a {
            color: #d1d5db;
            text-decoration: none;
        }
        
        footer a:hover {
            color: var(--primary);
        }
    </style>
    
    @yield('styles')
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ route('home') }}">
                <img src="{{ $siteLogo ?? asset('images/logo.png') }}" alt="{{ $siteName ?? 'ATARA LifeStyle' }}" height="{{ $siteLogoHeight ?? 40 }}">
                @if($showLogoText ?? false)
                <span class="ms-2">{{ $siteName ?? 'ATARA LifeStyle' }}</span>
                @endif
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('home') }}">Accueil</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('about') }}">À Propos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('shop.index') }}">Boutique</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('public.blog') }}">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('contact') }}">Contact</a>
                    </li>
                    @auth
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('member.dashboard') }}">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <form method="POST" action="{{ route('logout') }}" class="d-inline">
                                @csrf
                                <button type="submit" class="nav-link btn btn-link">Déconnexion</button>
                            </form>
                        </li>
                    @else
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('member.login') }}">Connexion</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link btn btn-primary text-white ms-2" href="{{ route('member.register') }}">S'inscrire</a>
                        </li>
                    @endauth
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="flex-grow">
        @if ($errors->any())
            <div class="container mt-4">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Erreur!</strong>
                    <ul class="mb-0 mt-2">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        @endif

        @if (session('success'))
            <div class="container mt-4">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        @endif

        @yield('content')
    </main>

    <!-- Footer -->
    <footer class="mt-5">
        <div class="container py-5">
            <div class="row mb-4">
                <div class="col-md-3">
                    <img src="{{ $siteLogo ?? asset('images/logo.png') }}" alt="{{ $siteName ?? 'ATARA' }}" height="50" class="mb-3">
                    <p>{{ $siteMetaDescription ?? 'Plateforme d\'investissement avec système MLM révolutionnaire.' }}</p>
                    @if($siteFacebook || $siteInstagram || $siteTwitter || $siteWhatsapp)
                    <div class="social-links mt-3">
                        @if($siteFacebook)
                        <a href="{{ $siteFacebook }}" target="_blank" class="me-2"><i class="fab fa-facebook fa-lg"></i></a>
                        @endif
                        @if($siteInstagram)
                        <a href="{{ $siteInstagram }}" target="_blank" class="me-2"><i class="fab fa-instagram fa-lg"></i></a>
                        @endif
                        @if($siteTwitter)
                        <a href="{{ $siteTwitter }}" target="_blank" class="me-2"><i class="fab fa-twitter fa-lg"></i></a>
                        @endif
                        @if($siteWhatsapp)
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $siteWhatsapp) }}" target="_blank" class="me-2"><i class="fab fa-whatsapp fa-lg"></i></a>
                        @endif
                    </div>
                    @endif
                </div>
                <div class="col-md-3">
                    <h5 class="text-white mb-3">Liens Rapides</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ route('home') }}">Accueil</a></li>
                        <li><a href="{{ route('shop.index') }}">Boutique</a></li>
                        <li><a href="{{ route('public.blog') }}">Blog</a></li>
                        <li><a href="{{ route('contact') }}">Contact</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5 class="text-white mb-3">Support</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ route('faq') }}">FAQ</a></li>
                        <li><a href="#">Politique de Confidentialité</a></li>
                        <li><a href="#">Conditions d'Utilisation</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5 class="text-white mb-3">Contact</h5>
                    @if(!empty($siteEmail))
                    <p><i class="fas fa-envelope me-2"></i><a href="mailto:{{ $siteEmail }}">{{ $siteEmail }}</a></p>
                    @endif
                    @if(!empty($sitePhone))
                    <p><i class="fas fa-phone me-2"></i><a href="tel:{{ preg_replace('/[^0-9+]/', '', $sitePhone) }}">{{ $sitePhone }}</a></p>
                    @endif
                    @if(!empty($siteAddress))
                    <p><i class="fas fa-map-marker-alt me-2"></i>{{ $siteAddress }}</p>
                    @endif
                    @if(!empty($siteWhatsapp))
                    <p><i class="fab fa-whatsapp me-2"></i><a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $siteWhatsapp) }}" target="_blank">WhatsApp</a></p>
                    @endif
                </div>
            </div>
            <hr class="bg-secondary">
            <div class="row">
                <div class="col-md-6">
                    <p>&copy; {{ date('Y') }} {{ $siteName ?? 'ATARA' }}. Tous droits réservés.</p>
                </div>
                <div class="col-md-6 text-end">
                    <p>Développé avec <i class="fas fa-heart text-danger"></i></p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <!-- SweetAlert2 Ultra Modern Theme -->
    @include('components.swal-modern-theme')
    
    <script>
        @if(session('success'))
            showSuccess('Succès !', '{{ session('success') }}');
        @endif
        
        @if(session('error'))
            showError('Erreur !', '{{ session('error') }}');
        @endif
        
        @if(session('warning'))
            showWarning('Attention !', '{{ session('warning') }}');
        @endif
        
        @if(session('info'))
            showInfo('Information', '{{ session('info') }}');
        @endif
    </script>
    
    @stack('scripts')
    @yield('scripts')
</body>
</html>
