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

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

{% block extra_css %}
    .subsidiary-card { background: #fff; border-radius: 30px; padding: 45px; box-shadow: 0 15px 40px rgba(0,0,0,0.03); border: 1px solid #f2f2f2; transition: all 0.5s ease; height: 100%; display: flex; flex-direction: column; position: relative; }
    .subsidiary-card:hover { transform: translateY(-15px); box-shadow: 0 35px 80px rgba(14, 22, 65, 0.12); border-color: rgba(245, 158, 0, 0.4); }
    .subsidiary-logo-wrapper { height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; background: rgba(245, 158, 0, 0.02); border-radius: 15px; padding: 15px; }
    .subsidiary-logo { width: 150px; height: 75px; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: all 0.4s ease; }
    .subsidiary-card:hover .subsidiary-logo { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }
{% endblock %}

{% block about_content %}
    <div class="subsidiaries-section-real" 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;">{{ 'section.our_subsidiaries'|trans }}</h2>
                <img src="{{ asset('images/stram_signe1.PNG') }}" alt="" style="max-width: 100px; margin-top: 10px;">
            </div>

            <div class="row">
                {% for m in allfiliare %}
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="subsidiary-card" data-aos="fade-up">
                            <div class="subsidiary-logo-wrapper">
                                <img src="{{ asset('uploads/filiare/'~ m.brochureFilename) }}" alt="{{ m.nomsocieter }}" class="subsidiary-logo">
                            </div>
                            <h4 style="font-weight: 700; color: #0E1641; margin-bottom: 15px;">{{ m.nomsocieter }}</h4>
                            <div class="subsidiary-info mb-3">
                                <p style="font-size: 14px; margin-bottom: 5px;"><strong style="color: #F59E00;">{{ 'about_revamp.subsidiary_role'|trans }}:</strong><br>
                                {% if app.request.locale == 'en' and m.descriptionEn %}{{ m.descriptionEn|raw }}{% else %}{{ m.description|default('Partenaire stratégique...')|raw }}{% endif %}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}