@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/activites/parkour.jpg') }}');"
        >
            <div class="flex items-center justify-center h-full text-center p-4">
                <div>
                    <h1 class="text-4xl font-semibold mb-2">Parkour</h1>
                    <p class="text-lg sm:text-xl">La gym en liberté</p>
                </div>
            </div>
        </div>

        <section class="py-12">
            <div class="container mx-auto px-4">
                <video id="video" class="video-js w-full" controls preload="auto" data-setup="{}">
                    <source src="{{ asset('img/sections/parkour/video.MOV') }}" type="video/mp4" />
                    <p class="vjs-no-js">
                        Pour voir cette vidéo, veuillez activer le Javascript, ou mettre à jour votre navigateur pour qu'il
                        <a href="https://videojs.com/html5-video-support/" target="_blank">supporte les vidéos HTML5</a>
                    </p>
                </video>
            </div>
        </section>

        <section class="py-12 bg-gray-100">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="text-center">
                        <span class="text-4xl text-indigo-600">
                            <i class="fas fa-calendar-check"></i>
                        </span>
                        <h2 class="text-2xl font-semibold mt-4">Déroulement des séances</h2>
                        <p class="text-justify mt-2">
                            Le parkour est une activité acrobatique qui consiste à réaliser des déplacements fluides en s'appuyant sur des techniques de franchissements et d'acrobaties. Le développement des habiletés motrices, le franchissement d'obstacles et la répétition d'acrobaties sont au cœur de nos séances, toujours pratiquées en toute
                            <strong>sécurité</strong>.
                        </p>
                    </div>
                    <div class="text-center">
                        <span class="text-4xl text-indigo-600">
                            <i class="fas fa-award"></i>
                        </span>
                        <h2 class="text-2xl font-semibold mt-4">Encadrement qualifié</h2>
                        <p class="mt-2">
                            Nos cours de Parkour sont encadrés par <strong>Fabien</strong>, un entraîneur qualifié et passionné, qui mettra son expertise à votre service.
                        </p>
                        <div class="mt-4">
                            <a class="inline-block bg-gray-200 font-semibold py-2 px-4 rounded-md transition-colors hover:bg-gray-300" href="{{ route('club.equipeTech') }}">
                                Voir notre équipe
                            </a>
                        </div>
                    </div>
                    <div class="text-center">
                        <span class="text-4xl text-indigo-600">
                            <i class="fas fa-graduation-cap"></i>
                        </span>
                        <h2 class="text-2xl font-semibold mt-4">Dimension de l'activité</h2>
                        <ul class="list-disc list-inside text-base text-left mt-2 mx-auto max-w-sm">
                            <li><strong>Franchissement d'obstacles</strong> dans l'environnement.</li>
                            <li><strong>Préparation physique</strong> avec un renforcement musculaire constant.</li>
                            <li>Notion d'<strong>enchaînement</strong> et de continuité dans les déplacements.</li>
                            <li>Maîtrise du corps dans les <strong>3 dimensions de l'espace</strong>.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-12 bg-white">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="text-center">
                        <h2 class="text-2xl font-semibold mt-4">Horaires</h2>
                        <p class="text-center mt-2">
                            Choix entre un ou deux cours par semaine :
                            <br>
                            <span class="font-semibold">Le lundi ou le jeudi de 19h30 à 21h</span>
                        </p>
                    </div>

                    <div class="text-center">
                        <h2 class="text-2xl font-semibold mt-4">Nous rejoindre</h2>
                        <div class="mt-2">
                            <a class="inline-block bg-gray-200 font-semibold py-2 px-4 rounded-md transition-colors hover:bg-gray-300" href="{{ route('inscriptions.tarifs') }}">
                                Voir les tarifs et horaires
                            </a>
                            <br class="mb-4">
                            <a class="inline-block mt-4 border-2 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-md transition-colors hover:bg-blue-600 hover:text-white" href="{{ route('inscriptions.home') }}">
                                Je m'inscris
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('scripts')
    <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let player = videojs('video');
            player.responsive(true);
            player.fluid(true);
        });
    </script>
@endpush