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

@php
    $statusClasses = [
        'ready' => 'bg-emerald-500',
        'construction' => 'bg-sky-500',
        'offplan' => 'bg-amber-400 text-zinc-950',
    ];
    $confidenceLabels = [
        'green' => 'Direkt belegt',
        'yellow' => 'Vor Livegang final pruefen',
        'red' => 'Nur als Anfragewert nutzen',
    ];
@endphp

@section('title', ($project['title'] ?? 'Projekt') . ' - B2in Dubai Preview')
@section('meta_description', ($project['short'] ?? 'Kuratierte Dubai-Immobilie von Azizi Developments.'))

@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="{{ theme_image_url($project['image'] ?? 'b2in/hero-immobilien.jpg') }}"
                    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="{{ route('dev.immobilien-azizi') }}" 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')
                            Zurueck zur Projektuebersicht
                        </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">Preis / Verfuegbarkeit</p>
                            <p class="mt-2 font-semibold text-secondary">{{ $project['price_from'] ?? 'Auf Anfrage' }}</p>
                        </div>
                        <div class="card-elevated rounded-2xl p-5">
                            <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Uebergabe</p>
                            <p class="mt-2 font-semibold text-foreground">{{ $project['handover'] ?? 'Phase abhaengig' }}</p>
                        </div>
                        <div class="card-elevated rounded-2xl p-5">
                            <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Einheiten</p>
                            <p class="mt-2 font-semibold text-foreground">{{ $project['units'] ?? 'Aktuell pruefen' }}</p>
                        </div>
                        <div class="card-elevated rounded-2xl p-5">
                            <p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Datenstand</p>
                            <p class="mt-2 font-semibold text-foreground">{{ $confidenceLabels[$project['data_confidence'] ?? 'yellow'] ?? 'Pruefen' }}</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">
                                Investment Case
                            </p>
                            <h2 class="text-section-title">{{ $project['short'] ?? '' }}</h2>
                            <p class="mt-6 text-large leading-relaxed text-muted-foreground">
                                {{ $project['marcel_take'] ?? '' }}
                            </p>

                            <div class="mt-10 rounded-2xl border border-secondary/20 bg-secondary/5 p-6">
                                <h3 class="text-lg font-semibold text-foreground">Fuer wen eignet sich das Projekt?</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">Harte Punkte fuer die Einordnung</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">
                            <div class="card-elevated rounded-2xl p-6">
                                <h3 class="font-semibold text-foreground">Projektquelle</h3>
                                <p class="mt-2 text-sm text-muted-foreground">
                                    Offizieller Azizi-Link als Projektanker. Preise und Verfuegbarkeit werden vor Beratung aktuell geprueft.
                                </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">
                                        Azizi-Projektseite
                                        @svg('heroicon-o-arrow-up-right', 'h-4 w-4')
                                    </a>
                                @endif
                            </div>

                            <div class="card-elevated rounded-2xl p-6">
                                <h3 class="font-semibold text-foreground">Naechster Schritt</h3>
                                <p class="mt-2 text-sm text-muted-foreground">
                                    Marcel prueft aktive Einheiten, aktuellen Zahlungsplan, Floor Plans und ob Resale oder Off-Plan fuer Ihre Strategie sinnvoller ist.
                                </p>
                                <a href="/contact" class="mt-5 inline-flex w-full justify-center btn-primary-accent">
                                    Verfuegbarkeit anfragen
                                </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">Wie B2in dieses Projekt prueft</h2>
                        <p class="mt-4 text-large text-muted-foreground">
                            Diese Preview trennt redaktionelle Einordnung von beweglichen Vertriebsdaten. Der Live-Stand wird immer vor einer konkreten Empfehlung geprueft.
                        </p>
                    </div>

                    <div class="mx-auto mt-10 grid max-w-5xl gap-5 md:grid-cols-3">
                        <div class="card-elevated rounded-2xl p-6">
                            <h3 class="font-semibold text-foreground">1. Strategische Passung</h3>
                            <p class="mt-2 text-sm text-muted-foreground">Cashflow, Eigennutzung, Wertzuwachs oder Trophy Asset.</p>
                        </div>
                        <div class="card-elevated rounded-2xl p-6">
                            <h3 class="font-semibold text-foreground">2. Aktive Verfuegbarkeit</h3>
                            <p class="mt-2 text-sm text-muted-foreground">Einheiten, Etagen, Views, Zahlungsplan und Resale-Angebote.</p>
                        </div>
                        <div class="card-elevated rounded-2xl p-6">
                            <h3 class="font-semibold text-foreground">3. Exit-Logik</h3>
                            <p class="mt-2 text-sm text-muted-foreground">Vermietbarkeit, Haltezeit, Zielgruppe und Wiederverkauf.</p>
                        </div>
                    </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">Interesse an {{ $project['title'] ?? 'diesem Projekt' }}?</h2>
                        <p class="mt-4 text-large text-muted-foreground">
                            Fragen Sie keine Broschuere an. Fragen Sie eine Einordnung an: Passt dieses Projekt zu Ihrer Strategie, Ihrem Budget und Ihrem Zeithorizont?
                        </p>
                        <div class="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
                            <a href="/contact" class="btn-primary-accent px-8 py-4 text-lg">Beratung anfragen</a>
                            <a href="{{ route('dev.immobilien-azizi') }}#projekte" class="btn-secondary-accent px-8 py-4 text-lg">Weitere Projekte ansehen</a>
                        </div>
                    </div>
                </div>
            </section>
        </main>

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