@php
    $components = $this->getRegisteredCustomProfileComponents();

    // Groups the page into named zones instead of one flat stack of nine
    // cards (the "je ne trouve rien" complaint) — each zone renders in the
    // fixed order below. Component keys not listed here (a future
    // `customProfileComponents()` addition) fall through to the "Autres"
    // catch-all so nothing silently disappears from the page.
    $zones = [
        [
            'title' => 'Profil',
            'description' => "Ton identité, ta photo et tes préférences d'affichage.",
            'anchor' => 'profil',
            'keys' => ['account_identity', 'edit_profile_form'],
        ],
        [
            'title' => 'Mes espaces',
            'description' =>
                "Le rôle et l'adresse de contact que les autres membres voient dans chacun de tes espaces.",
            'anchor' => 'espaces',
            'keys' => ['workspace_memberships'],
        ],
        [
            'title' => 'Personnalisation',
            'description' => "Personnaliser l'expérience Joseph... ooouuuh...!",
            'anchor' => 'personnalisation',
            'keys' => ['custom_fields_form'],
        ],
        [
            'title' => 'Sécurité',
            'description' => 'Mot de passe, connexion à deux facteurs, jetons API et sessions actives.',
            'anchor' => 'security',
            'keys' => ['edit_password_form', 'multi_factor_authentication', 'sanctum_tokens'],
        ],
        [
            'title' => 'Navigateurs connectés',
            'description' => 'Vous êtes plutôt du genre à vous connecter à plein d\'endroit différents ou non ?',
            'anchor' => 'browser',
            'keys' => ['browser_sessions_form'],
        ],
    ];

    $zoned = collect($zones)->flatMap(fn(array $zone) => $zone['keys'])->all();
    $remaining = collect($components)
        ->keys()
        ->diff($zoned)
        ->diff(['delete_account_form'])
        ->all();
@endphp

<x-filament-panels::page>
    <div class="grid grid-cols-4 lg:grid-cols-5 gap-6">
        <div class="col-span-1 hidden md:block">
            <ul class="submenu sticky top-20">
                <li class="submenu-item"><span class="submenu-rail"><i></i></span><a href="#profil">Identité</a></li>
                <li class="submenu-item"><span class="submenu-rail"><i></i></span><a href="#espaces">Mes espaces</a></li>
                <li class="submenu-item"><span class="submenu-rail"><i></i></span><a href="#personnalisation">Personnalisation</a></li>
                <li class="submenu-item"><span class="submenu-rail"><i></i></span><a href="#security">Sécurité</a></li>
                <li class="submenu-item"><span class="submenu-rail"><i></i></span><a href="#browser">Navigateurs connectés</a></li>
                <li class="submenu-item"><span class="submenu-rail"><i></i></span><a href="#dangerzone">Zone dangereuse</a></li>
            </ul>
        </div>
        <div class="col-span-4 md:col-span-3 lg:col-span-4">
            <div class="flex flex-col gap-10">
                @foreach ($zones as $zone)
                    @php
                        $zoneComponents = collect($zone['keys'])->filter(fn(string $key) => isset($components[$key]));
                    @endphp

                    @if ($zoneComponents->isNotEmpty())
                        <div class="flex flex-col gap-4">
                            <div>
                                <h2 class="text-lg font-semibold tracking-tight text-gray-950 dark:text-white" id="{{ $zone['anchor'] }}">
                                    {{ $zone['title'] }}
                                </h2>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ $zone['description'] }}
                                </p>
                            </div>

                            <div class="flex flex-col gap-6">
                                @foreach ($zoneComponents as $key)
                                    @livewire($components[$key])
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endforeach

                @if (!empty($remaining))
                    <div class="flex flex-col gap-6">
                        @foreach ($remaining as $key)
                            @livewire($components[$key])
                        @endforeach
                    </div>
                @endif

                @if (isset($components['delete_account_form']))
                    <div
                        class="flex flex-col gap-4 rounded-xl border border-danger-300 bg-danger-50/50 p-4 dark:border-danger-500/30 dark:bg-danger-500/5">
                        <div>
                            <h2 class="text-lg font-semibold tracking-tight text-danger-700 dark:text-danger-400" id="dangerzone">
                                Zone dangereuse
                            </h2>
                            <p class="text-sm text-danger-600/80 dark:text-danger-400/70">
                                Cette action est irréversible.
                            </p>
                        </div>

                        @livewire($components['delete_account_form'])
                    </div>
                @endif
            </div>
        </div>
    </div>

</x-filament-panels::page>