@php
    /** @var array $page */
    $type = $page['type'];
    $disk = \Illuminate\Support\Facades\Storage::disk('public');
@endphp

@if ($type === 'cover')
    {{-- Couverture du grimoire : grande photo + titre + blason --}}
    <div class="pg pg-cover">
        <div class="cover-frame">
            <div class="cover-title">Famille Letzelter</div>
            <img class="cover-blason-main" src="{{ asset('scrapbook/blason.webp') }}?v={{ @filemtime(public_path('scrapbook/blason.webp')) }}" alt="Blason de la famille Letzelter" width="532" height="511">
            <span class="cover-hint">Penchez-vous sur l'album - cliquez pour l'ouvrir</span>
        </div>
    </div>

@elseif ($type === 'intro')
    {{-- Histoire, 1re page. Faits repris de la page Histoire (sources :
         Heraldic Institute of Rome, Archives de Vienne, recherche familiale). --}}
    <div class="pg pg-paper pg-intro">
        <h2 class="pg-kicker">Une famille, une histoire</h2>
        <div class="intro-cols">
            <div class="intro-text">
                <h3 class="intro-h">Le berceau : Philippsbourg</h3>
                <p>La famille <strong>Letzelter</strong> est originaire de <strong>Philippsbourg</strong>, en Moselle, au cœur du pays de Bitche et du parc des Vosges du Nord : un village-rue dominé par son église protestante, qui garde d'anciennes fermes, dont une de 1812.</p>
                <h3 class="intro-h">Le nom : un métier</h3>
                <p>Letzelter vient de <em>lebzelter</em>, ou <em>lebküchner</em> : le fabricant de <strong>pain d'épices</strong>, artisan du miel, des épices et des moules sculptés, distinct du boulanger ordinaire. <em>Leb</em> remonte au latin <em>libum</em>, petite galette ; <em>zelten</em> désigne le même gâteau plat.</p>
                <h3 class="intro-h">Tradition et archives</h3>
                <p>La famille fut longtemps rapprochée des comtes <em>von Lebzeltern</em>, d'Autriche. Les recherches ont tranché : leurs armes aux lions sont celles d'une autre maison. Cet album retient ce que les documents établissent.</p>
            </div>
            <div class="intro-aside">
                <img class="aside-blason" src="{{ asset('scrapbook/blason.webp') }}?v={{ @filemtime(public_path('scrapbook/blason.webp')) }}" alt="Blason de la famille Letzelter" width="420" height="403" loading="lazy" decoding="async">
                <p class="blason-titre">Les armes de 1474</p>
                <dl class="blason-fiche">
                    <div><dt>Écu</dt><dd>d'or au bouquetin rampant de gueules, cornes et onglons d'azur</dd></div>
                    <div><dt>Cimier</dt><dd>le même bouquetin, issant d'une couronne</dd></div>
                    <div><dt>Concession</dt><dd><strong>21 juin 1474</strong>, par l'empereur Frédéric III de Habsbourg, à Thomas Letzellter</dd></div>
                    <div><dt>Original</dt><dd>Archives de Vienne</dd></div>
                </dl>
                <div class="blason-devise">
                    <p class="blason-motto">Vincit omnia veritas</p>
                    <p class="blason-trad"><em>La vérité triomphe de tout.</em></p>
                </div>
            </div>
        </div>
        <p class="turn-hint">Les pages se tournent toutes les 10 secondes…</p>
    </div>

@elseif ($type === 'intro2')
    <div class="pg pg-paper pg-intro">
        <h2 class="pg-kicker">Neuf enfants, onze générations</h2>
        <div class="intro-cols intro-cols--egales">
            <div class="intro-text">
                <h3 class="intro-h">Antoine et Claire</h3>
                <p>Au centre de l'album : <strong>Antoine Letzelter</strong> (1883-1965), né à Bannstein, et son épouse <strong>Claire Schwarzmuller</strong>. Leurs <strong>neuf enfants</strong> ouvrent chacun une branche : Gertrude, Georgette, Antoinette, Madeleine, Cécile, Louise, Charles, Paul et Lucien.</p>
                <h3 class="intro-h">Une terre de frontière</h3>
                <p>Française, allemande après 1871, de nouveau française en 1918, annexée de 1940 à 1944 : la Moselle a changé plusieurs fois de nationalité. Deux guerres, des exodes et des retours ont marqué ces neuf vies, et leurs descendants se sont dispersés bien au-delà du village.</p>
            </div>
            <div class="intro-text">
                <h3 class="intro-h">Onze générations</h3>
                <p>L'arbre remonte jusqu'aux <strong>années 1560</strong> et réunit <strong>620 aïeux</strong>, par Eppenbrunn vers 1787, le Palatinat, la Bavière, le Tyrol et Soleure.</p>
                <h3 class="intro-h">Un mariage entre cousins</h3>
                <p>Gaspard Letzelter (1772-1824) et Reine Monnet (1784-1833) sont deux fois les arrière-grands-parents d'Antoine : dix-neuf ancêtres occupent deux places, d'où <strong>639 places pour 620 personnes</strong>.</p>
                <h3 class="intro-h">Faire vivre la mémoire</h3>
                <p>Chaque page qui suit présente l'un des neuf enfants : ses dates, son union, ses enfants, son métier, ses goûts. <em>Une famille n'est vivante que si elle se raconte.</em></p>
            </div>
        </div>
    </div>

