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

<section class="hero">
    <p class="hero-eyebrow">Photographie · Émotion · Lumière</p>
    <h1>Capturer<br>l'<em>instant</em><br>parfait</h1>
    <p>Chaque image raconte une histoire silencieuse. Bienvenue dans mon univers photographique.</p>
    <a href="#galeries" class="hero-cta">Découvrir les galeries</a>
    <div class="scroll-line"></div>
</section>

<section id="galeries">
    <p class="section-label">Mon travail</p>
    <h2 class="section-title">Galeries</h2>

    {% if galleries is empty %}
        <p class="empty-msg">Aucune galerie disponible. <a href="{{ path('app_admin_gallery_add') }}">Créer une galerie</a></p>
    {% else %}
        <div class="gallery-tabs">
            {% for gallery in galleries %}
                <button class="tab {% if loop.first %}active{% endif %}"
                        data-gallery="gallery-{{ gallery.id }}">
                    {{ gallery.name }}
                    <span class="tab-count">{{ gallery.photoCount }}</span>
                </button>
            {% endfor %}
        </div>

        {% for gallery in galleries %}
            <div class="gallery-grid {% if loop.first %}active{% endif %}"
                 id="gallery-{{ gallery.id }}">
                {% set visible_photos = gallery.photos|filter(p => p.visible) %}
                {% if visible_photos is empty %}
                    <p class="empty-gallery">Aucune photo dans cette galerie.</p>
                {% else %}
                    {% for photo in visible_photos %}
                        <div class="photo" onclick="openLightbox('{{ asset('uploads/photos/' ~ photo.filename) }}', '{{ photo.title|e('js') }}')">
                            <img src="{{ asset('uploads/photos/' ~ photo.filename) }}"
                                 alt="{{ photo.title }}" loading="lazy">
                            <div class="photo-overlay">
                                <span class="photo-title">{{ photo.title }}</span>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        {% endfor %}
    {% endif %}
</section>

<div class="stats">
    <div class="stat"><div class="stat-num">{{ galleries|length }}</div><div class="stat-label">Galeries</div></div>
    <div class="stat"><div class="stat-num">{{ featured|length }}</div><div class="stat-label">Photos à la une</div></div>
    <div class="stat"><div class="stat-num">∞</div><div class="stat-label">Passion</div></div>
</div>

<section id="about" class="about-section">
    <div class="about-grid">
        <div class="about-img-placeholder">
            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="1"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
            <span>Votre photo</span>
        </div>
        <div class="about-text">
            <p class="section-label">À propos</p>
            <h2>Mon <em>histoire</em></h2>
            <p>{{ settings.about_text ?? 'Photographe passionné, toujours en quête de la lumière parfaite et de l\'instant décisif.' }}</p>
            <div class="signature">— {{ settings.photographer_name ?? 'Votre Nom' }}</div>
        </div>
    </div>
</section>

{# Lightbox #}
<div id="lightbox" onclick="closeLightbox()">
    <button id="lb-close" onclick="closeLightbox()" aria-label="Fermer">✕</button>
    <img id="lb-img" src="" alt="">
    <p id="lb-caption"></p>
</div>

{% endblock %}