@extends('frontend.layouts.app')

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

/* ── Page Hero ── */
.inv-hero {
    background: linear-gradient(135deg, #07111f 0%, #0f2942 100%);
    padding: 4rem 0 3rem;
    position: relative;
    overflow: hidden;
}
.inv-hero::before {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(201,168,76,0.08) 0%, transparent 70%);
    pointer-events:none;
}

/* ── Filter Bar ── */
.filter-bar {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 68px;
    z-index: 100;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1.5px solid #e5e7eb;
    background: white;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.filter-chip:hover { border-color: #C9A84C; color: #a8863a; text-decoration: none; }
.filter-chip.active { background: #07111f; border-color: #07111f; color: white; }

/* ── Investment Card ── */
.inv-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.inv-card:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
    transform: translateY(-4px);
    border-color: transparent;
    text-decoration: none;
    color: inherit;
}
.inv-card-img {
    height: 200px;
    background: linear-gradient(135deg, #0f2942, #1a3a5c);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.inv-card-img img { width:100%; height:100%; object-fit:cover; }
.inv-card-img-placeholder {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.25);
}
.inv-card-badge {
    position: absolute;
    top: 12px; left: 12px;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(201,168,76,0.9);
    color: #07111f;
    backdrop-filter: blur(4px);
}
.inv-card-score {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(7,17,31,0.85);
    border: 1px solid rgba(201,168,76,0.4);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 0.3rem 0.6rem;
    text-align: center;
    min-width: 48px;
}
.inv-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.inv-score-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.score-pill {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    color: #6b7280;
}
.score-pill-val { font-weight: 700; color: #0f2942; }

/* ── Empty State ── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #9ca3af;
}
</style>
@endpush

@section('content')

{{-- Hero --}}
<section class="inv-hero">
    <div class="container relative z-10">
        <div class="max-w-2xl">
            <span class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest mb-4"
                  style="color:#C9A84C;border:1px solid rgba(201,168,76,0.3);background:rgba(201,168,76,0.08);padding:0.3rem 0.9rem;border-radius:999px">
                Curated Opportunities
            </span>
            <h1 class="text-3xl md:text-4xl font-bold text-white mb-3">Investment Opportunities</h1>
            <p class="text-white/55 text-base max-w-lg">
                Every project is research-backed and due-diligence verified before we recommend it.
                Choose by asset class, review the scores, read our analysis.
            </p>
        </div>
    </div>
</section>

{{-- Filter Bar --}}
<div class="filter-bar">
    <div class="container">
        <div class="flex items-center gap-2 py-3 overflow-x-auto">
            <a href="{{ route('investments.index') }}"
               class="filter-chip {{ !request('category') ? 'active' : '' }}">
                All
            </a>
            @foreach($categories as $key => $label)
                <a href="{{ route('investments.index', ['category' => $key]) }}"
                   class="filter-chip {{ request('category') === $key ? 'active' : '' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>
    </div>
</div>

{{-- Listing --}}
<section class="py-12 lg:py-16 bg-gray-50 min-h-screen">
    <div class="container">

        {{-- Count --}}
        <div class="flex items-center justify-between mb-8">
            <p class="text-gray-500 text-sm">
                @if($investments->total() > 0)
                    Showing <span class="font-semibold text-gray-900">{{ $investments->firstItem() }}–{{ $investments->lastItem() }}</span>
                    of <span class="font-semibold text-gray-900">{{ $investments->total() }}</span> opportunities
                @else
                    No opportunities found
                @endif
            </p>
            <a href="{{ route('contact') }}"
               class="text-sm font-semibold flex items-center gap-1.5 hover:underline"
               style="color:#a8863a">
                Can't find what you need? Talk to us →
            </a>
        </div>

        @if($investments->count())
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($investments as $inv)
                    <a href="{{ route('investments.show', $inv->slug) }}" class="inv-card">

                        {{-- Image --}}
                        <div class="inv-card-img">
                            @php $img = $inv->images->where('is_primary', true)->first() ?? $inv->images->first(); @endphp
                            @if($img)
                                <img src="{{ $img->image_url }}" alt="{{ $inv->title }}" loading="lazy">
                            @else
                                <div class="inv-card-img-placeholder">
                                    <svg class="w-14 h-14" 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>
                                </div>
                            @endif
                            <span class="inv-card-badge">{{ $inv->investment_category_label }}</span>
                            @if($inv->investment_score)
                                <div class="inv-card-score">
                                    <div class="text-lg font-bold leading-none" style="color:#C9A84C">{{ number_format($inv->investment_score, 1) }}</div>
                                    <div class="text-white/50 text-[10px] leading-tight">Score</div>
                                </div>
                            @endif
                        </div>

                        {{-- Body --}}
                        <div class="inv-card-body">
                            <div>
                                <p class="font-bold text-gray-900 text-base leading-snug mb-0.5">{{ $inv->title }}</p>
                                <p class="text-gray-500 text-xs flex items-center gap-1">
                                    <svg class="w-3.5 h-3.5 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.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    </svg>
                                    {{ $inv->full_location }}
                                </p>
                            </div>

                            {{-- Price & timeline --}}
                            <div class="flex items-center justify-between">
                                <span class="text-lg font-bold text-gray-900">{{ $inv->formatted_price }}</span>
                                @if($inv->possession_timeline)
                                    <span class="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
                                        {{ $inv->possession_timeline }}
                                    </span>
                                @endif
                            </div>

                            {{-- Score pills --}}
                            @if($inv->location_score || $inv->growth_potential_score || $inv->rental_yield_score)
                                <div class="inv-score-row">
                                    @if($inv->location_score)
                                        <span class="score-pill">
                                            <svg class="w-3 h-3" 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"/></svg>
                                            Location <span class="score-pill-val">{{ number_format($inv->location_score, 1) }}/10</span>
                                        </span>
                                    @endif
                                    @if($inv->growth_potential_score)
                                        <span class="score-pill">
                                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                                            Growth <span class="score-pill-val">{{ number_format($inv->growth_potential_score, 1) }}/10</span>
                                        </span>
                                    @endif
                                    @if($inv->rental_yield_score)
                                        <span class="score-pill">
                                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/></svg>
                                            Yield <span class="score-pill-val">{{ number_format($inv->rental_yield_score, 1) }}/10</span>
                                        </span>
                                    @endif
                                </div>
                            @endif

                            {{-- Expected appreciation --}}
                            @if($inv->expected_appreciation)
                                <div class="flex items-center gap-1.5 text-xs font-semibold" style="color:#059669">
                                    <svg class="w-3.5 h-3.5" 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>
                                    {{ $inv->expected_appreciation }}
                                </div>
                            @endif

                            <div class="mt-auto pt-2 border-t border-gray-100 flex items-center justify-between">
                                <span class="text-xs font-semibold" style="color:#a8863a">View Details →</span>
                                @if($inv->rera_approved)
                                    <span class="text-xs bg-green-50 text-green-700 px-2 py-0.5 rounded-full font-medium">RERA ✓</span>
                                @endif
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            {{-- Pagination --}}
            @if($investments->hasPages())
                <div class="mt-10 flex justify-center">
                    {{ $investments->links() }}
                </div>
            @endif

        @else
            <div class="empty-state">
                <svg class="w-16 h-16 mx-auto mb-4 text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <p class="text-lg font-semibold text-gray-400 mb-2">No opportunities in this category yet</p>
                <p class="text-sm text-gray-400 mb-6">We're constantly adding new vetted projects. Contact us to discuss your requirements.</p>
                <a href="{{ route('contact') }}"
                   class="inline-flex items-center gap-2 font-bold px-5 py-2.5 rounded-xl text-sm"
                   style="background:linear-gradient(135deg,#C9A84C,#a8863a);color:#07111f">
                    Book a Consultation
                </a>
            </div>
        @endif
    </div>
</section>

@endsection