@elseif ($type === 'member')
    @php
        $m = $page['member'];
        $first = \Illuminate\Support\Str::upper(\Illuminate\Support\Str::before($m->display_name, ' '));
        $photos = $m->photos->take(5);
    @endphp
    <div class="pg pg-paper pg-member">
        <div class="member-grid">
            {{-- Colonne photos --}}
            <div class="photo-wall">
                @foreach ($photos as $k => $ph)
                    <a class="polaroid p{{ $k }}" href="{{ $ph->url }}" target="_blank">
                        <img loading="lazy" data-src="{{ $ph->url }}" alt="{{ $m->display_name }}">
                    </a>
                @endforeach
            </div>
            {{-- Colonne infos --}}
            <div class="member-info">
                <div class="member-head">
                    <span class="coin"></span>
                    <h2 class="member-first">{{ $first }}</h2>
                    <span class="star"></span>
                </div>
                {{-- Seules les lignes que l'on sait vraiment. Le gabarit d'origine
                     imprimait ses neuf etiquettes quoi qu'il arrive, si bien que
                     « LIVRE PREFERE » et « CITATION » restaient vides sur les dix
                     pages : un album qui a l'air inacheve. Member::ficheAffichee()
                     puise d'abord dans la fiche saisie, puis dans l'arbre. --}}
                <dl class="fiche">
                    @foreach ($m->ficheAffichee() as [$label, $valeur])
                        <div class="fiche-row filled">
                            <dt>{{ $label }}</dt>
                            @if (is_array($valeur))
                                <dd><ul class="fiche-liste">@foreach ($valeur as $ligne)<li @class(['fiche-conjoint' => is_array($ligne) && ! empty($ligne['conjoint'])])>@if (is_array($ligne) && $ligne['url'])<a href="{{ $ligne['url'] }}" class="fiche-lien">{{ $ligne['texte'] }}</a>@elseif (is_array($ligne)){{ $ligne['texte'] }}@else{{ $ligne }}@endif</li>@endforeach</ul></dd>
                            @else
                                <dd>{{ $valeur }}</dd>
                            @endif
                        </div>
                    @endforeach
                </dl>
                @if (filled($m->bio))
                    <div class="fiche-bio">
                        @foreach (preg_split("/\n\s*\n/", $m->bio) as $para)
                            <p>{!! \App\Support\Markup::inline(trim($para)) !!}</p>
                        @endforeach
                    </div>
                @endif
                <a class="member-more" href="{{ route('member', $m) }}">@php $pn = \Illuminate\Support\Str::before($m->display_name, ' '); @endphp Voir l'album complet {{ preg_match('/^[aeiouyàâéèêëîïôöûüh]/iu', $pn) ? "d'".$pn : 'de '.$pn }} →</a>
            </div>
        </div>
    </div>

@elseif ($type === 'origins')
    <div class="pg pg-paper pg-origins">
        <div class="origins-grid">
            <a class="sosa-thumb" href="{{ route('arbre') }}" title="Ouvrir l'arbre généalogique">
                <img loading="lazy" data-src="{{ asset('scrapbook/sosa-antoine-claire.webp') }}" alt="Arbre SOSA">
            </a>
            <div class="origins-text">
                <h2 class="pg-kicker">Nos origines</h2>
                <p>Les ancêtres des neuf enfants d'<strong>Antoine Letzelter</strong> (1883-1965, Bannstein) et de <strong>Claire Schwarzmuller</strong> : onze générations, 620 aïeux, jusqu'aux années 1560.</p>
                <div class="origins-links">
                    <a href="{{ asset('scrapbook/sosa-antoine-claire.webp') }}" target="_blank" rel="noopener">Voir en grand →</a>
                    <a href="{{ route('arbre') }}">L'arbre détaillé →</a>
                </div>
            </div>
        </div>
    </div>

@elseif ($type === 'end')
    <div class="pg pg-paper pg-end">
        <h2 class="pg-kicker">La suite de l'histoire</h2>
        <p>Cet album rassemble la mémoire de la famille Letzelter, de Philippsbourg à aujourd'hui.</p>
        <div class="end-links">
            <a href="{{ route('histoire') }}">
                {{-- Parchemin roulé --}}
                <svg class="lien-vignette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 0 2 2H8a2 2 0 0 1-2-2V4Z"/>
                    <path d="M6 4a2 2 0 0 0-2 2v2h2"/><path d="M9 9h7M9 12.5h7M9 16h4"/>
                </svg>
                Notre histoire
            </a>
            <a href="{{ route('arbre') }}">
                {{-- Arbre --}}
                <svg class="lien-vignette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M12 21v-6"/><path d="M12 15 8 11"/><path d="m12 15 4-4"/>
                    <path d="M12 3a4.2 4.2 0 0 0-4 4.3A3.6 3.6 0 0 0 6.4 14h11.2A3.6 3.6 0 0 0 16 7.3 4.2 4.2 0 0 0 12 3Z"/>
                </svg>
                Arbre généalogique
            </a>
            <a href="{{ route('sommaire') }}">
                {{-- Livre ouvert --}}
                <svg class="lien-vignette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M12 6.5C10.5 5.2 8.4 4.6 4 4.8v13c4.4-.2 6.5.4 8 1.7 1.5-1.3 3.6-1.9 8-1.7v-13c-4.4-.2-6.5.4-8 1.7Z"/>
                    <path d="M12 6.5v13"/>
                </svg>
                Tout le site
            </a>
            <a href="{{ route('login') }}">
                {{-- Clé ancienne --}}
                <svg class="lien-vignette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <circle cx="7.5" cy="8" r="3.6"/><path d="m10.2 10.4 8 8"/><path d="m15.6 15.8 2-2"/><path d="m18.2 18.4 1.8-1.8"/>
                </svg>
                Espace famille
            </a>
        </div>
        <p class="end-note">Chaque membre peut compléter sa page et ajouter ses photos.</p>
    </div>

@else
    <div class="pg pg-paper pg-blank"></div>
@endif