{% extends 'base.html.twig' %}

{% block title %}Accueil - {{ village_name }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
/* Responsive Mobile Fixes pour la page d'accueil */
@media (max-width: 768px) {

    /* Icônes rondes dans "Accès et transports" */
    .bg-primary.rounded-circle,
    .bg-success.rounded-circle,
    .bg-warning.rounded-circle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    .hero .col-lg-6:last-child img {
        margin-top: 1.2rem !important;
    }
    
    /* Centre mieux le texte et les boutons sur mobile */
    .hero .col-lg-6:first-child {
        text-align: center !important;
        margin-bottom: 1rem;
    }
    
    .hero .d-flex.gap-3 {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .hero .btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    
    /* Sections avec bg-primary - alignement corrigé */
    .bg-primary .d-flex.justify-content-center {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    .bg-primary .btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 0.5rem auto !important;
    }
    
    .bg-primary .gap-3 {
        gap: 1rem !important;
    }
}
</style>
{% endblock %}

{% block body %}
<!-- Hero Section -->
<section class="hero pb-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div>
                    <h1>Bienvenue à {{ village_name }}</h1>
                    <p class="lead">Découvrez l'authenticité de notre village au cœur de la Franche-Comté. Entre tradition et modernité, Menotey vous accueille dans un cadre préservé et chaleureux.</p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="{{ path('app_village_info') }}" class="btn btn-primary btn-lg">
                            <i class="fas fa-info-circle"></i> Découvrir le village
                        </a>
                        <a href="{{ path('app_pizza_list') }}" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-pizza-slice"></i> Commander des pizzas
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div>
                    <img src="https://placehold.co/600x400/2c5530/ffffff?text=Village+de+Menotey" 
                         alt="Village de Menotey" 
                         class="img-fluid rounded shadow-lg">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="section bg-light">
    <div class="container">
        <div class="section-title">
            <h2>Pourquoi choisir Menotey ?</h2>
            <p>Un village qui conjugue charme rural et services modernes</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 text-center">
                    <div class="card-body">
                        <div class="mb-3">
                            <i class="fas fa-landmark fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title">Patrimoine riche</h5>
                        <p class="card-text">Notre église romane du XIIe siècle et notre patrimoine architectural témoignent d'une histoire millénaire.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 text-center">
                    <div class="card-body">
                        <div class="mb-3">
                            <i class="fas fa-tree fa-3x text-success"></i>
                        </div>
                        <h5 class="card-title">Cadre naturel</h5>
                        <p class="card-text">Entouré de forêts et de prairies, Menotey offre un environnement préservé idéal pour se ressourcer.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 text-center">
                    <div class="card-body">
                        <div class="mb-3">
                            <i class="fas fa-users fa-3x text-warning"></i>
                        </div>
                        <h5 class="card-title">Vie communautaire</h5>
                        <p class="card-text">Une communauté dynamique avec de nombreux événements et associations pour tous les âges.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- News Section -->
<section class="section">
    <div class="container">
        <div class="section-title">
            <h2>Événements à venir</h2>
            <p>Ne manquez pas les prochains temps forts de notre village</p>
        </div>
        
        <div class="row g-4">
            {% for event in featured_events %}
            <div class="col-lg-4">
                <div class="card h-100">
                    <img src="https://placehold.co/400x250/8fbc8f/ffffff?text={{ event.title|url_encode }}" 
                         class="card-img-top" 
                         alt="{{ event.title }}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title">{{ event.title }}</h5>
                            <span class="badge bg-primary">{{ event.date }}</span>
                        </div>
                        <p class="card-text">{{ event.description }}</p>
                    </div>
                    <div class="card-footer bg-transparent">
                        <a href="{{ path('app_news') }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-info-circle"></i> En savoir plus
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="text-center mt-5">
            <a href="{{ path('app_news') }}" class="btn btn-primary btn-lg">
                <i class="fas fa-newspaper"></i> Voir toutes les actualités
            </a>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="section bg-light">
    <div class="container">
        <div class="section-title">
            <h2>Nos services</h2>
            <p>Des services de qualité pour faciliter votre quotidien</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-primary text-white rounded-circle p-3 me-3">
                                <i class="fas fa-pizza-slice" style="font-size: 1.5rem;"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-0">Pizzas artisanales</h5>
                                <small class="text-muted">Service de commande en ligne</small>
                            </div>
                        </div>
                        <p class="card-text">Commandez vos pizzas préférées directement en ligne. Paiement sécurisé et retrait au village selon vos disponibilités.</p>
                        <a href="{{ path('app_pizza_list') }}" class="btn btn-primary">
                            <i class="fas fa-shopping-cart"></i> Commander maintenant
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-success text-white rounded-circle p-3 me-3">
                                <i class="fas fa-building" style="font-size: 1.5rem;"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-0">Services municipaux</h5>
                                <small class="text-muted">Administration et démarches</small>
                            </div>
                        </div>
                        <p class="card-text">État civil, urbanisme, et toutes vos démarches administratives. La mairie vous accompagne dans vos projets.</p>
                        <a href="{{ path('app_contact') }}" class="btn btn-success">
                            <i class="fas fa-phone"></i> Nous contacter
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Statistics Section -->
<section class="section">
    <div class="container">
        <div class="row text-center g-4">
            <div class="col-md-3">
                <div class="card border-0">
                    <div class="card-body">
                        <i class="fas fa-users fa-3x text-primary mb-3"></i>
                        <h3 class="text-primary">450</h3>
                        <p class="text-muted">Habitants</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card border-0">
                    <div class="card-body">
                        <i class="fas fa-calendar fa-3x text-success mb-3"></i>
                        <h3 class="text-success">850</h3>
                        <p class="text-muted">Années d'histoire</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card border-0">
                    <div class="card-body">
                        <i class="fas fa-map fa-3x text-warning mb-3"></i>
                        <h3 class="text-warning">12.5</h3>
                        <p class="text-muted">km² de superficie</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="card border-0">
                    <div class="card-body">
                        <i class="fas fa-mountain fa-3x text-info mb-3"></i>
                        <h3 class="text-info">245m</h3>
                        <p class="text-muted">d'altitude</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section bg-primary text-white">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h2 class="mb-4">Rejoignez notre communauté</h2>
                <p class="lead mb-4">Restez informé de toutes les actualités de Menotey et ne manquez aucun événement de notre village.</p>
                <div class="d-flex justify-content-center gap-3 flex-wrap">
                    <a href="{{ path('app_news') }}" class="btn btn-light btn-lg">
                        <i class="fas fa-newspaper"></i> S'abonner aux actualités
                    </a>
                    <a href="{{ path('app_contact') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-envelope"></i> Nous écrire
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add staggered animation to cards
    const cards = document.querySelectorAll('.card');
    cards.forEach((card, index) => {
        card.style.animationDelay = `${index * 0.1}s`;
    });
    
    // Parallax effect on hero section - amélioré pour mobile
    window.addEventListener('scroll', function() {
        const scrolled = window.pageYOffset;
        const hero = document.querySelector('.hero');
        const isMobile = window.innerWidth <= 768;
        
        if (hero) {
            // Début de l'effet plus tard et plus doux
            const startOffset = isMobile ? 70 : 50; // Plus tard sur mobile
            const parallaxStrength = isMobile ? 0.22 : 0.3; // Plus doux sur mobile
            
            if (scrolled > startOffset) {
                const adjustedScroll = scrolled - startOffset;
                hero.style.transform = `translateY(${adjustedScroll * parallaxStrength}px)`;
            } else {
                hero.style.transform = `translateY(0px)`;
            }
        }
    });
});
</script>
{% endblock %}