@extends('frontend.layouts.app')

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

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

/* ── Category Tabs ── */
.rc-filter-bar {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 68px;
    z-index: 100;
    overflow-x: auto;
}
.rc-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-bottom: 2px solid transparent;
    font-size: 0.83rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}
.rc-tab:hover { color: #0f2942; text-decoration: none; }
.rc-tab.active { color: #0f2942; border-bottom-color: #C9A84C; }
.rc-tab-count {
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}
.rc-tab.active .rc-tab-count { background: #fdf8ed; color: #a8863a; }

/* ── Featured Article ── */
.rc-featured {
    border-radius: 20px;
    overflow: hidden;
    background: white;
    border: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 320px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}
@media(max-width:767px){ .rc-featured { grid-template-columns: 1fr; } }
.rc-featured:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.1); transform: translateY(-3px); text-decoration: none; color: inherit; }
.rc-featured-img {
    position: relative;
    overflow: hidden;
    min-height: 260px;
}
.rc-featured-img img { width:100%; height:100%; object-fit:cover; display:block; }
.rc-featured-img-placeholder {
    width:100%; height:100%;
    background: linear-gradient(135deg, #0f2942, #1a3a5c);
    display:flex; align-items:center; justify-content:center;
}
.rc-featured-badge {
    position: absolute;
    top:14px; left:14px;
    background: linear-gradient(135deg, #C9A84C, #a8863a);
    color: #07111f;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}
.rc-featured-body {
    padding: 2rem 2rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.85rem;
}

/* ── Article Card ── */
.rc-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;
    height: 100%;
}
.rc-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.09);
    transform: translateY(-3px);
    border-color: transparent;
    text-decoration: none; color: inherit;
}
.rc-card-img {
    height: 180px;
    background: linear-gradient(135deg, #0f2942, #1e3a5f);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.rc-card-img img { width:100%; height:100%; object-fit:cover; }
.rc-card-cat {
    position: absolute;
    top:10px; left:10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(201,168,76,0.9);
    color: #07111f;
}
.rc-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.rc-card-meta { display:flex; align-items:center; gap:0.6rem; font-size:0.75rem; color:#9ca3af; }
.rc-card-meta-dot { width:3px; height:3px; background:#d1d5db; border-radius:50%; }

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

@section('content')

{{-- ── Hero ── --}}
<section class="rc-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 px-3 py-1.5 rounded-full"
                  style="color:#C9A84C;border:1px solid rgba(201,168,76,0.3);background:rgba(201,168,76,0.08)">
                <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"
                          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>
                Kashi Housing Research Center
            </span>

            <h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
                @if(isset($currentCategory))
                    {{ $currentCategory->name }}
                @else
                    Research & Market Insights
                @endif
            </h1>
            <p class="text-white/55 text-base max-w-xl">
                @if(isset($currentCategory) && $currentCategory->description)
                    {{ $currentCategory->description }}
                @else
                    In-depth reports, investment guides, and market analysis — written by our advisory team to help you make smarter real estate investment decisions.
                @endif
            </p>
        </div>
    </div>
</section>

{{-- ── Category Tabs ── --}}
<div class="rc-filter-bar">
    <div class="container">
        <div class="flex items-center gap-1">
            <a href="{{ route('research.index') }}"
               class="rc-tab {{ !isset($currentCategory) ? 'active' : '' }}">
                All
                <span class="rc-tab-count">{{ \App\Models\BlogPost::published()->count() }}</span>
            </a>
            @foreach($categories as $cat)
                <a href="{{ route('research.category', $cat->slug) }}"
                   class="rc-tab {{ isset($currentCategory) && $currentCategory->id === $cat->id ? 'active' : '' }}">
                    {{ $cat->name }}
                    @if($cat->posts_count > 0)
                        <span class="rc-tab-count">{{ $cat->posts_count }}</span>
                    @endif
                </a>
            @endforeach
        </div>
    </div>
</div>

{{-- ── Main Content ── --}}
<div class="bg-gray-50 py-10 lg:py-14 min-h-screen">
    <div class="container">

        @if($posts->total() === 0 && !isset($featuredPost))
            {{-- ── Empty State ── --}}
            <div class="rc-empty">
                <svg class="w-16 h-16 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="color:#e5e7eb">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M9 12h6m-6 4h6m2 5H7a2 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">Research articles coming soon</p>
                <p class="text-sm text-gray-400 mb-6">Our advisory team is preparing in-depth reports and investment guides. Check back soon.</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">
                    Talk to Our Research Team
                </a>
            </div>

        @else
            {{-- ── Featured Article ── --}}
            @if(isset($featuredPost) && $featuredPost && !isset($currentCategory))
                <a href="{{ route('research.show', $featuredPost->slug) }}" class="rc-featured mb-10 block">
                    <div class="rc-featured-img">
                        @if($featuredPost->featured_image_url)
                            <img src="{{ $featuredPost->featured_image_url }}" alt="{{ $featuredPost->title }}">
                        @else
                            <div class="rc-featured-img-placeholder">
                                <svg class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="color:rgba(255,255,255,0.15)">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 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>
                            </div>
                        @endif
                        <span class="rc-featured-badge">Featured Report</span>
                    </div>
                    <div class="rc-featured-body">
                        @if($featuredPost->category)
                            <span class="text-xs font-bold uppercase tracking-widest" style="color:#C9A84C">
                                {{ $featuredPost->category->name }}
                            </span>
                        @endif
                        <h2 class="text-2xl font-bold text-gray-900 leading-snug">{{ $featuredPost->title }}</h2>
                        <p class="text-gray-500 text-sm leading-relaxed">{{ $featuredPost->excerpt_text }}</p>
                        <div class="flex items-center gap-3 text-xs text-gray-400">
                            @if($featuredPost->published_at)
                                <span>{{ $featuredPost->published_at->format('d M Y') }}</span>
                                <span class="rc-card-meta-dot"></span>
                            @endif
                            @if($featuredPost->read_time)
                                <span>{{ $featuredPost->read_time }} min read</span>
                            @endif
                        </div>
                        <span class="inline-flex items-center gap-1.5 text-sm font-bold" style="color:#a8863a">
                            Read Report
                            <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="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                        </span>
                    </div>
                </a>
            @endif

            {{-- ── Articles Grid ── --}}
            @php
                $gridPosts = (isset($featuredPost) && $featuredPost && !isset($currentCategory))
                    ? $posts->filter(fn($p) => $p->id !== $featuredPost->id)
                    : $posts;
            @endphp

            @if($gridPosts->count())
                <p class="text-gray-400 text-sm mb-6">
                    Showing {{ $posts->firstItem() }}–{{ $posts->lastItem() }} of {{ $posts->total() }} articles
                </p>
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($gridPosts as $post)
                        <a href="{{ route('research.show', $post->slug) }}" class="rc-card">
                            <div class="rc-card-img">
                                @if($post->featured_image_url)
                                    <img src="{{ $post->featured_image_url }}" alt="{{ $post->title }}" loading="lazy">
                                @else
                                    {{-- Gradient placeholder with category initial --}}
                                    <div style="width:100%;height:100%;background:linear-gradient(135deg,#0f2942,#1e3a5f);display:flex;align-items:center;justify-content:center">
                                        <svg class="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="color:rgba(255,255,255,0.15)">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 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>
                                    </div>
                                @endif
                                @if($post->category)
                                    <span class="rc-card-cat">{{ $post->category->name }}</span>
                                @endif
                            </div>
                            <div class="rc-card-body">
                                <h3 class="font-bold text-gray-900 text-base leading-snug">{{ $post->title }}</h3>
                                <p class="text-gray-500 text-sm leading-relaxed flex-1">{{ Str::limit($post->excerpt_text, 110) }}</p>
                                <div class="rc-card-meta mt-auto">
                                    @if($post->published_at)
                                        <span>{{ $post->published_at->format('d M Y') }}</span>
                                        @if($post->read_time)
                                            <span class="rc-card-meta-dot"></span>
                                            <span>{{ $post->read_time }} min read</span>
                                        @endif
                                    @endif
                                </div>
                                <span class="text-xs font-semibold mt-1" style="color:#a8863a">Read Article →</span>
                            </div>
                        </a>
                    @endforeach
                </div>

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

        {{-- ── CTA Banner ── --}}
        <div class="mt-14 rounded-2xl p-8 flex flex-col md:flex-row items-center justify-between gap-6"
             style="background:linear-gradient(135deg,#07111f,#0f2942)">
            <div>
                <p class="text-white font-bold text-xl mb-1" style="font-family:'Playfair Display',serif">
                    Want personalised investment advice?
                </p>
                <p class="text-white/50 text-sm">Our research team is available for a free 1-on-1 consultation.</p>
            </div>
            <a href="{{ route('contact') }}"
               class="flex-shrink-0 inline-flex items-center gap-2 font-bold px-6 py-3 rounded-xl text-sm transition-all hover:-translate-y-0.5"
               style="background:linear-gradient(135deg,#C9A84C,#a8863a);color:#07111f;box-shadow:0 4px 16px rgba(201,168,76,0.3)">
                <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                Book Free Consultation
            </a>
        </div>

    </div>
</div>

@endsection