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

{% block title %}Accueil - {{ settings.site_name }}{% endblock %}

{% block extra_css %}
<!-- Leaflet CSS for Partners Map -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
#partners-map {
    height: 400px;
    width: 100%;
    border-radius: 12px;
}
.partner-marker {
    background: transparent;
    border: none;
}
.partner-marker > div {
    background-color: #1e3a5f;
}
.leaflet-popup-content-wrapper {
    border-radius: 8px;
}
</style>
{% endblock %}

{% block content %}
<!-- Hero Carousel -->
<section class="relative h-[600px] overflow-hidden">
    <div class="carousel-container h-full">
        {% for slide in slides %}
        <div class="carousel-slide absolute inset-0 transition-opacity duration-500 {% if forloop.first %}opacity-100{% else %}opacity-0{% endif %}"
             style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('{% if slide.image %}{{ slide.image.url }}{% else %}{% static 'images/hero-bg.jpg' %}{% endif %}') center/cover;">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center">
                <div class="text-white max-w-2xl">
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">{{ slide|translate:'title' }}</h1>
                    {% if slide.subtitle %}
                    <p class="text-xl md:text-2xl mb-4 text-gray-200">{{ slide|translate:'subtitle' }}</p>
                    {% endif %}
                    {% if slide.description %}
                    <p class="text-lg mb-8 text-gray-300">{{ slide|translate:'description' }}</p>
                    {% endif %}
                    {% with buttons=slide.get_active_buttons %}
                    {% if buttons %}
                    <div class="flex flex-wrap gap-4">
                        {% for button in buttons %}
                        <a href="{{ button.get_url }}"
                           class="inline-block px-8 py-3 rounded-lg font-semibold transition
                                  {% if button.style == 'primary' %}bg-accent text-primary hover:bg-yellow-400
                                  {% elif button.style == 'secondary' %}bg-white text-primary hover:bg-gray-100
                                  {% elif button.style == 'outline' %}border-2 border-white text-white hover:bg-white hover:text-primary
                                  {% elif button.style == 'dark' %}bg-gray-900 text-white hover:bg-gray-800
                                  {% elif button.style == 'gradient' %}bg-gradient-to-r from-secondary to-primary text-white hover:from-primary hover:to-secondary
                                  {% elif button.style == 'ghost' %}text-white hover:text-accent underline-offset-4 hover:underline
                                  {% elif button.style == 'success' %}bg-green-600 text-white hover:bg-green-700
                                  {% elif button.style == 'danger' %}bg-red-600 text-white hover:bg-red-700{% endif %}"
                           {% if button.open_in_new_tab or button.link_type == 'external' %}target="_blank" rel="noopener noreferrer"{% endif %}>
                            {{ button|translate:'text' }}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% endwith %}
                </div>
            </div>
        </div>
        {% empty %}
        <div class="absolute inset-0 bg-gradient-to-r from-primary to-secondary flex items-center">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-white max-w-2xl">
                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">{{ settings.site_name }}</h1>
                    <p class="text-xl md:text-2xl mb-8 text-gray-200">{{ settings.tagline }}</p>
                    <a href="{% url 'program:about' %}" class="inline-block bg-accent text-primary px-8 py-3 rounded-lg font-semibold hover:bg-yellow-400 transition">
                        Decouvrir le programme
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if slides.count > 1 %}
    <!-- Carousel Controls -->
    <button class="carousel-prev absolute left-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white p-3 rounded-full transition">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
    </button>
    <button class="carousel-next absolute right-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white p-3 rounded-full transition">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
    </button>

    <!-- Carousel Dots -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-2">
        {% for slide in slides %}
        <button class="carousel-dot w-3 h-3 rounded-full transition {% if forloop.first %}bg-white{% else %}bg-white/50{% endif %}" data-slide="{{ forloop.counter0 }}"></button>
        {% endfor %}
    </div>
    {% endif %}
</section>

