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

{# Accueil : barre de navigation transparente au chargement #}
{% set navbar_is_transparent = true %}

{% block title %}Association des Plaisanciers d'Arzal{% endblock %}

{# --- CSS uniquement pour cette page (Leaflet + hauteur de la carte) --- #}
{% block stylesheets %}
    {{ parent() }}
    <link
        rel="stylesheet"
        href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
        crossorigin=""
    />
    <style>

        .leaflet-map { height: 380px; }
        @media (min-width: 992px){ .leaflet-map { height: 480px; } }
    </style>
{% endblock %}

{% block body %}

    {# =======================
     Section : Hero (vidéo)
     ======================= #}
    <section class="hero-section" id="section_1" aria-label="Bannière d’accueil">
        <div class="section-overlay"></div>

        <div class="container d-flex justify-content-center align-items-center">
            <div class="row">
                <div class="col-12 mt-auto mb-5 text-center">
                    <small class="text-uppercase">Association des Plaisanciers d'Arzal</small>
                    <h1 class="text-white mb-5">Bienvenue sur notre site&nbsp;!</h1>
                    <a class="btn custom-btn smoothscroll" href="#about" aria-label="Découvrir l’association">Découvrir</a>
                </div>

                <div class="col-lg-12 col-12 mt-auto d-flex flex-column flex-lg-row text-center">
                    <div class="date-wrap">
                        <h5 class="text-white mb-0">
                            <i class="custom-icon bi-clock me-2" aria-hidden="true"></i>
                            Prochain événement : 12 Octobre 2025
                        </h5>
                    </div>

                    <div class="location-wrap mx-auto py-3 py-lg-0">
                        <h5 class="text-white mb-0">
                            <i class="custom-icon bi-geo-alt me-2" aria-hidden="true"></i>
                            Port de plaisance d'Arzal (Morbihan)
                        </h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="video-wrap" aria-hidden="true">
            <video autoplay loop muted playsinline class="custom-video">
                <source src="{{ asset('video/istockphoto-1293944549-640_adpp_is.mp4') }}" type="video/mp4">
            </video>
        </div>
    </section>

    {# ==================
     Section : Qui sommes-nous ? (About)
     ================== #}
    <section id="about" class="about-section section-padding text-white" aria-labelledby="about-title">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-8 col-lg-9">
                    <div class="text-center mb-4">
                        <h2 id="about-title" class="display-6 fw-bold mb-3 text-white">Qui sommes-nous&nbsp;?</h2>
                        <p class="lead opacity-75 mb-0">
                            Ami(e)s plaisanciers du Port d’Arzal-Camoël, bienvenue sur le site de l’association
                            <strong>APPAC</strong>.
                        </p>
                    </div>

                    <hr class="border-light opacity-25 my-4">

                    <div class="fs-5 opacity-85">
                        <p class="mb-3 text-white">…Laissez naviguer votre curiosité à la découverte&nbsp;:</p>

                        <ul class="list-unstyled ps-0 mb-4">
                            <li class="d-flex align-items-start gap-2 mb-2 text-white">
                                <i class="bi bi-life-preserver" aria-hidden="true"></i>
                                <span>Nos engagements et les démarches pour la défense des intérêts des plaisanciers</span>
                            </li>
                            <li class="d-flex align-items-start gap-2 text-white">
                                <i class="bi bi-emoji-smile" aria-hidden="true"></i>
                                <span>Nos activités festives et diverses autour du plaisir de la plaisance</span>
                            </li>
                        </ul>

                        <p class="mb-1 text-white">
                            Alors, <em>cap sur «&nbsp;Qui sommes-nous&nbsp;? / Présentation de l’APPAC&nbsp;»</em> et,
                            si vous appréciez aussi la convivialité, <strong>n’hésitez pas à nous rejoindre&nbsp;!</strong>
                        </p>
                        <p class="mb-4 text-white">À bientôt&nbsp;⛵</p>
                    </div>

                    <div class="text-center">
                        <a href="{{ path('app_adhesion') }}" class="btn custom-btn px-4" aria-label="Aller aux actualités">S'abonner</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {# ===========
     Section : Actualités
     =========== #}
    <section id="actus" class="news-section section-padding" aria-labelledby="actus-title">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h2 id="actus-title" class="mb-4">Derniers articles</h2>
                </div>

                {% for a in actus %}
                    <div class="col-lg-4 col-md-6 mb-4">
                        <article class="custom-block-wrap h-100">
                            {% if a.cover %}
                                <img
                                    src="{{ asset('uploads/covers/' ~ a.cover) }}"
                                    class="custom-block-image img-fluid"
                                    alt="{{ a.title }}"
                                    loading="lazy">
                            {% endif %}

                            <div class="custom-block">
                                <h3 class="h5 mb-2">
                                    <a href="{{ path('actus_show', { slug: a.slug }) }}" class="custom-btn">{{ a.title }}</a>
                                    {% if a.pinned %}<span class="badge text-bg-warning ms-1">À la une</span>{% endif %}
                                    {% if a.isMembersOnly %}<span class="badge text-bg-secondary ms-1">Membres</span>{% endif %}
                                </h3>

                                <p class="text-muted mb-2">
                                    {{ a.publishedAt ? a.publishedAt|date('d/m/Y H:i') : '' }}
                                </p>

                                {% set excerpt = a.content|striptags %}
                                <p class="mb-3">
                                    {{ excerpt|length > 160 ? excerpt|slice(0,160) ~ '…' : excerpt }}
                                </p>

                                <a class="btn custom-btn" href="{{ path('actus_show', { slug: a.slug }) }}">Lire</a>
                            </div>
                        </article>
                    </div>
                {% else %}
                    <div class="col-12 text-center">
                        <p>Aucun article pour le moment.</p>
                    </div>
                {% endfor %}
            </div>
            <div class="text-center mt-3">
                <a href="{{ path('actus_index') }}" class="btn custom-btn px-4">
                    Voir tous les articles
                </a>
            </div>
        </div>
    </section>

    {# ============
     Section : Événements
     ============ #}
    <section id="events-section" class="section-padding bg-light" aria-labelledby="events-title">
        <div class="container">
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <h2 id="events-title" class="mb-3">Prochains événements</h2>
                    <p class="text-muted mb-0">Découvrez nos sorties et activités à venir</p>
                </div>
            </div>

            <div class="row">
                {% for event in events %}
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="card h-100 shadow-sm">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title">{{ event.title }}</h5>

                                <p class="card-text mb-1">
                                    <strong>Date :</strong> {{ event.startAt|date('d/m/Y H:i') }}
                                    {% if event.endAt %} – {{ event.endAt|date('d/m/Y H:i') }}{% endif %}
                                </p>

                                {% if event.locationName %}
                                    <p class="card-text mb-1">
                                        <strong>Lieu :</strong> {{ event.locationName }}
                                    </p>
                                {% endif %}

                                <p class="card-text mb-2">
                                    <strong>Statut :</strong>
                                    {% if event.status == 'PUBLISHED' %}
                                        <span class="badge bg-success">{{ event.status }}</span>
                                    {% elseif event.status == 'DRAFT' %}
                                        <span class="badge bg-secondary">{{ event.status }}</span>
                                    {% else %}
                                        <span class="badge bg-danger">{{ event.status }}</span>
                                    {% endif %}
                                </p>

                                {% if event.maxParticipants %}
                                    {% set spots_left = event.spotsLeft() %}
                                    {% set percent = event.maxParticipants > 0
                                        ? (((event.maxParticipants - spots_left) / event.maxParticipants) * 100)|round(0, 'ceil')
                                        : 0 %}
                                    <p class="mb-1">
                                        <strong>Places disponibles :</strong>
                                        {{ spots_left }}/{{ event.maxParticipants }}
                                    </p>
                                    <div class="progress mb-2" style="height:10px;">
                                        <div
                                            class="progress-bar {% if percent < 50 %}bg-success{% elseif percent < 80 %}bg-warning{% else %}bg-danger{% endif %}"
                                            role="progressbar"
                                            style="width: {{ percent }}%;"
                                            aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                {% endif %}

                                <a href="{{ path('app_event_show', {slug: event.slug}) }}" class="btn btn-primary mt-auto">
                                    Voir détails
                                </a>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="col-12 text-center">
                        <p class="text-muted">Aucun événement à venir pour le moment.</p>
                    </div>
                {% endfor %}
            </div>

            <div class="text-center mt-3">
                <a href="{{ path('app_event_index') }}" class="btn custom-btn px-4">
                    Voir tous les événements
                </a>
            </div>
        </div>
    </section>


    {# ====
     Section : Annonces
     ==== #}

    {% include 'partials/_classifieds_home.html.twig' %}




    {# ====
     Section : Partenaires
     ==== #}
    <section id="partenaires" class="py-5 bg-light" aria-labelledby="partners-title">
        <div class="container">
            <h2 id="partners-title" class="text-center mb-4">Nos partenaires</h2>

            <div class="row justify-content-center">
                {% for partner in partners %}
                    <div class="col-6 col-md-3 text-center mb-4">
                        <a href="{{ partner.url }}" target="_blank" rel="noopener">
                            {% if partner.logo %}
                                <img
                                    src="{{ asset(partner.logo) }}"
                                    alt="{{ partner.label }}"
                                    class="img-fluid"
                                    style="max-height:100px"
                                    loading="lazy">
                            {% else %}
                                <span>{{ partner.label }}</span>
                            {% endif %}
                        </a>
                    </div>
                {% else %}
                    <p class="text-center mb-0">Aucun partenaire pour le moment.</p>
                {% endfor %}
            </div>
        </div>
    </section>

    {# ======= Contactez-nous ======= #}
    <section id="contact" class="section-padding bg-white pb-0" aria-labelledby="contact-title">
        <div class="container">
            <div class="row mb-4">
                <div class="col-12 text-center">
                    <h2 id="contact-title" class="mb-2">Contactez-nous</h2>
                    <p class="text-muted mb-0">Une question ? Un message ? Appac est à votre écoute.</p>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title">Coordonnées</h5>
                            <ul class="list-unstyled mb-0">
                                <li class="mb-1"><i class="bi bi-geo-alt me-2"></i><strong>Capitainerie d’Arzal-Camoël</strong></li>
                                <li class="mb-1"><i class="bi bi-pin-map me-2"></i> Port d’Arzal-Camoël, 56190 Arzal</li>
                                <li class="mb-1"><i class="bi bi-envelope me-2"></i><a href="mailto:contact@appac56.fr">contact@appac56.fr</a></li>
                                <li class="mb-1"><i class="bi bi-telephone me-2"></i> 02 00 00 00 00</li>
                                <li class="mb-0"><i class="bi bi-clock me-2"></i> Lun–Dim : 09:00–18:00</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title">Envoyer un message</h5>
                            <form action="#" method="post" class="row g-3">
                                <div class="col-md-6">
                                    <label for="c-name" class="form-label">Nom</label>
                                    <input id="c-name" name="name" type="text" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="c-email" class="form-label">Email</label>
                                    <input id="c-email" name="email" type="email" class="form-control" required>
                                </div>
                                <div class="col-12">
                                    <label for="c-message" class="form-label">Message</label>
                                    <textarea id="c-message" name="message" rows="4" class="form-control" required></textarea>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn custom-btn">Envoyer</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Carte full-width #}
        <div class="container-fluid px-0 mt-4">
            <div id="leaflet-map" class="leaflet-map w-100"
                 data-lat="47.50017" data-lng="-2.37828" data-zoom="15"></div>
        </div>
    </section>

{% endblock %}


{# --- JS uniquement pour cette page (Leaflet + init) --- #}
{% block javascripts %}
    {{ parent() }}
    <script
        src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
        crossorigin="">
    </script>
    <script>
        (function () {
            var el = document.getElementById('leaflet-map');
            if (!el || typeof L === 'undefined') return;

            var lat = parseFloat(el.dataset.lat || '47.50017');
            var lng = parseFloat(el.dataset.lng || '-2.37828');
            var zoom = parseInt(el.dataset.zoom || '15', 10);

            var map = L.map(el, { scrollWheelZoom: false }).setView([lat, lng], zoom);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap'
            }).addTo(map);

            var marker = L.marker([lat, lng]).addTo(map);
            marker.bindPopup('<strong>Capitainerie d’&nbsp;Arzal-Camoël</strong><br>Port d’Arzal-Camoël').openPopup();

            // Assurer un rendu correct après mise en page/redimensionnement
            setTimeout(function(){ map.invalidateSize(); }, 250);
            window.addEventListener('resize', function(){ map.invalidateSize(); });
        })();
    </script>
{% endblock %}