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

{% block title %}Le Village - Menotey{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
/* Responsive Mobile Fixes pour la page village */
@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;
    }
    
    .bg-primary.rounded-circle i,
    .bg-success.rounded-circle i,
    .bg-warning.rounded-circle i {
        font-size: 1rem !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">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mx-auto text-center">
                <h1>Le Village de Menotey</h1>
                <p class="lead">Découvrez les charmes et les caractéristiques de notre commune</p>
            </div>
        </div>
    </div>
</section>

<!-- Village Info Section -->
<section class="section">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6">
                <div class="slide-in-left">
                    <h2>Présentation générale</h2>
                    <p class="lead">Menotey est une commune française située dans le département du Jura, en région Bourgogne-Franche-Comté.</p>
                    
                    <div class="row g-3 mt-4">
                        <div class="col-sm-6">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center">
                                    <i class="fas fa-users fa-2x text-primary mb-2"></i>
                                    <h5>{{ population }}</h5>
                                    <small class="text-muted">Habitants</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-sm-6">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center">
                                    <i class="fas fa-mountain fa-2x text-success mb-2"></i>
                                    <h5>{{ altitude }}m</h5>
                                    <small class="text-muted">Altitude</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-sm-6">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center">
                                    <i class="fas fa-map fa-2x text-warning mb-2"></i>
                                    <h5>{{ superficie }}</h5>
                                    <small class="text-muted">Superficie</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-sm-6">
                            <div class="card bg-light border-0">
                                <div class="card-body text-center">
                                    <i class="fas fa-user-tie fa-2x text-info mb-2"></i>
                                    <h5>M. {{ maire }}</h5>
                                    <small class="text-muted">Maire</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="slide-in-right">
                    <img src="https://placehold.co/600x400/2c5530/ffffff?text=Vue+aerienne+Menotey" 
                         alt="Vue aérienne de Menotey" 
                         class="img-fluid rounded shadow">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Official Information Section -->
<section class="section">
    <div class="container">
        <div class="section-title">
            <h2>Informations officielles</h2>
            <p>Données administratives et géographiques</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            Données administratives
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <strong>Région :</strong><br>
                                <span class="text-muted">{{ region }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Département :</strong><br>
                                <span class="text-muted">{{ departement }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Arrondissement :</strong><br>
                                <span class="text-muted">{{ arrondissement }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Canton :</strong><br>
                                <span class="text-muted">{{ canton }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Code postal :</strong><br>
                                <span class="text-muted">{{ code_postal }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Code INSEE :</strong><br>
                                <span class="text-muted">{{ code_insee }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-map-marked-alt me-2"></i>
                            Données géographiques
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <strong>Latitude :</strong><br>
                                <span class="text-muted">{{ geographical_info.latitude }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Longitude :</strong><br>
                                <span class="text-muted">{{ geographical_info.longitude }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Altitude min :</strong><br>
                                <span class="text-muted">{{ geographical_info.altitude_min }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Altitude max :</strong><br>
                                <span class="text-muted">{{ geographical_info.altitude_max }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Superficie :</strong><br>
                                <span class="text-muted">{{ geographical_info.superficie }}</span>
                            </div>
                            <div class="col-sm-6">
                                <strong>Population :</strong><br>
                                <span class="text-muted">{{ population }} habitants</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-lg-12">
                <div class="alert alert-info">
                    <div class="d-flex align-items-center">
                        <i class="fab fa-wikipedia-w fa-2x me-3"></i>
                        <div>
                            <strong>Source officielle :</strong>
                            Pour plus d'informations détaillées sur l'histoire et la géographie de Menotey, 
                            consultez l'article Wikipedia officiel.
                            <a href="{{ wikipedia_url }}" target="_blank" class="btn btn-sm btn-outline-primary ms-2">
                                <i class="fas fa-external-link-alt"></i> Voir sur Wikipedia
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Geography Section -->
<section class="section bg-light">
    <div class="container">
        <div class="section-title">
            <h2>Géographie et environnement</h2>
            <p>Un territoire au cœur de la nature comtoise</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <i class="fas fa-tree fa-3x text-success mb-3"></i>
                        <h5 class="card-title">Forêts</h5>
                        <p class="card-text">Entouré de vastes forêts de chênes et de hêtres, Menotey offre de nombreux sentiers de randonnée et un environnement préservé.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <i class="fas fa-water fa-3x text-primary mb-3"></i>
                        <h5 class="card-title">Cours d'eau</h5>
                        <p class="card-text">Plusieurs ruisseaux traversent le territoire communal, créant un écosystème riche et varié favorable à la biodiversité.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <i class="fas fa-seedling fa-3x text-warning mb-3"></i>
                        <h5 class="card-title">Agriculture</h5>
                        <p class="card-text">L'agriculture locale se concentre sur l'élevage bovin et la production céréalière, respectant les traditions comtoises.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="section">
    <div class="container">
        <div class="section-title">
            <h2>Services et équipements</h2>
            <p>Tout ce qu'il faut pour bien vivre au village</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="fas fa-school text-primary me-2"></i>
                            Éducation
                        </h5>
                        <ul class="list-unstyled mt-3">
                            <li><i class="fas fa-check text-success me-2"></i>École primaire communale</li>
                            <li><i class="fas fa-check text-success me-2"></i>Cantine scolaire</li>
                            <li><i class="fas fa-check text-success me-2"></i>Garderie périscolaire</li>
                            <li><i class="fas fa-check text-success me-2"></i>Transport scolaire</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="fas fa-heartbeat text-danger me-2"></i>
                            Santé
                        </h5>
                        <ul class="list-unstyled mt-3">
                            <li><i class="fas fa-check text-success me-2"></i>Cabinet médical</li>
                            <li><i class="fas fa-check text-success me-2"></i>Pharmacie à proximité</li>
                            <li><i class="fas fa-check text-success me-2"></i>Infirmière à domicile</li>
                            <li><i class="fas fa-check text-success me-2"></i>Service d'urgence</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="fas fa-shopping-basket text-warning me-2"></i>
                            Commerce
                        </h5>
                        <ul class="list-unstyled mt-3">
                            <li><i class="fas fa-check text-success me-2"></i>Épicerie de village</li>
                            <li><i class="fas fa-check text-success me-2"></i>Boulangerie itinérante</li>
                            <li><i class="fas fa-check text-success me-2"></i>Marché hebdomadaire</li>
                            <li><i class="fas fa-check text-success me-2"></i>Producteurs locaux</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="fas fa-futbol text-info me-2"></i>
                            Loisirs
                        </h5>
                        <ul class="list-unstyled mt-3">
                            <li><i class="fas fa-check text-success me-2"></i>Terrain de football</li>
                            <li><i class="fas fa-check text-success me-2"></i>Salle des fêtes</li>
                            <li><i class="fas fa-check text-success me-2"></i>Aire de jeux</li>
                            <li><i class="fas fa-check text-success me-2"></i>Sentiers de randonnée</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Location Section -->
<section class="section bg-light">
    <div class="container">
        <div class="section-title">
            <h2>Situation géographique</h2>
            <p>Un emplacement privilégié en Franche-Comté</p>
        </div>
        
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <h4>Accès et transports</h4>
                <div class="mt-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-primary text-white rounded-circle p-2 me-3">
                            <i class="fas fa-car"></i>
                        </div>
                        <div>
                            <strong>En voiture</strong><br>
                            <small class="text-muted">15 min de Dole, 45 min de Besançon</small>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-success text-white rounded-circle p-2 me-3">
                            <i class="fas fa-train"></i>
                        </div>
                        <div>
                            <strong>Transport en commun</strong><br>
                            <small class="text-muted">Gare SNCF de Dole à proximité</small>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-warning text-white rounded-circle p-2 me-3">
                            <i class="fas fa-plane"></i>
                        </div>
                        <div>
                            <strong>Aéroport</strong><br>
                            <small class="text-muted">Aéroport de Dijon à 1h</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="bg-white p-4 rounded shadow">
                    <h5 class="mb-3">Distances principales</h5>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-center">
                                <h6 class="text-primary">Dole</h6>
                                <span class="text-muted">12 km</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h6 class="text-primary">Besançon</h6>
                                <span class="text-muted">65 km</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h6 class="text-primary">Dijon</h6>
                                <span class="text-muted">85 km</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h6 class="text-primary">Lyon</h6>
                                <span class="text-muted">180 km</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section bg-primary text-white">
    <div class="container text-center">
        <h2 class="mb-4">Envie d'en savoir plus ?</h2>
        <p class="lead mb-4">Découvrez l'histoire fascinante de notre village et ses projets d'avenir</p>
        <div class="d-flex justify-content-center gap-3 flex-wrap">
            <a href="{{ path('app_village_history') }}" class="btn btn-light btn-lg">
                <i class="fas fa-history"></i> Histoire du village
            </a>
            <a href="{{ path('app_projects') }}" class="btn btn-outline-light btn-lg">
                <i class="fas fa-tools"></i> Nos projets
            </a>
        </div>
    </div>
</section>
{% endblock %}