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

@php
    $ui = data_get($content, 'ui', []);
    $showUi = data_get($ui, 'show_page', []);
    $statusClasses = [
        'ready' => 'bg-emerald-500',
        'construction' => 'bg-sky-500',
        'offplan' => 'bg-amber-400 text-zinc-950',
    ];
    $confidenceLabels = data_get($ui, 'confidence_labels', []);
    $defaultProjectTitle = data_get($showUi, 'default_title', 'Projekt');
    $dev = $dev ?? false;
    $devQuery = $devQuery ?? false;
    $overviewRouteName = $overviewRouteName ?? ($dev ? 'dev.immobilien-azizi' : 'immobilien');
    $overviewUrl = route($overviewRouteName, $devQuery ? ['dev' => 1] : []);
    $slug = $project['slug'] ?? '';
    $fallbackImage = theme_image_url($project['image'] ?? 'b2in/hero-immobilien.jpg');
    $basePath = storage_path('app/public/immobile/dubai/' . $slug);
    $imagePaths = collect([
        glob($basePath . '/image/*.{webp,jpg,jpeg,png}', GLOB_BRACE) ?: [],
        glob($basePath . '/official-website/*.{webp,jpg,jpeg,png}', GLOB_BRACE) ?: [],
    ])
        ->flatten()
        ->all();

    sort($imagePaths, SORT_NATURAL);

    $galleryImages = collect($imagePaths)
        ->map(fn(string $path): string => theme_image_url(str_replace(storage_path('app/public') . '/', '', $path)))
        ->values();
    $heroImage = $galleryImages->first() ?? $fallbackImage;
@endphp

