{% extends 'base.html' %}
{% load static %}

{% block title %}Accueil - Musée des Civilisations Noires{% endblock %}

{% block extra_css %}
<style>
    @keyframes fade-in {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in {
        animation: fade-in 1s ease-out;
    }

    .animate-fade-in-delay {
        animation: fade-in 1s ease-out 0.3s both;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
</style>
{% endblock %}

{% block content %}

<!-- Hero Section avec image de fond -->
<section class="relative h-screen bg-gray-900 overflow-hidden">
    <!-- Image de fond (GIF animé) -->
    <div class="absolute inset-0">
        <img src="{% static 'images/mcn.gif' %}"
             alt="Musée des Civilisations Noires"
             class="w-full h-full object-cover">
        <!-- Overlay gradient pour meilleure lisibilité -->
        <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-black/30"></div>
    </div>

    <!-- Contenu du hero -->
    <div class="relative container mx-auto px-4 h-full flex items-center">
        <div class="max-w-4xl text-white">
            <h1 class="text-5xl md:text-7xl font-bold mb-6 animate-fade-in leading-tight">
                Musée des <span class="text-mcn-orange">Civilisations</span> Noires
            </h1>
            <p class="text-xl md:text-2xl mb-8 text-gray-200 animate-fade-in-delay">
                Découvrez l'histoire et la richesse culturelle de l'Afrique à travers notre collection exceptionnelle
            </p>

            <!-- Boutons CTA -->
            <div class="flex flex-wrap gap-4 mb-12 animate-fade-in-delay">
                <a href="{% url 'virtual_tour' %}"
                   class="bg-mcn-orange hover:bg-orange-600 text-white px-8 py-4 rounded-full font-bold text-lg transition shadow-2xl hover:shadow-mcn-orange/50 inline-flex items-center transform hover:scale-105">
                    <i class="fas fa-vr-cardboard mr-3"></i>
                    Visite Virtuelle 3D
                </a>
                <a href="{% url 'artwork_list' %}"
                   class="bg-white/10 backdrop-blur-md hover:bg-white/20 text-white px-8 py-4 rounded-full font-bold text-lg transition border-2 border-white/30 inline-flex items-center transform hover:scale-105">
                    <i class="fas fa-palette mr-3"></i>
                    Explorer les Œuvres
                </a>
            </div>

            <!-- Stats -->
            <div class="grid grid-cols-3 gap-6 max-w-2xl">
                <div class="text-center bg-white/10 backdrop-blur-md rounded-xl p-4 border border-white/20">
                    <div class="text-4xl font-bold text-mcn-orange mb-2">{{ total_artworks }}+</div>
                    <div class="text-sm text-gray-300">Œuvres d'Art</div>
                </div>
                <div class="text-center bg-white/10 backdrop-blur-md rounded-xl p-4 border border-white/20">
                    <div class="text-4xl font-bold text-mcn-yellow mb-2">{{ categories.count }}</div>
                    <div class="text-sm text-gray-300">Catégories</div>
                </div>
                <div class="text-center bg-white/10 backdrop-blur-md rounded-xl p-4 border border-white/20">
                    <div class="text-4xl font-bold text-mcn-green mb-2">3</div>
                    <div class="text-sm text-gray-300">Langues</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scroll indicator -->
    <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
        <a href="#features" class="text-white text-4xl opacity-70 hover:opacity-100 transition">
            <i class="fas fa-chevron-down"></i>
        </a>
    </div>
</section>

<!-- Section Fonctionnalités -->
<section id="features" class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-800 mb-4">Explorez Autrement</h2>
            <p class="text-xl text-gray-600">Découvrez notre musée à travers des expériences innovantes</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Visite Virtuelle -->
            <div class="bg-gradient-to-br from-mcn-orange to-orange-600 text-white rounded-2xl p-8 hover-lift animate-float">
                <div class="text-6xl mb-6">
                    <i class="fas fa-vr-cardboard"></i>
                </div>
                <h3 class="text-2xl font-bold mb-4">Visite Virtuelle 360°</h3>
                <p class="mb-6 opacity-90">
                    Explorez notre musée en immersion totale depuis chez vous avec notre visite virtuelle interactive
                </p>
                <a href="{% url 'virtual_tour' %}" class="inline-flex items-center text-white font-bold hover:underline">
                    Démarrer la visite <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>

            <!-- QR Code Scanner -->
            <div class="bg-gradient-to-br from-mcn-green to-green-600 text-white rounded-2xl p-8 hover-lift" style="animation-delay: 0.2s;">
                <div class="text-6xl mb-6">
                    <i class="fas fa-qrcode"></i>
                </div>
                <h3 class="text-2xl font-bold mb-4">Scanner QR Code</h3>
                <p class="mb-6 opacity-90">
                    Scannez les QR codes au musée pour accéder instantanément aux informations détaillées des œuvres
                </p>
                <a href="{% url 'qr_scan' %}" class="inline-flex items-center text-white font-bold hover:underline">
                    Scanner maintenant <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>

            <!-- Audio Guides -->
            <div class="bg-gradient-to-br from-mcn-red to-red-600 text-white rounded-2xl p-8 hover-lift" style="animation-delay: 0.4s;">
                <div class="text-6xl mb-6">
                    <i class="fas fa-headphones"></i>
                </div>
                <h3 class="text-2xl font-bold mb-4">Guides Audio</h3>
                <p class="mb-6 opacity-90">
                    Écoutez des descriptions détaillées en français, anglais et wolof pour chaque œuvre
                </p>
                <a href="{% url 'artwork_list' %}" class="inline-flex items-center text-white font-bold hover:underline">
                    Découvrir <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Section Œuvres à la Une -->
<section class="py-20 mcn-pattern">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between mb-12">
            <div>
                <h2 class="text-4xl font-bold text-gray-800 mb-2">Œuvres à la Une</h2>
                <p class="text-gray-600">Découvrez notre sélection exceptionnelle</p>
            </div>
            <a href="{% url 'artwork_list' %}" class="hidden md:inline-flex items-center text-mcn-orange font-bold hover:underline">
                Voir toutes les œuvres <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {% for artwork in featured_artworks %}
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover-lift group">
                <div class="relative h-64 bg-gray-200 overflow-hidden">
                    {% if artwork.get_featured_image %}
                    <img src="{{ artwork.get_featured_image.file.url }}"
                         alt="{{ artwork.reference_code }}"
                         class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500">
                    {% else %}
                    <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-mcn-orange to-mcn-red">
                        <i class="fas fa-image text-white text-6xl opacity-50"></i>
                    </div>
                    {% endif %}

                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center">
                        <a href="{% url 'artwork_detail' artwork.id %}"
                           class="opacity-0 group-hover:opacity-100 bg-white text-mcn-orange px-6 py-3 rounded-full font-bold transform scale-75 group-hover:scale-100 transition">
                            <i class="fas fa-eye mr-2"></i> Découvrir
                        </a>
                    </div>

                    <div class="absolute top-4 left-4 bg-mcn-orange text-white px-3 py-1 rounded-full text-xs font-medium">
                        {{ artwork.category.name }}
                    </div>
                </div>

                <div class="p-6">
                    <h3 class="font-bold text-xl text-gray-800 mb-2 line-clamp-1">
                        {% with translation=artwork.translations.first %}
                        {{ translation.title|default:artwork.reference_code }}
                        {% endwith %}
                    </h3>

                    <p class="text-gray-600 mb-4 line-clamp-2">
                        {% with translation=artwork.translations.first %}
                        {{ translation.description|truncatewords:15 }}
                        {% endwith %}
                    </p>

                    <div class="flex items-center justify-between text-sm text-gray-500">
                        <span><i class="fas fa-eye mr-1 text-mcn-orange"></i> {{ artwork.view_count }}</span>
                        <span><i class="fas fa-heart mr-1 text-mcn-red"></i> {{ artwork.favorites_count }}</span>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-span-3 text-center py-20">
                <i class="fas fa-palette text-gray-300 text-6xl mb-4"></i>
                <p class="text-gray-500 text-xl">Aucune œuvre à afficher pour le moment</p>
            </div>
            {% endfor %}
        </div>

        <div class="text-center mt-12 md:hidden">
            <a href="{% url 'artwork_list' %}" class="inline-block bg-mcn-orange text-white px-8 py-4 rounded-full font-bold hover:bg-orange-600 transition">
                Voir toutes les œuvres
            </a>
        </div>
    </div>
</section>

<!-- Section Catégories -->
<section class="py-20 bg-white">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-4xl font-bold text-gray-800 mb-4">Nos Collections</h2>
            <p class="text-gray-600 text-xl">Explorez par catégorie</p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            {% for category in categories %}
            <a href="{% url 'category_detail' category.slug %}"
               class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6 text-center hover-lift group border-2 border-transparent hover:border-mcn-orange transition">
                {% if category.icon %}
                <img src="{{ category.icon.url }}"
                     alt="{{ category.name }}"
                     class="w-20 h-20 mx-auto mb-4 opacity-80 group-hover:opacity-100 transition">
                {% else %}
                <div class="w-20 h-20 mx-auto mb-4 bg-mcn-orange rounded-full flex items-center justify-center">
                    <i class="fas fa-palette text-white text-3xl"></i>
                </div>
                {% endif %}
                <h3 class="font-bold text-gray-800 group-hover:text-mcn-orange transition">
                    {{ category.name }}
                </h3>
                <p class="text-sm text-gray-500 mt-2">
                    {{ category.artworks_count }} œuvre{{ category.artworks_count|pluralize }}
                </p>
            </a>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Section Œuvres Populaires -->
<section class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-4xl font-bold text-gray-800 mb-4">Les Plus Vues</h2>
            <p class="text-gray-600 text-xl">Découvrez les œuvres préférées de nos visiteurs</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {% for artwork in popular_artworks %}
            <div class="bg-white rounded-xl shadow-lg overflow-hidden hover-lift">
                <div class="relative h-80 bg-gray-200 overflow-hidden group">
                    {% if artwork.get_featured_image %}
                    <img src="{{ artwork.get_featured_image.file.url }}"
                         alt="{{ artwork.reference_code }}"
                         class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500">
                    {% endif %}

                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>

                    <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
                        <h3 class="font-bold text-xl mb-2">
                            {% with translation=artwork.translations.first %}
                            {{ translation.title|default:artwork.reference_code }}
                            {% endwith %}
                        </h3>
                        <div class="flex items-center justify-between">
                            <span class="text-sm"><i class="fas fa-eye mr-1"></i> {{ artwork.view_count }} vues</span>
                            <a href="{% url 'artwork_detail' artwork.id %}"
                               class="bg-mcn-orange px-4 py-2 rounded-full text-sm font-bold hover:bg-orange-600 transition">
                                Voir
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Call to Action Final -->
<section class="py-20 bg-gradient-to-r from-mcn-green via-mcn-yellow to-mcn-red">
    <div class="container mx-auto px-4 text-center text-white">
        <h2 class="text-4xl md:text-5xl font-bold mb-6">
            Prêt à Explorer Notre Patrimoine ?
        </h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
            Rejoignez des milliers de visiteurs dans la découverte des trésors culturels africains
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{% url 'virtual_tour' %}"
               class="bg-white text-mcn-orange px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-2xl inline-flex items-center">
                <i class="fas fa-play-circle mr-3"></i>
                Commencer la Visite
            </a>
            <a href="{% url 'artwork_list' %}"
               class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-mcn-orange transition inline-flex items-center">
                <i class="fas fa-compass mr-3"></i>
                Explorer les Œuvres
            </a>
        </div>
    </div>
</section>

{% endblock %}