@extends('layout')

@section('title', 'Accueil')

@section('content')
    <section class="hero">
        <div class="hero-collage" aria-hidden="true">
            @foreach($hero as $img)
                <div class="hero-tile" style="background-image:url('{{ \App\Support\Gallery::photo($img) }}')"></div>
            @endforeach
        </div>
        <div class="hero-veil"></div>
        <div class="hero-hearts" aria-hidden="true"></div>
        <div class="hero-inner">
            <p class="hero-kicker">L’album de</p>
            <h1 class="hero-name">
                <img src="{{ asset('img/valentine-title.png') }}" alt="Valentine" class="hero-logo">
            </h1>
            <p class="hero-sub">dite <em>Pepette</em></p>
            <p class="hero-meta">née le 27 juin 2005</p>
            <p class="hero-tagline">Pétillante · curieuse · toujours en mouvement</p>
            <p class="hero-stats">
                <span data-count="{{ $stats['albums'] }}">0</span> albums ·
                <span data-count="{{ $stats['photos'] }}">0</span> photos
            </p>
            <a href="https://veastudio.fr" target="_blank" rel="noopener" class="hero-studio-pill" data-magnetic>
                ▶ Aujourd’hui, elle crée chez VEA&nbsp;STUDIO
            </a>
            <a href="#albums" class="hero-cue" aria-label="Voir les albums" data-magnetic>⌄</a>
        </div>
    </section>

    <div class="marquee" aria-hidden="true">
        <div class="marquee-track">
            @php($words = ['Image','Famille','Émotion','Lumière','Mouvement','Amour','Création','Souvenirs','Tendresse'])
            @for($k=0;$k<2;$k++)
                @foreach($words as $w)<span>{{ $w }}</span><span class="sep">✦</span>@endforeach
            @endfor
        </div>
    </div>

    <main id="albums" class="page">
        <p class="intro">
            Une petite fille, une grande histoire de famille. Toutes les premières fois,
            les anniversaires, les passions et les vacances — réunies ici, souvenir après souvenir.
        </p>

        <section class="vibe" data-reveal>
            <h2 class="vibe-title">Une bombe de vie</h2>
            <p class="vibe-text">
                Déjà toute petite, Valentine <strong>bougeait</strong>, <strong>créait</strong>,
                croquait la vie à pleines dents — mille activités, curieuse de tout, jamais à l’arrêt.
                (Et déjà folle de ses <em>« birobes »</em> — ses belles robes à elle.)
            </p>
        </section>
    </main>

    <div class="ribbon" aria-hidden="true">
        <div class="ribbon-track">
            @foreach(array_merge($lively, $lively) as $img)
                <span class="ribbon-item" style="background-image:url('{{ \App\Support\Gallery::photo($img) }}')"></span>
            @endforeach
        </div>
    </div>

    <main class="page page-rest">

        @foreach($categories as $cat)
            <section class="category" id="{{ $cat['id'] }}">
                <header class="category-head" data-reveal>
                    <h2>{{ $cat['label'] }}</h2>
                    <span class="category-count">{{ $cat['total'] }} photos</span>
                </header>

                <div class="albums-grid">
                    @foreach($cat['albums'] as $album)
                        <a class="album-card" href="{{ route('album', $album['slug']) }}"
                           data-reveal data-reveal-delay="{{ ($loop->index % 4) * 90 }}">
                            <div class="album-cover"
                                 style="background-image:url('{{ \App\Support\Gallery::photo($album['cover']) }}')"></div>
                            <div class="album-info">
                                <h3>{{ $album['display'] }}</h3>
                                <span>{{ $album['count'] }} photos</span>
                            </div>
                        </a>
                    @endforeach
                </div>
            </section>
        @endforeach

        <section class="timeline" id="parcours">
            <header class="category-head" data-reveal>
                <h2>Son parcours</h2>
                <span class="category-count">de 2005 à aujourd’hui</span>
            </header>
            <div class="tl">
                @foreach($timeline as $node)
                    <div class="tl-node {{ ($node['studio'] ?? false) ? 'tl-studio' : '' }}" data-reveal>
                        <div class="tl-dot"></div>
                        <div class="tl-card">
                            @if($node['photo'])
                                <div class="tl-photo" style="background-image:url('{{ $node['photo'] }}')"></div>
                            @endif
                            <div class="tl-body">
                                <span class="tl-year">{{ $node['year'] }}</span>
                                <h3>{{ $node['title'] }}</h3>
                                <p>{{ $node['text'] }}</p>
                                @if($node['studio'] ?? false)
                                    <a class="tl-cta" href="https://veastudio.fr" target="_blank" rel="noopener" data-magnetic>
                                        Voir VEA&nbsp;STUDIO →
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>

        @php($featured = \App\Support\Gallery::album('la-princesse') ?? \App\Support\Gallery::albums()[0])
        <section class="today" id="aujourdhui" data-reveal>
            <div class="today-media">
                <img loading="lazy" src="{{ \App\Support\Gallery::photo($featured['cover']) }}"
                     alt="Valentine enfant">
                <span class="today-badge">Aujourd’hui</span>
            </div>
            <div class="today-text">
                <p class="today-kicker">Une sensibilité reçue en héritage</p>
                <h2>… à VEA&nbsp;STUDIO</h2>
                <p>
                    Bercée, comme toutes les petites filles, dans la tendresse des siens — mais surtout
                    dans la beauté et le sens artistique de sa grand-mère, <strong>Marie-Claire Heim
                    Baumberger</strong>, professeur agrégée en arts plastiques et titulaire du Prix de Rome.
                </p>
                <p>
                    De cet héritage du regard et de l’émotion, Valentine a fait son métier : elle a fondé
                    <strong>VEA&nbsp;STUDIO</strong>, vidéaste &amp; pilote de drone à Bordeaux. Une histoire
                    de famille qui continue, une image après l’autre.
                </p>
                <a class="today-cta" href="https://veastudio.fr" target="_blank" rel="noopener" data-magnetic>
                    Découvrir VEA&nbsp;STUDIO →
                </a>
            </div>
        </section>
    </main>
@endsection