@extends('layouts.app')

@section('content')
    <!-- Hero -->
    <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/gymplus/hero.png') }}');"
    >
        <div class="flex items-center justify-center h-full text-center p-4">
            <h1 class="text-4xl font-semibold mb-2">Gym+</h1>
        </div>
    </div>

    <!-- Boutons -->
    <div class="mt-12 flex items-center justify-center px-4">
        <div class="grid grid-cols-3 gap-x-20 gap-y-12 items-center max-w-5xl w-full">
            <button type="button" class="border border-black rounded-full py-3 px-12 text-center text-black text-base font-normal whitespace-nowrap">
                Maîtrise corporelle
            </button>
            <div></div>
            <button type="button" class="border border-black rounded-full py-3 px-12 text-center text-black text-base font-normal whitespace-nowrap">
                Exercices personnalisés
            </button>
            <div></div>
            <div class="flex justify-center">
                <img src="{{ asset('img/logo.svg') }}" alt="Logo du club" class="w-[50%]">
            </div>
            <div></div>
            <button type="button" class="border border-black rounded-full py-3 px-12 text-center text-black text-base font-normal whitespace-nowrap">
                Équilibre et plaisir
            </button>
            <div></div>
            <button type="button" class="border border-black rounded-full py-3 px-12 text-center text-black text-base font-normal whitespace-nowrap">
                Santé globale
            </button>
        </div>
    </div>

    <!-- Présentation -->
    <div class="max-w-7xl mx-auto mt-16 px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-12">
        <article class="space-y-6 max-w-lg">
            <h2 class="text-2xl font-semibold">Nos cours gym santé</h2>
            <div>
                <span class="inline-block border border-gray-300 rounded-full px-3 py-1 text-xs font-normal text-gray-700">
                    @libourne-gym
                </span>
            </div>
            <p class="text-sm leading-relaxed">
                Découvrez une discipline innovante qui vous aide à maîtriser votre corps, exploiter votre plein potentiel et adopter les bons gestes dans la vie quotidienne.
                Cette pratique concilie bien-être et dépense énergétique, avec un impact positif sur votre santé physique et mentale.
            </p>
            <div>
                <h3 class="font-semibold text-base mb-2">Pourquoi ?</h3>
                <ul class="list-disc pl-5 text-xs space-y-1 leading-tight">
                    <li>Lutter contre l'inactivité physique et la sédentarité</li>
                    <li>Participer à une activité collective et ludique</li>
                    <li>Maintenir un lien social</li>
                    <li>Conserver son autonomie dans les gestes de la vie quotidienne</li>
                </ul>
            </div>
        </article>
        <div class="flex flex-col gap-6 max-w-md mx-auto lg:mx-0">
            <img class="rounded-xl object-cover w-full h-[200px] gymplus" src="{{ asset('img/sections/gymplus/1.jpeg') }}" alt="Cours de Gym+" />
            <img class="rounded-xl object-cover w-full h-[200px] gymplus" src="{{ asset('img/sections/gymplus/2.jpeg') }}" alt="Séance de Gym+" />
        </div>
    </div>

    <!-- Formules -->
    <section class="max-w-7xl mx-auto mt-20 px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-12">
        <article class="space-y-6 max-w-lg mx-auto lg:mx-0">
            <h3 class="text-lg font-semibold mb-4">Nos différentes formules</h3>
            <div class="space-y-6 text-xs leading-tight text-gray-900">
                <p>
                    → L'offre <strong>Lomba +</strong> s'adresse aux personnes de tout âge souffrant de lombalgie ou souhaitant en prévenir les effets en
                    <strong>améliorant leur posture</strong>, en renforçant leur sangle abdominale et en équilibrant le tonus de leurs chaînes musculaires.
                </p>
                <p>
                    → L'offre <strong>Form +</strong> s'adresse aux personnes de 50 ans et plus, sans limite d'âge.
                    Elle propose des séances d'<strong>activité physique adaptée</strong> pour préserver l'autonomie, prévenir les maladies chroniques et améliorer la qualité de vie.
                    Même à 80 ans, rester actif est bénéfique et recommandé pour réduire la peur des chutes, améliorer la mobilité et maintenir une
                    <strong>bonne santé mentale et physique</strong>.
                </p>
                <p>
                    → <strong>Ordo +</strong> est un programme d'activité physique adaptée destiné aux personnes atteintes d'une affection de longue durée (<strong>ALD</strong>) disposant d'une prescription médicale.
                    Encadré par une professionnelle diplômée, il propose des séances <strong>sécurisées et personnalisées</strong>, visant à améliorer l'autonomie et la qualité de vie des participants.
                </p>
            </div>
        </article>
        <div class="max-w-md mx-auto lg:mx-0">
            <img class="rounded-xl object-cover w-full h-[200px] gymplus" src="{{ asset('img/sections/gymplus/3.jpeg') }}" alt="Cours en petit groupe Gym+" />
        </div>
    </section>

    <!-- Galerie -->
    <section class="max-w-7xl mx-auto mt-24 px-4 sm:px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-12 gap-6 items-center">
        <div class="col-span-2 flex items-center gap-2">
            <img class="w-6 h-6 object-contain" src="{{ asset('img/logo.svg') }}" alt="Logo Libourne Gym" width="24" height="24" />
            <span class="text-sm font-normal">Libourne gym</span>
        </div>
        <h2 class="col-span-7 font-playfair text-6xl sm:text-7xl leading-[1.1] font-normal">
            Notre<br/>galerie
            <span class="inline-block ml-2 text-4xl sm:text-5xl font-normal">→</span>
        </h2>
        <button class="col-span-3 border border-black rounded-full py-2 px-8 text-xs sm:text-sm font-normal whitespace-nowrap self-start justify-self-end">
            Gym santé
        </button>
    </section>

    <!-- Galerie images -->
    <section class="max-w-7xl mx-auto mt-8 px-4 sm:px-6 lg:px-8 grid grid-cols-2 sm:grid-cols-4 gap-4">
        <img class="rounded-sm object-cover w-full h-[320px]" src="{{ asset('img/sections/gymplus/3.jpeg') }}" alt="Image galerie 1" />
        <img class="rounded-sm object-cover w-full h-[320px]" src="{{ asset('img/sections/gymplus/4.png') }}" alt="Image galerie 2" />
        <img class="rounded-sm object-cover w-full h-[320px]" src="{{ asset('img/sections/gymplus/5.png') }}" alt="Image galerie 3" />
        <img class="rounded-sm object-cover w-full h-[320px]" src="{{ asset('img/sections/gymplus/6.png') }}" alt="Image galerie 4" />
    </section>
@endsection