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

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

{% block extra_css %}
    .impact-card { background: #f8f9fa; padding: 40px; border-radius: 20px; height: 100%; border-left: 5px solid #F59E00; transition: all 0.3s ease; }
    .impact-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
    .project-btn-large:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(245, 158, 0, 0.3); color: #0E1641; }
{% endblock %}

{% block about_content %}
    <div class="impact-section" style="padding: 100px 0; background: #fff;">
        <div class="container">
            <div class="section_header text-center mb-5">
                <h2 class="section_title" style="font-size: 40px; font-weight: 800; font-family: 'Montserrat', sans-serif;">{{ app.request.locale == 'en' ? 'Our Impact' : 'Notre Impact' }}</h2>
                <img src="{{ asset('images/stram_signe1.PNG') }}" alt="" style="max-width: 100px; margin-top: 10px;">
                
                {% set impactIntro = (app.request.locale == 'en' and aboutinformation.impactIntroEn) ? aboutinformation.impactIntroEn : aboutinformation.impactIntro %}
                {% if impactIntro %}
                    <div class="row justify-content-center mt-4">
                        <div class="col-lg-10">
                            <div style="font-size: 18px; line-height: 1.8; color: #555; text-align: justify;">
                                {{ impactIntro|raw }}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>

            <div class="row">
                {% for i in 1..4 %}
                    {% set point = (app.request.locale == 'en' and attribute(aboutinformation, 'impactPoint' ~ i ~ 'En')) ? attribute(aboutinformation, 'impactPoint' ~ i ~ 'En') : attribute(aboutinformation, 'impactPoint' ~ i) %}
                    {% if point %}
                        <div class="col-lg-6 mb-4" data-aos="fade-up" data-aos-delay="{{ (i-1) * 100 }}">
                            <div class="impact-card">
                                <div style="font-size: 16px; color: #333; line-height: 1.7;">
                                    {{ point|raw }}
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>

            {% set finalImpact = (app.request.locale == 'en' and aboutinformation.impactPoint5En) ? aboutinformation.impactPoint5En : aboutinformation.impactPoint5 %}
            {% if finalImpact %}
                <div class="row justify-content-center mt-5" data-aos="fade-up">
                    <div class="col-lg-10">
                        <div style="background: #0E1641; color: #fff; padding: 40px; border-radius: 30px; text-align: center; font-size: 18px; font-style: italic;">
                            {{ finalImpact|raw }}
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if aboutinformation.impactVideoUrl %}
            <div class="impact-video-section mt-5 text-center" data-aos="fade-up">
                <div class="video-container" style="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;">
                    {% set youtubeIdImp = aboutinformation.impactVideoUrl|split('v=')|last %}
                    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" src="https://www.youtube.com/embed/{{ youtubeIdImp }}" allowfullscreen></iframe>
                </div>
                <p class="mt-3" style="color: #666; font-style: italic;">{{ app.request.locale == 'en' ? 'Flagship Project Video' : 'Vidéo d\'un projet phare' }}</p>
            </div>
            {% endif %}

            <div class="text-center mt-5" data-aos="fade-up">
                <a href="{{ path('app_projets_frontend_tunisie') }}" class="project-btn-large" style="background: #F59E00; color: #0E1641; padding: 15px 40px; border-radius: 50px; font-weight: 800; text-decoration: none; display: inline-block; transition: all 0.3s ease;">
                    {{ app.request.locale == 'en' ? 'Discover our projects' : 'Découvrir nos projets' }} &rarr;
                </a>
            </div>
        </div>
    </div>
{% endblock %}