{% extends 'about/about_layout.html.twig' %}

{% block page_title %}{{ 'menu.about'|trans }} | Histoire{% endblock %}

{% block extra_css %}
    .history-timeline { position: relative; padding: 80px 0; overflow: hidden; }
    .history-timeline::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: #F59E00; transform: translateX(-50%); }
    .timeline-item { margin-bottom: 80px; position: relative; width: 50%; padding: 0 50px; }
    .timeline-item.left { left: 0; text-align: right; }
    .timeline-item.right { left: 50%; text-align: left; }
    .timeline-dot { position: absolute; top: 15px; width: 24px; height: 24px; background: #fff; border: 4px solid #F59E00; border-radius: 50%; z-index: 2; box-shadow: 0 0 15px rgba(245, 158, 0, 0.4); }
    .left .timeline-dot { right: -12px; }
    .right .timeline-dot { left: -12px; }
    .timeline-content { background: #ffffff; padding: 35px; border-radius: 20px; box-shadow: 0 15px 45px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; transition: all 0.4s ease; }
    .timeline-content:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(0,0,0,0.1); border-color: rgba(245, 158, 0, 0.2); }
    .timeline-year { font-size: 28px; font-weight: 800; color: #F59E00; margin-bottom: 10px; font-family: 'Montserrat', sans-serif; }
    @media(max-width: 991px) {
        .history-timeline::before { left: 30px; }
        .timeline-item { width: 100%; padding-left: 70px; text-align: left !important; }
        .timeline-item.right { left: 0; }
        .left .timeline-dot, .right .timeline-dot { left: 18px; }
    }
{% endblock %}

{% block about_content %}
    <div class="history-section" style="padding: 100px 0; background: #fff;">
        <div class="container">
            <div class="section_header text-center mb-5">
                <h6 style="color: #F59E00; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; margin-bottom: 10px;">{% if app.request.locale == 'en' and aboutinformation.historyTitleEn %}{{ aboutinformation.historyTitleEn }}{% else %}{{ aboutinformation.historyTitle|default('Notre Histoire') }}{% endif %}</h6>
                <h2 class="section_title" style="font-size: 40px; font-weight: 800;">{% if app.request.locale == 'en' and aboutinformation.historyDescEn %}{{ aboutinformation.historyDescEn }}{% else %}{{ aboutinformation.historyDesc|default('Une évolution constante guidée par l\'excellence') }}{% endif %}</h2>
            </div>

            <div class="history-timeline">
                {% for i in 1..4 %}
                    {% set text = (app.request.locale == 'en' and attribute(aboutinformation, 'historyText' ~ i ~ 'En')) ? attribute(aboutinformation, 'historyText' ~ i ~ 'En') : attribute(aboutinformation, 'historyText' ~ i) %}
                    {% set year = (app.request.locale == 'en' and attribute(aboutinformation, 'historyYear' ~ i ~ 'En')) ? attribute(aboutinformation, 'historyYear' ~ i ~ 'En') : attribute(aboutinformation, 'historyYear' ~ i) %}
                    {% if text %}
                        <div class="timeline-item {{ i is odd ? 'left' : 'right' }}" data-aos="fade-{{ i is odd ? 'right' : 'left' }}">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <div class="timeline-year">{{ year }}</div>
                                <p style="color: #555; line-height: 1.6;">{{ text|raw }}</p>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}