{% extends 'base.html.twig' %}

{% block title %}
	{{ agency.agencyHeroTitle }}
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('front/css/agency.css') }}"/>
{% endblock %}

{% block body %}
	<section class="agency-hero-section">
		{% if agency.agencyHeroVideo %}
			<video class="agency-hero-background-media" autoplay muted loop playsinline>
				<source src="{{ asset('front/videos/agency/' ~ agency.agencyHeroVideo) }}" type="video/mp4">
				Votre navigateur ne supporte pas la vidéo.
			</video>
		{% elseif agency.agencyHeroImage %}
			<div class="agency-hero-background-media agency-hero-bg-image" style="background-image: url('{{ asset('front/images/agency/' ~ agency.agencyHeroImage|trim('/')) }}');"></div>
		{% endif %}

		<div class="agency-hero-overlay"></div>
		<div class="agency-hero-glow"></div>

		<div class="container h-100">
			<div class="row justify-content-center align-items-center h-100 text-center">
				<div class="col-lg-8">
					<div class="agency-hero-content">
						<h1 class="agency-hero-title">
							{{ agency.agencyHeroTitle }}
						</h1>

						<h6 class="agency-hero-subtitle">
							{{ agency.agencyHeroSubtitle }}
						</h6>

						<p class="agency-hero-text">
							{{ agency.agencyHeroSlug }}
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	{% if agency.agencyVideo %}
		<section class="video-section">
			<div class="container">
				<div class="video-section-inner">
					<video class="section-video" autoplay muted loop playsinline controls>
						<source src="{{ asset('front/videos/agency/' ~ agency.agencyVideo) }}" type="video/mp4">
						Votre navigateur ne supporte pas la vidéo.
					</video>
				</div>
			</div>
		</section>
	{% endif %}

	<section class="creative-service-section">
		<div class="creative-service-glow"></div>

		<div class="container">
			<div class="creative-service-content text-center">
				<h2 class="creative-service-title">
					{{ agency.agencyCreativeTitle|replace({
					'CREATIVE': '<span class="creative-highlight">CREATIVE</span>'
				})|raw }}
				</h2>

				<p class="creative-service-text">
					{{ agency.agencyCreativeParagraph }}
				</p>
			</div>
		</div>
	</section>

	<section class="offers-section" style="background-image: url('{{ asset('front/images/agency/' ~ agency.agencyOffresImage|trim('/')) }}');">
		<div class="offers-overlay"></div>

		<div class="container">
			<div class="offers-content text-center">
				<h2 class="offers-title">
					{{ agency.agencyOffresTitle }}
				</h2>

				<p class="offers-intro">
					{{ agency.agencyOffresSlug }}
				</p>

				<div class="row justify-content-center offers-grid">
					<div class="col-lg-4 col-md-6 mb-5">
						<div class="offer-item">
							<div class="offer-icon">
								<img src="{{ asset('front/images/agency/offre-1.png') }}" alt="Direction Artistique">
							</div>
							<h3 class="offer-title">DIRECTION ARTISTIQUE</h3>
							<p class="offer-text">Scénographie, storytelling.</p>
						</div>
					</div>

					<div class="col-lg-4 col-md-6 mb-5">
						<div class="offer-item">
							<div class="offer-icon">
								<img src="{{ asset('front/images/agency/offre-2.png') }}" alt="Coordination Artistique">
							</div>
							<h3 class="offer-title">COORDINATION ARTISTIQUE</h3>
							<p class="offer-text">Casting, logistique, gestion financière et juridique.</p>
						</div>
					</div>

					<div class="col-lg-4 col-md-6 mb-5">
						<div class="offer-item">
							<div class="offer-icon">
								<img src="{{ asset('front/images/agency/offre-3.png') }}" alt="Chorégraphie et Performance">
							</div>
							<h3 class="offer-title">CHORÉGRAPHIE & PERFORMANCE</h3>
							<p class="offer-text">Création de shows et performances sur-mesure.</p>
						</div>
					</div>

					<div class="col-lg-4 col-md-6 mb-5">
						<div class="offer-item">
							<div class="offer-icon">
								<img src="{{ asset('front/images/agency/offre-4.png') }}" alt="Gestion d’artistes">
							</div>
							<h3 class="offer-title">GESTION D’ARTISTES</h3>
							<p class="offer-text">Chorégraphes, danseurs, interprètes.</p>
						</div>
					</div>

					<div class="col-lg-4 col-md-6 mb-5">
						<div class="offer-item">
							<div class="offer-icon">
								<img src="{{ asset('front/images/agency/offre-5.png') }}" alt="Création digitale">
							</div>
							<h3 class="offer-title">CRÉATION DIGITALE</h3>
							<p class="offer-text">Publicité, clip vidéo.</p>
						</div>
					</div>

					<div class="col-lg-4 col-md-6 mb-5">
						<div class="offer-item">
							<div class="offer-icon">
								<img src="{{ asset('front/images/agency/offre-6.png') }}" alt="Expériences et installations">
							</div>
							<h3 class="offer-title">EXPÉRIENCES ET INSTALLATIONS</h3>
							<p class="offer-text">Événements immersifs, mapping.</p>
						</div>
					</div>
				</div>

				<div class="offers-footer">
					<a href="{{ path('app_contact') }}" class="offers-btn">
						CONTACTEZ-NOUS
						<span>↗</span>
					</a>
				</div>
			</div>
		</div>
	</section>

	<section class="references-section">
		<div class="container">
			<div class="row align-items-start g-5">
				<div class="col-lg-5">
					<div class="references-content">
						<h2 class="references-title">
							{{ agency.agencyReferencesTitle|nl2br }}
						</h2>

						<p class="references-subtitle">
							{{ agency.agencyReferencesSubtitle }}
						</p>

						<ul class="references-list">
							{% for reference in references %}
								<li>
									<a href="#" class="reference-link {{ loop.first ? 'active' : '' }}" data-reference-id="{{ reference.id }}">
										{{ reference.title }}
									</a>
								</li>
							{% endfor %}
						</ul>
					</div>
				</div>

				<div class="col-lg-7">
					<div class="references-scroll-layout">
						<div class="references-manual-scroll" id="referencesManualScroll">
							{% for reference in references %}
								{% for item in reference.sliderImageReferences %}
									{% if (item.video and item.isVideoPublished) or (item.image and item.isImagePublished) %}
										<div class="reference-card {{ loop.parent.loop.first ? '' : 'd-none' }}" data-reference-id="{{ reference.id }}" data-index="{{ loop.index0 }}">

											{% if item.video and item.isVideoPublished %}
												<video class="reference-card-media" controls playsinline>
													<source src="{{ asset('front/videos/agency/' ~ item.video|trim('/')) }}" type="video/mp4">
													Votre navigateur ne supporte pas la vidéo.
												</video>
											{% elseif item.image and item.isImagePublished %}
												<img src="{{ asset('front/images/agency/' ~ item.image|trim('/')) }}" alt="{{ item.title }}" class="reference-card-media">
											{% endif %}

											{% if item.title %}
												<div class="reference-card-caption">
													{{ item.title }}
												</div>
											{% endif %}
										</div>
									{% endif %}
								{% endfor %}
							{% endfor %}
						</div>

						<div class="references-dots" id="referencesDots"></div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="move-people-section">
		<div class="container">
			<div class="move-people-content text-center">
				<h2 class="move-people-title">
					CREATE SHOWS THAT
					<span>MOVE</span>
					PEOPLE
				</h2>

				<p class="move-people-text">
					Chaque spectacle que nous créons est pensé comme une expérience immersive qui dépasse le simple divertissement. Notre mission est de toucher le public, de transformer les émotions en souvenirs durables et de donner vie à des instants qui résonnent bien au-delà de la scène.
				</p>

				<a href="{{ path('app_contact') }}" class="move-people-btn">
					CONTACTEZ-NOUS
					<span class="btn-arrow">↗</span>
				</a>
			</div>
		</div>
	</section>
{% endblock %}

{% block javascripts %}
	 <script src="{{ asset('front/js/agency.js') }}"></script>
{% endblock %}