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

{% block title %}La corde sensible | Programme & Inscriptions{% endblock %}

{% block body %}
    <!-- HEADER -->
    <header data-jarallax data-speed=".8" style="background-image: url({{ asset('img/_program_registration_1.jpg') }})">
        <div class="pt-10 pb-8 pt-md-15 pb-md-13 bg-black bg-opacity-50">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-md-8 col-lg-6 text-center">
                        <!-- Heading -->
                        <h1 class="display-6 fw-bold text-white">Programme & Inscriptions</h1>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- PROGRAMME DE LA SAISON ACTUELLE -->
    <section class="py-3 py-md-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- Heading -->
                    <h2 class="fw-bold mt-6 mb-3">Programme de la saison 2025-2026</h2>

                    <!-- Text -->
                    <p>
                        Découvrez notre programme riche et varié pour cette nouvelle saison. Des ateliers-orchestre
                        aux masterclasses, en passant par les stages intensifs, nous vous proposons un parcours
                        musical authentique autour des musiques méditerranéennes.
                    </p>

                    <div class="row g-4 mb-8">
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title text-primary">Ateliers-orchestre</h5>
                                    <p class="card-text text-muted small">Tous les samedis</p>
                                    <p class="card-text">
                                        Immersion dans les musiques traditionnelles méditerranéennes.
                                        Pratique collective et apprentissage oral.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title text-primary">Masterclasses</h5>
                                    <p class="card-text text-muted small">1 samedi par mois</p>
                                    <p class="card-text">
                                        Rencontres avec des musiciens professionnels et des maîtres
                                        de la tradition méditerranéenne.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title text-primary">Stages intensifs</h5>
                                    <p class="card-text text-muted small">Vacances scolaires</p>
                                    <p class="card-text">
                                        Stages de 3 à 5 jours pour approfondir votre pratique
                                        instrumentale et vocale.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Divider -->
                    <hr class="mt-6 mt-md-9 mb-0"/>
                </div>
            </div>
        </div>
    </section>

    <!-- TARIFS -->
    <section class="py-3 py-md-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- Heading -->
                    <h2 class="fw-bold mb-4">Tarifs</h2>

                    <!-- Tarifs Table -->
                    <div class="table-responsive mb-6">
                        <table class="table table-hover">
                            <thead class="table-light">
                            <tr>
                                <th scope="col" class="fw-bold">Activité</th>
                                <th scope="col" class="fw-bold">Durée</th>
                                <th scope="col" class="fw-bold">Tarif normal</th>
                                <th scope="col" class="fw-bold">Tarif réduit*</th>
                                <th scope="col" class="fw-bold">Tarif solidaire**</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <strong>Atelier-orchestre hebdomadaire</strong><br>
                                    <small class="text-muted">Tous les samedis 14h-17h</small>
                                </td>
                                <td>Année scolaire</td>
                                <td><span class="fw-bold text-primary">380 €</span></td>
                                <td>320 €</td>
                                <td>250 €</td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>Masterclass mensuelle</strong><br>
                                    <small class="text-muted">1 samedi par mois 10h-17h</small>
                                </td>
                                <td>La séance</td>
                                <td><span class="fw-bold text-primary">45 €</span></td>
                                <td>35 €</td>
                                <td>25 €</td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>Stage intensif (3 jours)</strong><br>
                                    <small class="text-muted">Vacances scolaires</small>
                                </td>
                                <td>3 jours</td>
                                <td><span class="fw-bold text-primary">120 €</span></td>
                                <td>100 €</td>
                                <td>80 €</td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>Stage intensif (5 jours)</strong><br>
                                    <small class="text-muted">Vacances d'été</small>
                                </td>
                                <td>5 jours</td>
                                <td><span class="fw-bold text-primary">180 €</span></td>
                                <td>150 €</td>
                                <td>120 €</td>
                            </tr>
                            <tr class="table-success">
                                <td>
                                    <strong>Formule complète</strong><br>
                                    <small class="text-muted">Ateliers + masterclasses</small>
                                </td>
                                <td>Année scolaire</td>
                                <td><span class="fw-bold text-success">450 €</span><br>
                                    <small class="text-muted">(au lieu de 485 €)</small>
                                </td>
                                <td>380 €</td>
                                <td>300 €</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Divider -->
                    <hr class="mt-6 mt-md-9 mb-0"/>
                </div>
            </div>
        </div>
    </section>

    <!-- RÉDUCTIONS & TARIFS SOLIDAIRES -->
    <section class="py-3 py-md-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- Heading -->
                    <h2 class="fw-bold mb-4">Réductions & Tarifs solidaires</h2>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <h4 class="text-primary mb-3">* Tarif réduit</h4>
                                <p>Le tarif réduit s'applique aux :</p>
                                <ul class="list-unstyled">
                                    <li>• Étudiants (sur présentation de la carte)</li>
                                    <li>• Demandeurs d'emploi</li>
                                    <li>• Retraités</li>
                                    <li>• Personnes en situation de handicap</li>
                                    <li>• Familles nombreuses (3 enfants et plus)</li>
                                </ul>
                                <p class="small text-muted mt-3">
                                    <em>Justificatif à fournir lors de l'inscription</em>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <h4 class="text-success mb-3">** Tarif solidaire</h4>
                                <p>
                                    Nous souhaitons rendre la musique accessible à tous. Le tarif solidaire
                                    est destiné aux personnes en difficulté financière.
                                </p>
                                <p>
                                    N'hésitez pas à nous contacter pour étudier ensemble votre situation
                                    et trouver des solutions adaptées.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Autres réductions -->
                    <div class="bg-light p-4 rounded mt-4">
                        <h5 class="mb-3">Autres avantages</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-2"><strong>Réduction famille :</strong></p>
                                <p class="small">-10% à partir du 2ème membre de la famille inscrit</p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-2"><strong>Parrainage :</strong></p>
                                <p class="small">10% de réduction pour le parrain et le parrainé</p>
                            </div>
                        </div>
                    </div>

                    <!-- Divider -->
                    <hr class="mt-6 mt-md-9 mb-0"/>
                </div>
            </div>
        </div>
    </section>

    <!-- MODALITÉS D'INSCRIPTION -->
    <section class="py-3 py-md-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- Heading -->
                    <h2 class="fw-bold mb-4">Modalités d'inscription</h2>

                    <div class="row">
                        <div class="col-lg-8">
                            <div class="mb-5">
                                <h4 class="text-primary mb-3">Comment s'inscrire ?</h4>

                                <div class="d-flex align-items-start mb-3">
                                    <div
                                        class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
                                        style="width: 30px; height: 30px; flex-shrink: 0;">
                                        <small class="fw-bold">1</small>
                                    </div>
                                    <div>
                                        <p class="mb-1"><strong>Inscriptions en ligne</strong></p>
                                        <p class="text-muted small">
                                            Remplissez notre formulaire d'inscription en ligne et effectuez votre
                                            paiement sécurisé.
                                        </p>
                                    </div>
                                </div>

                                <div class="d-flex align-items-start mb-3">
                                    <div
                                        class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
                                        style="width: 30px; height: 30px; flex-shrink: 0;">
                                        <small class="fw-bold">2</small>
                                    </div>
                                    <div>
                                        <p class="mb-1"><strong>Séance d'essai gratuite</strong></p>
                                        <p class="text-muted small">
                                            Venez découvrir nos ateliers lors d'une séance d'essai gratuite et sans
                                            engagement.
                                        </p>
                                    </div>
                                </div>

                                <div class="d-flex align-items-start mb-4">
                                    <div
                                        class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
                                        style="width: 30px; height: 30px; flex-shrink: 0;">
                                        <small class="fw-bold">3</small>
                                    </div>
                                    <div>
                                        <p class="mb-1"><strong>Inscription sur place</strong></p>
                                        <p class="text-muted small">
                                            Vous pouvez également vous inscrire directement lors de nos permanences.
                                        </p>
                                    </div>
                                </div>

                                <!-- CTA Buttons -->
                                <div class="d-flex flex-column flex-md-row gap-3">
                                    <a href="#" class="btn btn-primary btn-lg">
                                        <i class="fas fa-edit me-2"></i>
                                        S'inscrire en ligne
                                    </a>
                                    <a href="#" class="btn btn-outline-primary btn-lg">
                                        <i class="fas fa-calendar me-2"></i>
                                        Réserver une séance d'essai
                                    </a>
                                </div>
                            </div>

                            <div class="mb-5">
                                <h4 class="text-primary mb-3">Pièces à fournir</h4>
                                <ul class="list-unstyled">
                                    <li class="mb-2">• Fiche d'inscription complétée</li>
                                    <li class="mb-2">• Certificat médical de non contre-indication à la pratique
                                        musicale
                                    </li>
                                    <li class="mb-2">• 1 photo d'identité</li>
                                    <li class="mb-2">• Justificatif pour les tarifs réduits (le cas échéant)</li>
                                    <li class="mb-2">• RIB pour les remboursements éventuels</li>
                                </ul>
                            </div>

                            <div class="mb-5">
                                <h4 class="text-primary mb-3">Modalités de paiement</h4>
                                <p>Plusieurs solutions s'offrent à vous :</p>
                                <ul class="list-unstyled">
                                    <li class="mb-2">• Paiement en une fois (5% de réduction)</li>
                                    <li class="mb-2">• Paiement en 3 fois sans frais</li>
                                    <li class="mb-2">• Paiement mensuel (10 échéances de septembre à juin)</li>
                                    <li class="mb-2">• Chèques vacances acceptés</li>
                                    <li class="mb-2">• Pass culture accepté (pour les moins de 18 ans)</li>
                                </ul>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <!-- Contact Card -->
                            <div class="card border-0 shadow-sm">
                                <div class="card-body">
                                    <h5 class="card-title text-primary">Besoin d'aide ?</h5>
                                    <p class="card-text mb-4">
                                        Notre équipe est là pour vous accompagner dans votre inscription.
                                    </p>

                                    <div class="mb-3">
                                        <p class="mb-1"><strong>Permanences :</strong></p>
                                        <p class="small text-muted mb-0">
                                            Samedis 13h-14h<br>
                                            (pendant les ateliers)
                                        </p>
                                    </div>

                                    <div class="mb-3">
                                        <p class="mb-1"><strong>Email :</strong></p>
                                        <p class="small">
                                            <a href="mailto:inscriptions@lacordesensible.fr">
                                                inscriptions@lacordesensible.fr
                                            </a>
                                        </p>
                                    </div>

                                    <div class="mb-3">
                                        <p class="mb-1"><strong>Téléphone :</strong></p>
                                        <p class="small">
                                            <a href="tel:0123456789">01 23 45 67 89</a>
                                        </p>
                                    </div>

                                    <a href="#" class="btn btn-outline-primary w-100">
                                        Nous contacter
                                    </a>
                                </div>
                            </div>

                            <!-- Important dates -->
                            <div class="card border-0 shadow-sm mt-4">
                                <div class="card-body">
                                    <h5 class="card-title text-primary">Dates importantes</h5>

                                    <div class="mb-2">
                                        <strong>Inscriptions ouvertes</strong><br>
                                        <small class="text-muted">À partir du 15 juin 2024</small>
                                    </div>

                                    <div class="mb-2">
                                        <strong>Rentrée</strong><br>
                                        <small class="text-muted">Samedi 14 septembre 2024</small>
                                    </div>

                                    <div class="mb-0">
                                        <strong>Séances d'essai</strong><br>
                                        <small class="text-muted">7 et 14 septembre 2024</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}