@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/competitions/hero.jpg') }}');"
        >
            <div class="flex items-center justify-center h-full text-center p-4">
                <div>
                    <h1 class="text-5xl font-bold mb-2">Meilleurs gymnastes</h1>
                </div>
            </div>
        </div>
        <section class="section">
            <div class="container">
                <div>
                    <div class="flex items-center m-2 p-2">
                        <img class="w-36 mr-8 rounded-full" src="{{ asset('img/competitions/icons/or.png') }}" alt="Médaille d'or" />
                        <div>
                            <h3 class="text-[2rem] text-gray-900">17 titres de champion de France</h3>
                            <a class="text-lg text-gray-700 modal-trigger cursor-pointer" data-target="or">Voir plus</a>
                        </div>
                    </div>
                    <div class="modal" id="or">
                        <div class="modal-background"></div>
                        <div class="modal-card">
                            <header class="modal-card-head">
                                <p class="modal-card-title">La médaille d'or</p>
                                <button class="delete" aria-label="close"></button>
                            </header>
                            <section class="modal-card-body content">
                                <strong>Individuel :</strong>
                                <ul>
                                    <li>1995 : Humprey Gobbi</li>
                                    <li>1995 : Émilie Borthomieu</li>
                                    <li>1996 : Émilie Borthomieu (général + poutre)</li>
                                    <li>1998 : Clélia Coutzac (X2)</li>
                                    <li>2001 : Solène Lamothe</li>
                                    <li>2003 : Laurine Teyssier</li>
                                </ul>
                                <strong>Equipe :</strong>
                                <ul>
                                    <li>1996, 1997, 1998, 1999 : Sophie Drouet, Sandra Cardonne, Émilie Borthomieu, Christelle
                                        Taillandier, Karine Parisot, Leslie Lerbet</li>
                                    <li>2002 : Julie Chabanais, Cerf, Élodie, Emmanuelle Saint-Martin et Mylène Rigaudie</li>
                                    <li>2002 : Laurine Teyssier, Solene Lamothe, Audrey Queylat, Laure Saint-Martin et Laurence Ragon</li>
                                    <li>2003 : Audrey Queylat, Julie Castet, Stéphanie Morsetti et Marion</li>
                                    <li>2010 : Cataline Denis-Leclere, Enola Dueso, Samia Bouachera, Léa Chiron et Laury Kinast</li>
                                    <li>2010 : Dorine Baltazar, Samantha Guérin, Pauline Plumereau et Camille Baggi</li>
                                    <li>2011 : Cataline Denis-Leclere, Enola Dueso, Samia Bouachera, Dorine Baltazar et Laury Kinast</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex items-center m-2 p-2">
                        <img class="w-36 mr-8 rounded-full" src="{{ asset('img/competitions/icons/argent.png') }}" alt="Médaille d'argent" />
                        <div>
                            <h3 class="text-[2rem] text-gray-900">6 titres de vice champion de France </h3>
                            <a class="text-lg text-gray-700 modal-trigger cursor-pointer" data-target="argent">Voir plus</a>
                        </div>
                    </div>
                    <div class="modal" id="argent">
                        <div class="modal-background"></div>
                        <div class="modal-card">
                            <header class="modal-card-head">
                                <p class="modal-card-title">6 titres de vice champion de France </p>
                                <button class="delete" aria-label="close"></button>
                            </header>
                            <section class="modal-card-body content">
                                <strong>Individuel :</strong>
                                <ul>
                                    <li>1995 : Karine Parisot</li>
                                    <li>1996 : Émilie Borthomieu (barres)</li>
                                    <li>2001 : Sophie Drouet (barres)</li>
                                </ul>
                                <strong>Équipe :</strong>
                                <ul>
                                    <li>2012 : Enola Dueso , Samia Bouachera, Laury Kinast et Dorine Baltazard</li>
                                    <li>2013 : Cataline Leclerc, dorine Baltazard , Enola Dueso , Samia Bouachera , Laury Kianst et Cindy
                                        Odin</li>
                                    <li>2014 : Cataline Leclerc, dorine Baltazard , Enola Dueso , Samia Bouachera , Laury Kianst et Cindy
                                        Odin</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex items-center m-2 p-2">
                        <img class="w-36 mr-8 rounded-full" src="{{ asset('img/competitions/icons/bronze.png') }}" alt="Médaille de bronze" />
                        <div>
                            <h3 class="text-[2rem] text-gray-900">2 médaille de bronze au championnat de France</h3>
                            <a class="text-lg text-gray-700 modal-trigger cursor-pointer" data-target="bronze">Voir plus</a>
                        </div>
                    </div>
                    <div class="modal" id="bronze">
                        <div class="modal-background"></div>
                        <div class="modal-card">
                            <header class="modal-card-head">
                                <p class="modal-card-title">Médaille de bronze au championnat de France :</p>
                                <button class="delete" aria-label="close"></button>
                            </header>
                            <section class="modal-card-body content">
                                <ul>
                                    <li>2015 : Tom Dueso</li>
                                    <li>2023 : Emma, Alix, Imane, Shahina (arrivées 3e lors du trophée fédéral)</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex items-center m-2 p-2">
                        <img class="w-36 mr-8 rounded-full" src="{{ asset('img/competitions/icons/hn.png') }}" alt="Haut niveau" />
                        <div>
                            <h3 class="text-[2rem] text-gray-900">5 gymnastes qui ont atteint le haut Niveau</h3>
                            <a class="text-lg text-gray-700 modal-trigger cursor-pointer" data-target="hn">Voir plus</a>
                        </div>
                    </div>
                    <div class="modal" id="hn">
                        <div class="modal-background"></div>
                        <div class="modal-card">
                            <header class="modal-card-head">
                                <p class="modal-card-title">5 gymnastes qui ont atteint le haut Niveau</p>
                                <button class="delete" aria-label="close"></button>
                            </header>
                            <section class="modal-card-body content">
                                <p class="text-lg">
                                    <strong>Dimitri Petrowski</strong> a intégré le pôle espoir d'Avignon puis d'Antibes. Il a terminé 4ème au sol au
                                    Championnat d'Europe Junior. <br>
                                    <strong>Clélia Coutzac</strong> a intégré le pôle de Marseille. Elle a participé au Championnat d'Europe Junior où
                                    elle a fini 6 ème ainsi qu'au Championnat du Monde avec l'Equipe de France Élite. <br>
                                    <strong>Maxime Chuche</strong>, en 2000, a rejoint le pôle espoir d'Orléans où il a participé aux coupes nationales
                                    et championnat Division Nationale. <br>
                                    <strong>Cataline Denis-Leclere</strong> a rejoint le Pôle France gymnastique de Marseille. <br>
                                    <strong>Tom Dueso</strong> a rejoint le pôle France d'Antibes
                                </p>
                            </section>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex items-center m-2 p-2">
                        <img class="w-36 mr-8 rounded-full" src="{{ asset('img/competitions/icons/coupe.png') }}" alt="Coupe d'or" />
                        <div>
                            <h3 class="text-[2rem] text-gray-900">Dont 2 qui ont participé aux championnats d'Europe Junior</h3>
                            <a class="text-lg text-gray-700 modal-trigger cursor-pointer" data-target="coupe">Voir plus</a>
                        </div>
                    </div>
                    <div class="modal" id="coupe">
                        <div class="modal-background"></div>
                        <div class="modal-card">
                            <header class="modal-card-head">
                                <p class="modal-card-title">Dont 2 qui ont participé aux championnats d'Europe Junior</p>
                                <button class="delete" aria-label="close"></button>
                            </header>
                            <section class="modal-card-body content">
                                <p class="text-lg">
                                    <strong>Dimitri Petrowski</strong> a intégré le pôle espoir d'Avignon puis d'Antibes. Il a terminé 4ème au sol au
                                    Championnat d'Europe Junior. <br>
                                    <strong>Clélia Coutzac</strong> a intégré le pôle de Marseille. Elle a participé au Championnat d'Europe Junior où
                                    elle a fini 6 ème ainsi qu'au Championnat du Monde avec l'Equipe de France Élite. <br>
                                </p>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@push('scripts')
    @vite('resources/js/modal.js')
@endpush