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

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

{% block extra_css %}
    .value-card { background: #fff; border-radius: 25px; padding: 50px 35px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.05); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid #f5f5f5; height: 100%; position: relative; overflow: hidden; }
    .value-card:hover { transform: translateY(-12px); box-shadow: 0 30px 70px rgba(0,0,0,0.12); border-color: rgba(245, 158, 0, 0.3); }
    .value-icon { font-size: 50px; color: #F59E00; margin-bottom: 25px; display: block; transition: transform 0.4s ease; }
    .value-card:hover .value-icon { transform: scale(1.1) rotate(5deg); }
    .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); max-width: 800px; margin: 0 auto; }
{% endblock %}

{% block about_content %}
    <div class="values-section" style="padding: 100px 0; background: #fdfdfd;">
        <div class="container">
            <div class="section_header text-center mb-5">
                <h2 class="section_title" style="font-size: 40px; font-weight: 800;">
                    {% if app.request.locale == 'en' and aboutinformation.valuesTitleEn %}{{ aboutinformation.valuesTitleEn }}{% else %}{{ aboutinformation.valuesTitle|default('Nos Valeurs') }}{% endif %}
                </h2>
                <img src="{{ asset('images/stram_signe1.PNG') }}" alt="" style="max-width: 100px; margin-top: 10px;">
                
                {% set valuesIntro = (app.request.locale == 'en' and aboutinformation.valuesIntroEn) ? aboutinformation.valuesIntroEn : aboutinformation.valuesIntro %}
                {% if valuesIntro %}
                    <div class="row justify-content-center mt-4">
                        <div class="col-lg-10">
                            <p style="font-size: 18px; line-height: 1.8; color: #555; text-align: center;">{{ valuesIntro|raw }}</p>
                        </div>
                    </div>
                {% endif %}
            </div>

            <div class="row mb-5">
                {% for i in 1..4 %}
                    {% set vTitle = attribute(aboutinformation, 'value' ~ i ~ 'Title') %}
                    {% set vTitleEn = attribute(aboutinformation, 'value' ~ i ~ 'TitleEn') %}
                    {% set vText = attribute(aboutinformation, 'value' ~ i ~ 'Text') %}
                    {% set vTextEn = attribute(aboutinformation, 'value' ~ i ~ 'TextEn') %}
                    {% set currentTitle = (app.request.locale == 'en' and vTitleEn) ? vTitleEn : vTitle %}
                    {% set currentText = (app.request.locale == 'en' and vTextEn) ? vTextEn : vText %}
                    {% if currentTitle %}
                        <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="{{ (i-1) * 100 }}">
                            <div class="value-card">
                                <i class="fa {% if i==1 %}fa-handshake{% elseif i==2 %}fa-lightbulb{% elseif i==3 %}fa-award{% else %}fa-users{% endif %} value-icon"></i>
                                <h4 style="font-weight: 700; color: #0E1641; margin-bottom: 15px;">{{ currentTitle }}</h4>
                                <div style="color: #666; line-height: 1.6;">{{ currentText|raw }}</div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>

            {% if aboutinformation.valuesVideoUrl %}
            <div class="values-video-section mt-5 text-center" data-aos="fade-up">
                <div class="video-container">
                    {% set youtubeIdVal = aboutinformation.valuesVideoUrl|split('v=')|last %}
                    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" src="https://www.youtube.com/embed/{{ youtubeIdVal }}" allowfullscreen></iframe>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
{% endblock %}