@extends('layouts.app')
@section('content')
    <div>
        <div
            class="relative h-[60vh] w-full bg-cover bg-center text-white"
            style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ asset('img/sections/loisirs/hero.jpg') }}');"
        >
            <div class="flex items-center justify-center h-full text-center p-4">
                <div>
                    <h1 class="text-4xl font-semibold mb-2">Loisirs & Adultes Gym</h1>
                    <p class="text-lg sm:text-xl">Le plaisir de la gymnastique pour tous</p>
                </div>
            </div>
        </div>

        <section class="py-12">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                    <div>
                        <img src="{{ asset('img/sections/loisirs/loisirs.jpg') }}" alt="Une personne souriante pratiquant la gymnastique de loisirs" class="rounded-lg shadow-lg">
                    </div>
                    <div>
                        <h2 class="text-4xl font-semibold text-center mb-6">Gym Loisirs</h2>
                        <div class="text-base mb-6 mt-3">
                            <ul class="list-disc list-inside space-y-2">
                                <li>Pour découvrir la gymnastique dans une <strong>ambiance conviviale</strong>, quel que soit votre âge ou votre niveau.</li>
                                <li>Bénéficiez d'un accompagnement personnalisé tout en profitant des avantages des
                                    <strong>cours collectifs</strong>.</li>
                                <li>L'occasion parfaite de vous amuser, de vous maintenir en forme et de progresser à votre rythme.</li>
                            </ul>
                        </div>
                        <div class="text-center md:text-left">
                            <a class="inline-block bg-blue-600 text-white font-semibold py-2 px-6 rounded-md transition-colors duration-300 hover:bg-blue-700" href="{{ route('inscriptions.home') }}">
                                Je m'inscris
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-12">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                    <div class="order-2 md:order-1">
                        <h2 class="text-4xl font-semibold text-center mb-6">Adultes Gym</h2>
                        <div class="text-base mb-6 mt-3">
                            <p>Les Bleus de Saint Ferdinand vous proposent un <strong>nouveau cours dédié aux adultes,</strong> mêlant gymnastique sur agrès,
                                renforcement musculaire et travail de souplesse. Accessible à
                                tous les niveaux, ce cours permet de progresser à son rythme
                                dans une ambiance conviviale et bienveillante. Venez
                                (re)découvrir le plaisir de la gym, développer votre tonicité et
                                votre mobilité tout en vous amusant !
                            </p>
                        </div>
                        <div class="text-center md:text-left">
                            <a class="inline-block bg-blue-600 text-white font-semibold py-2 px-6 rounded-md transition-colors duration-300 hover:bg-blue-700" href="{{ route('inscriptions.home') }}">
                                Je m'inscris
                            </a>
                        </div>
                    </div>
                    <div class="order-1 md:order-2">
                        <img src="{{ asset('img/sections/loisirs/mamans.jpg') }}" alt="Une maman s'étirant au sol, en pleine séance de gymnastique" class="rounded-lg shadow-lg">
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialisation des galeries avec la librairie Slick
            // Assurez-vous d'avoir bien inclus jQuery et le script Slick dans votre layout.
            $(".momGallery").slick({
                dots: false,
                slidesToShow: 4,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 1500,
                arrows: false,
                infinite: true,
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 3,
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 2,
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                        }
                    }
                ]
            });

            $(".loisirs-gallery").slick({
                dots: false,
                slidesToShow: 4,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 1500,
                arrows: false,
                infinite: true,
                responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 3,
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 2,
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                        }
                    }
                ]
            });
        });
    </script>
@endpush