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

{% block title %}Accueil
{% endblock %}

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

{% block body %}
	<section class="hero-section" style="background-image: url('{{ asset('front/images/accueil/' ~ home.homeHeroImage|trim('/')) }}');">
		<div class="hero-overlay"></div>

		<div class="hero-container">
			<div class="hero-content">
				{% set heroParts = home.homeHeroTitle|split('|') %}

				<h1 class="hero-title">
					<span class="title-group-top">
						<span class="title-line line-top">{{ heroParts[0] }}</span>
						<span class="title-line line-middle">{{ heroParts[1] }}</span>
					</span>

					<span class="title-line line-bottom">{{ heroParts[2] }}</span>
				</h1>

				<p class="hero-text">
					{{ home.homeHeroSlug }}
				</p>

				<a href="{{ path('app_school') }}"  class="hero-btn">
					<span>RESERVEZ VOTRE COURS DE DANSE</span>
					<span class="arrow">↗</span>
				</a>
			</div>
		</div>
	</section>

	<section class="agency-section">
		<div class="container">
			<div class="row align-items-center g-5">
				<div class="col-lg-6">
					<div class="agency-image-wrapper">
						<img src="{{ asset('front/images/accueil/' ~ home.homeAgencyImage|trim('/')) }}" alt="Agency Image" class="img-fluid agency-image">
					</div>
				</div>

				<div class="col-lg-6">
					<div class="agency-content">
						<h2 class="agency-title">{{ home.homeAgencyTitle }}</h2>

						<h6 class="agency-subtitle">
							{{ home.homeAgencySubtitle|raw }}
						</h6>

						<p class="agency-text">
							{{ home.homeAgencyParagraph }}
						</p>

						<a href="{{ path('app_agency') }}"  class="agency-btn">
							DÉCOUVRIR L’AGENCE
							<span>↗</span>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="agency-glow"></div>
	</section>

	<section class="school-section">
		<div class="container">
			<div class="row align-items-center g-5">
				<div class="col-lg-7 order-1 order-lg-2">
					<div class="school-image-wrapper">
						<img src="{{ asset('front/images/accueil/' ~ home.homeSchoolImage|trim('/')) }}" alt="ICHTAH School" class="img-fluid school-image">
					</div>
				</div>

				<div class="col-lg-5 order-2 order-lg-1">
					<div class="school-content">
						<h2 class="school-title">{{ home.homeSchoolTitle }}</h2>

						<h6 class="school-subtitle">
							{{ home.homeSchoolSubtitle|raw }}
						</h6>

						<p class="school-text">
							{{ home.homeSchoolParagraph }}
						</p>

						<a href="{{ path('app_school') }}"  class="school-btn">
							DÉCOUVRIR L’ÉCOLE
							<span>↗</span>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="school-glow"></div>
	</section>

	<section class="news-section">
		<div class="container">
			<div class="news-header text-center">
				<h2 class="news-title">{{ home.homeNewsTitle }}</h2>
				<p class="news-intro">{{ home.homeNewsSlug }}</p>
			</div>

			<div class="row g-4 news-cards-row">
				{% for item in newsList %}
					<div class="col-lg-4 col-md-6">
						<article class="news-card">
							<a href="{{ path('app_news_show', { id: item.id }) }}" class="news-card-image-link">
								<img src="{{ asset('front/images/news/' ~ item.image|trim('/')) }}" alt="{{ item.title }}" class="news-card-image">
							</a>

							<div class="news-card-body">
								<h3 class="news-card-title">
									<a href="{{ path('app_news_show', { id: item.id }) }}">
										{{ item.title }}
									</a>
								</h3>

								<p class="news-card-text">
									{{ item.content|striptags|slice(0, 120) ~ '...' }}
								</p>
							</div>
						</article>
					</div>
				{% endfor %}
			</div>

			<div class="news-footer text-center">
				<a href="{{ path('app_news') }}" class="news-btn">
					DÉCOUVRIR TOUTES LES ACTUALITÉS
					<span>↗</span>
				</a>
			</div>
		</div>

		<div class="news-glow"></div>
	</section>

	<section class="history-section">
		<div class="history-overlay"></div>

		<div class="container history-container">
			<div class="row align-items-center g-5 history-row">
				<div class="col-lg-5">
					<div class="history-image-wrapper">
						<img src="{{ asset('front/images/accueil/' ~ home.homeHistoireImage|trim('/')) }}" alt="Histoire ICHTAH" class="img-fluid history-image">
					</div>
				</div>

				<div class="col-lg-7">
					<div class="history-content">
						<h2 class="history-title">{{ home.homeHistoireTitle }}</h2>

						<div class="history-quote-block">
							<div class="history-quote-icon">“</div>

							<div class="history-text">
								{{ home.homeHistoireParagraph|raw }}
							</div>
						</div>

						<div class="history-authors">
							<div class="history-author">
								<img src="{{ asset('front/images/accueil/sara-Zniber.png') }}" alt="Sara Zinber">
								<div>
									<h6>Sara Zinber</h6>
									<span>Co-fondatrice</span>
								</div>
							</div>

							<div class="history-author">
								<img src="{{ asset('front/images/accueil/mouna-Benqlilou.png') }}" alt="Mouna Benglilou">
								<div>
									<h6>Mouna Benglilou</h6>
									<span>Co-fondatrice</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="cta-section">
		<div class="cta-glow"></div>

		<div class="container">
			<div class="cta-content text-center">
				<h2 class="cta-title">MAKE MOROCCO MOVE</h2>

				<p class="cta-text">
					Ensemble, faisons rayonner la danse et la créativité marocaine à travers le monde. Chaque pas, chaque geste et chaque projet contribue à écrire une nouvelle histoire culturelle, vivante et audacieuse.
				</p>

				<a href="{{ path('app_contact') }}"  class="cta-btn">
					CONTACTEZ-NOUS AUJOURD’HUI
					<span>↗</span>
				</a>
			</div>
		</div>

		<div class="cta-bottom-line"></div>
	</section>
{% endblock %}

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