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

@section('title', 'Immobilien Dubai - B2in')
@section('meta_description', 'Exklusive Off-Market-Immobilien in Dubai. Persönliche Beratung, steuerfreie Renditen & Turnkey-Einrichtung aus einer Hand.')

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

        <main class="variante-glass-flow">
            @php
                $heroV2 = cms_theme_section('immobilien_hero_v2');
                $warumDubai = cms_theme_section('immobilien_warum_dubai');
                $kaufprozess = cms_theme_section('immobilien_kaufprozess');
                $bruecke = cms_theme_section('immobilien_bruecke');
                $mindset = cms_theme_section('immobilien_mindset');
                $projects = cms_theme_section('immobilien_projects');
                $moebelVorteil = cms_theme_section('immobilien_moebel_vorteil');
            @endphp

            {{-- Sektion 1: Hero --}}
            @if (!empty($heroV2))
                <section class="relative min-h-[70vh] flex items-center overflow-hidden">
                    <x-web-picture
                        src="{{ theme_image_url($heroV2['image'] ?? '') }}"
                        alt="{{ $heroV2['image_alt'] ?? 'Immobilien Investment Dubai' }}"
                        class="absolute inset-0 w-full h-full object-cover"
                        loading="" />
                    <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-black/30"></div>
                    <div class="relative z-10 container-padding py-24 lg:py-32">
                        <div class="max-w-3xl slide-right delay-300">
                            <h1 class="text-4xl lg:text-5xl xl:text-6xl font-bold text-white leading-tight">
                                {!! $heroV2['title'] !!}
                            </h1>
                            <p class="text-lg lg:text-xl text-white/80 mt-6 max-w-2xl leading-relaxed">
                                {{ $heroV2['subtitle'] ?? '' }}
                            </p>
                            @if (isset($heroV2['cta_text']))
                                <div class="mt-10">
                                    <a href="{{ $heroV2['cta_link'] ?? '#projekte' }}"
                                        class="btn-primary-accent px-8 py-4 text-lg">
                                        {{ $heroV2['cta_text'] }}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            @endif

            <livewire:web.components.sections.founder-bar />

            {{-- Sektion 2: Warum Dubai? --}}
            @if (!empty($warumDubai))
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="max-w-3xl mx-auto text-center mb-12 slide-up delay-300">
                            <h2 class="text-section-title">{!! $warumDubai['title'] !!}</h2>
                            @if (isset($warumDubai['intro']))
                                <p class="text-large text-muted-foreground mt-4 leading-relaxed">
                                    {{ $warumDubai['intro'] }}
                                </p>
                            @endif
                        </div>

                        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
                            @foreach ($warumDubai['facts'] ?? [] as $index => $fact)
                                <div class="card-elevated rounded-2xl p-6 lg:p-8 text-center slide-up delay-{{ 300 + $index * 100 }}">
                                    <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-secondary/10 text-secondary mb-5">
                                        @svg('heroicon-o-' . ($fact['icon'] ?? 'check'), 'w-7 h-7')
                                    </div>
                                    <h3 class="text-lg font-semibold text-foreground mb-2">{{ $fact['title'] ?? '' }}</h3>
                                    <p class="text-sm text-muted-foreground leading-relaxed">{{ $fact['description'] ?? '' }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            <livewire:web.components.sections.image-break section="immobilien_image_break" />

            {{-- Sektion 3: Kaufprozess --}}
            @if (!empty($kaufprozess))
                <section class="section-padding bg-accent">
                    <div class="container-padding">
                        <div class="max-w-3xl mx-auto text-center mb-12 slide-up delay-300">
                            <h2 class="text-section-title">{!! $kaufprozess['title'] !!}</h2>
                            @if (isset($kaufprozess['intro']))
                                <p class="text-large text-muted-foreground mt-4 leading-relaxed">
                                    {{ $kaufprozess['intro'] }}
                                </p>
                            @endif
                        </div>

                        <div class="max-w-4xl mx-auto">
                            <div class="grid md:grid-cols-2 gap-6">
                                @foreach ($kaufprozess['steps'] ?? [] as $index => $step)
                                    <div class="relative card-elevated rounded-2xl p-6 lg:p-8 slide-up delay-{{ 300 + $index * 100 }}">
                                        <div class="flex gap-5 items-start">
                                            <div class="shrink-0 w-12 h-12 rounded-full bg-secondary text-white flex items-center justify-center text-lg font-bold">
                                                {{ $step['number'] ?? '' }}
                                            </div>
                                            <div>
                                                <h3 class="text-lg font-semibold text-foreground mb-2">{{ $step['title'] ?? '' }}</h3>
                                                <p class="text-sm text-muted-foreground leading-relaxed">{{ $step['description'] ?? '' }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            {{-- Sektion 4: Die Brücke – Marcels Pitch --}}
            @if (!empty($bruecke))
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
                            <div class="relative lg:order-1">
                                <div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
                                    <x-web-picture
                                        src="{{ theme_image_url($bruecke['image'] ?? '') }}"
                                        alt="{{ $bruecke['image_alt'] ?? 'Marcel Scheibe – Ihre Brücke nach Dubai' }}"
                                        class="w-full h-[500px] object-cover" />
                                    @if (isset($bruecke['image_caption']))
                                        <div class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-500">
                                            {{ $bruecke['image_caption'] }}
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="spacing-section lg:order-2">
                                <div class="spacing-content slide-right delay-300">
                                    <h2 class="text-section-title">{!! $bruecke['title'] !!}</h2>
                                    <div class="spacing-small text-large text-muted-foreground leading-relaxed">
                                        @foreach ($bruecke['paragraphs'] ?? [] as $paragraph)
                                            <p>{!! $paragraph !!}</p>
                                        @endforeach
                                    </div>

                                    @if (isset($bruecke['advantage_title']))
                                        <div class="mt-8 p-6 rounded-2xl bg-secondary/5 border border-secondary/20">
                                            <h3 class="text-lg font-semibold text-foreground mb-2">{{ $bruecke['advantage_title'] }}</h3>
                                            <p class="text-muted-foreground leading-relaxed">{{ $bruecke['advantage_text'] ?? '' }}</p>
                                        </div>
                                    @endif

                                    @if (isset($bruecke['cta_text']))
                                        <div class="mt-8">
                                            <a href="{{ $bruecke['cta_link'] ?? '/contact' }}"
                                                class="btn-primary-accent px-6 py-3">
                                                {{ $bruecke['cta_text'] }}
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            {{-- Aktuelle Projekte --}}
            @if (!empty($projects))
                <section id="projekte" class="section-padding bg-accent">
                    <div class="container-padding">
                        <div class="text-center mb-12 slide-up delay-300">
                            <h2 class="text-section-title">{!! $projects['title'] ?? '' !!}</h2>
                            @if (isset($projects['subtitle']))
                                <p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
                                    {{ $projects['subtitle'] }}
                                </p>
                            @endif
                        </div>

                        @php
                            $projectCount = count($projects['projects'] ?? []);
                        @endphp
                        <div class="grid md:grid-cols-1 lg:grid-cols-2 gap-8 slide-up delay-400">
                            @foreach ($projects['projects'] ?? [] as $project)
                                <div class="card-elevated rounded-2xl overflow-hidden {{ $projectCount === 1 ? 'lg:col-span-2 lg:max-w-[calc((100%-2rem)/2)] lg:mx-auto' : '' }}">
                                    @if (isset($project['image']))
                                        <div class="relative h-56 overflow-hidden">
                                            <x-web-picture
                                                src="{{ theme_image_url($project['image']) }}"
                                                alt="{{ $project['title'] }}"
                                                class="w-full h-full object-cover" />
                                            @if (isset($project['status']))
                                                <div class="absolute top-4 left-4">
                                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-secondary text-white">
                                                        {{ $project['status'] }}
                                                        @if (isset($project['launch_date']))
                                                            <span class="opacity-80">({{ $project['launch_date'] }})</span>
                                                        @endif
                                                    </span>
                                                </div>
                                            @endif
                                        </div>
                                    @endif

                                    <div class="p-6 lg:p-8">
                                        <div class="mb-4">
                                            <h3 class="text-xl font-semibold text-foreground">{{ $project['title'] }}</h3>
                                            @if (isset($project['location']))
                                                <p class="text-sm text-muted-foreground mt-1">{{ $project['location'] }}</p>
                                            @endif
                                        </div>

                                        @if (isset($project['price_from']))
                                            <p class="text-lg font-medium text-secondary mb-4">{{ $project['price_from'] }}</p>
                                        @endif

                                        @if (isset($project['highlights']))
                                            <ul class="space-y-2 mb-6">
                                                @foreach ($project['highlights'] as $highlight)
                                                    <li class="flex items-start gap-2 text-sm text-muted-foreground">
                                                        <svg class="w-4 h-4 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

                                        <a href="{{ isset($project['slug']) ? route('immobilien.show', $project['slug']) : ($projects['cta_link'] ?? '/contact') }}"
                                            class="inline-flex items-center gap-2 whitespace-nowrap btn-primary-accent">
                                            <span>{{ isset($project['slug']) ? 'Exposé ansehen' : ($projects['cta_text'] ?? 'Anfragen') }}</span>
                                            <svg class="w-4 h-4 shrink-0 inline-block ml-2 mb-0.5" 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>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            {{-- Sektion 5: Mindset-Check --}}
            @if (!empty($mindset))
                <section class="section-padding">
                    <div class="container-padding">
                        <div class="max-w-4xl mx-auto">
                            <div class="rounded-2xl border-2 border-secondary/20 bg-secondary/5 p-8 lg:p-12 slide-up delay-300">
                                <h2 class="text-section-title text-center">{!! $mindset['title'] !!}</h2>

                                <div class="mt-8 space-y-6 text-large leading-relaxed">
                                    @if (isset($mindset['text_positive']))
                                        <p class="text-foreground">{!! $mindset['text_positive'] !!}</p>
                                    @endif
                                    @if (isset($mindset['text_negative']))
                                        <p class="text-muted-foreground">{{ $mindset['text_negative'] }}</p>
                                    @endif
                                    @if (isset($mindset['closing']))
                                        <p class="text-foreground pt-4 border-t border-secondary/20">{!! $mindset['closing'] !!}</p>
                                    @endif
                                </div>

                                @if (isset($mindset['cta_text']))
                                    <div class="mt-8 text-center">
                                        <a href="{{ $mindset['cta_link'] ?? '/contact' }}"
                                            class="btn-primary-accent px-8 py-4 text-lg">
                                            {{ $mindset['cta_text'] }}
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            {{-- Möbel-Vorteil Banner (Teaser) --}}
            @if (!empty($moebelVorteil))
                <section class="section-padding bg-accent">
                    <div class="container-padding">
                        <div class="max-w-3xl mx-auto text-center slide-up delay-300">
                            <h2 class="text-section-title">{!! $moebelVorteil['title'] ?? '' !!}</h2>
                            <p class="text-large text-muted-foreground mt-4">
                                {{ $moebelVorteil['text'] ?? '' }}
                            </p>
                            @if (isset($moebelVorteil['button_text']))
                                <div class="mt-8">
                                    <a href="{{ $moebelVorteil['button_link'] ?? '/netzwerk' }}"
                                        class="btn-secondary-accent">
                                        {{ $moebelVorteil['button_text'] }}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            @endif

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

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

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