@extends('layout')
@section('title', 'Arbre généalogique - Famille Letzelter (Moselle)')
@section('meta', "L'arbre généalogique interactif de la famille Letzelter : onze générations d'ascendance des neuf enfants d'Antoine Letzelter et Claire Schwarzmuller, 620 aïeux jusqu'aux années 1560, du pays de Bitche au Palatinat, au Tyrol et à Soleure.")
@section('schema', 'Article')

@section('content')
    <section class="hero compact">
        <div class="wrap">
            <p class="eyebrow">Famille Letzelter</p>
            <h1>Arbre généalogique</h1>
            <p class="lead">Onze générations d'ascendance des neuf enfants d'Antoine Letzelter &amp; de Claire Schwarzmuller : 620 aïeux, jusqu'aux années 1560. Choisissez la profondeur ci-dessous, puis cliquez sur une personne pour ouvrir sa fiche.</p>
            <p class="byline">Par {{ config('site.author') }} · <time datetime="{{ config('site.published') }}">{{ \Illuminate\Support\Carbon::parse(config('site.published'))->translatedFormat('j F Y') }}</time></p>
        </div>
    </section>

    {{-- ── Pièce maîtresse : UN SEUL arbre d'ascendance ────────────────
         Éventail horizontal : les neuf enfants à gauche, puis leurs parents,
         grands-parents et ainsi de suite vers la droite. Chaque filiation est
         tracée, on voit toujours de quel couple descend une personne. --}}
    <section class="wrap member-body">
        <div class="ped-outils" role="toolbar" aria-label="Profondeur de l'arbre">
            <span class="ped-outils-titre">Remonter jusqu'à</span>
            @php
                // Les paliers suivent la profondeur reelle : annoncer « tout
                // l'arbre » a six generations serait faux depuis la moisson.
                $paliers = [];
                foreach ([3, 4, 5, 6, 8, 10] as $n) {
                    if ($n < $profondeurMax) { $paliers[$n] = $n.' générations'; }
                }
                $paliers[$profondeurMax] = 'tout l\'arbre ('.$profondeurMax.' générations)';
            @endphp
            @foreach ($paliers as $n => $libelle)
                <a class="arbre-ctl @if($niveaux === $n) is-active @endif"
                   href="{{ route('arbre') }}?generations={{ $n }}">{{ $libelle }}</a>
            @endforeach
            <button type="button" class="arbre-ctl" onclick="window.print()">Imprimer</button>
        </div>

        <div class="ped-cadre">
            <ul class="ped-arbre">
                {{-- Racine : les neuf enfants, dont Antoine et Claire sont les parents --}}
                <li class="ped-noeud ped-noeud--parent">
                    <span class="ped-carte ped-carte--souche ped-carte--enfants">
                        <span class="ped-nom">Les neuf enfants</span>
                        <span class="ped-vie">d'Antoine &amp; Claire</span>
                    </span>
                    <ul class="ped-parents">
                        @include('partials.pedigree', ['gen' => $genealogie, 'sosa' => 2, 'max' => $sosaMax])
                        @include('partials.pedigree', ['gen' => $genealogie, 'sosa' => 3, 'max' => $sosaMax])
                    </ul>
                </li>
            </ul>
        </div>

        <p class="csc-mentions">
            Chaque carte mène à la fiche de la personne. Le numéro en haut à droite est son numéro Sosa :
            le père porte le double, la mère le double plus un.
        </p>
    </section>

    <section class="wrap" style="text-align:center; margin: 8px auto 4px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;">
        <a class="btn" href="{{ route('descendance') }}">Arbre descendant (jusqu'à aujourd'hui) →</a>
        @if (!empty($personneSouche))
            <a class="btn" href="{{ route('personne', $personneSouche) }}">Fiches détaillées de la famille →</a>
        @endif
    </section>

    {{-- Accès direct aux fiches (fonctionne sans JavaScript, utile aux moteurs) --}}
    <section class="wrap">
        <h2 class="section-title">Les neuf enfants</h2>
        <div class="children-row">
            @foreach ($children as $child)
                <a href="{{ route('member', $child) }}" class="child-chip">{{ $child->display_name }}</a>
            @endforeach
        </div>
    </section>

    {{-- Le blason de la famille : provenance historique --}}
    <section class="wrap blason-section">
        <h2 class="section-title">Le blason de la famille</h2>
        <div class="blason-bloc">
            <img class="blason-img" src="{{ asset('scrapbook/blason.png') }}?v={{ @filemtime(public_path('scrapbook/blason.png')) }}"
                 alt="Blason de la famille Letzelter - bouquetin de gueules sur champ d'or" width="360" height="346" loading="lazy" decoding="async">
            <div class="blason-txt">
                <p>Le blason de la famille Letzelter a été <strong>attribué par l'empereur Frédéric III de Habsbourg le 21 juin 1474</strong> à <strong>Thomas Letzellter</strong>, d'après le <em>Heraldic Institute of Rome</em>.</p>
                <p>L'original est conservé aux <strong>Archives de Vienne</strong> (Autriche), où le patronyme est orthographié « <em>Letzellter</em> ».</p>
                <p>Il représente un <strong>bouquetin rampant de gueules</strong> (rouge), aux cornes et onglons d'azur, sur un champ d'or ; le bouquetin se retrouve en cimier, issant d'une couronne. Les banderoles rappellent la date d'attribution : <strong>21·6 · 1474</strong>.</p>
            </div>
        </div>
    </section>

    {{-- Documents d'archives --}}
    @if ($page->photos->isNotEmpty())
        <section class="wrap">
            <h2 class="section-title">Documents d'archives</h2>
            <div class="gallery" data-lightbox>
                @foreach ($page->photos as $photo)
                    <a href="{{ $photo->url }}" class="shot"
                       @if ($photo->caption) data-caption="{{ $photo->caption }}" @endif>
                        <img loading="lazy" src="{{ $photo->url }}" alt="{{ $photo->caption ?: 'Document généalogique' }}">
                    </a>
                @endforeach
            </div>
        </section>
    @endif

    <section class="wrap back-row">
        <a href="{{ route('home') }}" class="back-link">← L'album</a>
    </section>
@endsection