@extends('layouts.app')

@section('content')
    <!-- Hero Section -->
    <section class="relative py-32 bg-gradient-to-br from-rose-50 via-pink-50 to-amber-50 overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-20 left-10 w-72 h-72 bg-rose-300 rounded-full blur-3xl"></div>
            <div class="absolute bottom-20 right-10 w-96 h-96 bg-pink-300 rounded-full blur-3xl"></div>
        </div>
        
        <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
            <div class="inline-block mb-6 px-6 py-2 bg-white/50 backdrop-blur-sm rounded-full">
                <span class="text-rose-600 uppercase tracking-[0.3em] text-[10px] font-medium">Programme exclusif</span>
            </div>
            <h1 class="font-serif text-5xl md:text-7xl mb-6 text-gray-900 italic">Programme de Fidélité</h1>
            <p class="text-gray-600 text-lg md:text-xl mb-8 leading-relaxed max-w-2xl mx-auto">
                Gagnez des points à chaque achat et transformez-les en récompenses exclusives
            </p>
            
            @auth
                <a href="{{ route('my.loyalty') }}" 
                   class="inline-block bg-gradient-to-r from-rose-500 to-pink-600 text-white px-12 py-4 text-[10px] uppercase tracking-widest hover:shadow-xl hover:scale-105 transition-all duration-300 rounded-full">
                    <i data-lucide="gift" class="w-4 h-4 inline-block mr-2"></i>
                    Voir mes points
                </a>
            @else
                <a href="{{ route('register') }}" 
                   class="inline-block bg-gradient-to-r from-rose-500 to-pink-600 text-white px-12 py-4 text-[10px] uppercase tracking-widest hover:shadow-xl hover:scale-105 transition-all duration-300 rounded-full">
                    <i data-lucide="user-plus" class="w-4 h-4 inline-block mr-2"></i>
                    Rejoindre maintenant
                </a>
            @endauth
        </div>
    </section>

    <!-- Comment gagner des récompenses -->
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16">
                <span class="text-rose-600 uppercase tracking-[0.3em] text-[10px] mb-2 block">Récompenses</span>
                <h2 class="font-serif text-4xl md:text-5xl italic text-gray-900 mb-4">Comment gagner des points</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Découvrez toutes les façons d'accumuler des points de fidélité</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Achats -->
                <div class="group relative bg-gradient-to-br from-rose-50 to-pink-50 p-8 rounded-3xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
                    <div class="absolute top-8 right-8 text-6xl opacity-10">🛒</div>
                    <div class="relative z-10">
                        <div class="w-16 h-16 bg-gradient-to-br from-rose-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="shopping-bag" class="w-8 h-8 text-white"></i>
                        </div>
                        <h3 class="text-2xl font-serif italic mb-3 text-gray-900">Achats</h3>
                        <div class="flex items-baseline gap-2 mb-4">
                            <span class="text-4xl font-bold text-rose-600">1</span>
                            <span class="text-gray-600">point / 1 د.ت</span>
                        </div>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            Gagnez automatiquement 1 point de fidélité pour chaque 1 د.ت dépensé sur notre site (hors frais de livraison).
                        </p>
                    </div>
                </div>

                <!-- Inscription -->
                <div class="group relative bg-gradient-to-br from-amber-50 to-orange-50 p-8 rounded-3xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
                    <div class="absolute top-8 right-8 text-6xl opacity-10">📝</div>
                    <div class="relative z-10">
                        <div class="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="user-plus" class="w-8 h-8 text-white"></i>
                        </div>
                        <h3 class="text-2xl font-serif italic mb-3 text-gray-900">Inscription</h3>
                        <div class="flex items-baseline gap-2 mb-4">
                            <span class="text-4xl font-bold text-amber-600">+100</span>
                            <span class="text-gray-600">points</span>
                        </div>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            Gagnez 100 points de fidélité lors de votre inscription sur notre site web.
                        </p>
                    </div>
                </div>

                <!-- Parrainage -->
                <div class="group relative bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-3xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
                    <div class="absolute top-8 right-8 text-6xl opacity-10">🤝</div>
                    <div class="relative z-10">
                        <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="users" class="w-8 h-8 text-white"></i>
                        </div>
                        <h3 class="text-2xl font-serif italic mb-3 text-gray-900">Parrainez vos amis</h3>
                        <div class="space-y-2 mb-4">
                            <div class="flex items-baseline gap-2">
                                <span class="text-3xl font-bold text-purple-600">+500</span>
                                <span class="text-gray-600 text-sm">points pour vous</span>
                            </div>
                            <div class="flex items-baseline gap-2">
                                <span class="text-3xl font-bold text-pink-600">-15%</span>
                                <span class="text-gray-600 text-sm">pour votre ami</span>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            Parrainez vos amis et recevez 500 points de fidélité, tandis que votre ami bénéficie de 15% de réduction sur sa première commande.
                        </p>
                    </div>
                </div>

                <!-- Anniversaire -->
                <div class="group relative bg-gradient-to-br from-blue-50 to-cyan-50 p-8 rounded-3xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
                    <div class="absolute top-8 right-8 text-6xl opacity-10">🎂</div>
                    <div class="relative z-10">
                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="cake" class="w-8 h-8 text-white"></i>
                        </div>
                        <h3 class="text-2xl font-serif italic mb-3 text-gray-900">Anniversaire</h3>
                        <div class="flex items-baseline gap-2 mb-4">
                            <span class="text-4xl font-bold text-blue-600">+500</span>
                            <span class="text-gray-600">points</span>
                        </div>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            Votre anniversaire est un jour spécial 🎉 Nous vous offrons 500 points de fidélité pour célébrer cette occasion.
                        </p>
                    </div>
                </div>

                <!-- Commentaires -->
                <div class="group relative bg-gradient-to-br from-green-50 to-emerald-50 p-8 rounded-3xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
                    <div class="absolute top-8 right-8 text-6xl opacity-10">💬</div>
                    <div class="relative z-10">
                        <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="message-circle" class="w-8 h-8 text-white"></i>
                        </div>
                        <h3 class="text-2xl font-serif italic mb-3 text-gray-900">Commentaires</h3>
                        <div class="flex items-baseline gap-2 mb-4">
                            <span class="text-4xl font-bold text-green-600">+10</span>
                            <span class="text-gray-600">points</span>
                        </div>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            Laissez un commentaire sur l'un des produits que vous avez achetés et gagnez 10 points de fidélité.
                        </p>
                    </div>
                </div>

                <!-- Utilisation des points -->
                <div class="group relative bg-gradient-to-br from-yellow-50 to-amber-50 p-8 rounded-3xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
                    <div class="absolute top-8 right-8 text-6xl opacity-10">💡</div>
                    <div class="relative z-10">
                        <div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-amber-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="sparkles" class="w-8 h-8 text-white"></i>
                        </div>
                        <h3 class="text-2xl font-serif italic mb-3 text-gray-900">Utiliser vos points</h3>
                        <div class="space-y-1 mb-4">
                            <div class="flex items-baseline gap-2">
                                <span class="text-4xl font-bold text-amber-600">10</span>
                                <span class="text-gray-600">pts = 0.1 د.ت</span>
                            </div>
                            <div class="flex items-baseline gap-2">
                                <span class="text-2xl font-bold text-amber-600/70">100</span>
                                <span class="text-gray-600">pts = 1 د.ت</span>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm leading-relaxed">
                            Transformez vos points en réductions dès 10 points cumulés lors de la finalisation de votre commande.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-24 bg-gradient-to-br from-rose-500 via-pink-500 to-purple-600 relative overflow-hidden">
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl"></div>
            <div class="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl"></div>
        </div>
        
        <div class="max-w-4xl mx-auto px-6 text-center relative z-10">
            <i data-lucide="gift" class="w-16 h-16 text-white mx-auto mb-6"></i>
            <h2 class="font-serif text-4xl md:text-5xl text-white mb-6 italic">Commencez à gagner dès aujourd'hui</h2>
            <p class="text-white/90 text-lg mb-8">
                Inscrivez-vous maintenant et obtenez immédiatement vos 100 premiers points de fidélité
            </p>
            
            @auth
                <a href="{{ route('my.loyalty') }}" 
                   class="inline-block bg-white text-rose-600 px-12 py-4 text-[10px] uppercase tracking-widest hover:shadow-xl hover:scale-105 transition-all duration-300 rounded-full font-medium">
                    Voir mes récompenses
                </a>
            @else
                <a href="{{ route('register') }}" 
                   class="inline-block bg-white text-rose-600 px-12 py-4 text-[10px] uppercase tracking-widest hover:shadow-xl hover:scale-105 transition-all duration-300 rounded-full font-medium">
                    S'inscrire gratuitement
                </a>
            @endauth
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();
        });
    </script>
@endsection