<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>À Propos - 
        @if($user->role === 'seller' && $user->shop_name)
            {{ $user->shop_name }}
        @else
            Boutique de {{ $user->name }}
        @endif
    </title>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <!-- Google 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=Cormorant+Garamond:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --primary-gold: #D4AF37;
            --primary-dark: #1a1a1a;
            --text-primary: #2c3e50;
            --text-secondary: #7f8c8d;
            --bg-light: #f8f9fa;
        }

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

        body {
            font-family: 'Montserrat', sans-serif;
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Cormorant Garamond', serif;
        }

        /* ===== TOP BAR ===== */
        .top-bar {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: white;
            padding: 10px 0;
            font-size: 0.85rem;
        }

        .top-bar a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        .top-bar a:hover {
            color: var(--primary-gold);
        }

        /* ===== MAIN NAVIGATION ===== */
        .main-nav {
            background: white;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            text-decoration: none;
            font-family: 'Cormorant Garamond', serif;
        }

        .brand-logo i {
            font-size: 2rem;
            color: var(--primary-gold);
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 40px;
            margin: 0;
        }

        .nav-links a {
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            transition: color 0.3s;
            position: relative;
        }

        .nav-links a:hover {
            color: var(--primary-gold);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-gold);
            transition: width 0.3s;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .cart-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--primary-gold);
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            position: relative;
        }

        .cart-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
            color: white;
        }

        .cart-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #e74c3c;
            color: white;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: bold;
        }

        /* ===== ABOUT HEADER ===== */
        .about-header {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            padding: 100px 0;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .about-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23D4AF37" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,149.3C960,160,1056,160,1152,138.7C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
            opacity: 0.3;
        }

        .about-header h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
            background: linear-gradient(to right, white, var(--primary-gold));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .about-header p {
            font-size: 1.3rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        /* ===== ABOUT CONTENT ===== */
        .about-section {
            padding: 80px 0;
        }

        .owner-card {
            background: white;
            border-radius: 25px;
            padding: 50px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            margin-bottom: 60px;
        }

        .owner-avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-gold) 0%, #e0c46c 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: white;
            margin: 0 auto 30px;
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
        }

        .owner-info h2 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: var(--primary-dark);
        }

        .owner-role {
            color: var(--primary-gold);
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 30px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .owner-description {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-secondary);
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        /* ===== FEATURES GRID ===== */
        .features-section {
            background: var(--bg-light);
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--primary-dark);
        }

        .section-title p {
            font-size: 1.2rem;
            color: var(--text-secondary);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }

        .feature-card {
            background: white;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s;
        }

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

        .feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: linear-gradient(135deg, var(--primary-gold) 0%, #e0c46c 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
        }

        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--primary-dark);
        }

        .feature-card p {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* ===== STATS SECTION ===== */
        .stats-section {
            padding: 80px 0;
            background: linear-gradient(135deg, var(--primary-dark) 0%, #2d2d2d 100%);
            color: white;
            text-align: center;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-top: 60px;
        }

        .stat-item {
            padding: 30px;
        }

        .stat-number {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--primary-gold);
            display: block;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* ===== FOOTER ===== */
        .footer {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: white;
            padding: 60px 0 30px;
        }

        .footer h4 {
            color: var(--primary-gold);
            margin-bottom: 25px;
            font-size: 1.5rem;
        }

        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: all 0.3s;
        }

        .footer-links a:hover {
            color: var(--primary-gold);
            padding-left: 5px;
        }

        .footer-bottom {
            text-align: center;
            margin-top: 50px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
        }
    </style>
</head>
<body>

<!-- TOP BAR -->
<div class="top-bar">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <i class="fas fa-phone me-2"></i>
                <a href="tel:{{ $user->phone }}">{{ $user->phone ?? '+225 XX XX XX XX XX' }}</a>
                <span class="mx-3">|</span>
                <i class="fas fa-envelope me-2"></i>
                <a href="mailto:{{ $user->email }}">{{ $user->email ?? 'contact@boutique.com' }}</a>
            </div>
            <div>
                <i class="fas fa-shipping-fast me-2"></i>
                Livraison Gratuite dès 50 000 XOF
            </div>
        </div>
    </div>
</div>

<!-- MAIN NAVIGATION -->
<nav class="main-nav">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <a href="{{ route('user.shop', $user->username ?? $user->member_code ?? $user->id) }}" class="brand-logo">
                <i class="fas fa-gem"></i>
                <span>
                    @if($user->role === 'seller' && $user->shop_name)
                        {{ $user->shop_name }}
                    @else
                        Boutique de {{ $user->name }}
                    @endif
                </span>
            </a>

            <ul class="nav-links d-none d-lg-flex">
                <li><a href="{{ route('user.shop', $user->username ?? $user->member_code ?? $user->id) }}">Accueil</a></li>
                <li><a href="{{ route('user.shop.collection', $user->username ?? $user->member_code ?? $user->id) }}">Collection</a></li>
                <li><a href="{{ route('user.shop.about', $user->username ?? $user->member_code ?? $user->id) }}" style="color: var(--primary-gold);">À Propos</a></li>
                <li><a href="{{ route('user.shop.contact', $user->username ?? $user->member_code ?? $user->id) }}">Contact</a></li>
            </ul>

            <a href="{{ route('cart.index') }}" class="cart-btn">
                <i class="fas fa-shopping-bag"></i>
                Panier
                <span class="cart-badge">0</span>
            </a>
        </div>
    </div>
</nav>

<!-- ABOUT HEADER -->
<section class="about-header">
    <div class="container">
        <h1 data-aos="fade-up">À Propos de Nous</h1>
        <p data-aos="fade-up" data-aos-delay="100">
            Découvrez l'histoire et la passion derrière chaque création
        </p>
    </div>
</section>

<!-- OWNER SECTION -->
<section class="about-section">
    <div class="container">
        <div class="owner-card" data-aos="fade-up">
            <div class="owner-avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="owner-info">
                <h2>{{ $user->name }}</h2>
                <div class="owner-role">
                    @if($user->role === 'seller')
                        Vendeur Professionnel
                    @elseif($user->role === 'affiliate')
                        Affilié Premium
                    @else
                        Membre
                    @endif
                </div>
                <p class="owner-description">
                    Passionné(e) par l'excellence et la qualité, je mets à votre disposition une sélection 
                    soigneusement choisie de produits d'exception. Chaque article est sélectionné avec soin 
                    pour garantir votre satisfaction et sublimer vos moments précieux. Mon engagement est de 
                    vous offrir une expérience d'achat unique, alliant qualité, authenticité et service personnalisé.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- FEATURES SECTION -->
<section class="features-section">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>Pourquoi Nous Choisir</h2>
            <p>Des valeurs qui font notre différence</p>
        </div>

        <div class="features-grid">
            <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-icon">
                    <i class="fas fa-gem"></i>
                </div>
                <h3>Qualité Premium</h3>
                <p>Nous sélectionnons uniquement des produits de haute qualité pour garantir votre satisfaction totale.</p>
            </div>

            <div class="feature-card" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3>Authenticité Garantie</h3>
                <p>Tous nos produits sont authentiques et accompagnés de leur certificat de garantie.</p>
            </div>

            <div class="feature-card" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-icon">
                    <i class="fas fa-shipping-fast"></i>
                </div>
                <h3>Livraison Rapide</h3>
                <p>Expédition soignée et rapide pour que vous receviez vos achats dans les meilleurs délais.</p>
            </div>

            <div class="feature-card" data-aos="fade-up" data-aos-delay="400">
                <div class="feature-icon">
                    <i class="fas fa-headset"></i>
                </div>
                <h3>Support Dédié</h3>
                <p>Une équipe à votre écoute pour répondre à toutes vos questions et vous accompagner.</p>
            </div>

            <div class="feature-card" data-aos="fade-up" data-aos-delay="500">
                <div class="feature-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <h3>Paiement Sécurisé</h3>
                <p>Vos transactions sont protégées par les dernières technologies de sécurité.</p>
            </div>

            <div class="feature-card" data-aos="fade-up" data-aos-delay="600">
                <div class="feature-icon">
                    <i class="fas fa-undo"></i>
                </div>
                <h3>Retours Faciles</h3>
                <p>Politique de retour simple et flexible pour votre tranquillité d'esprit.</p>
            </div>
        </div>
    </div>
</section>

<!-- STATS SECTION -->
<section class="stats-section">
    <div class="container">
        <h2 data-aos="fade-up" style="font-size: 3rem; margin-bottom: 20px;">Nos Chiffres Parlent</h2>
        <p data-aos="fade-up" data-aos-delay="100" style="font-size: 1.2rem; opacity: 0.9;">Des résultats qui témoignent de notre engagement</p>

        <div class="stats-grid">
            <div class="stat-item" data-aos="fade-up" data-aos-delay="200">
                <span class="stat-number">100%</span>
                <span class="stat-label">Clients Satisfaits</span>
            </div>

            <div class="stat-item" data-aos="fade-up" data-aos-delay="300">
                <span class="stat-number">1000+</span>
                <span class="stat-label">Produits Vendus</span>
            </div>

            <div class="stat-item" data-aos="fade-up" data-aos-delay="400">
                <span class="stat-number">24/7</span>
                <span class="stat-label">Support Disponible</span>
            </div>

            <div class="stat-item" data-aos="fade-up" data-aos-delay="500">
                <span class="stat-number">⭐⭐⭐⭐⭐</span>
                <span class="stat-label">Évaluations</span>
            </div>
        </div>
    </div>
</section>

<!-- FOOTER -->
<footer class="footer">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-4">
                <h4>
                    @if($user->role === 'seller' && $user->shop_name)
                        {{ $user->shop_name }}
                    @else
                        Boutique de {{ $user->name }}
                    @endif
                </h4>
                <p style="opacity: 0.8;">Des bijoux d'exception qui racontent votre histoire avec élégance et raffinement.</p>
            </div>

            <div class="col-lg-4">
                <h4>Navigation</h4>
                <ul class="footer-links">
                    <li><a href="{{ route('user.shop', $user->username ?? $user->member_code ?? $user->id) }}"><i class="fas fa-chevron-right me-2"></i>Accueil</a></li>
                    <li><a href="{{ route('user.shop.collection', $user->username ?? $user->member_code ?? $user->id) }}"><i class="fas fa-chevron-right me-2"></i>Collection</a></li>
                    <li><a href="{{ route('user.shop.about', $user->username ?? $user->member_code ?? $user->id) }}"><i class="fas fa-chevron-right me-2"></i>À Propos</a></li>
                    <li><a href="{{ route('user.shop.contact', $user->username ?? $user->member_code ?? $user->id) }}"><i class="fas fa-chevron-right me-2"></i>Contact</a></li>
                </ul>
            </div>

            <div class="col-lg-4">
                <h4>Contact</h4>
                <ul class="footer-links">
                    <li><i class="fas fa-map-marker-alt me-2"></i>{{ $user->address ?? 'Adresse' }}, {{ $user->city ?? 'Ville' }}, {{ $user->country ?? 'Pays' }}</li>
                    <li><i class="fas fa-phone me-2"></i><a href="tel:{{ $user->phone }}">{{ $user->phone ?? 'Téléphone' }}</a></li>
                    <li><i class="fas fa-envelope me-2"></i><a href="mailto:{{ $user->email }}">{{ $user->email ?? 'Email' }}</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <p>&copy; {{ date('Y') }} 
                @if($user->role === 'seller' && $user->shop_name)
                    {{ $user->shop_name }}
                @else
                    Boutique de {{ $user->name }}
                @endif
                - Tous droits réservés</p>
        </div>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- AOS Animation -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script>
    // Initialize AOS
    AOS.init({
        duration: 800,
        easing: 'ease-out-cubic',
        once: true
    });

    // Update cart badge
    function updateCartCount() {
        fetch('/api/cart/count')
            .then(res => res.json())
            .then(data => {
                document.querySelector('.cart-badge').textContent = data.count;
            })
            .catch(() => {
                document.querySelector('.cart-badge').textContent = '0';
            });
    }

    updateCartCount();
</script>

</body>
</html>
