@extends('layouts.app')
@section('fullwidth', '1')
@section('content')
    @php
        $heroSlide = ($slides ?? collect())->first();
        $heroImage =
            $heroSlide && !empty($heroSlide->image_path)
                ? asset('storage/' . $heroSlide->image_path)
                : 'https://lh3.googleusercontent.com/aida-public/AB6AXuAK8mEhkN2WF4UdANbMBQkD_j7YsTuvec7qbwa14eZ8A89QBPTC7YSF1H8uGPmCXWnORoM7exwXaDUifnePl46oAicKFj97Rg766y30yrlBiDNKxTQIaaKwRIwS32qbACXHD9r7-oO8Zqah416XhY-bbqD9gVp5JbJPXIyLL4-JZ2Rc5_0BJ1A92PHGgEPLwcnPHbj2-V-sgu3mxDhH1rOCLGDf3YgcjoTDrnkimIfthSsauYte8blI6Xc28-3o9lU01kyFFmPTdGw';
    @endphp
    <section class="relative w-full min-h-[600px] h-auto lg:h-[600px] flex items-center overflow-hidden py-10 lg:py-0">
        <div class="absolute inset-0 z-0">
            <img alt="Academic Library" class="w-full h-full object-cover grayscale-[30%]" src="{{ $heroImage }}">
            <div class="absolute inset-0 bg-gradient-to-r from-[#041627]/95 via-[#041627]/70 to-[#041627]/30"></div>
        </div>
        <div class="relative z-10 w-full max-w-[1280px] mx-auto px-6 lg:px-10">
            <div class="flex flex-col lg:flex-row items-center lg:items-center gap-8 lg:gap-0   ">
                <div class="w-full lg:w-[38%] flex justify-center lg:justify-start shrink-0">
                    <img alt="{{ $setting->journal_name ?? 'North-East Orthoscan' }} journal cover"
                        class="max-h-[280px] rounded-lg border border-4 lg:max-h-[420px] w-auto object-contain border border-white/30 shadow-2xl"
                        src="{{ asset('images/banners/nerosa_cover.png') }}">
                </div>
                <div class="w-full lg:flex-1 text-center lg:text-left">
                    <span class="inline-block text-sm text-blue-200 mb-3 tracking-[0.2em] uppercase">Open Access Research
                        Journal</span>
                    <h1 class="text-4xl lg:text-5xl text-white mb-4 leading-tight">
                        {{ $setting->hero_title ?? 'North-East Orthoscan: Advancing Academic Excellence' }}</h1>
                    <p class="text-lg lg:text-xl text-white/80 mb-8 max-w-xl mx-auto lg:mx-0">
                        {{ $setting->hero_description ?? ($setting->tagline ?? 'A peer-reviewed platform dedicated to the dissemination of groundbreaking research.') }}
                    </p>
                    <div class="flex flex-wrap justify-center lg:justify-start gap-4">
                        <a href="{{ \Illuminate\Support\Facades\Route::has('register') ? route('register') : url('/register') }}"
                            class="inline-flex items-center gap-3 bg-white text-[#041627] font-semibold px-6 py-3 rounded-full hover:bg-blue-50 transition-colors">
                            Submit Manuscript
                            <span
                                class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-[#041627]/20">
                                <span class="material-symbols-outlined text-[18px]">arrow_forward</span>
                            </span>
                        </a>
                        <a href="{{ \Illuminate\Support\Facades\Route::has('public.archive') ? route('public.archive') : url('/archive') }}"
                            class="inline-flex items-center border border-white/70 text-white font-semibold px-6 py-3 rounded-full hover:bg-white/10 transition-colors">
                            Browse Archive
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-white border-b border-gray-200">
        <div class="max-w-[1100px] mx-auto px-6 py-12">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-y-8 gap-x-6 justify-items-center">
                <div class="text-center">
                    <p class=" text-3xl text-[#041627] mb-1">0.85</p>
                    <p class="text-xs text-gray-600 uppercase tracking-wider">Impact Factor</p>
                </div>
                <div class="text-center">
                    <p class=" text-3xl text-[#041627] mb-1">12k+</p>
                    <p class="text-xs text-gray-600 uppercase tracking-wider">Citations</p>
                </div>
                <div class="text-center">
                    <p class=" text-3xl text-[#041627] mb-1">24</p>
                    <p class="text-xs text-gray-600 uppercase tracking-wider">Days to Review</p>
                </div>
                <div class="text-center">
                    <p class=" text-3xl text-[#041627] mb-1">Q1</p>
                    <p class="text-xs text-gray-600 uppercase tracking-wider">Journal Rank</p>
                </div>
            </div>
        </div>
    </section>

    @if (($featuredArticles ?? collect())->count())
        <section class="py-16">
            <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
                <div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
                    <div>
                        <h2 class=" text-4xl text-[#041627] mb-2">Featured Articles</h2>
                        <p class="text-gray-600 max-w-md">Selected published research highlighted by the editorial team.</p>
                    </div>
                    <a href="{{ route('public.articles') }}"
                        class="text-[#041627] hover:text-[#3b6090] text-sm font-semibold">View All Articles</a>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach ($featuredArticles as $article)
                        @php
                            $thumb = $article->thumbnail;
                            $thumbUrl = $thumb
                                ? (\Illuminate\Support\Str::startsWith($thumb, ['http://', 'https://'])
                                    ? $thumb
                                    : asset('storage/' . $thumb))
                                : asset('images/article-thumbnail-placeholder.png');
                        @endphp
                        <article
                            class="bg-white border border-gray-200 rounded-lg overflow-hidden flex flex-col group hover:shadow-xl hover:shadow-[#041627]/5 transition-all duration-300">
                            <div class="h-48 overflow-hidden"><img alt="Article"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                    src="{{ $thumbUrl }}"></div>
                            <div class="p-6 flex flex-col flex-grow">
                                <div class="flex gap-2 mb-4"><span
                                        class="bg-blue-100 text-[#204877] text-[11px] px-2.5 py-0.5 rounded-full uppercase tracking-wider">{{ $article->category->name ?? 'General' }}</span>
                                </div>
                                <h3
                                    class=" text-2xl text-[#041627] mb-3 leading-snug group-hover:text-[#3b6090] transition-colors">
                                    {{ $article->title }}</h3>
                                <p class="text-sm text-gray-600 mb-6 flex-grow">
                                    {{ \Illuminate\Support\Str::limit(strip_tags($article->synopsis), 140) }}</p>
                                <div class="flex items-center justify-between mt-auto pt-6 border-t border-gray-200">
                                    <p class="text-sm font-semibold text-[#181c1e]">
                                        {{ $article->author->display_name ?? 'NEROSA Editorial' }}</p>
                                    <a class="text-[#041627] hover:text-[#3b6090] flex items-center gap-1 text-sm font-semibold"
                                        href="{{ route('public.article', $article->slug) }}">Read More <span
                                            class="material-symbols-outlined text-[18px]">open_in_new</span></a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="py-16">
        <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
            <div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
                <div>
                    <h2 class=" text-4xl text-[#041627] mb-2">Recent Publications</h2>
                    <p class="text-gray-600 max-w-md">Exploring the latest insights and peer-reviewed studies published in
                        our current volume.</p>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @forelse($recentArticles as $article)
                    @php
                        $thumb = $article->thumbnail;
                        $thumbUrl = $thumb
                            ? (\Illuminate\Support\Str::startsWith($thumb, ['http://', 'https://'])
                                ? $thumb
                                : asset('storage/' . $thumb))
                            : asset('images/article-thumbnail-placeholder.png');
                    @endphp
                    <article
                        class="bg-white border border-gray-200 rounded-lg overflow-hidden flex flex-col group hover:shadow-xl hover:shadow-[#041627]/5 transition-all duration-300">
                        <div class="h-48 overflow-hidden"><img alt="Article"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                src="{{ $thumbUrl }}"></div>
                        <div class="p-6 flex flex-col flex-grow">
                            <div class="flex gap-2 mb-4"><span
                                    class="bg-blue-100 text-[#204877] text-[11px] px-2.5 py-0.5 rounded-full uppercase tracking-wider">{{ $article->category->name ?? 'General' }}</span>
                            </div>
                            <h3
                                class=" text-2xl text-[#041627] mb-3 leading-snug group-hover:text-[#3b6090] transition-colors">
                                {{ $article->title }}</h3>
                            <p class="text-sm text-gray-600 mb-6 flex-grow">
                                {{ \Illuminate\Support\Str::limit(strip_tags($article->synopsis), 140) }}</p>
                            <div class="flex items-center justify-between mt-auto pt-6 border-t border-gray-200">
                                <p class="text-sm font-semibold text-[#181c1e]">
                                    {{ $article->author->display_name ?? 'NEROSA Editorial' }}</p>
                                <a class="text-[#041627] hover:text-[#3b6090] flex items-center gap-1 text-sm font-semibold"
                                    href="{{ \Illuminate\Support\Facades\Route::has('public.article') ? route('public.article', $article->slug) : url('/articles/' . $article->id) }}">Read
                                    More <span class="material-symbols-outlined text-[18px]">open_in_new</span></a>
                            </div>
                        </div>
                    </article>
                @empty
                    <div class="text-gray-600">No recent publications yet.</div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- Editorial Board --}}

    <section class="py-12">
        <div class="max-w-[1280px] mx-auto px-6 lg:px-10">
            <div class="mb-10">
                <h2 class=" text-4xl text-[#041627] mb-2">Editorial Board</h2>
                <p class="text-gray-600">Meet the active editors managing peer review and publication quality.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @forelse($editors as $editor)
                    <a href="{{ route('public.editorial-board.show', $editor) }}" class="block group">
                        <article class="bg-white border border-gray-200 rounded-lg p-6 transition-shadow duration-300 group-hover:shadow-xl">
                            <div class="flex items-center gap-3 mb-4">
                                @php
                                    $editorAvatar = $editor->profile_photo_path
                                        ? asset('storage/' . $editor->profile_photo_path)
                                        : null;
                                @endphp
                                <div
                                    class="w-12 h-12 rounded-full bg-[#d2e4fb] flex items-center justify-center text-[#041627] font-bold overflow-hidden">
                                    @if ($editorAvatar)
                                        <img src="{{ $editorAvatar }}" alt="{{ $editor->name }}"
                                            class="w-full h-full object-cover">
                                    @else
                                        {{ strtoupper(substr($editor->name, 0, 1)) }}
                                    @endif
                                </div>
                                <div>
                                    <h3 class="font-semibold text-[#041627]">{{ $editor->name }}</h3>

                                    @if ($editor['profile'])
                                        <p class="text-xs text-[#3b6090]">
                                            {{ trim(($editor->profile->designation ?? '') . ', ' . ($editor->profile->affiliation ?? ''), ' ,') }}
                                        </p>
                                    @endif
                                    <p class="text-xs uppercase tracking-widest text-[#3b6090]">Editor</p>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600">{{ $editor->email }}</p>
                        </article>
                    </a>
                @empty
                    <div class="text-gray-600">No editors found.</div>
                @endforelse
            </div>
        </div>
    </section>
@endsection