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

{% block page_title %}{{ 'menu.about'|trans }} | Vision & Mission{% endblock %}

{% block extra_css %}
    {# Extraction des styles spécifiques à la vision et au CEO #}
    .vision-content { font-size: 18px; line-height: 1.8; color: #555; text-align: justify; }
    .ceo-section { background: #0E1641 !important; color: #fff; position: relative; overflow: hidden; padding: 120px 0; }
    .ceo-message-box { background: transparent !important; }
    .ceo-quote-mark { font-size: 120px; color: rgba(245, 158, 0, 0.2); position: absolute; top: -40px; left: -20px; }
    .video-wrapper { border-radius: 30px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); }
    .ceo-info-badge { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); padding: 20px; border-radius: 15px; margin-top: 30px; display: inline-block; }
    .mission-card { background: #fff; padding: 60px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); position: relative; overflow: hidden; }
{% endblock %}

{% block about_content %}
    <div class="intro-section" style="padding: 100px 0; background: #fff;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-5 mb-lg-0" data-aos="fade-right">
                    <div class="position-relative">
                        <img src="{{ asset('images/photo codir 2026.png') }}" alt="STRAM Team" style="width: 100%; border-radius: 30px; box-shadow: 0 30px 60px rgba(0,0,0,0.1);">
                        <div style="position: absolute; bottom: -30px; right: -30px; background: #F59E00; padding: 30px; border-radius: 20px; box-shadow: 0 15px 30px rgba(245, 158, 0, 0.3); z-index: 2;">
                            <img src="{{ asset('images/stram_signe1.PNG') }}" alt="Sign" style="width: 60px; filter: brightness(0) invert(1);">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-left" style="padding-left: 50px;">
                    <h4 style="color: #F59E00; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; margin-bottom: 15px;">{% if app.request.locale == 'en' %}Our Vision{% else %}Notre Vision{% endif %}</h4>
                    <div class="vision-content">
                        {% if app.request.locale == 'en' and aboutinformation.visionEn|raw %}
                            {{ aboutinformation.visionEn|raw }}
                        {% else %}
                            {{ aboutinformation.vision|raw }}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ceo-section">
        <div class="container">
            <div class="ceo-message-box" data-aos="fade-up">
                <div class="ceo-quote-mark">“</div>
                <div class="row align-items-center">
                    <div class="col-lg-5 mb-5 mb-lg-0">
                        {% set ceoVideo = aboutinformation.ceoVideoUrl %}
                        {% set ceoVideoFile = aboutinformation.ceoVideoFile %}
                        
                        <div class="video-wrapper">
                            <div class="video-container" style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden; background: #000;">
                                {% if ceoVideoFile %}
                                    <video id="ceoVideoPlayer" controls muted style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                                        <source src="{{ asset('uploads/about/' ~ ceoVideoFile) }}" type="video/mp4">
                                    </video>
                                {% elseif ceoVideo %}
                                    {% if 'youtube.com' in ceoVideo or 'youtu.be' in ceoVideo %}
                                        {% set videoId = '' %}
                                        {% if 'v=' in ceoVideo %}
                                            {% set videoId = ceoVideo|split('v=')|last|split('&')|first %}
                                        {% elseif 'youtu.be/' in ceoVideo %}
                                            {% set videoId = ceoVideo|split('youtu.be/')|last|split('?')|first %}
                                        {% endif %}
                                        <iframe id="ceoYoutubePlayer" src="https://www.youtube.com/embed/{{ videoId }}?enablejsapi=1&mute=1" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen></iframe>
                                    {% else %}
                                        <video id="ceoVideoPlayer" controls muted style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                                            <source src="{{ ceoVideo }}" type="video/mp4">
                                        </video>
                                    {% endif %}
                                {% else %}
                                    <img src="{{ asset('images/Mr melek jallouli.jpeg') }}" alt="CEO" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="ceo-info-badge">
                            <h4 style="color: #F59E00; font-weight: 800; margin-bottom: 5px;">{{ aboutinformation.ceoName|default('Melek Jallouli') }}</h4>
                            <h6 style="color: rgba(255,255,255,0.6); font-size: 13px; text-transform: uppercase; letter-spacing: 2px; margin: 0;">
                                {% if app.request.locale == 'en' and aboutinformation.ceoRoleEn %}{{ aboutinformation.ceoRoleEn }}{% else %}{{ aboutinformation.ceoRole|default('Directeur Général') }}{% endif %}
                            </h6>
                        </div>
                    </div>
                    
                    <div class="col-lg-7">
                        <div style="padding-left: 40px;">
                            <h6 style="color: #F59E00; text-transform: uppercase; letter-spacing: 4px; font-weight: 700; margin-bottom: 20px;">Message du Dirigeant</h6>
                            <h2 style="color: #fff; font-weight: 800; font-size: 42px; margin-bottom: 40px; line-height: 1.2;">
                                {% if app.request.locale == 'en' and aboutinformation.ceoMessageTitleEn %}{{ aboutinformation.ceoMessageTitleEn }}{% else %}{{ aboutinformation.ceoMessageTitle|default('Bâtir l’avenir avec ingéniosité et résilience.') }}{% endif %}
                            </h2>
                            <div style="font-size: 20px; line-height: 1.9; color: rgba(255,255,255,0.85); font-style: italic; border-left: 3px solid #F59E00; padding-left: 30px; margin-bottom: 40px;">
                                {% if app.request.locale == 'en' and aboutinformation.ceoMessageTextEn %}{{ aboutinformation.ceoMessageTextEn|raw }}{% else %}{{ aboutinformation.ceoMessageText|default('Face aux défis structurels contemporains...')|raw }}{% endif %}
                            </div>
                            <div class="mt-5">
                                <img src="{{ asset('images/stramsigne2.PNG') }}" alt="Signature" style="max-width: 180px; opacity: 0.9; filter: brightness(0) invert(1);">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mission-section" style="padding: 80px 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="mission-card" data-aos="fade-up">
                        <div class="text-center mb-4">
                            <h6 style="color: #F59E00; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; margin-bottom: 15px;">{{ 'section.our_mission'|trans }}</h6>
                        </div>
                        <div class="mission-content" style="font-size: 18px; line-height: 1.8; color: #555;">
                            {% if app.request.locale == 'en' and aboutinformation.missionEn|raw %}{{ aboutinformation.missionEn|raw }}{% else %}{{ aboutinformation.mission|raw }}{% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const ceoVideoObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    const videoElement = document.getElementById('ceoVideoPlayer');
                    const youtubeIframe = document.getElementById('ceoYoutubePlayer');
                    if (entry.isIntersecting) {
                        if (videoElement) videoElement.play().catch(e => {});
                        if (youtubeIframe) youtubeIframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
                    } else {
                        if (videoElement) videoElement.pause();
                        if (youtubeIframe) youtubeIframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
                    }
                });
            }, { threshold: 0.5 });
            const videoContainers = document.querySelectorAll('.video-container');
            videoContainers.forEach(container => ceoVideoObserver.observe(container));
        });
    </script>
{% endblock %}