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

@section('title', 'Internationale Immobilien - B2in')

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

        <main class="variante-glass-flow">
            <livewire:web.components.sections.partner-hero section="immobilien_hero" />
            <livewire:web.components.sections.founder-bar />

            {{-- Aktuelle Projekte --}}
            @php
                $projects = cms_theme_section('immobilien_projects');
                $moebelVorteil = cms_theme_section('immobilien_moebel_vorteil');
            @endphp

            @if (!empty($projects))
                <section class="section-padding">
                    <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>

                        <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">
                                    @if (isset($project['image']))
                                        <div class="relative h-56 overflow-hidden">
                                            <img 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 btn-primary-accent">
                                            {{ isset($project['slug']) ? 'Exposé ansehen' : ($projects['cta_text'] ?? 'Anfragen') }}
                                            <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>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            {{-- Möbel-Vorteil Banner --}}
            @if (!empty($moebelVorteil))
                <section class="section-padding bg-secondary/5">
                    <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'] ?? '/partner' }}"
                                        class="btn-secondary-accent">
                                        {{ $moebelVorteil['button_text'] }}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            @endif

            {{-- Trust & Kontakt --}}
            <livewire:web.components.sections.content-section section="immobilien_trust" layout="right" />

            <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

@push('scripts')
    {{-- Alpine.js wird zentral im Layout geladen --}}
@endpush