@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 h-[600px] flex items-center overflow-hidden">
<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]/90 via-[#041627]/40 to-transparent"></div>
</div>
<div class="relative z-10 w-full max-w-[1280px] mx-auto px-6 lg:px-10">
<div class="max-w-2xl">
<span class="inline-block text-sm text-blue-200 mb-4 tracking-[0.2em] uppercase">Open Access Research Journal</span>
<h1 class=" text-5xl text-white mb-6 leading-tight">{{ $setting->hero_title ?? 'North-East Orthoscan: Advancing Academic Excellence' }}</h1>
<p class="text-xl text-white/80 mb-10 max-w-lg">{{ $setting->hero_description ?? ($setting->tagline ?? 'A peer-reviewed platform dedicated to the dissemination of groundbreaking research.') }}</p>
<div class="flex flex-wrap gap-4">
<a href="{{ \Illuminate\Support\Facades\Route::has('register') ? route('register') : url('/register') }}" class="bg-blue-200 text-[#041627] font-semibold px-8 py-3 rounded-lg">Submit Manuscript</a>
<a href="{{ \Illuminate\Support\Facades\Route::has('public.archive') ? route('public.archive') : url('/archive') }}" class="border border-white text-white font-semibold px-8 py-3 rounded-lg">Browse Archive</a>
</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))
      : 'https://images.unsplash.com/photo-1455885666463-9d7b13ff1e6c?q=80&w=1200&auto=format&fit=crop';
@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) }}">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))
      : 'https://images.unsplash.com/photo-1455885666463-9d7b13ff1e6c?q=80&w=1200&auto=format&fit=crop';
@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) : 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>

<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)
  <article class="bg-white border border-gray-200 rounded-lg p-6">
    <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>
        <p class="text-xs uppercase tracking-widest text-[#3b6090]">Editor</p>
      </div>
    </div>
    <p class="text-sm text-gray-600">{{ $editor->email }}</p>
  </article>
  @empty
  <div class="text-gray-600">No editors added yet. Admin can add editors from the Users panel.</div>
  @endforelse
</div>
</div>
</section>
@endsection