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

@php
    $projects = collect($content['projects'] ?? []);
    $featured = $content['featured'] ?? [];
    $featuredProject = $projects->firstWhere('slug', $featured['slug'] ?? '');
    $categories = collect($content['categories'] ?? []);
    $districts = collect(data_get($content, 'districts.items', []));
    $gridProjectsCount = $projects->reject(fn ($project) => $project['slug'] === data_get($featured, 'slug'))->count();
    $statusLabels = [
        'ready' => 'Sofort verfuegbar',
        'construction' => 'Im Bau',
        'offplan' => 'Off-Plan',
    ];
    $statusClasses = [
        'ready' => 'bg-emerald-500',
        'construction' => 'bg-sky-500',
        'offplan' => 'bg-amber-400 text-zinc-950',
    ];
@endphp

@section('title', data_get($content, 'meta.title', 'Dubai Immobilien - B2in'))
@section('meta_description', data_get($content, 'meta.description', 'Kuratierte Immobilienprojekte in Dubai.'))

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

        <main class="variante-glass-flow">
            <section class="relative min-h-[76vh] flex items-center overflow-hidden">
                <x-web-picture
                    src="{{ theme_image_url(data_get($content, 'hero.image')) }}"
                    alt="Dubai Skyline - kuratierte Immobilienprojekte"
                    class="absolute inset-0 h-full w-full object-cover"
                    loading="" />
                <div class="absolute inset-0 bg-gradient-to-r from-black/85 via-black/65 to-black/35"></div>

                <div class="relative z-10 container-padding py-24 lg:py-32">
                    <div class="max-w-4xl">
                        <p class="mb-5 text-sm font-semibold uppercase tracking-[0.24em] text-secondary">
                            {{ data_get($content, 'hero.eyebrow') }}
                        </p>
                        <h1 class="max-w-3xl text-4xl font-bold leading-tight text-white lg:text-6xl">
                            {{ data_get($content, 'hero.title') }}
                        </h1>
                        <p class="mt-6 max-w-2xl text-lg leading-relaxed text-white/80 lg:text-xl">
                            {{ data_get($content, 'hero.subtitle') }}
                        </p>

                        <div class="mt-10 flex flex-col gap-3 sm:flex-row">
                            <a href="#projekte" class="btn-primary-accent px-8 py-4 text-lg">
                                {{ data_get($content, 'hero.cta_primary') }}
                            </a>
                            <a href="/contact" class="btn-secondary-accent px-8 py-4 text-lg">
                                {{ data_get($content, 'hero.cta_secondary') }}
                            </a>
                        </div>

                        <p class="mt-5 max-w-xl text-sm font-medium text-white/70">
                            {{ data_get($content, 'hero.microcopy') }}
                        </p>
                    </div>
                </div>
            </section>

            <section class="section-padding">
                <div class="container-padding">
                    <div class="grid items-center gap-12 lg:grid-cols-[0.9fr_1.1fr]">
                        <div class="card-elevated overflow-hidden rounded-3xl">
                            <x-web-picture
                                src="{{ theme_image_url(data_get($content, 'intro.image')) }}"
                                alt="Marcel Scheibe - B2in Immobilienberatung"
                                class="h-[460px] w-full object-cover" />
                        </div>

                        <div>
                            <p class="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-secondary">
                                Kuratiert statt katalogisiert
                            </p>
                            <h2 class="text-section-title">{{ data_get($content, 'intro.title') }}</h2>
                            <blockquote class="mt-6 border-l-4 border-secondary pl-5 text-xl font-medium leading-relaxed text-foreground">
                                "{{ data_get($content, 'intro.quote') }}"
                            </blockquote>
                            <div class="mt-6 space-y-4 text-large leading-relaxed text-muted-foreground">
                                @foreach (data_get($content, 'intro.paragraphs', []) as $paragraph)
                                    <p>{{ $paragraph }}</p>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-padding relative isolate overflow-hidden bg-zinc-950 text-white">
                <x-web-picture
                    src="{{ theme_image_url($featured['image'] ?? 'b2in/hero-immobilien.jpg') }}"
                    alt="{{ $featured['title'] ?? 'Burj Azizi' }}"
                    class="absolute inset-0 -z-20 h-full w-full object-cover"
                    loading="" />
                <div class="absolute inset-0 -z-10 bg-gradient-to-r from-zinc-950 via-zinc-950/90 to-zinc-950/65"></div>
                <div class="absolute inset-x-0 top-0 -z-10 h-28 bg-gradient-to-b from-zinc-950 to-transparent"></div>
                <div class="absolute inset-x-0 bottom-0 -z-10 h-28 bg-gradient-to-t from-zinc-950 to-transparent"></div>

                <div class="container-padding">
                    <div class="grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
                        <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-[#142f34] shadow-2xl shadow-black/20">
                            <x-web-picture
                                src="{{ theme_image_url($featured['image'] ?? 'b2in/hero-immobilien.jpg') }}"
                                alt="{{ $featured['title'] ?? 'Burj Azizi' }}"
                                class="h-[520px] w-full object-cover opacity-75" />
                            <div class="absolute inset-0 bg-gradient-to-t from-[#071316]/95 via-[#071316]/35 to-[#071316]/10"></div>
                            <div class="absolute bottom-6 left-6 right-6">
                                <span class="inline-flex rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#0e2226]">
                                    Headline-Projekt
                                </span>
                                <h2 class="mt-4 text-3xl font-bold lg:text-5xl">{{ $featured['title'] ?? '' }}</h2>
                                <p class="mt-2 text-white/75">{{ $featured['location'] ?? '' }}</p>
                            </div>
                        </div>

                        <div>
                            <p class="inline-flex rounded-full bg-white px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-[#0e2226]">
                                {{ $featured['status'] ?? '' }}
                            </p>
                            <h2 class="mt-4 text-3xl font-bold leading-tight lg:text-5xl">
                                {{ $featured['headline'] ?? '' }}
                            </h2>
                            <p class="mt-6 text-lg leading-relaxed text-white/75">
                                {{ $featured['text'] ?? '' }}
                            </p>

                            <div class="mt-6 rounded-2xl border border-white/10 bg-white/10 p-6">
                                <p class="text-sm font-semibold text-white">Marcels Einschätzung</p>
                                <p class="mt-3 leading-relaxed text-white/80">{{ $featured['marcel_take'] ?? '' }}</p>
                            </div>

                            <dl class="mt-8 grid gap-3 sm:grid-cols-2">
                                <div class="rounded-2xl bg-white/5 p-4">
                                    <dt class="text-xs uppercase tracking-wider text-white/50">Preis</dt>
                                    <dd class="mt-1 font-semibold">{{ $featured['price_from'] ?? '' }}</dd>
                                </div>
                                <div class="rounded-2xl bg-white/5 p-4">
                                    <dt class="text-xs uppercase tracking-wider text-white/50">Uebergabe</dt>
                                    <dd class="mt-1 font-semibold">{{ $featured['handover'] ?? '' }}</dd>
                                </div>
                            </dl>

                            <ul class="mt-6 grid gap-2 text-sm text-white/70 sm:grid-cols-2">
                                @foreach ($featured['facts'] ?? [] as $fact)
                                    <li class="flex gap-2">
                                        @svg('heroicon-o-check-circle', 'mt-0.5 h-4 w-4 shrink-0 text-secondary')
                                        <span>{{ $fact }}</span>
                                    </li>
                                @endforeach
                            </ul>

                            @if ($featuredProject)
                                <div class="mt-8">
                                    <a href="{{ route('dev.immobilien-azizi.show', $featuredProject['slug']) }}" class="btn-primary-accent px-7 py-3">
                                        Burj Azizi im Detail ansehen
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </section>

            <section id="karte" class="section-padding bg-accent">
                <div class="container-padding">
                    <div class="mb-10 max-w-3xl">
                        <h2 class="text-section-title">{{ data_get($content, 'map.title') }}</h2>
                        <p class="mt-4 text-large leading-relaxed text-muted-foreground">
                            {{ data_get($content, 'map.subtitle') }}
                        </p>
                    </div>

                    <div class="grid gap-8 lg:grid-cols-[1.2fr_0.8fr]">
                        <div class="relative min-h-[520px] overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-sky-100 via-white to-emerald-50 p-6 shadow-sm dark:from-slate-900 dark:via-slate-950 dark:to-emerald-950">
                            <div class="absolute left-[8%] top-[10%] h-[78%] w-[62%] rotate-[-18deg] rounded-[55%] border border-sky-400/30 bg-sky-300/20"></div>
                            <div class="absolute right-[8%] top-[5%] h-[86%] w-[32%] rounded-[48%] border border-emerald-500/20 bg-emerald-300/20"></div>
                            <div class="absolute bottom-[8%] left-[24%] h-[26%] w-[46%] rounded-[48%] border border-secondary/20 bg-secondary/10"></div>

                            <span class="absolute left-[56%] top-[44%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Downtown</span>
                            <span class="absolute left-[34%] top-[70%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Al Furjan</span>
                            <span class="absolute left-[29%] top-[87%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Dubai South</span>
                            <span class="absolute left-[21%] top-[42%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Palm</span>
                            <span class="absolute left-[70%] top-[24%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Dubai Islands</span>

                            @foreach (data_get($content, 'map.pins', []) as $pin)
                                @php
                                    $pinProject = $projects->firstWhere('slug', $pin['slug']);
                                    $group = $pinProject['status_group'] ?? 'ready';
                                @endphp
                                @if ($pinProject)
                                    <a href="{{ route('dev.immobilien-azizi.show', $pinProject['slug']) }}"
                                        title="{{ $pinProject['title'] }}"
                                        class="group absolute flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 border-white shadow-lg transition hover:z-20 hover:scale-110 {{ $statusClasses[$group] ?? 'bg-secondary' }}"
                                        style="left: {{ $pin['x'] }}%; top: {{ $pin['y'] }}%;">
                                        <span class="h-2.5 w-2.5 rounded-full bg-white/90"></span>
                                        <span class="pointer-events-none absolute bottom-full left-1/2 mb-3 hidden w-56 -translate-x-1/2 rounded-xl bg-zinc-950 p-3 text-left text-xs text-white shadow-xl group-hover:block">
                                            <strong class="block text-sm">{{ $pinProject['title'] }}</strong>
                                            <span class="mt-1 block text-white/70">{{ $pinProject['location'] }}</span>
                                            <span class="mt-2 block text-secondary">{{ $statusLabels[$group] ?? $pinProject['status'] }}</span>
                                        </span>
                                    </a>
                                @endif
                            @endforeach
                        </div>

                        <div class="grid content-start gap-4">
                            @foreach ($statusLabels as $key => $label)
                                <div class="card-elevated rounded-2xl p-5">
                                    <div class="flex items-center gap-3">
                                        <span class="h-4 w-4 rounded-full {{ $statusClasses[$key] ?? 'bg-secondary' }}"></span>
                                        <h3 class="font-semibold text-foreground">{{ $label }}</h3>
                                    </div>
                                    <p class="mt-2 text-sm text-muted-foreground">
                                        {{ $projects->where('status_group', $key)->count() }} Projekte in dieser Auswahl.
                                    </p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>

            @if ($districts->isNotEmpty())
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="mb-10 max-w-3xl">
                            <p class="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-secondary">
                                Stadtteil-Kontext
                            </p>
                            <h2 class="text-section-title">{{ data_get($content, 'districts.title') }}</h2>
                            <p class="mt-4 text-large leading-relaxed text-muted-foreground">
                                {{ data_get($content, 'districts.subtitle') }}
                            </p>
                        </div>

                        <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                            @foreach ($districts as $district)
                                <article class="card-elevated rounded-2xl p-6">
                                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-secondary">
                                        {{ $district['projects'] ?? '' }}
                                    </p>
                                    <h3 class="mt-3 text-xl font-semibold text-foreground">{{ $district['name'] ?? '' }}</h3>
                                    <p class="mt-3 text-sm leading-relaxed text-muted-foreground">
                                        {{ $district['description'] ?? '' }}
                                    </p>
                                </article>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            <section id="projekte" class="section-padding">
                <div class="container-padding">
                    <div class="mb-12 max-w-3xl">
                        <p class="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-secondary">
                            Projektgrid
                        </p>
                        <h2 class="text-section-title">{{ $gridProjectsCount }} Projekte im Vergleich</h2>
                        <p class="mt-4 text-large text-muted-foreground">
                            Burj Azizi steht bewusst als eigenes Flaggschiff oben. Die restlichen PDF-Positionen und kuratierten Zusatzprojekte sind nach Käuferlogik, Stadtteil und Entwicklungsstatus sortiert.
                        </p>
                    </div>

                    <div class="space-y-16">
                        @foreach ($categories as $category)
                            @php
                                $categoryProjects = $projects
                                    ->where('category', $category['key'])
                                    ->reject(fn ($project) => $project['slug'] === data_get($featured, 'slug'));
                            @endphp
                            @if ($categoryProjects->isNotEmpty())
                                <section>
                                    <div class="mb-6 max-w-3xl">
                                        <h3 class="text-2xl font-semibold text-foreground">{{ $category['title'] }}</h3>
                                        <p class="mt-2 text-muted-foreground">{{ $category['intro'] }}</p>
                                    </div>

                                    <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
                                        @foreach ($categoryProjects as $project)
                                            <article class="card-elevated flex h-full flex-col overflow-hidden rounded-2xl">
                                                <div class="relative h-52 overflow-hidden">
                                                    <x-web-picture
                                                        src="{{ theme_image_url($project['image']) }}"
                                                        alt="{{ $project['title'] }}"
                                                        class="h-full w-full object-cover transition duration-500 hover:scale-105" />
                                                    <span class="absolute left-4 top-4 rounded-full px-3 py-1 text-xs font-semibold text-white {{ $statusClasses[$project['status_group']] ?? 'bg-secondary' }}">
                                                        {{ $project['status'] }}
                                                    </span>
                                                </div>

                                                <div class="flex flex-1 flex-col p-6">
                                                    <p class="text-sm text-muted-foreground">{{ $project['location'] }}</p>
                                                    <h4 class="mt-1 text-xl font-semibold text-foreground">{{ $project['title'] }}</h4>
                                                    <p class="mt-4 text-sm leading-relaxed text-muted-foreground">{{ $project['short'] }}</p>

                                                    <dl class="mt-5 grid gap-3 text-sm">
                                                        <div>
                                                            <dt class="font-medium text-foreground">Geeignet fuer</dt>
                                                            <dd class="text-muted-foreground">{{ $project['buyer_profile'] }}</dd>
                                                        </div>
                                                        <div>
                                                            <dt class="font-medium text-foreground">Preis / Verfuegbarkeit</dt>
                                                            <dd class="text-secondary">{{ $project['price_from'] }}</dd>
                                                        </div>
                                                    </dl>

                                                    <div class="mt-auto pt-6">
                                                        <a href="{{ route('dev.immobilien-azizi.show', $project['slug']) }}" class="inline-flex items-center gap-2 font-semibold text-secondary hover:text-secondary/80">
                                                            Details ansehen
                                                            @svg('heroicon-o-arrow-right', 'h-4 w-4')
                                                        </a>
                                                    </div>
                                                </div>
                                            </article>
                                        @endforeach
                                    </div>
                                </section>
                            @endif
                        @endforeach
                    </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($content, 'market_context.title') }}</h2>
                        <p class="mt-4 text-large text-muted-foreground">{{ data_get($content, 'market_context.subtitle') }}</p>
                    </div>

                    <div class="mx-auto mt-12 grid max-w-6xl gap-6 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach (data_get($content, 'market_context.facts', []) as $fact)
                            <div class="card-elevated rounded-2xl p-6">
                                <div class="mb-5 inline-flex h-12 w-12 items-center justify-center rounded-full bg-secondary/10 text-secondary">
                                    @svg('heroicon-o-' . $fact['icon'], 'h-6 w-6')
                                </div>
                                <h3 class="font-semibold text-foreground">{{ $fact['title'] }}</h3>
                                <p class="mt-2 text-sm leading-relaxed text-muted-foreground">{{ $fact['description'] }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>

            <section class="section-padding">
                <div class="container-padding">
                    <div class="mx-auto max-w-4xl">
                        <div class="mb-10 text-center">
                            <h2 class="text-section-title">{{ data_get($content, 'process.title') }}</h2>
                        </div>
                        <div class="grid gap-5 md:grid-cols-2">
                            @foreach (data_get($content, 'process.steps', []) as $step)
                                <div class="card-elevated rounded-2xl p-6">
                                    <div class="flex gap-5">
                                        <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-secondary text-lg font-bold text-white">
                                            {{ $step['number'] }}
                                        </span>
                                        <div>
                                            <h3 class="font-semibold text-foreground">{{ $step['title'] }}</h3>
                                            <p class="mt-2 text-sm leading-relaxed text-muted-foreground">{{ $step['description'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-padding bg-secondary/5">
                <div class="container-padding">
                    <div class="mx-auto max-w-4xl rounded-2xl border border-secondary/20 bg-background p-8 text-center lg:p-12">
                        <h2 class="text-section-title">{{ data_get($content, 'mindset.title') }}</h2>
                        <div class="mt-8 grid gap-5 text-left md:grid-cols-2">
                            <p class="rounded-2xl bg-emerald-500/10 p-5 leading-relaxed text-foreground">
                                {{ data_get($content, 'mindset.positive') }}
                            </p>
                            <p class="rounded-2xl bg-amber-500/10 p-5 leading-relaxed text-muted-foreground">
                                {{ data_get($content, 'mindset.negative') }}
                            </p>
                        </div>
                        <div class="mt-8">
                            <a href="/contact" class="btn-primary-accent px-8 py-4 text-lg">
                                {{ data_get($content, 'mindset.cta') }}
                            </a>
                        </div>
                    </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($content, 'furniture.title') }}</h2>
                        <p class="mt-4 text-large text-muted-foreground">{{ data_get($content, 'furniture.text') }}</p>
                        <div class="mt-8">
                            <a href="/netzwerk" class="btn-secondary-accent">
                                {{ data_get($content, 'furniture.button') }}
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <livewire:web.components.sections.c-t-a-section />
        </main>

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