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

{% block title %}Histoire du Village - Village de Menotey{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
    width: 50%;
}

.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 30px;
}

.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 30px;
}

.timeline-content {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    position: relative;
}

.timeline-item:nth-child(odd) .timeline-content::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: white;
}

.timeline-item:nth-child(even) .timeline-content::after {
    content: '';
    position: absolute;
    top: 20px;
    left: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: white;
}

.timeline-marker {
    position: absolute;
    top: 20px;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--primary-color);
}

.timeline-item:nth-child(odd) .timeline-marker {
    right: -10px;
}

.timeline-item:nth-child(even) .timeline-marker {
    left: -10px;
}

.timeline-year {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.heritage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.heritage-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.heritage-card:hover {
    transform: translateY(-5px);
}

.heritage-image {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.fun-facts {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 15px;
    padding: 2rem;
    margin: 3rem 0;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.fact-item {
    text-align: center;
}

.fact-number {
    font-size: 2.5rem;
    font-weight: 700;
    display: block;
}

@media (max-width: 768px) {
    .timeline::before {
        left: 30px;
    }
    
    .timeline-item {
        width: 100%;
        left: 0 !important;
        padding-left: 60px !important;
        padding-right: 0 !important;
    }
    
    .timeline-marker {
        left: 20px !important;
    }
    
    .timeline-content::after {
        display: none;
    }
}
</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>Histoire de Menotey</h1>
                <p class="lead">Découvrez l'histoire millénaire de notre village de Franche-Comté</p>
            </div>
        </div>
    </div>
</section>

<!-- Timeline Section -->
<section class="section">
    <div class="container">
        <div class="section-title">
            <h2>Chronologie historique</h2>
            <p>Un voyage à travers les siècles</p>
        </div>
        
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-year">XIe siècle</div>
                    <h4>Premières mentions</h4>
                    <p>Les premières traces écrites de Menotey remontent au XIe siècle. Le village était alors un petit hameau agricole dans la région de la Bresse comtoise.</p>
                </div>
                <div class="timeline-marker"></div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-year">XIIe siècle</div>
                    <h4>Construction de l'église</h4>
                    <p>L'église romane Saint-Pierre est construite, témoignant de l'importance grandissante du village. Son architecture typique de la région en fait aujourd'hui un monument historique.</p>
                </div>
                <div class="timeline-marker"></div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-year">XVIe siècle</div>
                    <h4>Période de prospérité</h4>
                    <p>Le village connaît un développement important grâce à l'agriculture et à l'élevage. Plusieurs fermes caractéristiques de l'architecture comtoise sont construites.</p>
                </div>
                <div class="timeline-marker"></div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-year">1789</div>
                    <h4>Révolution française</h4>
                    <p>Comme partout en France, la Révolution marque une rupture. Menotey devient une commune à part entière avec son premier maire élu.</p>
                </div>
                <div class="timeline-marker"></div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-year">XIXe siècle</div>
                    <h4>Modernisation</h4>
                    <p>Arrivée du chemin de fer dans la région, développement des communications. La population atteint son maximum historique avec plus de 200 habitants.</p>
                </div>
                <div class="timeline-marker"></div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-year">XXe siècle</div>
                    <h4>Évolution contemporaine</h4>
                    <p>Exode rural, puis renaissance grâce au tourisme vert et à la qualité de vie. Préservation du patrimoine et développement durable.</p>
                </div>
                <div class="timeline-marker"></div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-content">
                    <div class="timeline-year">2020s</div>
                    <h4>Menotey aujourd'hui</h4>
                    <p>Un village moderne qui préserve son authenticité, avec des services digitaux comme la commande de pizzas en ligne, tout en gardant ses traditions.</p>
                </div>
                <div class="timeline-marker"></div>
            </div>
        </div>
    </div>
</section>

<!-- Fun Facts -->
<section class="fun-facts">
    <div class="container">
        <h3 class="text-center mb-4">Le saviez-vous ?</h3>
        
        <div class="fact-grid">
            <div class="fact-item">
                <span class="fact-number" data-target="800">0</span>
                <span>Années d'histoire</span>
            </div>
            <div class="fact-item">
                <span class="fact-number" data-target="450">0</span>
                <span>Habitants aujourd'hui</span>
            </div>
            <div class="fact-item">
                <span class="fact-number" data-target="1">0</span>
                <span>Monument historique</span>
            </div>
            <div class="fact-item">
                <span class="fact-number" data-target="5.2">0</span>
                <span>km² de superficie</span>
            </div>
        </div>
    </div>
</section>

<!-- Heritage Section -->
<section class="section bg-light">
    <div class="container">
        <div class="section-title">
            <h2>Notre patrimoine</h2>
            <p>Les trésors architecturaux et naturels de Menotey</p>
        </div>
        
        <div class="heritage-grid">
            <div class="heritage-card">
                <img src="https://placehold.co/400x200/8fbc8f/ffffff?text=Eglise+Saint-Pierre" 
                     alt="Église Saint-Pierre" class="heritage-image">
                <div class="p-4">
                    <h5>Église Saint-Pierre</h5>
                    <p>Monument historique du XIIe siècle, remarquable exemple d'architecture romane comtoise avec son clocher caractéristique.</p>
                </div>
            </div>
            
            <div class="heritage-card">
                <img src="https://placehold.co/400x200/2c5530/ffffff?text=Fermes+Comtoises" 
                     alt="Fermes comtoises" class="heritage-image">
                <div class="p-4">
                    <h5>Fermes comtoises</h5>
                    <p>Architecture traditionnelle avec leurs toits en tuiles plates et leurs grandes charpentes, témoins de l'activité agricole passée.</p>
                </div>
            </div>
            
            <div class="heritage-card">
                <img src="https://placehold.co/400x200/4CAF50/ffffff?text=Paysages+Ruraux" 
                     alt="Paysages ruraux" class="heritage-image">
                <div class="p-4">
                    <h5>Paysages ruraux</h5>
                    <p>Bocages préservés, prairies et petits bois qui composent un écrin de verdure typique de la Bresse comtoise.</p>
                </div>
            </div>
            
            <div class="heritage-card">
                <img src="https://placehold.co/400x200/2196F3/ffffff?text=Fontaines+Lavoirs" 
                     alt="Fontaines et lavoirs" class="heritage-image">
                <div class="p-4">
                    <h5>Fontaines et lavoirs</h5>
                    <p>Vestiges de la vie quotidienne d'autrefois, ces éléments du petit patrimoine racontent l'histoire du village.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Geographic Context -->
<section class="section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h3>Situation géographique</h3>
                <p>Menotey est située dans le département du Jura, en région Bourgogne-Franche-Comté. Le village s'étend sur 5,22 km² dans la plaine de la Bresse comtoise.</p>
                
                <ul class="list-unstyled mt-4">
                    <li class="mb-2"><i class="fas fa-map-marker-alt text-primary me-2"></i> <strong>Région :</strong> Bourgogne-Franche-Comté</li>
                    <li class="mb-2"><i class="fas fa-map-marker-alt text-primary me-2"></i> <strong>Département :</strong> Jura (39)</li>
                    <li class="mb-2"><i class="fas fa-map-marker-alt text-primary me-2"></i> <strong>Arrondissement :</strong> Dole</li>
                    <li class="mb-2"><i class="fas fa-map-marker-alt text-primary me-2"></i> <strong>Canton :</strong> Authume</li>
                    <li class="mb-2"><i class="fas fa-ruler text-primary me-2"></i> <strong>Superficie :</strong> 5,22 km²</li>
                    <li class="mb-2"><i class="fas fa-mountain text-primary me-2"></i> <strong>Altitude :</strong> 196 à 210 mètres</li>
                </ul>
            </div>
            <div class="col-lg-6">
                <img src="https://placehold.co/500x400/2c5530/ffffff?text=Carte+Menotey" 
                     alt="Situation de Menotey" class="img-fluid rounded shadow">
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="section bg-primary text-white">
    <div class="container text-center">
        <h3>Découvrez notre village</h3>
        <p class="lead">Venez visiter Menotey et plonger dans son histoire</p>
        <div class="mt-4">
            <a href="{{ path('app_contact') }}" class="btn btn-light btn-lg me-3">
                <i class="fas fa-envelope"></i> Nous contacter
            </a>
            <a href="{{ path('app_gallery') }}" class="btn btn-outline-light btn-lg">
                <i class="fas fa-camera"></i> Voir la galerie
            </a>
        </div>
    </div>
</section>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fonction de compteur animé
    function animateCounters() {
        const counters = document.querySelectorAll('.fact-number[data-target]');
        
        const observerOptions = {
            threshold: 0.5,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const counter = entry.target;
                    const target = parseFloat(counter.getAttribute('data-target'));
                    const duration = 2000; // 2 secondes
                    const steps = 60;
                    const increment = target / steps;
                    let current = 0;
                    
                    const timer = setInterval(() => {
                        current += increment;
                        if (current >= target) {
                            current = target;
                            clearInterval(timer);
                        }
                        
                        // Formatage du nombre
                        if (target === 5.2) {
                            counter.textContent = current.toFixed(1);
                        } else if (target === 800) {
                            counter.textContent = Math.round(current) + '+';
                        } else {
                            counter.textContent = Math.round(current);
                        }
                    }, duration / steps);
                    
                    observer.unobserve(counter);
                }
            });
        }, observerOptions);
        
        counters.forEach(counter => {
            observer.observe(counter);
        });
    }
    
    // Initialiser les compteurs
    animateCounters();
});
</script>

{% endblock %}