@section('title', ($project['title'] ?? $defaultProjectTitle) . ' - B2in Dubai Preview')
@section('meta_description', $project['short'] ?? data_get($showUi, 'default_meta_description', ''))

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

        <main class="variante-glass-flow">
            <section class="relative h-[62vh] min-h-[460px] overflow-hidden">
                <x-web-picture src="{{ $heroImage }}" alt="{{ $project['title'] ?? '' }}"
                    class="absolute inset-0 h-full w-full object-cover" loading="" />
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/35 to-black/10"></div>
                <div class="absolute inset-x-0 bottom-0 p-8 lg:p-12">
                    <div class="container-padding">
                        <a href="{{ $overviewUrl }}"
                            class="mb-6 inline-flex items-center gap-2 text-sm font-semibold text-white/75 hover:text-white">
                            @svg('heroicon-o-arrow-left', 'h-4 w-4')
                            {{ data_get($showUi, 'back_to_overview') }}
                        </a>
                        <div class="max-w-4xl">
                            <span
                                class="inline-flex rounded-full px-3 py-1 text-xs font-semibold text-white {{ $statusClasses[$project['status_group'] ?? 'ready'] ?? 'bg-secondary' }}">
                                {{ $project['status'] ?? '' }}
                            </span>
                            <h1 class="mt-4 text-4xl font-bold text-white lg:text-6xl">{{ $project['title'] ?? '' }}</h1>
                            <p class="mt-3 text-xl text-white/80">{{ $project['location'] ?? '' }}</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="bg-accent py-8">
                <div class="container-padding">
                    <div class="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
                        <div class="card-elevated rounded-2xl p-5">
                            <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                {{ data_get($showUi, 'stat_price') }}</p>
                            <p class="mt-2 font-semibold text-secondary">
                                {{ $project['price_from'] ?? data_get($showUi, 'stat_price_fallback') }}</p>
                        </div>
                        <div class="card-elevated rounded-2xl p-5">
                            <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                {{ data_get($showUi, 'stat_handover') }}</p>
                            <p class="mt-2 font-semibold text-foreground">
                                {{ $project['handover'] ?? data_get($showUi, 'stat_handover_fallback') }}</p>
                        </div>
                        <div class="card-elevated rounded-2xl p-5">
                            <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                {{ data_get($showUi, 'stat_units') }}</p>
                            <p class="mt-2 font-semibold text-foreground">
                                {{ $project['units'] ?? data_get($showUi, 'stat_units_fallback') }}</p>
                        </div>
                        <div class="card-elevated rounded-2xl p-5">
                            <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                {{ data_get($showUi, 'stat_data_confidence') }}</p>
                            <p class="mt-2 font-semibold text-foreground">
                                {{ $confidenceLabels[$project['data_confidence'] ?? 'yellow'] ?? data_get($showUi, 'stat_data_confidence_fallback') }}
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-padding">
                <div class="container-padding">
                    <div class="grid gap-12 lg:grid-cols-[0.72fr_0.28fr]">
                        <article>
                            <p class="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-secondary">
                                {{ data_get($showUi, 'section_investment') }}
                            </p>
                            <h2 class="text-section-title">{{ $project['short'] ?? '' }}</h2>
                            <p class="mt-6 text-large leading-relaxed text-muted-foreground">
                                {{ $project['marcel_take'] ?? '' }}
                            </p>

                            @if (!empty($project['official_description_de']))
                                <div class="mt-8 border-t border-border/70 pt-6">
                                    <p
                                        class="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground/80">
                                        {{ data_get($showUi, 'official_description_label', data_get($ui, 'modal.official_description_label')) }}
                                    </p>
                                    <p class="leading-relaxed text-muted-foreground">
                                        {{ $project['official_description_de'] }}
                                    </p>
                                </div>
                            @endif

                            @if ($galleryImages->isNotEmpty())
                                <div class="mt-10 space-y-4">
                                    <div class="flex items-end justify-between gap-4">
                                        <h3 class="text-2xl font-semibold text-foreground">
                                            {{ data_get($showUi, 'gallery_heading', data_get($ui, 'modal.gallery_heading')) }}
                                        </h3>
                                        <p class="text-sm text-muted-foreground">
                                            {{ $galleryImages->count() }}
                                            {{ data_get($ui, 'modal.gallery_count_word', 'Bilder') }}
                                        </p>
                                    </div>

                                    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                        @foreach ($galleryImages->take(6) as $index => $image)
                                            <a href="{{ $image }}" target="_blank" rel="noopener"
                                                class="group overflow-hidden rounded-2xl bg-accent focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2 focus:ring-offset-background">
                                                <img src="{{ $image }}"
                                                    alt="{{ ($project['title'] ?? '') . ' ' . data_get($ui, 'modal.gallery_image_word', 'Galerie Bild') . ' ' . ($index + 1) }}"
                                                    class="aspect-[16/9] w-full object-cover transition duration-500 group-hover:scale-105"
                                                    loading="lazy">
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="mt-10 rounded-2xl border border-secondary/20 bg-secondary/5 p-6">
                                <h3 class="text-lg font-semibold text-foreground">{{ data_get($showUi, 'for_whom') }}</h3>
                                <p class="mt-3 leading-relaxed text-muted-foreground">{{ $project['buyer_profile'] ?? '' }}
                                </p>
                            </div>

                            <div class="mt-10">
                                <h3 class="text-2xl font-semibold text-foreground">{{ data_get($showUi, 'hard_facts') }}
                                </h3>
                                <ul class="mt-5 grid gap-3">
                                    @foreach ($project['highlights'] ?? [] as $highlight)
                                        <li class="flex gap-3 rounded-xl bg-accent p-4 text-muted-foreground">
                                            @svg('heroicon-o-check-circle', 'mt-0.5 h-5 w-5 shrink-0 text-secondary')
                                            <span>{{ $highlight }}</span>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </article>

                        <aside class="space-y-5">
                            @if ($dev)
                                <div class="card-elevated rounded-2xl p-6">
                                    <h3 class="font-semibold text-foreground">{{ data_get($showUi, 'source_heading') }}
                                    </h3>
                                    <p class="mt-2 text-sm text-muted-foreground">
                                        {{ data_get($showUi, 'source_text') }}
                                    </p>
                                    @if (!empty($project['official_url']))
                                        <a href="{{ $project['official_url'] }}" target="_blank" rel="noopener"
                                            class="mt-5 inline-flex items-center gap-2 font-semibold text-secondary hover:text-secondary/80">
                                            {{ data_get($showUi, 'azizi_link') }}
                                            @svg('heroicon-o-arrow-up-right', 'h-4 w-4')
                                        </a>
                                    @endif
                                </div>
                            @endif
                            <div class="card-elevated rounded-2xl p-6">
                                <h3 class="font-semibold text-foreground">{{ data_get($showUi, 'next_step_heading') }}</h3>
                                <p class="mt-2 text-sm text-muted-foreground">
                                    {{ data_get($showUi, 'next_step_text') }}
                                </p>
                                <a href="#projekt-anfrage" class="mt-5 inline-flex w-full justify-center btn-primary-accent">
                                    {{ data_get($showUi, 'request_cta') }}
                                </a>
                            </div>
                        </aside>
                    </div>
                </div>
            </section>

            <section class="section-padding bg-accent">
                <div class="container-padding">
                    <div class="mx-auto max-w-3xl text-center">
                        <h2 class="text-section-title">{{ data_get($showUi, 'process_title') }}</h2>
                        <p class="mt-4 text-large text-muted-foreground">
                            {{ data_get($showUi, 'process_intro') }}
                        </p>
                    </div>

                    <div class="mx-auto mt-10 grid max-w-5xl gap-5 md:grid-cols-3">
                        @foreach (data_get($showUi, 'process_steps', []) as $step)
                            <div class="card-elevated rounded-2xl p-6">
                                <h3 class="font-semibold text-foreground">{{ $step['title'] ?? '' }}</h3>
                                <p class="mt-2 text-sm text-muted-foreground">{{ $step['text'] ?? '' }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>

            <section class="section-padding">
                <div class="container-padding">
                    <div
                        class="mx-auto max-w-3xl rounded-2xl border border-secondary/20 bg-secondary/5 p-8 text-center lg:p-12">
                        <h2 class="text-section-title">
                            {{ str_replace(':title', $project['title'] ?? data_get($showUi, 'interest_default_title'), data_get($showUi, 'interest_heading', '')) }}
                        </h2>
                        <p class="mt-4 text-large text-muted-foreground">
                            {{ data_get($showUi, 'interest_text') }}
                        </p>
                        <div class="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
                            <a href="#projekt-anfrage"
                                class="btn-primary-accent px-8 py-4 text-lg">{{ data_get($showUi, 'interest_cta_consult') }}</a>
                            <a href="{{ $overviewUrl }}#projekte"
                                class="btn-secondary-accent px-8 py-4 text-lg">{{ data_get($showUi, 'interest_cta_more') }}</a>
                        </div>

                        <div id="projekt-anfrage" class="mt-10 scroll-mt-24 text-left">
                            <livewire:web.components.sections.immobilien-contact-form :projectSlug="$project['slug'] ?? ''" :projectTitle="$project['title'] ?? ''"
                                :showInterest="false" :submitLabel="data_get($ui, 'modal.request_submit', 'Anfrage absenden')"
                                wire:key="azizi-project-detail-contact-form-{{ $project['slug'] ?? 'project' }}" />
                        </div>
                    </div>
                </div>
            </section>
        </main>

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