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

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

{% block extra_css %}
    .hsse-card-premium-light { background: #fff; border-radius: 30px; height: 100%; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); transition: all 0.4s ease; display: flex; flex-direction: column; overflow: hidden; }
    .hsse-card-image { width: 100%; height: 220px; overflow: hidden; }
    .hsse-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
    .hsse-card-premium-light:hover .hsse-card-image img { transform: scale(1.1); }
    .hsse-content-light { padding: 30px 35px 45px; font-size: 16px; line-height: 1.8; color: #555; text-align: justify; flex-grow: 1; }
    .video-wrapper-premium-light { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 40px; overflow: hidden; box-shadow: 0 40px 80px rgba(14, 22, 65, 0.15); border: 8px solid #fff; }
    .video-wrapper-premium-light iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
    .odd-cta-btn { background: #F59E00; color: #0E1641 !important; padding: 12px 12px 12px 35px; border-radius: 60px; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; transition: all 0.3s ease; text-transform: uppercase; }
    .odd-cta-btn:hover { transform: scale(1.05); box-shadow: 0 15px 30px rgba(245, 158, 0, 0.4); }
    .icon-circle { width: 45px; height: 45px; background: #0E1641; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #F59E00; margin-left: 20px; }
{% endblock %}

{% block about_content %}
    <div class="hsse-section" style="padding: 120px 0; background: #f8f9fa;">
        <div class="container">
            <div class="section_header text-center mb-5">
                {% set hsseTitle = (app.request.locale == 'en' and aboutinformation.hsseTitleEn) ? aboutinformation.hsseTitleEn : aboutinformation.hsseTitle %}
                <h2 style="font-size: 48px; font-weight: 900; color: #0E1641; text-transform: uppercase;">{{ hsseTitle|default('Engagement HSSE') }}</h2>
                <div style="width: 80px; height: 4px; background: #F59E00; margin: 20px auto; border-radius: 2px;"></div>
                
                {% set hsseIntro = (app.request.locale == 'en' and aboutinformation.hsseIntroEn) ? aboutinformation.hsseIntroEn : aboutinformation.hsseIntro %}
                {% if hsseIntro %}
                    <div class="row justify-content-center mt-4">
                        <div class="col-lg-9">
                            <div style="font-size: 20px; line-height: 1.8; color: #555;">{{ hsseIntro|raw }}</div>
                        </div>
                    </div>
                {% endif %}
            </div>

            <div class="row mb-5 mt-5">
                {% for i in 1..3 %}
                    {% set point = (app.request.locale == 'en' and attribute(aboutinformation, 'hssePoint' ~ i ~ 'En')) ? attribute(aboutinformation, 'hssePoint' ~ i ~ 'En') : attribute(aboutinformation, 'hssePoint' ~ i) %}
                    {% set image = attribute(aboutinformation, 'hsseImage' ~ i) %}
                    {% if point %}
                        <div class="col-lg-4 mb-4" data-aos="fade-up" data-aos-delay="{{ (i-1) * 150 }}">
                            <div class="hsse-card-premium-light">
                                {% if image %}
                                    <div class="hsse-card-image">
                                        <img src="{{ asset('uploads/about/' ~ image) }}" alt="STRAM HSSE">
                                    </div>
                                {% endif %}
                                <div class="hsse-content-light">{{ point|raw }}</div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>

            <div class="row align-items-center mt-5 pt-4">
                <div class="col-lg-10 mx-auto text-center">
                    {% if aboutinformation.hsseVideo %}
                        <div class="video-wrapper-premium-light" data-aos="zoom-in">
                            {% set youtubeIdHsse = aboutinformation.hsseVideo|split('v=')|last %}
                            <iframe src="https://www.youtube.com/embed/{{ youtubeIdHsse }}" allowfullscreen></iframe>
                        </div>
                    {% endif %}

                    <div class="mt-5" data-aos="fade-up">
                        <a href="{{ path('app_sustainability') }}" class="odd-cta-btn">
                            {{ app.request.locale == 'en' ? 'Our contribution to SDGs' : 'Voir Nos contributions aux ODD' }} 
                            <span class="icon-circle"><i class="fas fa-arrow-right"></i></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}