@extends('layouts.site')

@section('title', 'Featured Research — Research & Innovation Centre')
@section('meta-description', 'Explore featured and highlighted research publications selected by the SSHIA editorial team.')

@section('content')

{{-- ── Hero ──────────────────────────────────────────────────────────────── --}}
<div class="bg-gradient-to-r from-emerald-700 to-teal-700 shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="flex items-center gap-4 mb-4">
            <div class="w-14 h-14 rounded-2xl bg-yellow-400/20 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-star text-yellow-300 text-2xl"></i>
            </div>
            <div>
                <h1 class="text-3xl md:text-4xl font-bold text-white font-serif">Featured Research</h1>
                <p class="text-emerald-100 mt-1">Highlighted publications selected by our editorial team</p>
            </div>
        </div>
        <div class="flex items-center gap-3 mt-6">
            <a href="{{ route('research.public.index') }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 text-white rounded-xl text-sm font-medium hover:bg-white/30 transition">
                <i class="fas fa-arrow-left text-xs"></i> All Publications
            </a>
            <a href="{{ route('research.public.submit') }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-white text-emerald-700 rounded-xl text-sm font-semibold hover:bg-emerald-50 transition">
                <i class="fas fa-upload text-xs"></i> Submit Research
            </a>
        </div>
    </div>
</div>

{{-- ── Breadcrumb ───────────────────────────────────────────────────────── --}}
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:text-emerald-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('research.public.index') }}" class="hover:text-emerald-600 transition">Research</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium">Featured</span>
        </nav>
    </div>
</div>

{{-- ── Publications Grid ────────────────────────────────────────────────── --}}
<section class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="flex items-center justify-between mb-8">
            <p class="text-gray-500 text-sm">
                {{ $publications->total() }} featured publication{{ $publications->total() !== 1 ? 's' : '' }}
            </p>
        </div>

        @if($publications->count() > 0)
        <div class="space-y-6">
            @foreach($publications as $pub)
            <article class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
                <div class="flex flex-col md:flex-row">
                    <div class="w-full md:w-56 h-48 md:h-auto flex-shrink-0">
                        @if($pub->cover_image)
                        <img src="{{ Storage::url($pub->cover_image) }}"
                             alt="{{ $pub->title }}"
                             class="w-full h-full object-cover">
                        @else
                        <div class="w-full h-full bg-gradient-to-br from-yellow-50 to-amber-100 flex items-center justify-center min-h-[160px]">
                            <i class="fas fa-star text-yellow-300 text-5xl"></i>
                        </div>
                        @endif
                    </div>
                    <div class="flex-1 p-6">
                        <div class="flex flex-wrap items-center gap-2 mb-3">
                            <span class="px-2 py-0.5 bg-emerald-100 text-emerald-700 text-xs font-semibold rounded-full uppercase">
                                {{ $pub->category_label }}
                            </span>
                            <span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs font-semibold rounded-full">
                                <i class="fas fa-star mr-0.5"></i>Featured
                            </span>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 font-serif mb-2 leading-snug">
                            <a href="{{ route('research.public.show', $pub) }}"
                               class="hover:text-emerald-600 transition">
                                {{ $pub->title }}
                            </a>
                        </h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-2 leading-relaxed">
                            {{ Str::limit($pub->abstract, 220) }}
                        </p>
                        <div class="flex flex-wrap items-center justify-between gap-4">
                            <div class="flex flex-wrap items-center gap-4 text-xs text-gray-400">
                                <span class="flex items-center gap-1.5">
                                    <i class="fas fa-user"></i>{{ $pub->user->name ?? 'Unknown' }}
                                </span>
                                <span class="flex items-center gap-1.5">
                                    <i class="fas fa-calendar-alt"></i>{{ $pub->approved_at?->format('M d, Y') ?? 'N/A' }}
                                </span>
                            </div>
                            <a href="{{ route('research.public.show', $pub) }}"
                               class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white text-sm font-semibold rounded-xl hover:bg-emerald-700 transition shadow-sm">
                                Read More <i class="fas fa-arrow-right text-xs"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
        <div class="mt-10">
            {{ $publications->withQueryString()->links() }}
        </div>
        @else
        <div class="text-center py-20 bg-white rounded-2xl border border-gray-100">
            <i class="fas fa-star text-gray-200 text-5xl mb-4"></i>
            <h3 class="text-xl font-bold text-gray-700 mb-2">No featured publications yet</h3>
            <p class="text-gray-500 text-sm mb-6">Check back soon — our editorial team regularly highlights outstanding research.</p>
            <a href="{{ route('research.public.index') }}"
               class="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-600 text-white rounded-xl font-semibold text-sm hover:bg-emerald-700 transition">
                Browse All Publications
            </a>
        </div>
        @endif
    </div>
</section>

@endsection
