@extends('web.layouts.web-master')

@section('title', ($project['title'] ?? 'Exposé') . ' - B2in Immobilien')
@section('meta_description', ($project['investment_case']['text'] ?? 'Exklusives Off-Market-Immobilienprojekt in Dubai – jetzt Exposé ansehen.'))

@section('content')
    <div class="bg-background">
        <livewire:web.components.ui.header />

        <main class="variante-glass-flow">

            {{-- 1. Hero --}}
                          <section class="relative h-[50vh] min-h-[400px] overflow-hidden">
                <x-web-picture
                    src="{{ theme_image_url($project['image'] ?? '') }}"
                    alt="{{ $project['title'] ?? '' }}"
                    class="absolute inset-0 w-full h-full object-cover"
                    loading="" />
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                <div class="absolute bottom-0 left-0 right-0 p-8 lg:p-12">
                    <div class="container-padding">
                        @if (isset($project['status']))
                            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-secondary text-white mb-4">
                                {{ $project['status'] }}
                                @if (isset($project['launch_date']))
                                    <span class="opacity-80">({{ $project['launch_date'] }})</span>
                                @endif
                            </span>
                        @endif
                        <h1 class="text-3xl lg:text-4xl font-bold text-white">{{ $project['title'] ?? '' }}</h1>
                        @if (isset($project['location']))
                            <p class="text-lg text-white/80 mt-2">{{ $project['location'] }}</p>
                        @endif
                        @if (isset($project['price_from']))
                            <p class="text-xl font-semibold text-white mt-3">{{ $project['price_from'] }}</p>
                        @endif
                    </div>
                </div>
            </section>

            {{-- 2. Quick Facts --}}
                          {{-- Editierbar über CMS je Projekt --}}

            @if (!empty($project['quick_facts']))
                <section class=" bg-accent">
                    <div class="container-padding">
                        <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
                            @foreach ($project['quick_facts'] as $fact)
                                <div class="text-center p-4">
                                    <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-secondary/10 text-secondary mb-3">
                                        @if (isset($fact['icon']))
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                                @switch($fact['icon'])
                                                    @case('home-modern')
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
                                                    @break
                                                    @case('squares-2x2')
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
                                                    @break
                                                    @case('building-office-2')
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" />
                                                    @break
                                                    @case('user')
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                                                    @break
                                                @endswitch
                                            </svg>
                                        @endif
                                    </div>
                                    <p class="text-xs text-muted-foreground uppercase tracking-wider mb-1">{{ $fact['label'] ?? '' }}</p>
                                    <p class="text-sm font-semibold text-foreground">{{ $fact['value'] ?? '' }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            {{-- 3. Investment Case --}}

            @if (!empty($project['investment_case']))
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="max-w-3xl mx-auto">
                            <h2 class="text-section-title text-left">{{ $project['investment_case']['title'] ?? '' }}</h2>
                            <p class="text-large text-muted-foreground mt-6 leading-relaxed">
                                {{ $project['investment_case']['text'] ?? '' }}
                            </p>

                            @if (!empty($project['investment_case']['views']))
                                <div class="mt-8">
                                    <p class="text-sm font-semibold text-foreground mb-3">Verfügbare Views:</p>
                                    <div class="flex flex-wrap gap-2">
                                        @foreach ($project['investment_case']['views'] as $view)
                                            <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-secondary/10 text-secondary">
                                                {{ $view }}
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            @if (!empty($project['highlights']))
                                <ul class="mt-8 space-y-3">
                                    @foreach ($project['highlights'] as $highlight)
                                        <li class="flex items-start gap-3 text-muted-foreground">
                                            <svg class="w-5 h-5 text-secondary mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                            </svg>
                                            {{ $highlight }}
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </div>
                    </div>
                </section>
            @endif

            {{-- 4. Bildergalerie --}}

            @if (!empty($project['gallery']))
                <div x-data="{ lightbox: false, current: 0 }">
                    <section class="section-padding bg-accent">
                        <div class="container-padding">
                            <h2 class="text-section-title text-center mb-8">Galerie</h2>

                            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4">
                                @foreach ($project['gallery'] as $index => $image)
                                    <div class="relative aspect-[4/3] rounded-xl overflow-hidden cursor-pointer group"
                                        @click="lightbox = true; current = {{ $index }}">
                                        <x-web-picture
                                            src="{{ theme_image_url($image) }}"
                                            alt="{{ $project['title'] ?? '' }} – Bild {{ $index + 1 }}"
                                            class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
                                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"></div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </section>

                    {{-- Lightbox (via x-teleport ins body, umgeht alle Eltern-Constraints) --}}
                    <template x-teleport="body">
                        <div x-show="lightbox" x-cloak
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0"
                            x-transition:enter-end="opacity-100"
                            x-transition:leave="transition ease-in duration-200"
                            x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0"
                            class="fixed inset-0 z-50 isolate bg-black/90"
                            @keydown.escape.window="lightbox = false"
                            @keydown.arrow-right.window="current = (current + 1) % {{ count($project['gallery']) }}"
                            @keydown.arrow-left.window="current = (current - 1 + {{ count($project['gallery']) }}) % {{ count($project['gallery']) }}">

                            {{-- Bildbereich (eigene Ebene, dahinter) --}}
                            <div class="absolute inset-0 flex items-center justify-center p-4 z-0">
                                @foreach ($project['gallery'] as $index => $image)
                                    <x-web-picture x-show="current === {{ $index }}"
                                        x-transition:enter="transition ease-out duration-200"
                                        x-transition:enter-start="opacity-0 scale-95"
                                        x-transition:enter-end="opacity-100 scale-100"
                                        src="{{ theme_image_url($image) }}"
                                        alt="{{ $project['title'] ?? '' }} – Bild {{ $index + 1 }}"
                                        class="max-h-[85vh] max-w-[90vw] object-contain rounded-lg"
                                        loading="" />
                                @endforeach
                            </div>

                            {{-- Close Button (oben rechts mit Abstand) --}}
                            <button @click="lightbox = false"
                                class="cursor-pointer absolute top-6 left-auto right-6 z-10 flex items-center justify-center w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 text-white/90 hover:text-white border border-white/20 transition-all">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>

                            {{-- Previous (links, vertikal mittig) --}}
                            <button @click="current = (current - 1 + {{ count($project['gallery']) }}) % {{ count($project['gallery']) }}"
                                class="cursor-pointer absolute left-6 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-14 h-14 rounded-full bg-white/10 hover:bg-white/20 text-white/90 hover:text-white border border-white/20 transition-all">
                                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                                </svg>
                            </button>

                            {{-- Next (rechts, vertikal mittig) --}}
                            <button @click="current = (current + 1) % {{ count($project['gallery']) }}"
                                class="cursor-pointer absolute left-auto right-6 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-14 h-14 rounded-full bg-white/10 hover:bg-white/20 text-white/90 hover:text-white border border-white/20 transition-all">
                                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                </svg>
                            </button>

                            {{-- Counter --}}
                            <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 text-white/60 text-sm">
                                <span x-text="current + 1"></span> / {{ count($project['gallery']) }}
                            </div>
                        </div>
                    </template>
                </div>
            @endif

            {{-- 5. Trust-Block: Investorenschutz (pro Projekt im CMS, siehe investor_trust) --}}
            @php
                $trust = $project['investor_trust'] ?? [];
                $trustColumns = $trust['columns'] ?? [];
            @endphp
            @if (! empty($trust['title']) || count($trustColumns) > 0)
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="max-w-4xl mx-auto">
                            @if (! empty($trust['title']) || ! empty($trust['intro']))
                                <div class="text-center mb-10">
                                    @if (! empty($trust['title']))
                                        <h2 class="text-section-title">{{ $trust['title'] }}</h2>
                                    @endif
                                    @if (! empty($trust['intro']))
                                        <p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
                                            {{ $trust['intro'] }}
                                        </p>
                                    @endif
                                </div>
                            @endif

                            @if (count($trustColumns) > 0)
                                <div class="grid md:grid-cols-3 gap-6 mb-10">
                                    @foreach ($trustColumns as $col)
                                        <div class="card-elevated rounded-2xl p-6 text-center">
                                            <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-secondary/10 text-secondary mb-5">
                                                @if (! empty($col['icon']))
                                                    @svg($col['icon'], 'w-7 h-7')
                                                @endif
                                            </div>
                                            <h3 class="text-base font-semibold text-foreground mb-3">{{ $col['title'] ?? '' }}</h3>
                                            <p class="text-sm text-muted-foreground leading-relaxed">
                                                {{ $col['text'] ?? '' }}
                                            </p>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            @if (! empty($trust['cta_url']) && ! empty($trust['cta_label']))
                                <div class="text-center">
                                    <a href="{{ $trust['cta_url'] }}" class="btn-secondary-accent transition-colors duration-200">
                                        <span class="flex items-center justify-center gap-2">
                                            @svg('heroicon-o-book-open', 'w-4 h-4')
                                            <span>{{ $trust['cta_label'] }}</span>
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                            </svg>
                                        </span>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            @endif

            {{-- 6. Location & Map --}}
            @if (!empty($project['location_info']))
                <section class="section-padding bg-accent">
                    <div class="container-padding">
                        <div class="max-w-3xl mx-auto">
                            <h2 class="text-section-title text-left">{{ $project['location_info']['title'] ?? '' }}</h2>

                            @if (!empty($project['location_info']['points']))
                                <ul class="mt-8 space-y-4">
                                    @foreach ($project['location_info']['points'] as $point)
                                        <li class="flex items-start gap-3 text-muted-foreground">
                                            <svg class="w-5 h-5 text-secondary mt-0.5 shrink-0 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                                            </svg>
                                            {{ $point }}
                                        </li>
                                    @endforeach
                                </ul>
                            @endif

                            @if (isset($project['location_info']['map_url']))
                                <div class="mt-8 text-center">
                                    <a href="{{ $project['location_info']['map_url'] }}"
                                        target="_blank" rel="noopener"
                                        class="inline-flex items-center gap-2 btn-secondary-accent">
                                        <svg class="w-4 h-4 inline-block mr-2 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                                        </svg>
                                        Auf Google Maps ansehen
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            @endif

            {{-- Möbel-Vorteil / Synergie (pro Projekt: furniture_benefit; Fallback: Theme-Config) --}}
            @php
                $moebelVorteil = $project['furniture_benefit'] ?? [];
                if (empty($moebelVorteil) || (empty($moebelVorteil['title'] ?? null) && empty($moebelVorteil['text'] ?? null))) {
                    $moebelVorteil = cms_theme_section('immobilien_moebel_vorteil');
                }
            @endphp
            @if (! empty($moebelVorteil))
                <section class="section-padding bg-secondary/5">
                    <div class="container-padding">
                        <div class="max-w-3xl mx-auto text-center">
                            <h2 class="text-section-title">{!! $moebelVorteil['title'] ?? '' !!}</h2>
                            <p class="text-large text-muted-foreground mt-4">
                                {{ $moebelVorteil['text'] ?? '' }}
                            </p>
                            @if (! empty($moebelVorteil['button_text'] ?? null))
                                <div class="mt-8">
                                    <a href="{{ $moebelVorteil['button_link'] ?? '/partner' }}"
                                        class="btn-secondary-accent">
                                        {{ $moebelVorteil['button_text'] }}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            @endif

            {{-- 7. Lead-Generierung / Kontakt --}}
            @if (!empty($project['contact']))
                <section class="section-padding bg-accent">
                    <div class="container-padding">
                        <div class="max-w-2xl mx-auto text-center">
                            <h2 class="text-section-title">{{ $project['contact']['title'] ?? '' }}</h2>
                            @if (isset($project['contact']['subtitle']))
                                <p class="text-large text-muted-foreground mt-3">{{ $project['contact']['subtitle'] }}</p>
                            @endif

                            <div class="mt-8 card-elevated rounded-2xl p-8 text-left">
                                <livewire:web.components.sections.immobilien-contact-form
                                    :projectSlug="$project['slug'] ?? ''"
                                    :projectTitle="$project['title'] ?? ''"
                                    :interestOptions="$project['contact']['options'] ?? []"
                                />
                            </div>
                        </div>
                    </div>
                </section>
            @endif

        </main>

        <livewire:web.components.ui.footer />
    </div>
@endsection

@push('styles')
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
@endpush