<!-- Statistics -->
{% if statistics %}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            {% for stat in statistics %}
            <div class="text-center">
                <div class="text-4xl md:text-5xl font-bold text-primary mb-2">{{ stat.value }}</div>
                <div class="text-gray-600">{{ stat|translate:'label' }}</div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- Universities -->
{% if universities %}
<section class="py-16 bg-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-primary mb-4">{% trans_text 'Partner Universities' 'Universités Partenaires' 'Partneruniversitäten' %}</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">{% trans_text 'A consortium of leading European universities' "Un consortium d'universités européennes de premier plan" 'Ein Konsortium führender europäischer Universitäten' %}</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
            {% for uni in universities %}
            <a href="{% url 'universities:detail' uni.slug %}" class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition text-center group">
                {% if uni.logo %}
                <img src="{{ uni.logo.url }}" alt="{{ uni|translate:'name' }}" class="h-16 mx-auto mb-4 object-contain group-hover:scale-105 transition">
                {% else %}
                <div class="h-16 flex items-center justify-center mb-4">
                    <span class="text-2xl font-bold text-primary">{{ uni.abbreviation|default:uni.name|slice:":3" }}</span>
                </div>
                {% endif %}
                <h3 class="font-semibold text-sm text-gray-800">{{ uni|translate:'name' }}</h3>
                <p class="text-xs text-gray-500">{{ uni|translate:'city' }}, {{ uni.country }}</p>
            </a>
            {% endfor %}
        </div>
        <div class="text-center mt-8">
            <a href="{% url 'universities:list' %}" class="inline-block text-secondary hover:text-primary font-medium transition">
                {% trans_text 'View all universities' 'Voir toutes les universités' 'Alle Universitäten anzeigen' %} &rarr;
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Carte interactive des universités -->
{% if map_settings.show_on_home %}
{% include 'components/university_map.html' %}
{% endif %}

