@php
    $proName  = trim(($proProfile->first_name ?? '') . ' ' . ($proProfile->last_name ?? ''))
                ?: __('PRO Profile');
    $seoTitle = $proProfile->organization_name
        ? "{$proName} — {$proProfile->organization_name} — " . config('app.name')
        : "{$proName} — " . config('app.name');
    $seoDesc  = $proProfile->about_me
        ? Str::limit(strip_tags($proProfile->about_me), 155)
        : ($proProfile->core_activity ? Str::limit($proProfile->core_activity, 155) : null);
@endphp
@php
    $jsonLdPro = array_filter([
        '@context'    => 'https://schema.org',
        '@type'       => $proProfile->organization_name ? 'ProfessionalService' : 'Person',
        'name'        => $proProfile->organization_name ?? $proName,
        'description' => $seoDesc,
        'url'         => route('pro.show', $proProfile->id),
        'logo'        => $proProfile->logoUrl() ?: null,
        'address'     => $proProfile->city ? [
            '@type'           => 'PostalAddress',
            'addressLocality' => $proProfile->city,
        ] : null,
    ]);
@endphp
<x-app-layout :title="$seoTitle" :description="$seoDesc ?? ''">
@push('seo')
<script type="application/ld+json">{!! json_encode($jsonLdPro, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
@endpush
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ trim(($proProfile->first_name ?? '') . ' ' . ($proProfile->last_name ?? '')) ?: __('PRO Profile') }}
        </h2>
    </x-slot>

    {{-- Preview banner: owner viewing their own hidden profile --}}
    @if ($isOwn && ! $proProfile->is_visible)
        <div class="bg-amber-50 dark:bg-amber-900/30 border-b border-amber-200 dark:border-amber-700 px-4 py-2.5 flex items-center justify-between gap-3 text-sm text-amber-800 dark:text-amber-300">
            <span>👁 {{ __('Preview — your PRO profile is currently hidden. Other users cannot see it.') }}</span>
            <a href="{{ route('pro.edit') }}"
               class="shrink-0 text-amber-600 dark:text-amber-400 hover:underline text-xs font-medium">
                {{ __('Edit profile') }}
            </a>
        </div>
    @endif

    <div class="nd-profile-wrap py-6 pb-20 sm:py-0 sm:pb-0 sm:h-[calc(100vh-8.5rem)]"
         x-data="proPage()"
         @touchstart="touchStart($event)"
         @touchend="touchEnd($event)">

        {{-- Prev/next navigation buttons --}}
        @if ($prev)
            {{-- Desktop: vertically centred --}}
            <a href="{{ route('pro.show', $prev) }}"
               class="hidden sm:flex fixed left-4 top-1/2 -translate-y-1/2 z-30 items-center justify-center w-11 h-11 rounded-full bg-white shadow-md border border-gray-100 text-gray-500 hover:text-gray-900 hover:shadow-lg transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            {{-- Mobile: above bottom bar --}}
            <a href="{{ route('pro.show', $prev) }}"
               class="sm:hidden fixed left-4 z-30 flex items-center justify-center w-11 h-11 rounded-full bg-white shadow-md border border-gray-100 text-gray-500 hover:text-gray-900 transition"
               style="bottom:4.5rem">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
        @endif
        @if ($next)
            {{-- Desktop: vertically centred --}}
            <a href="{{ route('pro.show', $next) }}"
               class="hidden sm:flex fixed right-4 top-1/2 -translate-y-1/2 z-30 items-center justify-center w-11 h-11 rounded-full bg-white shadow-md border border-gray-100 text-gray-500 hover:text-gray-900 hover:shadow-lg transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
            {{-- Mobile: above bottom bar --}}
            <a href="{{ route('pro.show', $next) }}"
               class="sm:hidden fixed right-4 z-30 flex items-center justify-center w-11 h-11 rounded-full bg-white shadow-md border border-gray-100 text-gray-500 hover:text-gray-900 transition"
               style="bottom:4.5rem">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        @endif

        <div class="sm:h-full max-w-6xl mx-auto px-4 sm:px-0">

            {{-- Profile card --}}
            @php
                $mainPhoto = $photos->firstWhere('is_primary', true) ?? $photos->first();
            @endphp
            <div class="bg-white dark:bg-gray-800 sm:rounded-none shadow-sm overflow-hidden sm:grid sm:grid-cols-2 sm:h-full">

                {{-- ── Left column: main photo + gallery ──────────────────── --}}
                <div class="sm:flex sm:flex-col sm:border-r sm:border-gray-100 dark:sm:border-gray-700 sm:overflow-hidden">

                    <div class="bg-gray-100 dark:bg-gray-900 sm:flex-1 sm:min-h-0 sm:overflow-hidden">
                        @if ($mainPhoto)
                            <img src="{{ $mainPhoto->fullUrl() }}"
                                 alt="{{ $proProfile->first_name }}"
                                 class="nd-main-photo w-full sm:h-full sm:w-full object-cover cursor-pointer"
                                 @click="open(0)"/>
                        @else
                            <div class="w-full h-48 sm:h-full flex items-center justify-center text-gray-300 dark:text-gray-600">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                            </div>
                        @endif
                    </div>

                    @if ($photos->count() > 1)
                        <div class="nd-gallery p-3 border-t border-gray-100 dark:border-gray-700 sm:flex-shrink-0">
                            <div class="grid grid-cols-5 gap-2">
                                @foreach ($photos as $i => $photo)
                                    <button type="button" @click="open({{ $i }})"
                                            class="aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                        <img src="{{ $photo->thumbUrl() }}"
                                             alt="{{ __('Photo') }} {{ $i + 1 }}"
                                             class="w-full h-full object-cover hover:opacity-80 transition-opacity"/>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                {{-- ── Right column: PRO info, scrollable ──────────────────── --}}
                <div class="detail-info p-6 space-y-5 sm:overflow-y-auto">

                    {{-- Logo --}}
                    @if ($proProfile->logoUrl())
                        <div>
                            <img src="{{ $proProfile->logoUrl() }}"
                                 alt="{{ $proProfile->organization_name ?? __('Logo') }}"
                                 class="h-16 w-auto max-w-[180px] object-contain rounded-lg border border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-900 p-1"/>
                        </div>
                    @endif

                    {{-- Name + org + ID --}}
                    <div class="space-y-0.5">
                        <div class="flex flex-wrap items-center gap-2">
                            <h3 class="text-2xl font-bold text-gray-900 dark:text-white leading-tight">
                                {{ trim(($proProfile->first_name ?? '') . ' ' . ($proProfile->last_name ?? '')) ?: '—' }}
                            </h3>
                            @if ($proProfile->is_neurodivergent)
                                <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium
                                             bg-violet-50 dark:bg-violet-900/30
                                             border border-violet-200 dark:border-violet-700
                                             text-violet-700 dark:text-violet-300">
                                    🧠 {{ __('Neurodivergent') }}
                                </span>
                            @endif
                        </div>
                        @if ($proProfile->organization_name)
                            <p class="text-xl font-semibold text-gray-700 dark:text-gray-300">{{ $proProfile->organization_name }}</p>
                        @endif

                        @if ($proProfile->tagline)
                            <p class="text-base italic text-gray-600 dark:text-gray-300">
                                {{ $proProfile->tagline }}
                            </p>
                        @endif

                        {{-- Kernactiviteit (vrij tekstveld) --}}
                        @if ($proProfile->core_activity)
                            <p class="text-lg text-indigo-700 dark:text-indigo-300 font-medium">
                                {{ $proProfile->core_activity }}
                            </p>
                        @endif

                        <p class="text-xs text-gray-400 dark:text-gray-500">#{{ $proProfile->user_id }}</p>
                    </div>

                    {{-- Personal & location details --}}
                    @php
                        $age = $proProfile->date_of_birth?->age;
                        $langLabels = ['nl' => '🇳🇱 Nederlands', 'en' => '🇬🇧 English', 'fr' => '🇫🇷 Français', 'de' => '🇩🇪 Deutsch', 'es' => '🇪🇸 Español'];
                        $langs = array_values(array_filter([
                            $proProfile->preferred_language,
                            $proProfile->preferred_language_2,
                            $proProfile->preferred_language_3,
                        ]));
                    @endphp

                    <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
                        @if ($proProfile->gender)
                            <dd class="text-gray-800 dark:text-gray-200 font-medium">{{ __($proProfile->gender) }} - 
                            
                            @if ($age !== null)
                                <class="text-gray-800 dark:text-gray-200 font-medium">{{ $age }} {{ __('years') }}
                            @endif
                            </dd>
                        @endif

                        @if ($proProfile->address || $proProfile->zip_code || $proProfile->city || $proProfile->country)
                            @php
                                $mapQuery = collect([
                                    $proProfile->address,
                                    $proProfile->zip_code,
                                    $proProfile->city,
                                    $proProfile->country ? \App\Helpers\CountryHelper::name($proProfile->country) : null,
                                ])->filter()->implode(', ');
                                $mapUrl = 'https://www.google.com/maps/search/' . urlencode($mapQuery);
                            @endphp
                            <div class="col-span-2">
                                <dt class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs">{{ __('Adres') }}</dt>
                                <dd class="text-gray-800 dark:text-gray-200 font-medium leading-snug">
                                    @if ($proProfile->address)
                                        {{ $proProfile->address }} -
                                    @endif
                                    @if ($proProfile->zip_code || $proProfile->city)
                                        {{ collect([$proProfile->zip_code, $proProfile->city])->filter()->implode(' ') }} -
                                    @endif
                                    @if ($proProfile->country)
                                        {{ __(\App\Helpers\CountryHelper::name($proProfile->country)) }}
                                    @endif
                                </dd>
                                <a href="{{ $mapUrl }}" target="_blank" rel="noopener noreferrer"
                                   class="mt-1 inline-flex items-center gap-1 text-xs text-indigo-600 dark:text-indigo-400 hover:underline">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    </svg>
                                    {{ __('Toon op kaart') }}
                                </a>
                            </div>
                        @endif
                    </dl>

                    {{-- About me --}}
                    @if ($proProfile->about_me)
                        <div>
                            <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-1">{{ __('About me') }}</p>
                            <div class="rtf-area text-sm text-gray-800 dark:text-gray-200">{!! str_contains($proProfile->about_me, '<') ? $proProfile->about_me : nl2br(e($proProfile->about_me)) !!}</div>
                        </div>
                    @endif

                    {{-- Education, training & certifications --}}
                    @if ($proProfile->education)
                        <div>
                            <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-1">{{ __('Education, training & certifications') }}</p>
                            <p class="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-line">{{ $proProfile->education }}</p>
                        </div>
                    @endif

                    {{-- Beroepsvereniging & registratienummers --}}
                    @if ($proProfile->professional_association || $proProfile->riziv_number || $proProfile->psychologist_registration || $proProfile->clinical_psychologist_visa)
                        <div class="space-y-2">
                            @if ($proProfile->professional_association)
                                <div>
                                    <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-0.5">{{ __('Professional association') }}</p>
                                    <p class="text-sm text-gray-800 dark:text-gray-200 font-medium whitespace-pre-line">{{ $proProfile->professional_association }}</p>
                                </div>
                            @endif
                            @if ($proProfile->riziv_number)
                                <div>
                                    <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-0.5">{{ __('RIZIV number (physiotherapy)') }}</p>
                                    <p class="text-sm text-gray-800 dark:text-gray-200 font-medium font-mono">{{ $proProfile->riziv_number }}</p>
                                </div>
                            @endif
                            @if ($proProfile->psychologist_registration)
                                <div>
                                    <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-0.5">{{ __('Psychologist registration number') }}</p>
                                    <p class="text-sm text-gray-800 dark:text-gray-200 font-medium font-mono">{{ $proProfile->psychologist_registration }}</p>
                                </div>
                            @endif
                            @if ($proProfile->clinical_psychologist_visa)
                                <div>
                                    <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-0.5">{{ __('Clinical psychologist visa number') }}</p>
                                    <p class="text-sm text-gray-800 dark:text-gray-200 font-medium font-mono">{{ $proProfile->clinical_psychologist_visa }}</p>
                                </div>
                            @endif
                        </div>
                    @endif

                    {{-- Support forms grouped by category --}}
                    @php
                        $selectedForms = $proProfile->support_forms ?? [];
                        $sfTaxonomy    = \App\Models\ProProfile::supportFormTaxonomy();
                    @endphp
                    @if (!empty($selectedForms))
                        <div>
                            <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-2">{{ __('Forms of support I offer') }}</p>
                            <div class="space-y-2">
                                @foreach ($sfTaxonomy as $cat)
                                    @php
                                        $catTags = collect($cat['subcats'])
                                            ->flatMap(fn($s) => collect($s['tags'])
                                                ->filter(fn($lbl, $slug) => in_array($slug, $selectedForms))
                                                ->all()
                                            )->all();
                                    @endphp
                                    @if (!empty($catTags))
                                        <div>
                                            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                                                {{ $cat['emoji'] }}&nbsp;{{ __($cat['label']) }}
                                            </p>
                                            <div class="flex flex-wrap gap-1.5">
                                                @foreach ($catTags as $slug => $label)
                                                    <span class="px-2 py-0.5 rounded-full text-xs bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 text-amber-800 dark:text-amber-300">{{ __($label) }}</span>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif

                    {{-- Expertise: conditions --}}
                    @if (!empty($proProfile->support_for))
                        <div>
                            <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-1.5">{{ __('I support people with') }}</p>
                            <div class="flex flex-wrap gap-1.5">
                                @foreach ($proProfile->support_for as $key)
                                    @if ($label = \App\Models\ProProfile::supportForOptions()[$key] ?? null)
                                        <span class="px-2 py-0.5 rounded-full text-xs bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300">{{ __($label) }}</span>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif

                    {{-- Service format / target group / focus topics --}}
                    @php
                        $hasDims = !empty($proProfile->service_formats)
                                || !empty($proProfile->target_groups)
                                || !empty($proProfile->focus_topics);
                    @endphp
                    @if ($hasDims)
                        <div class="space-y-5">
                            @foreach ([
                                ['field' => 'service_formats', 'label' => 'Service format', 'opts' => \App\Models\ProProfile::serviceFormatOptions()],
                                ['field' => 'target_groups',   'label' => 'Target group',   'opts' => \App\Models\ProProfile::targetGroupOptions()],
                                ['field' => 'focus_topics',    'label' => 'Focus topics',   'opts' => \App\Models\ProProfile::focusTopicOptions()],
                            ] as $dim)
                                @if (!empty($proProfile->{$dim['field']}))
                                    <div>
                                        <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-1.5">{{ __($dim['label']) }}</p>
                                        <div class="flex flex-wrap gap-1.5">
                                            @foreach ($proProfile->{$dim['field']} as $key)
                                                @if ($lbl = $dim['opts'][$key] ?? null)
                                                    <span class="px-2 py-0.5 rounded-full text-xs bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300">{{ __($lbl) }}</span>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @endif

                    {{-- Booking CTA --}}
                    @if ($proProfile->booking_url)
                        <div>
                            <a href="{{ $proProfile->booking_url }}"
                               target="_blank" rel="noopener noreferrer"
                               class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition">
                                📅 {{ __('Book a session') }}
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                </svg>
                            </a>
                        </div>
                    @endif

                    {{-- Praktische info: prijs, wachtlijst, actief sinds --}}
                    @if ($proProfile->consultation_price || $proProfile->waitlist || $proProfile->active_since)
                        <div class="flex flex-wrap items-center gap-2">
                            @if ($proProfile->consultation_price)
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-700 text-emerald-800 dark:text-emerald-300">
                                    💶 {{ $proProfile->consultation_price }}
                                </span>
                            @endif
                            @if ($proProfile->waitlist)
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 text-amber-800 dark:text-amber-300">
                                    ⏳ {{ __('Waiting list') }}
                                </span>
                            @endif
                            @if ($proProfile->active_since)
                                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300">
                                    {{ __('Active since :year', ['year' => $proProfile->active_since]) }}
                                </span>
                            @endif
                        </div>
                    @endif



                    @if (!empty($langs))
                        <div class="col-span-2">
                            <dt class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs">{{ __('Languages') }}</dt>
                            <dd class="text-gray-800 dark:text-gray-200 font-medium">
                                {{ implode(' · ', array_map(fn($l) => $langLabels[$l] ?? $l, $langs)) }}
                            </dd>
                        </div>
                    @endif





                    
                    {{-- Contact details --}}
                    @php
                        $hasContact = $proProfile->contact_email || $proProfile->mobile || $proProfile->phone || $proProfile->website;
                    @endphp
                    @if ($hasContact)
                        <div class="space-y-1.5">
                            <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-2">{{ __('Contact') }}</p>
                            @if ($proProfile->contact_email)
                                <a href="mailto:{{ $proProfile->contact_email }}"
                                   class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                    </svg>
                                    {{ $proProfile->contact_email }}
                                </a>
                            @endif
                            @if ($proProfile->mobile)
                                <a href="tel:{{ $proProfile->mobile }}"
                                   class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                                    </svg>
                                    {{ $proProfile->mobile }}
                                </a>
                            @endif
                            @if ($proProfile->phone)
                                <a href="tel:{{ $proProfile->phone }}"
                                   class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                    </svg>
                                    {{ $proProfile->phone }}
                                </a>
                            @endif
                            @if ($proProfile->website)
                                <a href="{{ $proProfile->website }}" target="_blank" rel="noopener noreferrer"
                                   class="flex items-center gap-2 text-sm text-indigo-600 dark:text-indigo-400 hover:underline">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                                    </svg>
                                    {{ preg_replace('#^https?://#', '', rtrim($proProfile->website, '/')) }}
                                </a>
                            @endif
                        </div>
                    @endif

                    {{-- Social media --}}
                    @php
                        $proSocialUrl = function(string $platform, ?string $value): ?string {
                            if (!$value) return null;
                            if (str_starts_with($value, 'http')) return $value;
                            $value = ltrim($value, '/@');
                            return match($platform) {
                                'linkedin'  => 'https://linkedin.com/in/' . $value,
                                'reddit'    => 'https://reddit.com/u/' . $value,
                                'facebook'  => 'https://facebook.com/' . $value,
                                'instagram' => 'https://instagram.com/' . $value,
                                'x'         => 'https://x.com/' . $value,
                                'tiktok'    => 'https://tiktok.com/@' . $value,
                                'youtube'   => 'https://youtube.com/@' . $value,
                                'pinterest' => 'https://pinterest.com/' . $value,
                                'tumblr'    => 'https://' . $value . '.tumblr.com',
                                'vimeo'     => 'https://vimeo.com/' . $value,
                                default     => null,
                            };
                        };

                        $socialPlatforms = [
                            ['linkedin',  'LinkedIn',  '#0A66C2', $proProfile->social_linkedin,
                             '<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>'],
                            ['reddit',    'Reddit',    '#FF4500', $proProfile->social_reddit,
                             '<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>'],
                            ['facebook',  'Facebook',  '#1877F2', $proProfile->social_facebook,
                             '<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>'],
                            ['instagram', 'Instagram', '#E1306C', $proProfile->social_instagram,
                             '<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/>'],
                            ['x',         'X',         '#000000', $proProfile->social_x,
                             '<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>'],
                            ['tiktok',    'TikTok',    '#010101', $proProfile->social_tiktok,
                             '<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>'],
                            ['youtube',   'YouTube',   '#FF0000', $proProfile->social_youtube,
                             '<path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>'],
                            ['pinterest', 'Pinterest', '#E60023', $proProfile->social_pinterest,
                             '<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12.017 24c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z"/>'],
                            ['tumblr',    'Tumblr',    '#35465C', $proProfile->social_tumblr,
                             '<path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.433v6.529h4.579v3.218h-4.609v7.47c.016 1.401.579 2.195 1.51 2.195.935 0 1.8-.908 1.8-2.195V15.5h3.56v1.765c0 3.313-2.325 6.734-5.709 6.734z"/>'],
                            ['vimeo',     'Vimeo',     '#1AB7EA', $proProfile->social_vimeo,
                             '<path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 12.3C4.603 9.713 3.834 8.419 3.01 8.419c-.179 0-.806.378-1.881 1.132L0 8.306c1.185-1.044 2.351-2.084 3.501-3.128C5.08 3.748 6.266 3.37 7.06 3.294c1.867-.18 3.016.109 3.447 1.068.379.851.766 2.636 1.168 5.353.408 2.913.674 4.572.8 4.979.444 2.017.929 3.026 1.468 3.026.415 0 1.044-.657 1.882-1.965.838-1.308 1.259-2.304 1.274-2.979.113-1.128-.335-1.693-1.347-1.693-.479 0-.973.106-1.485.32 1.06-3.45 3.053-5.12 5.985-5.046 2.193.054 3.223 1.494 3.121 4.059z"/>'],
                        ];

                        $visibleSocials = array_filter(
                            $socialPlatforms,
                            fn($p) => !empty($p[3])
                        );
                    @endphp

                    @if (!empty($visibleSocials))
                        <div>
                            <p class="text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs mb-2">{{ __('My social media') }}</p>
                            <div class="flex flex-wrap gap-2">
                                @foreach ($visibleSocials as [$platform, $label, $color, $value, $svgPath])
                                    @php $url = $proSocialUrl($platform, $value); @endphp
                                    @if ($url)
                                        <a href="{{ $url }}" target="_blank" rel="noopener noreferrer"
                                           title="{{ $label }}"
                                           class="flex items-center justify-center w-9 h-9 rounded-xl border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 hover:shadow-md hover:scale-110 transition-all duration-150">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                 class="w-5 h-5" fill="{{ $color }}" aria-hidden="true">
                                                {!! $svgPath !!}
                                            </svg>
                                        </a>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif

                </div>{{-- /detail-info --}}
            </div>{{-- /profile card --}}
        </div>

        {{-- Lightbox --}}
        <div x-show="visible"
             x-transition.opacity
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
             @keydown.escape.window="close()"
             @click.self="close()"
             style="display:none">

            <button @click="prev()"
                    class="absolute left-4 top-1/2 -translate-y-1/2 text-white bg-black/40 rounded-full p-2 hover:bg-black/70 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>

            <img :src="photos[current]"
                 class="max-h-[85vh] max-w-full rounded-xl shadow-2xl object-contain"/>

            <button @click="next()"
                    class="absolute right-4 top-1/2 -translate-y-1/2 text-white bg-black/40 rounded-full p-2 hover:bg-black/70 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </button>

            <button @click="close()"
                    class="absolute top-4 right-4 text-white bg-black/40 rounded-full p-2 hover:bg-black/70 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>

            <p class="absolute bottom-4 text-white/60 text-sm"
               x-text="`${current + 1} / ${photos.length}`"></p>
        </div>
    </div>

    @push('bottom-bar-buttons')
    <div class="w-full flex items-center justify-evenly h-full">
        <a href="{{ $backUrl }}"
           class="inline-flex flex-col items-center justify-center gap-0.5 px-3 text-xs text-white/80 hover:text-white transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
            </svg>
            <span>{{ __('Back') }}</span>
        </a>

        @if ($isOwn)
            <a href="{{ route('pro.edit') }}"
               class="inline-flex flex-col items-center justify-center gap-0.5 px-3 text-xs font-medium text-white/80 hover:text-white transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                <span>{{ __('Edit profile') }}</span>
            </a>
        @elseif ($viewer)
            {{-- Like button — non-PRO viewers only --}}
            @if (! $viewer->is_pro)
                <button id="pro-like-btn"
                        data-liked="{{ $alreadyLiked ? '1' : '0' }}"
                        class="inline-flex flex-col items-center justify-center gap-0.5 px-3 text-xs font-medium transition {{ $alreadyLiked ? 'text-amber-300' : 'text-white' }}">
                    <span id="pro-like-emoji" class="text-lg leading-none">{{ $alreadyLiked ? '⭐' : '👍' }}</span>
                    <span id="pro-like-label">{{ $alreadyLiked ? __('Liked') : __('Like') }}</span>
                </button>
            @endif

            {{-- Follow button — all authenticated non-owners --}}
            <button id="pro-follow-btn"
                    data-followed="{{ $alreadyFollowing ? '1' : '0' }}"
                    class="inline-flex flex-col items-center justify-center gap-0.5 px-3 text-xs font-medium transition {{ $alreadyFollowing ? 'text-indigo-300' : 'text-white' }}">
                <span id="pro-follow-emoji" class="text-lg leading-none">{{ $alreadyFollowing ? '🔔' : '➕' }}</span>
                <span id="pro-follow-label">{{ $alreadyFollowing ? __('Volgend') : __('Volgen') }}</span>
            </button>

            {{-- Message button — only when the PRO has allow_messages enabled --}}
            @if ($proProfile->user->allow_messages)
                <form method="POST" action="{{ route('chat.start', $proProfile->user) }}">
                    @csrf
                    <button type="submit"
                            class="inline-flex flex-col items-center justify-center gap-0.5 px-3 text-xs font-medium text-white/80 hover:text-white transition">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                        </svg>
                        <span>{{ __('Message') }}</span>
                    </button>
                </form>
            @endif
        @else
            {{-- Guest: invite to create an account --}}
            <a href="{{ route('register') }}"
               class="inline-flex flex-col items-center justify-center gap-0.5 px-3 text-xs font-medium text-white/80 hover:text-white transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                </svg>
                <span>{{ __('Sign up') }}</span>
            </a>
            <a href="{{ route('login') }}"
               class="inline-flex flex-col items-center justify-center gap-0.5 px-3 text-xs font-medium text-white/80 hover:text-white transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                </svg>
                <span>{{ __('Log in') }}</span>
            </a>
        @endif
    </div>
    @endpush

    @push('scripts')
    <style>
        @media (max-width: 639px) {
            header.bg-white { display: none; }
            .nd-main-photo {
                aspect-ratio: 4 / 3;
                height: auto !important;
                width: 100%;
                display: block;
            }
        }
        @media (min-width: 640px) {
            .nd-profile-wrap { overflow: hidden; }
        }
    </style>
    <script>
        const prevUrl = @json($prev ? route('pro.show', $prev) : null);
        const nextUrl = @json($next ? route('pro.show', $next) : null);

        function proPage() {
            return {
                visible: false,
                current: 0,
                photos: @json($photos->map(fn($p) => $p->fullUrl())->values()),
                open(index) { this.current = index; this.visible = true; },
                close()     { this.visible = false; },
                prev()      { this.current = (this.current - 1 + this.photos.length) % this.photos.length; },
                next()      { this.current = (this.current + 1) % this.photos.length; },

                touchStartX: 0,
                touchStart(e) { if (this.visible) return; this.touchStartX = e.touches[0].clientX; },
                touchEnd(e) {
                    if (this.visible) return;
                    const delta = this.touchStartX - e.changedTouches[0].clientX;
                    if (Math.abs(delta) < 60) return;
                    if (delta > 0 && nextUrl) window.location.href = nextUrl;
                    if (delta < 0 && prevUrl) window.location.href = prevUrl;
                },
            };
        }

        function fitLayout() {
            var bottomBar = document.getElementById('nd-bottom-bar');
            if (!bottomBar) return;
            if (window.innerWidth >= 640) {
                var wrap = document.querySelector('.nd-profile-wrap');
                if (wrap)
                    wrap.style.height = (window.innerHeight - wrap.getBoundingClientRect().top - bottomBar.offsetHeight) + 'px';
            }
        }
        fitLayout();
        window.addEventListener('resize', fitLayout);

        // ── Like + Follow buttons ──────────────────────────────────────────
        const csrfToken   = document.querySelector('meta[name=csrf-token]')?.content ?? '';
        const proLikeUrl  = @json(auth()->check() && !auth()->user()->is_pro ? route('pro.like', $proProfile) : null);
        const proFollowUrl = @json(auth()->check() ? route('users.follow', $proProfile->user_id) : null);

        // Like button (non-PRO viewers only)
        const proLikeBtn = document.getElementById('pro-like-btn');
        if (proLikeBtn && proLikeUrl) {
            let liked = proLikeBtn.dataset.liked === '1';
            const likeEmoji = document.getElementById('pro-like-emoji');
            const likeLabel = document.getElementById('pro-like-label');

            function updateLikeBtn() {
                likeEmoji.textContent = liked ? '⭐' : '👍';
                likeLabel.textContent = liked ? @json(__('Liked')) : @json(__('Like'));
                proLikeBtn.classList.toggle('text-amber-300', liked);
                proLikeBtn.classList.toggle('text-white', !liked);
            }

            proLikeBtn.addEventListener('click', async () => {
                proLikeBtn.disabled = true;
                try {
                    const resp = await fetch(proLikeUrl, {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                    });
                    if (resp.ok) {
                        const data = await resp.json();
                        liked = data.liked;
                        updateLikeBtn();
                    }
                } finally { proLikeBtn.disabled = false; }
            });
        }

        // Follow button (all authenticated non-owners)
        const proFollowBtn = document.getElementById('pro-follow-btn');
        if (proFollowBtn && proFollowUrl) {
            let followed = proFollowBtn.dataset.followed === '1';
            const followEmoji = document.getElementById('pro-follow-emoji');
            const followLabel = document.getElementById('pro-follow-label');

            function updateFollowBtn() {
                followEmoji.textContent = followed ? '🔔' : '➕';
                followLabel.textContent = followed ? @json(__('Volgend')) : @json(__('Volgen'));
                proFollowBtn.classList.toggle('text-indigo-300', followed);
                proFollowBtn.classList.toggle('text-white', !followed);
            }

            proFollowBtn.addEventListener('click', async () => {
                proFollowBtn.disabled = true;
                try {
                    const resp = await fetch(proFollowUrl, {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                    });
                    if (resp.ok) {
                        const data = await resp.json();
                        followed = data.followed;
                        updateFollowBtn();
                    }
                } finally { proFollowBtn.disabled = false; }
            });
        }
    </script>
    @endpush

</x-app-layout>