{# =============================================================
TEMPLATE 2 — SOIRÉE STAND‑UP EN ENTREPRISE (itinerant)
============================================================= #}
{% extends '@SyliusShop/shared/layout/base.html.twig' %}

{% block title %}Spectacle Stand‑Up Entreprise | Fire Comedy Club se déplace{% endblock %}
{% block meta_description %}Offrez un show de stand‑up dans vos locaux : humour sur‑mesure, matériel son/lumière inclus,
partout en Aquitaine. Réservation en 24 h.{% endblock %}

{% block content %}
<div class="container position-relative pb-4 mb-2 mb-lg-3">
    <div class="row justify-content-center">
        <div class="col-lg-9 col-xl-8 text-center pt-5 mt-1">
            <h1 class="display-6 pt-3 mt-3 mb-4">Soirée Stand‑Up en Entreprise</h1>
            <p class="opacity-70 fs-xl">Le Fire Comedy Club débarque directement sur votre lieu d’événement</p>
        </div>
    </div>
</div>

<!-- Hero (desktop) -->
<div class="d-none d-md-block">
    <section class="jarallax" data-jarallax data-speed="0.4">
        <div class="jarallax-img" style="background-image: url({{ asset('assets/images/entreprise/vertical.png') }});">
        </div>
        <div style="height: 600px;"></div>
    </section>
</div>
<!-- Hero (mobile) -->
<div class="d-block d-md-none">
    <img src="{{ asset('assets/images/entreprise/vertical.png') }}" alt="Stand‑up en entreprise"
        class="img-fluid w-100">
</div>

<!-- Description de l’offre itinérante -->
<section class="container py-5 my-1 my-md-4 my-lg-5">
    <div class="row">
        <div class="pe-lg-4 me-lg-3 pe-xl-0 me-xl-0">
            <p class="fs-lg mb-0">
                After-work, séminaire, soirée clients, gala ou kick-off&nbsp;?
                <strong>Nous ramenons le stand-up chez vous</strong> — dans vos locaux, un lieu partenaire ou l’endroit
                de votre choix.
                <br /><br />
                <strong>Programmation sur-mesure</strong> avec des humoristes de la nouvelle génération, et un ton adapté à votre culture&nbsp;: <em>family-friendly</em>,
                <em>work-life</em> ou 100% personnalisé.
                Et parce qu’on aime quand tout roule, vous n’avez qu’une chose à faire&nbsp;: <strong>profiter du show</strong>.
            </p>
        </div>

    </div>
    <!-- CTA contact => formulaire externe -->
    <div class="text-center">
        <a href="{{ path('sylius_shop_contact_request', {'origin': 'standup'}) }}" class="btn btn-primary mt-3">
            <i class="bx bx-envelope me-2"></i>{{ 'sylius.ui.contact_us'|trans }}
        </a>
    </div>
</section>

<!-- Galerie (Parallax desktop) -->
<div class="d-none d-md-block">
    <section class="container position-relative pt-1 pt-md-3">
        <div class="row align-items-start">
            <div class="rellax col-lg-5 col-sm-6 mb-4 mb-sm-0" data-rellax-percentage="0.5" data-rellax-speed="-0.5"
                data-disable-parallax-down="sm">
                <img src="{{ asset('assets/images/entreprise/hg.png') }}" class="rounded-3" width="526"
                    alt="Installation technique">
            </div>
            <div class="rellax col-lg-7 col-sm-6 d-sm-flex justify-content-end pt-sm-4 pt-lg-5 mt-md-3 mb-4 mb-sm-0"
                data-rellax-percentage="0.5" data-rellax-speed="-1.25" data-disable-parallax-down="sm">
                <div><img src="{{ asset('assets/images/entreprise/hd.png') }}" class="rounded-3" width="456"
                        alt="Interaction public"></div>
            </div>
            <div class="rellax col-lg-5 col-sm-6 d-sm-flex justify-content-lg-end pt-sm-5 mt-lg-5 mb-4 mb-sm-0"
                data-rellax-percentage="0.5" data-rellax-speed="-1.25" data-disable-parallax-down="sm">
                <div><img src="{{ asset('assets/images/entreprise/bg.png') }}" class="rounded-3" width="456"
                        alt="Rires collectifs"></div>
            </div>
            <div class="rellax col-lg-7 col-sm-6 d-sm-flex justify-content-center mt-sm-n5 mb-4 mb-sm-0"
                data-rellax-percentage="0.5" data-rellax-speed="-0.25" data-disable-parallax-down="sm">
                <div><img src="{{ asset('assets/images/entreprise/c.png') }}" class="d-block rounded-3 mt-xl-n5"
                        width="526" alt="Show privé"></div>
            </div>
        </div>
    </section>
    <div class="row position-sm-absolute top-50 start-0 translate-middle-sm-y w-100 d-flex">
        <div class="rellax col-lg-5 col-sm-6 offset-sm-3 offset-lg-4 mt-sm-n7" style="margin-top: -900px;"
            data-rellax-percentage="0.5" data-rellax-speed="1.4" data-disable-parallax-down="sm">
            <img src="{{ asset('assets/images/entreprise/bd.png') }}" class="d-block rounded-3 mt-xl-n5 ms-5"
                width="526" alt="Humoriste en action">
        </div>
    </div>
</div>

<!-- Galerie (mobile) -->
<div class="d-block d-md-none">
    <section class="container pt-3">
        <div class="row g-4">
            {% set imgs = ['hg','hd','bg','bd','c'] %}
            {% for im in imgs %}
            <div class="col-12"><img src="{{ asset('assets/images/entreprise/' ~ im ~ '.png') }}"
                    class="img-fluid rounded-3" alt="Stand‑up mobile"></div>
            {% endfor %}
        </div>
    </section>
</div>



<!-- Scripts -->
<script src="{{ asset('assets/vendor/jarallax/dist/jarallax.min.js') }}"></script>
<script src="{{ asset('assets/vendor/rellax/rellax.min.js') }}"></script>
<script src="{{ asset('assets/js/theme.min.js') }}"></script>
{% endblock %}