{% extends 'public/walk_the_line/base.html.twig' %}

{% block title %}Walk The Line — Johnny Cash, autrement{% endblock %}

{% block body %}
{% include 'public/walk_the_line/partials/_header.html.twig' %}

{% set homePhotos = {
    hero: 'images/public/walk-the-line/shooting/AG49.jpg',
    manifesto: 'images/public/walk-the-line/shooting/AR77.jpg',
    show: 'images/public/walk-the-line/shooting/AG15.jpg',
    breath: 'images/public/walk-the-line/shooting/DIV8.jpg'
} %}

<main id="top">
    <section class="wtl-hero wtl-panel" data-panel>
        <div class="wtl-hero-index" aria-hidden="true">01 / 05</div>

        <div class="wtl-hero-copy" data-reveal>
            <p class="wtl-eyebrow">Johnny Cash · voix / guitare · live</p>
            <h1>
                <span class="wtl-line wtl-line-outline">WALK</span>
                <span class="wtl-line wtl-line-the">THE</span>
                <span class="wtl-line wtl-line-offset">LINE</span>
            </h1>
            <p class="wtl-hero-statement">Hello, I’m <strong>NOT</strong> Johnny Cash.</p>
        </div>

        {% include 'public/walk_the_line/partials/_photo.html.twig' with {
            src: homePhotos.hero, alt: 'Portrait de Walk The Line, guitare en main et tatouage CASH visible',
            mode: 'graphic', class: 'wtl-hero-image', position: '49% 48%', loading: 'eager', parallax: '0.08'
        } only %}

        <div class="wtl-hero-note" data-reveal>
            <span class="wtl-rule"></span>
            <p>Pas une imitation.<br>Une traversée.</p>
        </div>

        <a class="wtl-scroll-cue" href="#manifesto">
            <span>Descendre</span>
            <i aria-hidden="true"></i>
        </a>
    </section>

    <section class="wtl-manifesto wtl-panel" id="manifesto" data-panel>
        <div class="wtl-section-number">02</div>
        <div class="wtl-manifesto-word" aria-hidden="true">CASH</div>

        <div class="wtl-manifesto-copy" data-reveal>
            <p class="wtl-kicker">Un homme. Des chansons. Des failles.</p>
            <h2>Ce n’est pas un musée.<br><em>Ce n’est pas un costume.</em></h2>
            <p>Walk The Line est un concert consacré à Johnny Cash. Il ne cherche ni l’imitation, ni la reproduction figée d’un répertoire. Seul avec sa voix et sa guitare, Alex traverse les chansons et le récit pour révéler l’homme derrière la légende.</p>
        </div>

        {% include 'public/walk_the_line/partials/_photo.html.twig' with {
            src: homePhotos.manifesto, alt: 'Silhouette solitaire dans un vaste paysage, photographiée pour Walk The Line',
            mode: 'native', class: 'wtl-manifesto-image', parallax: '-0.05'
        } only %}

        <div class="wtl-manifesto-side" data-reveal>
            <span>1932</span>
            <span>→</span>
            <span>2003</span>
            <small>Une ligne. Pas une chronologie.</small>
        </div>
    </section>

    <section class="wtl-show wtl-panel" id="spectacle" data-panel>
        <div class="wtl-section-number">03</div>
        <div class="wtl-show-marquee" aria-hidden="true">
            <div>• THE MAN IN BLACK •</div>
        </div>

        <div class="wtl-show-grid">
            <div class="wtl-show-title" data-reveal>
                <p class="wtl-kicker">Le spectacle</p>
                <h2>Une voix.<br>Une guitare.<br><span>Une histoire.</span></h2>
            </div>

            {% include 'public/walk_the_line/partials/_photo.html.twig' with {
                src: homePhotos.show, alt: 'Walk The Line, assis avec une guitare acoustique dans une ambiance intime',
                mode: 'graphic', class: 'wtl-show-image', position: '43% 50%', parallax: '0.04'
            } only %}

            <div class="wtl-show-text" data-reveal>
                <p>Le concert suit moins une biographie exhaustive qu’une trajectoire humaine. Des premiers succès aux American Recordings, il traverse les histoires, les routes, les prisons et les oubliés de l’Amérique.</p>
                <p>Peu à peu, le récit devient plus intérieur. Derrière le personnage public apparaissent les contradictions, la foi, les chutes, les renaissances, les absences et le regard qu’un homme finit par porter sur le chemin parcouru.</p>
                <p>Les chansons ne sont pas simplement alignées comme un catalogue de titres. Chacune trouve sa place parce qu’elle éclaire un moment, une relation, une faille ou une part de l’homme derrière la légende.</p>
                <a class="wtl-text-link" href="{{ path('site_wtl_show') }}">Découvrir le spectacle <span>↗</span></a>
            </div>
        </div>
    </section>

    <section class="wtl-photo-breath" aria-label="Continuer d’avancer">
        {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: homePhotos.breath, alt: 'Forêt marquée par un incendie où la végétation recommence à pousser', mode: 'native', class: 'wtl-photo-breath-image', reveal: true} only %}
        <div class="wtl-photo-breath-copy" data-reveal aria-hidden="true"><span>CONTINUER</span><strong>D’AVANCER.</strong></div>
    </section>

    <section class="wtl-dates wtl-panel" id="dates" data-panel>
        <div class="wtl-section-number">04</div>
        <div class="wtl-dates-head" data-reveal>
            <p class="wtl-kicker">On the road</p>
            <h2>Next<br><span>shows.</span></h2>
        </div>

        <div class="wtl-date-list">
            {% if upcoming is not empty %}
                {% for concert in upcoming %}
                    <article class="wtl-date-row" data-reveal>
                        <time datetime="{{ concert.eventDate|date('Y-m-d') }}" class="wtl-date-number">
                            <b>{{ concert.eventDate|date('d') }}</b>
                            {% set monthLabels = ['JANVIER', 'FÉVRIER', 'MARS', 'AVRIL', 'MAI', 'JUIN', 'JUILLET', 'AOÛT', 'SEPTEMBRE', 'OCTOBRE', 'NOVEMBRE', 'DÉCEMBRE'] %}
                            <span>{{ monthLabels[concert.eventDate|date('n') - 1] }}</span>
                            <small>{{ concert.eventDate|date('Y') }}</small>
                        </time>
                        <div class="wtl-date-place">
                            <strong>{{ concert.publicTitle ?: (concert.showPublicVenue ? concert.venue.name : (project.publicName ?: project.name)) }}</strong>
                            {% if concert.showPublicCity %}<span>{{ concert.venue.city ?: '—' }}</span>{% endif %}
                        </div>
                        <div class="wtl-date-status">
                            {% if concert.soldOut %}<span class="wtl-pill">COMPLET</span>{% endif %}
                            {% if concert.postponed %}<span class="wtl-pill">REPORTÉ</span>{% endif %}
                        </div>
                        {% set concertUrl = concert.ticketUrl ?: concert.bookingUrl ?: concert.externalUrl %}
                        {% if concertUrl %}
                            <a href="{{ concertUrl }}" rel="noopener noreferrer" target="_blank" class="wtl-date-link">Infos <span>↗</span></a>
                        {% else %}
                            <span class="wtl-date-link is-muted">Bientôt</span>
                        {% endif %}
                    </article>
                {% endfor %}
            {% else %}
                <article class="wtl-date-row wtl-date-empty" data-reveal>
                    <div class="wtl-date-number"><b>—</b><span>2026</span></div>
                    <div class="wtl-date-place"><strong>Les prochaines dates arrivent.</strong></div>
                    <span class="wtl-date-link is-muted">Stay tuned</span>
                </article>
            {% endif %}
        </div>

        <div class="wtl-dates-foot" data-reveal>
            <span>France · Belgique · Suisse</span>
            <a class="wtl-text-link" href="#booking">Bring the black to your stage <span>↗</span></a>
        </div>
    </section>

    <section class="wtl-media wtl-panel" id="media" data-panel>
        <div class="wtl-section-number">05</div>
        <div class="wtl-media-frame" data-reveal>
            <div class="wtl-media-screen wtl-media-screen--video">
                <video class="wtl-media-video" controls playsinline preload="metadata" poster="{{ asset('video/walk-the-line/folsom-prison-blues-demo-poster.jpg') }}">
                    <source src="{{ asset('video/walk-the-line/folsom-prison-blues-demo.mp4') }}" type="video/mp4">
                    Votre navigateur ne permet pas de lire cette vidéo.
                </video>
                <div class="wtl-media-caption">
                    <small>LIVE SESSION</small>
                    <strong>Folsom Prison Blues</strong>
                </div>
            </div>
            <p>Un train lancé trop vite, une prison au bout de la ligne, et cette pulsation qui ne s’arrête jamais. Folsom Prison Blues donne immédiatement le ton.</p>
            <a class="wtl-text-link" href="{{ path('site_wtl_media') }}">Voir les médias <span>↗</span></a>
        </div>
    </section>

    <section class="wtl-booking" id="booking">
        <div class="wtl-booking-copy" data-reveal>
            <p class="wtl-kicker">Programmation / Presse</p>
            <h2><span>Bring the</span><br><em>black</em><br><span>to your stage.</span></h2>
        </div>

        <div class="wtl-booking-meta" data-reveal>
            <p>Une forme solo voix / guitare, légère et adaptable, qui peut être accueillie dans un lieu intimiste comme sur un plateau équipé. La musique reste au centre ; le récit, la lumière et les images servent les chansons, jamais l’inverse.</p>
            {% if project.bookingEmail or project.contactEmail %}
                <a class="wtl-booking-mail" href="mailto:{{ project.bookingEmail ?: project.contactEmail }}">{{ project.bookingEmail ?: project.contactEmail }} <span>↗</span></a>
            {% else %}
                <a class="wtl-booking-mail" href="{{ path('site_wtl_contact') }}">Contact programmation <span>↗</span></a>
            {% endif %}
            <div class="wtl-booking-links">
                <a href="#dates">Dates</a>
                <a href="{{ path('site_wtl_media') }}">Médias</a>
                <a href="{{ path('app_login') }}">Espace pro</a>
            </div>
        </div>

        <div class="wtl-footer-mark" aria-hidden="true">WTL</div>
        <footer>
            <span>WALK THE LINE</span>
            <span>JOHNNY CASH · AUTREMENT</span>
            <span>© {{ 'now'|date('Y') }}</span>
            {% include 'public/walk_the_line/partials/_legal_links.html.twig' %}
</footer>
    </section>
</main>
{% endblock %}