<!-- Research Areas -->
{% if research_areas %}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-primary mb-4">{% trans_text 'Domaines de Recherche' 'Research Areas' 'Forschungsbereiche' %}</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">{% trans_text 'Explorez nos axes de recherche de pointe' 'Explore our cutting-edge research areas' 'Entdecken Sie unsere Spitzenforschungsbereiche' %}</p>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {% for area in research_areas %}
            <a href="{% url 'research:list' %}?area={{ area.slug }}" class="bg-gray-50 p-6 rounded-lg hover:shadow-lg transition group" style="border-left: 4px solid {{ area.color }}">
                <h3 class="font-semibold text-lg text-primary mb-2 group-hover:text-secondary transition">{{ area|translate:'name' }}</h3>
                <p class="text-gray-600 text-sm mb-4">{{ area|translate:'short_description' }}</p>
                <span class="text-sm text-secondary">{{ area.project_count }} {% trans_text 'projet' 'project' 'Projekt' %}{{ area.project_count|pluralize }}</span>
            </a>
            {% endfor %}
        </div>
        <div class="text-center mt-8">
            <a href="{% url 'research:list' %}" class="inline-block text-secondary hover:text-primary font-medium transition">
                {% trans_text 'Voir tous les projets' 'View all projects' 'Alle Projekte anzeigen' %} &rarr;
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Featured Team -->
{% if featured_team %}
<section class="py-16 bg-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-primary mb-4">{% trans_text 'Notre Équipe' 'Our Team' 'Unser Team' %}</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">{% trans_text "Des experts passionnés au service de l'excellence académique" 'Passionate experts dedicated to academic excellence' 'Engagierte Experten im Dienste akademischer Exzellenz' %}</p>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {% for member in featured_team %}
            <a href="{% url 'team:detail' member.slug %}" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition group">
                {% if member.photo %}
                <img src="{{ member.photo.url }}" alt="{{ member.full_name }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
                {% else %}
                <div class="w-full h-48 bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white text-4xl font-bold">
                    {{ member.first_name.0 }}{{ member.last_name.0 }}
                </div>
                {% endif %}
                <div class="p-4">
                    <h3 class="font-semibold text-primary">{{ member.full_name }}</h3>
                    <p class="text-sm text-gray-500">{{ member.get_role_display }}</p>
                    {% if member.university %}
                    <p class="text-xs text-gray-400 mt-1">{{ member.university|translate:'name' }}</p>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
        <div class="text-center mt-8">
            <a href="{% url 'team:list' %}" class="inline-block text-secondary hover:text-primary font-medium transition">
                {% trans_text "Voir toute l'équipe" 'View full team' 'Gesamtes Team anzeigen' %} &rarr;
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Latest News -->
{% if latest_news %}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-primary mb-4">{% trans_text 'Actualités' 'News' 'Aktuelles' %}</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">{% trans_text 'Les dernières nouvelles du programme' 'Latest news from the program' 'Neueste Nachrichten aus dem Programm' %}</p>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            {% for article in latest_news %}
            <a href="{% url 'actualite:detail' article.slug %}" class="bg-gray-50 rounded-lg overflow-hidden hover:shadow-lg transition group">
                {% if article.image %}
                <img src="{{ article.image.url }}" alt="{{ article|translate:'title' }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
                {% else %}
                <div class="w-full h-48 bg-gradient-to-br from-secondary to-primary"></div>
                {% endif %}
                <div class="p-6">
                    {% if article.category %}
                    <span class="inline-block px-2 py-1 text-xs font-medium rounded" style="background-color: {{ article.category.color }}20; color: {{ article.category.color }}">
                        {{ article.category|translate:'name' }}
                    </span>
                    {% endif %}
                    <h3 class="font-semibold text-lg text-primary mt-2 mb-2 group-hover:text-secondary transition">{{ article|translate:'title' }}</h3>
                    <p class="text-gray-600 text-sm mb-4">{{ article.get_excerpt }}</p>
                    <span class="text-xs text-gray-400">{{ article.publication_date|date:"d M Y" }}</span>
                </div>
            </a>
            {% endfor %}
        </div>
        <div class="text-center mt-8">
            <a href="{% url 'actualite:list' %}" class="inline-block text-secondary hover:text-primary font-medium transition">
                {% trans_text 'Toutes les actualités' 'All news' 'Alle Neuigkeiten' %} &rarr;
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Partners Map Section -->
{% if partners %}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-primary mb-4">{% trans_text 'Nos Partenaires' 'Our Partners' 'Unsere Partner' %}</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">{% trans_text "Un réseau européen d'institutions de premier plan" 'A European network of leading institutions' 'Ein europäisches Netzwerk führender Institutionen' %}</p>
        </div>

        <!-- Interactive Map -->
        <div class="mb-12">
            <div id="partners-map" class="w-full rounded-xl shadow-lg"></div>
        </div>

        <!-- Partners Grid -->
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
            {% for partner in partners %}
            <a href="{{ partner.website|default:'#' }}"
               target="_blank"
               rel="noopener noreferrer"
               class="bg-gray-50 p-4 rounded-lg hover:shadow-md transition group text-center"
               data-lat="{{ partner.latitude }}"
               data-lng="{{ partner.longitude }}">
                {% if partner.logo %}
                <img src="{{ partner.logo.url }}"
                     alt="{{ partner|translate:'name' }}"
                     class="h-12 mx-auto mb-3 object-contain group-hover:scale-105 transition">
                {% else %}
                <div class="h-12 flex items-center justify-center mb-3">
                    <span class="text-lg font-bold text-primary">{{ partner.name|slice:":3" }}</span>
                </div>
                {% endif %}
                <h3 class="font-medium text-sm text-gray-800 mb-1">{{ partner|translate:'name' }}</h3>
                {% if partner.city %}
                <p class="text-xs text-gray-500">{{ partner.city }}{% if partner.country %}, {{ partner.country.name }}{% endif %}</p>
                {% endif %}
                {% if partner.is_main_partner %}
                <span class="inline-block mt-2 px-2 py-0.5 text-xs bg-accent/20 text-accent rounded">{% trans_text 'Partenaire principal' 'Main partner' 'Hauptpartner' %}</span>
                {% endif %}
            </a>
            {% endfor %}
        </div>
    </div>
