@extends('frontend.layouts.app')

@push('styles')
<style>
body { font-family: 'Inter', sans-serif; }
h1,h2,h3 { font-family: 'Playfair Display', serif; }

/* ── Breadcrumb ── */
.breadcrumb { font-size: 0.8rem; color: #9ca3af; }
.breadcrumb a { color: #9ca3af; text-decoration: none; }
.breadcrumb a:hover { color: #C9A84C; }

/* ── Score Card ── */
.score-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
}
.score-bar-wrap { background: #f3f4f6; border-radius: 999px; height: 6px; overflow: hidden; }
.score-bar { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #C9A84C, #a8863a); }
.overall-score-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 3px solid #C9A84C;
    background: linear-gradient(135deg, #07111f, #0f2942);
    flex-shrink: 0;
}

/* ── Why We Recommend ── */
.recommend-section {
    background: linear-gradient(135deg, #07111f 0%, #0f2942 100%);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.recommend-section::before {
    content:'';
    position:absolute; top:-30%; right:-5%;
    width:300px; height:300px;
    background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 65%);
    pointer-events:none;
}

/* ── Nearby Tags ── */
.nearby-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    color: #374151;
    font-weight: 500;
}

/* ── Download Card ── */
.download-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    transition: all 0.2s;
    font-size: 0.88rem;
    font-weight: 600;
}
.download-card:hover {
    border-color: #C9A84C;
    color: #a8863a;
    box-shadow: 0 4px 16px rgba(201,168,76,0.15);
    text-decoration: none;
}

/* ── Inquiry Form ── */
.inquiry-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.75rem;
    position: sticky;
    top: 88px;
}
.inq-input {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    font-family: 'Inter', sans-serif;
    color: #1f2937;
}
.inq-input:focus { border-color: #C9A84C; }
.inq-input::placeholder { color: #9ca3af; }
.inq-select {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    outline: none;
    appearance: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    color: #1f2937;
    background: white;
}
.inq-select:focus { border-color: #C9A84C; }
.inq-btn {
    width: 100%;
    background: linear-gradient(135deg, #C9A84C, #a8863a);
    color: #07111f;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(201,168,76,0.3);
    font-family: 'Inter', sans-serif;
}
.inq-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.4); }

/* ── Gallery ── */
.gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 8px;
    border-radius: 16px;
    overflow: hidden;
}
.gallery-main { grid-row: 1 / 3; }
.gallery-img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-placeholder {
    width:100%; height:100%;
    background: linear-gradient(135deg, #0f2942, #1a3a5c);
    display:flex; align-items:center; justify-content:center;
}

/* ── Related Card ── */
.rel-card {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}
.rel-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); border-color: #e5e7eb; color: inherit; text-decoration: none; transform: translateX(4px); }
.rel-img {
    width: 64px; height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #0f2942, #1a3a5c);
}
</style>
@endpush

@section('content')

{{-- Breadcrumb --}}
<div class="bg-white border-b border-gray-100 py-3">
    <div class="container">
        <nav class="breadcrumb flex items-center gap-1.5">
            <a href="{{ route('home') }}">Home</a>
            <span>/</span>
            <a href="{{ route('investments.index') }}">Investments</a>
            <span>/</span>
            <span class="text-gray-600 truncate max-w-xs">{{ $investment->title }}</span>
        </nav>
    </div>
</div>

<div class="bg-gray-50 py-10 lg:py-14">
    <div class="container">
        <div class="flex flex-col lg:flex-row gap-8 items-start">

            {{-- ── LEFT COLUMN ── --}}
            <div class="flex-1 min-w-0 space-y-8">

                {{-- Header --}}
                <div>
                    <div class="flex flex-wrap items-center gap-2 mb-3">
                        <span class="text-xs font-bold uppercase tracking-widest px-2.5 py-1 rounded-full"
                              style="background:#fdf8ed;color:#a8863a;border:1px solid #e8cc8a">
                            {{ $investment->investment_category_label }}
                        </span>
                        @if($investment->rera_approved)
                            <span class="text-xs bg-green-50 text-green-700 px-2.5 py-1 rounded-full font-semibold border border-green-100">
                                RERA Approved
                            </span>
                        @endif
                        @if($investment->is_verified)
                            <span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-semibold border border-blue-100">
                                Due Diligence Done
                            </span>
                        @endif
                    </div>

                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 leading-tight mb-2">
                        {{ $investment->title }}
                    </h1>

                    <div class="flex items-center gap-1.5 text-gray-500 text-sm mb-4">
                        <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        {{ $investment->full_location }}
                        @if($investment->address)
                            · {{ $investment->address }}
                        @endif
                    </div>

                    <div class="flex flex-wrap items-center gap-4">
                        <div>
                            <span class="text-2xl font-bold text-gray-900">{{ $investment->formatted_price }}</span>
                            @if($investment->price_at_launch && $investment->price_at_launch < $investment->price)
                                <span class="ml-2 text-sm text-gray-400 line-through">
                                    ₹{{ number_format($investment->price_at_launch / 100000, 1) }} L (launch)
                                </span>
                            @endif
                        </div>
                        @if($investment->expected_appreciation)
                            <span class="flex items-center gap-1 text-sm font-semibold text-green-600">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
                                {{ $investment->expected_appreciation }} expected
                            </span>
                        @endif
                        @if($investment->possession_timeline)
                            <span class="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
                                Possession: {{ $investment->possession_timeline }}
                            </span>
                        @endif
                    </div>
                </div>

                {{-- Gallery --}}
                @if($investment->images->count())
                    <div class="gallery-grid">
                        @php $imgs = $investment->images; @endphp
                        <div class="gallery-main">
                            <img src="{{ $imgs->first()->image_url }}" alt="{{ $investment->title }}" class="gallery-img">
                        </div>
                        @foreach($imgs->skip(1)->take(2) as $img)
                            <div>
                                <img src="{{ $img->image_url }}" alt="{{ $investment->title }}" class="gallery-img" style="height:100%">
                            </div>
                        @endforeach
                        @if($imgs->count() < 3)
                            @for($i = $imgs->count(); $i < 3; $i++)
                                <div class="gallery-placeholder">
                                    <svg class="w-8 h-8 text-white/20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                </div>
                            @endfor
                        @endif
                    </div>
                @else
                    <div class="gallery-placeholder rounded-2xl" style="height:360px">
                        <div class="text-center text-white/30">
                            <svg class="w-16 h-16 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                            <p class="text-sm">Project images coming soon</p>
                        </div>
                    </div>
                @endif

                {{-- Investment Score Card --}}
                @if($investment->investment_score || $investment->location_score || $investment->growth_potential_score || $investment->rental_yield_score || $investment->liquidity_score)
                    <div class="score-card">
                        <div class="flex items-center gap-4 mb-5">
                            @if($investment->investment_score)
                                <div class="overall-score-badge">
                                    <span class="text-2xl font-bold leading-none" style="color:#C9A84C">{{ number_format($investment->investment_score, 1) }}</span>
                                    <span class="text-white/40 text-[10px] mt-0.5">/ 10</span>
                                </div>
                            @endif
                            <div>
                                <p class="font-bold text-gray-900 text-lg">Investment Score</p>
                                <p class="text-gray-500 text-sm">Research-based scoring across 4 parameters</p>
                            </div>
                        </div>
                        <div class="space-y-3">
                            @php
                                $scores = [
                                    ['label' => 'Location Score',       'val' => $investment->location_score,         'icon' => 'M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z'],
                                    ['label' => 'Growth Potential',     'val' => $investment->growth_potential_score,  'icon' => 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6'],
                                    ['label' => 'Rental Yield',         'val' => $investment->rental_yield_score,      'icon' => 'M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z'],
                                    ['label' => 'Liquidity',            'val' => $investment->liquidity_score,         'icon' => 'M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'],
                                ];
                            @endphp
                            @foreach($scores as $s)
                                @if($s['val'])
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#fdf8ed">
                                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="color:#a8863a">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $s['icon'] }}"/>
                                            </svg>
                                        </div>
                                        <div class="flex-1">
                                            <div class="flex justify-between mb-1">
                                                <span class="text-sm font-semibold text-gray-700">{{ $s['label'] }}</span>
                                                <span class="text-sm font-bold" style="color:#a8863a">{{ number_format($s['val'], 1) }}/10</span>
                                            </div>
                                            <div class="score-bar-wrap">
                                                <div class="score-bar" style="width: {{ ($s['val'] / 10) * 100 }}%"></div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Why We Recommend --}}
                @if($investment->why_we_recommend)
                    <div class="recommend-section">
                        <div class="relative z-10">
                            <div class="flex items-center gap-2 mb-3">
                                <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:rgba(201,168,76,0.15)">
                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="#C9A84C"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </div>
                                <h2 class="text-white font-bold text-lg">Why We Recommend This Project</h2>
                            </div>
                            <div class="text-white/70 text-sm leading-relaxed">
                                {!! nl2br(e($investment->why_we_recommend)) !!}
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Overview / Description --}}
                @if($investment->description)
                    <div class="bg-white border border-gray-100 rounded-2xl p-6">
                        <h2 class="text-xl font-bold text-gray-900 mb-3">Project Overview</h2>
                        <div class="text-gray-600 text-sm leading-relaxed prose max-w-none">
                            {!! nl2br(e($investment->description)) !!}
                        </div>
                    </div>
                @endif

                {{-- Location Analysis --}}
                @if($investment->nearby_metro || $investment->nearby_airport || $investment->nearby_highway || $investment->nearby_schools || $investment->nearby_hospitals || ($investment->latitude && $investment->longitude))
                    <div class="bg-white border border-gray-100 rounded-2xl p-6">
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Location Analysis</h2>

                        @php
                            $nearby = [
                                ['label' => 'Metro',     'val' => $investment->nearby_metro,    'icon' => 'M13 10V3L4 14h7v7l9-11h-7z', 'color' => '#2563eb'],
                                ['label' => 'Airport',   'val' => $investment->nearby_airport,  'icon' => 'M12 19l9 2-9-18-9 18 9-2zm0 0v-8', 'color' => '#7c3aed'],
                                ['label' => 'Highway',   'val' => $investment->nearby_highway,  'icon' => 'M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7', 'color' => '#059669'],
                                ['label' => 'Schools',   'val' => $investment->nearby_schools,  'icon' => 'M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z', 'color' => '#d97706'],
                                ['label' => 'Hospitals', 'val' => $investment->nearby_hospitals,'icon' => 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z', 'color' => '#dc2626'],
                            ];
                            $hasNearby = collect($nearby)->filter(fn($n) => $n['val'])->count() > 0;
                        @endphp

                        @if($hasNearby)
                            <div class="flex flex-wrap gap-2 mb-5">
                                @foreach($nearby as $n)
                                    @if($n['val'])
                                        <span class="nearby-tag">
                                            <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="color:{{ $n['color'] }}">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $n['icon'] }}"/>
                                            </svg>
                                            <span class="text-gray-400 font-normal">{{ $n['label'] }}:</span>
                                            {{ $n['val'] }}
                                        </span>
                                    @endif
                                @endforeach
                            </div>
                        @endif

                        @if($investment->latitude && $investment->longitude)
                            <div class="rounded-xl overflow-hidden border border-gray-100" style="height:280px">
                                <iframe
                                    src="https://maps.google.com/maps?q={{ $investment->latitude }},{{ $investment->longitude }}&z=14&output=embed"
                                    width="100%" height="280" style="border:0" allowfullscreen loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade">
                                </iframe>
                            </div>
                        @endif
                    </div>
                @endif

                {{-- Developer Analysis --}}
                @if($investment->developer_name || $investment->developer_track_record)
                    <div class="bg-white border border-gray-100 rounded-2xl p-6">
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Developer Analysis</h2>
                        @if($investment->developer_name)
                            <div class="flex items-center gap-3 mb-3">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background:#0f2942">
                                    <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                                </div>
                                <div>
                                    <p class="font-bold text-gray-900">{{ $investment->developer_name }}</p>
                                    <p class="text-gray-500 text-xs">Project Developer</p>
                                </div>
                            </div>
                        @endif
                        @if($investment->developer_track_record)
                            <div class="text-gray-600 text-sm leading-relaxed">
                                {!! nl2br(e($investment->developer_track_record)) !!}
                            </div>
                        @endif
                        @if($investment->rera_number)
                            <div class="mt-3 flex items-center gap-2 text-xs text-gray-500">
                                <svg class="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                RERA No: <span class="font-semibold text-gray-700">{{ $investment->rera_number }}</span>
                            </div>
                        @endif
                    </div>
                @endif

                {{-- Downloads --}}
                @if($investment->brochure_path || $investment->floor_plan_path || $investment->price_sheet_path)
                    <div class="bg-white border border-gray-100 rounded-2xl p-6">
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Downloads</h2>
                        <div class="grid sm:grid-cols-2 gap-3">
                            @if($investment->brochure_path)
                                <a href="{{ asset('storage/' . $investment->brochure_path) }}" target="_blank" class="download-card">
                                    <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#fee2e2">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="#dc2626"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-sm">Project Brochure</p>
                                        <p class="text-xs text-gray-400">PDF Download</p>
                                    </div>
                                    <svg class="w-4 h-4 ml-auto text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                </a>
                            @endif
                            @if($investment->floor_plan_path)
                                <a href="{{ asset('storage/' . $investment->floor_plan_path) }}" target="_blank" class="download-card">
                                    <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#dbeafe">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="#2563eb"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/></svg>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-sm">Floor Plans</p>
                                        <p class="text-xs text-gray-400">PDF Download</p>
                                    </div>
                                    <svg class="w-4 h-4 ml-auto text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                </a>
                            @endif
                            @if($investment->price_sheet_path)
                                <a href="{{ asset('storage/' . $investment->price_sheet_path) }}" target="_blank" class="download-card">
                                    <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#d1fae5">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="#059669"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/></svg>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-sm">Price Sheet</p>
                                        <p class="text-xs text-gray-400">PDF Download</p>
                                    </div>
                                    <svg class="w-4 h-4 ml-auto text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                </a>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Related Investments --}}
                @if($related->count())
                    <div>
                        <h2 class="text-xl font-bold text-gray-900 mb-4">Similar Opportunities</h2>
                        <div class="space-y-3">
                            @foreach($related as $rel)
                                <a href="{{ route('investments.show', $rel->slug) }}" class="rel-card">
                                    @php $relImg = $rel->images->where('is_primary',true)->first() ?? $rel->images->first(); @endphp
                                    @if($relImg)
                                        <img src="{{ $relImg->image_url }}" alt="{{ $rel->title }}" class="rel-img">
                                    @else
                                        <div class="rel-img"></div>
                                    @endif
                                    <div class="min-w-0">
                                        <p class="font-semibold text-sm text-gray-900 truncate">{{ $rel->title }}</p>
                                        <p class="text-xs text-gray-400 mb-0.5">{{ $rel->full_location }}</p>
                                        <p class="text-sm font-bold" style="color:#0f2942">{{ $rel->formatted_price }}</p>
                                    </div>
                                    @if($rel->investment_score)
                                        <div class="ml-auto text-right flex-shrink-0">
                                            <div class="text-lg font-bold" style="color:#C9A84C">{{ number_format($rel->investment_score, 1) }}</div>
                                            <div class="text-xs text-gray-400">score</div>
                                        </div>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

            </div>{{-- /LEFT --}}

            {{-- ── RIGHT: Sticky Inquiry Form ── --}}
            <div class="w-full lg:w-80 xl:w-96 flex-shrink-0">
                <div class="inquiry-card">
                    <p class="font-bold text-gray-900 text-lg mb-0.5" style="font-family:'Playfair Display',serif">
                        Interested in this project?
                    </p>
                    <p class="text-gray-500 text-sm mb-5">
                        Book a free consultation — our advisor will walk you through everything.
                    </p>

                    <form action="{{ route('inquiry.submit') }}" method="POST" class="space-y-3" id="investmentInquiryForm">
                        @csrf
                        <input type="hidden" name="property_id" value="{{ $investment->id }}">
                        <input type="hidden" name="source" value="investment_page">
                        <input type="text" name="name" placeholder="Your Full Name" required class="inq-input">
                        <input type="tel" name="phone" placeholder="Phone Number" required class="inq-input">
                        <input type="email" name="email" placeholder="Email (optional)" class="inq-input">
                        <select name="requirement" class="inq-select">
                            <option value="">I want to…</option>
                            <option value="invest">Invest in this project</option>
                            <option value="site_visit">Book a site visit</option>
                            <option value="more_info">Get more information</option>
                            <option value="pricing">Discuss pricing / payment plans</option>
                        </select>
                        <textarea name="message" placeholder="Any specific questions? (optional)"
                                  class="inq-input" rows="3" style="resize:none"></textarea>
                        <button type="submit" class="inq-btn" id="investInquiryBtn">
                            Request Free Consultation →
                        </button>
                    </form>

                    <p class="text-gray-400 text-xs text-center mt-3">Your information is kept strictly confidential</p>

                    <div class="mt-4 pt-4 border-t border-gray-100 space-y-2">
                        <a href="https://wa.me/{{ $siteWhatsapp }}?text=Hi, I'm interested in {{ urlencode($investment->title) }} on Kashi Housing. Can you share more details?"
                           target="_blank" rel="noopener"
                           class="flex items-center justify-center gap-2 w-full py-2.5 rounded-xl text-sm font-semibold text-white transition-all hover:-translate-y-0.5"
                           style="background:#25D366">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                            WhatsApp Us
                        </a>
                        <a href="tel:{{ $sitePhone }}"
                           class="flex items-center justify-center gap-2 w-full py-2.5 rounded-xl text-sm font-semibold text-gray-700 border border-gray-200 hover:border-gray-300 transition-all">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                            {{ $sitePhone }}
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.getElementById('investmentInquiryForm')?.addEventListener('submit', function() {
        const btn = document.getElementById('investInquiryBtn');
        if (btn) { btn.textContent = 'Sending…'; btn.disabled = true; }
    });
</script>
@endpush