@php
    $orgName  = $orgProfile->organization_name ?? __('Support organisation');
    $seoTitle = "{$orgName} — " . config('app.name');
    $seoDesc  = $orgProfile->tagline
        ? Str::limit($orgProfile->tagline, 155)
        : ($orgProfile->about_me ? Str::limit(strip_tags($orgProfile->about_me), 155) : null);
@endphp
@php
    $jsonLdOrg = array_filter([
        '@context'    => 'https://schema.org',
        '@type'       => 'Organization',
        'name'        => $orgProfile->organization_name,
        'description' => $seoDesc,
        'url'         => route('org.show', $orgProfile->slug),
        'logo'        => $orgProfile->logoUrl() ?: null,
        'telephone'   => $orgProfile->phone ?: null,
        'sameAs'      => array_values(array_filter([$orgProfile->website ?? null])),
        'address'     => $orgProfile->city ? [
            '@type'           => 'PostalAddress',
            'addressLocality' => $orgProfile->city,
            'addressCountry'  => $orgProfile->country ?: null,
        ] : null,
    ]);
@endphp
<x-app-layout :title="$seoTitle" :description="$seoDesc ?? ''">
@push('seo')
<script type="application/ld+json">{!! json_encode($jsonLdOrg, 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">
            {{ $orgProfile->organization_name ?? __('Support organisation') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

            {{-- ── 1. Logo en naam ──────────────────────────────────────── --}}
            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg overflow-hidden">
                <div class="grid grid-cols-1 sm:grid-cols-2">

                    {{-- Logo — linkerhelft --}}
                    <div class="flex items-center justify-center bg-gray-50 dark:bg-gray-700 p-6 min-h-48">
                        @if ($orgProfile->logoUrl())
                            <img src="{{ $orgProfile->logoUrl() }}"
                                 alt="{{ $orgProfile->organization_name }}"
                                 class="max-h-48 w-full object-contain">
                        @else
                            <div class="flex flex-col items-center gap-2 text-gray-400 dark:text-gray-500">
                                <span class="text-6xl">🏢</span>
                                @if ($isOwn)
                                    <a href="{{ route('org.edit') }}#org-logo"
                                       class="text-xs text-indigo-500 hover:underline">
                                        {{ __('Add logo') }}
                                    </a>
                                @endif
                            </div>
                        @endif
                    </div>

                    {{-- Info — rechterhelft --}}
                    <div class="p-6 flex flex-col justify-center gap-2">
                        <div class="flex flex-wrap items-center gap-2">
                            <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">
                                {{ $orgProfile->organization_name }}
                            </h1>
                            @if ($orgProfile->isVerified())
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-700">
                                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                    {{ __('Verified organisation') }}
                                </span>
                            @endif
                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-bold bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-300">ORG</span>
                        </div>

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

                        @if ($orgProfile->core_activity)
                            <p class="text-sm font-medium text-indigo-600 dark:text-indigo-400">
                                {{ $orgProfile->core_activity }}
                            </p>
                        @endif

                        @if ($orgProfile->address || $orgProfile->zip_code || $orgProfile->city)
                            @php
                                $headerAddressParts = array_filter([
                                    $orgProfile->address,
                                    trim(($orgProfile->zip_code ?? '') . ' ' . ($orgProfile->city ?? '')),
                                    $orgProfile->country ? strtoupper($orgProfile->country) : null,
                                ]);
                                $headerMapQuery = urlencode(implode(', ', $headerAddressParts));
                            @endphp
                            <div class="flex flex-col gap-1">
                                <span class="text-sm text-gray-500 dark:text-gray-400 leading-snug">📍 {{ implode(', ', $headerAddressParts) }}</span>
                                <a href="https://www.google.com/maps/search/?api=1&query={{ $headerMapQuery }}"
                                   target="_blank" rel="noopener noreferrer"
                                   class="self-start inline-flex items-center gap-1 px-2 py-0.5 rounded-md border border-gray-200 dark:border-gray-600 text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                                    <svg class="w-3 h-3 text-indigo-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <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>
                                    {{ __('Map') }}
                                </a>
                            </div>
                        @elseif ($orgProfile->city || $orgProfile->country)
                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                📍 {{ collect([$orgProfile->city, $orgProfile->country])->filter()->implode(', ') }}
                            </p>
                        @endif

                        @if (!empty($orgProfile->operating_regions))
                            <p class="text-xs text-gray-400 dark:text-gray-500">
                                {{ collect($orgProfile->operating_regions)->map(fn($r) => \App\Models\OrgProfile::operatingRegionOptions()[$r] ?? $r)->implode(' · ') }}
                            </p>
                        @endif

                        @if ($isOwn)
                            <a href="{{ route('org.edit') }}"
                               class="mt-1 inline-flex items-center gap-1 text-xs text-indigo-600 dark:text-indigo-400 hover:underline">
                                ✏️ {{ __('Edit profile') }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>

            {{-- ── Organisation photos ─────────────────────────────────── --}}
            @php $orgPhotos = $orgProfile->user->photos()->orderBy('created_at')->get(); @endphp
            @if ($orgPhotos->isNotEmpty())
            @php
                $photoData = $orgPhotos->map(fn($p) => [
                    'thumb' => $p->thumbUrl() ?? $p->fullUrl(),
                    'full'  => $p->fullUrl(),
                ])->values()->toArray();
            @endphp
            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6"
                 x-data="{
                     photos: @js($photoData),
                     index: null,
                     get current() { return this.index !== null ? this.photos[this.index] : null; },
                     open(i)  { this.index = i; document.body.style.overflow = 'hidden'; },
                     close()  { this.index = null; document.body.style.overflow = ''; },
                     prev()   { this.index = (this.index - 1 + this.photos.length) % this.photos.length; },
                     next()   { this.index = (this.index + 1) % this.photos.length; },
                 }"
                 @keydown.escape.window="close()"
                 @keydown.arrow-left.window="index !== null && prev()"
                 @keydown.arrow-right.window="index !== null && next()">

                <h2 class="text-sm font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
                    {{ __('Photos') }}
                </h2>
                <div class="flex flex-wrap gap-2">
                    @foreach ($orgPhotos as $i => $photo)
                        <button type="button" @click="open({{ $i }})"
                                class="flex-shrink-0 w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border border-gray-100 dark:border-gray-700 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition">
                            <img src="{{ $photo->thumbUrl() ?? $photo->fullUrl() }}"
                                 alt="{{ $orgProfile->organization_name }}"
                                 class="w-full h-full object-cover">
                        </button>
                    @endforeach
                </div>

                {{-- Lightbox overlay --}}
                <div x-show="index !== null"
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                     x-transition:leave="transition ease-in duration-100"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0"
                     class="fixed inset-0 z-50 flex flex-col bg-black/95"
                     style="display:none">

                    {{-- Top bar --}}
                    <div class="shrink-0 flex items-center justify-between px-4 py-3">
                        <button @click="close()" type="button"
                                class="flex items-center gap-1.5 text-sm font-medium text-white/80 hover:text-white transition">
                            <svg class="h-4 w-4" 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>
                            {{ __('Close') }}
                        </button>
                        <span class="text-xs text-white/50" x-text="photos.length > 1 ? (index + 1) + ' / ' + photos.length : ''"></span>
                        <div class="w-16"></div>
                    </div>

                    {{-- Image + prev/next --}}
                    <div class="flex-1 flex items-center justify-center gap-4 px-4 pb-6" @click.self="close()">
                        <button x-show="photos.length > 1" @click="prev()" type="button"
                                class="shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                            </svg>
                        </button>

                        <img :src="current?.full" :alt="'{{ $orgProfile->organization_name }}'"
                             class="max-w-full max-h-full object-contain rounded-lg shadow-2xl"
                             style="max-height:calc(100dvh - 8rem)">

                        <button x-show="photos.length > 1" @click="next()" type="button"
                                class="shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            @endif

            {{-- ── 2. Over de organisatie ───────────────────────────────── --}}
            @if ($orgProfile->about_me)
            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
                <h2 class="text-sm font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
                    {{ __('About the organisation') }}
                </h2>
                <div class="rtf-area text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
                    {!! str_contains($orgProfile->about_me, '<') ? $orgProfile->about_me : nl2br(e($orgProfile->about_me)) !!}
                </div>
            </div>
            @endif

            {{-- ── 3. Activiteiten ──────────────────────────────────────── --}}
            @if (!empty($orgProfile->activity_forms))
            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
                <h2 class="text-sm font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
                    {{ __('Activities') }}
                </h2>
                @php
                    $actOpts = collect(\App\Models\OrgProfile::activityFormTaxonomy())
                        ->flatMap(fn($c) => collect($c['tags'])->mapWithKeys(fn($lbl, $slug) => [$slug => $lbl]))
                        ->all();
                @endphp
                <div class="flex flex-wrap gap-2">
                    @foreach ($orgProfile->activity_forms as $key)
                        <span class="px-2.5 py-1 rounded-full text-xs font-medium bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 border border-indigo-100 dark:border-indigo-800">
                            {{ __($actOpts[$key] ?? $key) }}
                        </span>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- ── 4. Wij ondersteunen mensen met ──────────────────────── --}}
            @if (!empty($orgProfile->support_for))
            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
                <h2 class="text-sm font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
                    {{ __('We support people with') }}
                </h2>
                <div class="flex flex-wrap gap-2">
                    @php $supportForOpts = \App\Models\ProProfile::supportForOptions(); @endphp
                    @foreach ($orgProfile->support_for as $key)
                        <span class="px-2.5 py-1 rounded-full text-xs font-medium bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 border border-indigo-100 dark:border-indigo-800">
                            {{ __($supportForOpts[$key] ?? $key) }}
                        </span>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- ── 5. Doelgroep ─────────────────────────────────────────── --}}
            @if (!empty($orgProfile->target_groups))
            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
                <h2 class="text-sm font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
                    {{ __('Target group') }}
                </h2>
                <div class="flex flex-wrap gap-2">
                    @php $tgOpts = \App\Models\ProProfile::targetGroupOptions(); @endphp
                    @foreach ($orgProfile->target_groups as $key)
                        <span class="px-2.5 py-1 rounded-full text-xs font-medium bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-100 dark:border-purple-800">
                            {{ __($tgOpts[$key] ?? $key) }}
                        </span>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- ── 6. Adres & contact ───────────────────────────────────── --}}
            @php
                $hasAddress = $orgProfile->address || $orgProfile->zip_code || $orgProfile->city;
                $hasContact = $orgProfile->contact_email || $orgProfile->phone || $orgProfile->website || $orgProfile->booking_url;
            @endphp
            @if ($hasAddress || $hasContact)
            <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6 space-y-4">
                <h2 class="text-sm font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500">
                    {{ __('Contact') }}
                </h2>

                {{-- Volledig adres + kaartknop --}}
                @if ($hasAddress)
                @php
                    $addressParts = array_filter([
                        $orgProfile->address,
                        trim(($orgProfile->zip_code ?? '') . ' ' . ($orgProfile->city ?? '')),
                        $orgProfile->country ? strtoupper($orgProfile->country) : null,
                    ]);
                    $mapQuery = urlencode(implode(', ', $addressParts));
                @endphp
                <div class="flex items-start justify-between gap-4">
                    <div class="space-y-0.5 text-sm text-gray-700 dark:text-gray-300">
                        @if ($orgProfile->address)
                            <p>{{ $orgProfile->address }}</p>
                        @endif
                        @if ($orgProfile->zip_code || $orgProfile->city)
                            <p>{{ trim(($orgProfile->zip_code ?? '') . ' ' . ($orgProfile->city ?? '')) }}</p>
                        @endif
                        @if ($orgProfile->country)
                            <p class="text-gray-400 dark:text-gray-500 text-xs uppercase tracking-wide">{{ $orgProfile->country }}</p>
                        @endif
                    </div>
                    <a href="https://www.google.com/maps/search/?api=1&query={{ $mapQuery }}"
                       target="_blank" rel="noopener noreferrer"
                       class="shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600 text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                        <svg class="w-3.5 h-3.5 text-indigo-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <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>
                        {{ __('Show on map') }}
                    </a>
                </div>
                @if ($hasContact)<hr class="border-gray-100 dark:border-gray-700">@endif
                @endif

                <div class="space-y-2 text-sm">
                    @if ($orgProfile->contact_email)
                        <a href="mailto:{{ $orgProfile->contact_email }}"
                           class="flex items-center gap-2 text-indigo-600 dark:text-indigo-400 hover:underline break-all">
                            ✉️ {{ $orgProfile->contact_email }}
                        </a>
                    @endif
                    @if ($orgProfile->phone)
                        <p class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
                            📞 {{ $orgProfile->phone }}
                        </p>
                    @endif
                    @if ($orgProfile->website)
                        <a href="{{ $orgProfile->website }}" target="_blank" rel="noopener noreferrer"
                           class="flex items-center gap-2 text-indigo-600 dark:text-indigo-400 hover:underline break-all">
                            🌐 {{ $orgProfile->website }}
                        </a>
                    @endif
                    @if ($orgProfile->booking_url)
                        <a href="{{ $orgProfile->booking_url }}" target="_blank" rel="noopener noreferrer"
                           class="inline-flex items-center gap-1.5 mt-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition">
                            📅 {{ __('Register / book') }}
                        </a>
                    @endif
                </div>

                @php
                    $socials = array_filter([
                        [$orgProfile->social_linkedin,  'LinkedIn',  'linkedin.com'],
                        [$orgProfile->social_facebook,  'Facebook',  'facebook.com'],
                        [$orgProfile->social_instagram, 'Instagram', 'instagram.com'],
                        [$orgProfile->social_x,         'X',         'x.com'],
                        [$orgProfile->social_youtube,   'YouTube',   'youtube.com'],
                        [$orgProfile->social_tiktok,    'TikTok',    'tiktok.com'],
                        [$orgProfile->social_reddit,    'Reddit',    'reddit.com'],
                        [$orgProfile->social_pinterest, 'Pinterest', 'pinterest.com'],
                        [$orgProfile->social_tumblr,    'Tumblr',    'tumblr.com'],
                        [$orgProfile->social_vimeo,     'Vimeo',     'vimeo.com'],
                    ], fn($s) => filled($s[0]));
                @endphp
                @if ($socials)
                    <div class="flex flex-wrap gap-3 pt-2">
                        @foreach ($socials as [$url, $label, $domain])
                            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer"
                               class="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition">
                                <img src="https://www.google.com/s2/favicons?domain={{ $domain }}&sz=16"
                                     alt="" class="w-4 h-4 rounded-sm" loading="lazy">
                                {{ $label }}
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
            @endif

        </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('org.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>
        @endif
    </div>
    @endpush
</x-app-layout>