</section>

{% endif %}

<!-- CTA -->
<section class="py-16 bg-gradient-to-r from-primary to-secondary text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-4">{% trans_text 'Rejoignez notre programme' 'Join our program' 'Treten Sie unserem Programm bei' %}</h2>
        <p class="text-xl text-gray-200 mb-8 max-w-2xl mx-auto">{% trans_text 'Découvrez une expérience académique internationale unique et lancez votre carrière dans la recherche' 'Discover a unique international academic experience and launch your career in research' 'Entdecken Sie eine einzigartige internationale akademische Erfahrung und starten Sie Ihre Karriere in der Forschung' %}</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{% url 'program:about' %}" class="inline-block bg-white text-primary px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
                {% trans_text 'En savoir plus' 'Learn more' 'Mehr erfahren' %}
            </a>
            <a href="{% url 'contact:contact' %}" class="inline-block border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary transition">
                {% trans_text 'Nous contacter' 'Contact us' 'Kontaktieren Sie uns' %}
            </a>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<!-- Leaflet JS for Partners Map -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const mapElement = document.getElementById('partners-map');
    if (!mapElement) return;

    // Initialize map centered on Europe
    const map = L.map('partners-map', {
        scrollWheelZoom: false
    }).setView([48.0, 10.0], 4);

    // Add tile layer (OpenStreetMap)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 18
    }).addTo(map);

    // Custom marker icon
    const partnerIcon = L.divIcon({
        className: 'partner-marker',
        html: '<div style="width:32px;height:32px;background:#1e3a5f;border-radius:50%;border:3px solid white;box-shadow:0 2px 6px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;"><svg style="width:16px;height:16px;color:white;" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/></svg></div>',
        iconSize: [32, 32],
        iconAnchor: [16, 32],
        popupAnchor: [0, -32]
    });

    // Partners data from Django
    const partners = [
        {% for partner in partners %}
        {% if partner.latitude and partner.longitude %}
        {
            name: "{{ partner.name|escapejs }}",
            city: "{{ partner.city|escapejs }}",
            country: "{{ partner.country.name|default:''|escapejs }}",
            lat: {{ partner.latitude|stringformat:"f" }},
            lng: {{ partner.longitude|stringformat:"f" }},
            logo: "{% if partner.logo %}{{ partner.logo.url }}{% endif %}",
            website: "{{ partner.website|default:'#'|escapejs }}",
            isMain: {{ partner.is_main_partner|yesno:"true,false" }}
        },
        {% endif %}
        {% endfor %}
    ];

    // Add markers
    const markers = [];
    partners.forEach(partner => {
        const popupContent = `
            <div style="text-align:center;padding:8px;min-width:150px;">
                ${partner.logo ? `<img src="${partner.logo}" style="height:32px;margin:0 auto 8px;">` : ''}
                <h3 style="font-weight:bold;font-size:14px;margin-bottom:4px;">${partner.name}</h3>
                <p style="font-size:12px;color:#666;">${partner.city}${partner.country ? ', ' + partner.country : ''}</p>
                ${partner.isMain ? '<span style="display:inline-block;margin-top:4px;padding:2px 8px;font-size:11px;background:#fef3c7;color:#92400e;border-radius:4px;">Partenaire principal</span>' : ''}
                ${partner.website !== '#' ? `<a href="${partner.website}" target="_blank" style="display:block;margin-top:8px;font-size:12px;color:#2563eb;">Visiter le site →</a>` : ''}
            </div>
        `;

        const marker = L.marker([partner.lat, partner.lng], {icon: partnerIcon})
            .bindPopup(popupContent)
            .addTo(map);
        markers.push(marker);
    });

    // Fit bounds to show all markers
    if (markers.length > 0) {
        const group = L.featureGroup(markers);
        map.fitBounds(group.getBounds().pad(0.2));
    }
});
</script>
{% endblock %}