@extends('layouts.app')

@section('title', 'Corpus Intellectual - Journal of the College of Postgraduate Studies')
@section('description', 'Corpus Intellectual is an open access journal of the College of Postgraduate Studies, Redeemer\'s University Ede, publishing high-quality research articles across diverse academic disciplines.')

@section('content')
<!-- Hero Section -->
<section class="bg-journal-primary text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 items-center">
            <div>
                <h1 class="text-4xl lg:text-5xl font-bold mb-6 text-white">
                    Advancing Academic Research Through Open Science
                </h1>
                <p class="text-xl mb-8 text-gray-100">
                    Corpus Intellectual publishes cutting-edge research articles, methodology papers, and comprehensive reviews across diverse academic disciplines from the College of Postgraduate Studies.
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="{{ route('articles.index') }}" class="bg-white text-journal-primary px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
                        Browse Articles
                    </a>
                    <a href="{{ route('guidelines.authors') }}" class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-journal-primary transition">
                        Submit Manuscript
                    </a>
                </div>
            </div>
            <div class="relative">
                <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8">
                    <h3 class="text-2xl font-bold mb-4">Journal Metrics</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="text-center">
                            <div class="text-3xl font-bold">***</div>
                            <div class="text-sm text-blue-200">Impact Factor</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold">72h</div>
                            <div class="text-sm text-blue-200">Review Time</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold">Open</div>
                            <div class="text-sm text-blue-200">Access</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold">Global</div>
                            <div class="text-sm text-blue-200">Reach</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Latest Announcements -->
<section class="py-14 bg-gray-50 overflow-hidden">
    <div class="w-full px-6 lg:px-12 mt-4 mb-3">

        <!-- Section Heading -->
        <div class="text-center mb-10">
            <h2 class="text-3xl font-bold text-journal-primary mt-4 mb-3">
                Latest Announcements
            </h2>
            <p class="text-gray-600 mb-6">
                Stay informed about research updates, publications, and opportunities.
            </p>
        </div>

        <div class="relative overflow-hidden">

            <!-- LEFT FADE -->
            <div class="absolute left-0 top-0 h-full w-32 z-10 pointer-events-none bg-gradient-to-r from-gray-50 to-transparent"></div>

            <!-- RIGHT FADE -->
            <div class="absolute right-0 top-0 h-full w-32 z-10 pointer-events-none bg-gradient-to-l from-gray-50 to-transparent"></div>

            <!-- SCROLL CONTAINER -->
            <div class="flex animate-scroll">

                <!-- GROUP 1 -->
                <div class="flex space-x-8 pr-8">

                    <!-- Card -->
                    <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-800 mb-1">
                                New Genomics Dataset Released
                            </h3>
                            <p class="text-sm text-gray-600">
                             The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
                            </p>
                        </div>
                    </div>



  <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                             <span class="text-xs font-medium text-journal-blue">
        Upcoming Event
    </span>
                          <h3 class="font-semibold text-gray-800 mb-1">
        Postgraduate Research Conference 2026
    </h3>
                            <p class="text-sm text-gray-600">
        The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
    </p>
                        </div>
                    </div>



                    <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1576086213369-97a306d36557?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-800 mb-1">
                                AI Genome Analysis
                            </h3>
                            <p class="text-sm text-gray-600">
                              The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
                            </p>
                        </div>
                    </div>

                    <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-800 mb-1">
                                Global Research Collaboration
                            </h3>
                            <p class="text-sm text-gray-600">
                             The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
                            </p>
                        </div>
                    </div>

                    <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1581594693702-fbdc51b2763b?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-800 mb-1">
                                Platform Update
                            </h3>
                            <p class="text-sm text-gray-600">
                            The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
                            </p>
                        </div>
                    </div>

                </div>

                <!-- duplicate cards -->
                <div class="flex space-x-8 pr-8">

                    <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-800 mb-1">
                                New Genomics Dataset Released
                            </h3>
                            <p class="text-sm text-gray-600">
                              The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
                            </p>
                        </div>
                    </div>

                    <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-800 mb-1">
                                Call for Papers 2026
                            </h3>
                            <p class="text-sm text-gray-600">
                             The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
                            </p>
                        </div>
                    </div>

                    <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1576086213369-97a306d36557?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-800 mb-1">
                                AI Genome Analysis
                            </h3>
                            <p class="text-sm text-gray-600">
                              The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
                            </p>
                        </div>
                    </div>

                    <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1530026186672-2cd00ffc50fe?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-800 mb-1">
                                Global Research Collaboration
                            </h3>
                            <p class="text-sm text-gray-600">
                              The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
                            </p>
                        </div>
                    </div>

                    <div class="min-w-[320px] bg-white rounded-xl shadow-md overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1581594693702-fbdc51b2763b?w=200&h=100&fit=crop"
                             class="w-full h-40 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-800 mb-1">
                                Platform Update
                            </h3>
                            <p class="text-sm text-gray-600">
                              The College of Postgraduate Studies at Redeemer’s University will host <br>
         its Annual Postgraduate Research Conference, bringing together scholars to <br>
          present innovative research and foster interdisciplinary collaboration.
                            </p>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</section>


<!-- Featured Articles -->
@if($featuredArticles->count() > 0)
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-journal-primary mb-4">Featured Articles</h2>
            <p class="text-xl text-journal-gray">Discover the latest groundbreaking research in various fields</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <div class="lg:col-span-3">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
                    @foreach($featuredArticles as $article)
                    <article class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
                        <div class="p-6">
                            <div class="flex items-center justify-between mb-3">
                                <span class="bg-journal-light text-journal-accent px-2 py-1 text-xs font-semibold rounded-full">
                                    {{ ucfirst(str_replace('_', ' ', $article->article_type)) }}
                                </span>
                                <span class="text-gray-500 text-sm">
                                    {{ $article->published_date->format('M j, Y') }}
                                </span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 mb-3 line-clamp-2">
                                <a href="{{ route('articles.show', $article) }}" class="hover:text-journal-blue transition">
                                    {{ $article->title }}
                                </a>
                            </h3>
                            <p class="text-gray-600 mb-4 line-clamp-3">
                                {{ Str::limit($article->abstract, 150) }}
                            </p>
                            <div class="border-t pt-3">
                                <p class="text-sm text-gray-500 mb-2">
                                    <strong>Authors:</strong>
                                    @php
                                        $authors = $article->authors_text ? array_map('trim', explode(',', $article->authors_text)) : [];
                                    @endphp
                                    {{ collect($authors)->take(3)->join(', ') }}
                                    @if(count($authors) > 3)
                                        <span class="text-gray-400">et al.</span>
                                    @endif
                                </p>
                                @if($article->category)
                                <p class="text-sm text-journal-blue font-medium">
                                    {{ $article->category->name }}
                                </p>
                                @endif
                            </div>
                            <div class="flex items-center justify-between mt-4 pt-3 border-t">
                                <div class="flex items-center space-x-3 text-sm text-gray-500">
                                    <span>👁 {{ number_format($article->views_count) }} views</span>
                                    <span>⬇ {{ number_format($article->downloads_count) }} downloads</span>
                                </div>
                                <a href="{{ route('articles.show', $article) }}" class="text-journal-blue hover:text-journal-dark-blue font-medium text-sm">
                                    Read more →
                                </a>
                            </div>
                        </div>
                    </article>
                    @endforeach
                </div>
            </div>
            <div class="lg:col-span-1">
                <div class="bg-gray-50 rounded-lg p-6 mb-8">
                    <h3 class="text-xl font-bold mb-4 text-journal-primary">Important information</h3>
                    <ul class="space-y-2 mb-6">
                        <li><a href="{{ route('info.editorial-board') }}" class="text-journal-blue hover:underline">Editorial board</a></li>
                        <li><a href="{{ route('info.for-authors') }}" class="text-journal-blue hover:underline">For authors</a></li>
                        <li><a href="{{ route('info.editorial-board') }}" class="text-journal-blue hover:underline">For editorial board members</a></li>
                        <li><a href="{{ route('info.for-reviewers') }}" class="text-journal-blue hover:underline">For reviewers</a></li>
                        <li><a href="{{ route('info.manuscript-editing') }}" class="text-journal-blue hover:underline">Manuscript editing services</a></li>
                        <li><a href="{{ route('info.contact') }}" class="text-journal-blue hover:underline">Contact Us</a></li>
                    </ul>
                    <div class="mb-6">
                        <h4 class="font-semibold text-gray-700 mb-2">Annual Journal Metrics</h4>
                        <ul class="text-sm text-gray-600 space-y-1">
                            <li><strong>Citation Impact</strong></li>
                            <li>Journal Impact Factor: *** (2024)</li>
                            <li>5-year Journal Impact Factor: *** (2024)</li>
                            <li>SNIP: *** (2024)</li>
                            <li>SJR: *** (2024)</li>
                        </ul>
                    </div>
                    <div class="mb-6">
                        <h4 class="font-semibold text-gray-700 mb-2">Speed</h4>
                        <ul class="text-sm text-gray-600 space-y-1">
                            <li>Submission to first editorial decision (median days): 6</li>
                            <li>Submission to acceptance (median days): 140</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-700 mb-2">Usage 2024</h4>
                        <ul class="text-sm text-gray-600 space-y-1">
                            <li>Downloads: ****</li>
                            <li>Altmetric mentions: ****</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Latest Articles -->
@if($latestArticles->count() > 0)
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between mb-8">
            <h2 class="text-3xl font-bold text-gray-900">Latest Articles</h2>
            <a href="{{ route('articles.index') }}" class="text-journal-blue hover:text-journal-dark-blue font-medium">
                View all articles →
            </a>
        </div>

        <div class="space-y-6">
            @foreach($latestArticles as $article)
            <article class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 p-6">
                <div class="flex flex-col lg:flex-row lg:items-start gap-4">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="bg-journal-light-blue text-journal-blue px-2 py-1 text-xs font-semibold rounded-full">
                                {{ ucfirst(str_replace('_', ' ', $article->article_type)) }}
                            </span>
                            @if($article->category)
                            <span class="text-journal-blue text-sm font-medium">{{ $article->category->name }}</span>
                            @endif
                            <span class="text-gray-500 text-sm">{{ $article->published_date->format('M j, Y') }}</span>
                        </div>

                        <h3 class="text-xl font-bold text-gray-900 mb-2">
                            <a href="{{ route('articles.show', $article) }}" class="hover:text-journal-blue transition">
                                {{ $article->title }}
                            </a>
                        </h3>

                        <p class="text-gray-600 mb-3">
                            {{ Str::limit($article->abstract, 200) }}
                        </p>

                        <p class="text-sm text-gray-500 mb-3">
                            <strong>Authors:</strong>
                            @php
                                $authors = $article->authors_text ? array_map('trim', explode(',', $article->authors_text)) : [];
                            @endphp
                            {{ collect($authors)->take(5)->join(', ') }}
                            @if(count($authors) > 5)
                                <span class="text-gray-400">et al.</span>
                            @endif
                        </p>

                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-4 text-sm text-gray-500">
                                <span>👁 {{ number_format($article->views_count) }} views</span>
                                <span>⬇ {{ number_format($article->downloads_count) }} downloads</span>
                            </div>
                            <a href="{{ route('articles.show', $article) }}" class="text-journal-blue hover:text-journal-dark-blue font-medium">
                                Read article →
                            </a>
                        </div>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Categories/Research Areas -->
@if($categories->count() > 0)
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Research Areas</h2>
            <p class="text-xl text-gray-600">Explore articles by research category</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach($categories as $category)
            <div class="bg-gray-50 rounded-lg p-6 hover:bg-journal-light-blue transition-colors duration-300 group">
                <a href="{{ route('articles.index', ['category' => $category->slug]) }}" class="block">
                    <h3 class="text-lg font-semibold text-gray-900 group-hover:text-journal-blue mb-2">
                        {{ $category->name }}
                    </h3>
                    @if($category->description)
                    <p class="text-gray-600 text-sm mb-3">
                        {{ Str::limit($category->description, 100) }}
                    </p>
                    @endif
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">
                            {{ $category->articles_count }} {{ Str::plural('article', $category->articles_count) }}
                        </span>
                        <span class="text-journal-blue group-hover:text-journal-dark-blue">→</span>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif



<style>
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-scroll{
    display:flex;
    width:max-content;
    animation: scroll-left 40s linear infinite;
}

.animate-scroll:hover{
    animation-play-state: paused;
}
</style>


<!-- Call to Action -->
<section class="py-16 bg-journal-accent text-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-4">Submit Your Research</h2>
        <p class="text-xl mb-8 text-blue-100">
            Share your research with the global community. Our rigorous peer review process ensures quality while our open access model maximizes impact.
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ route('guidelines.authors') }}" class="bg-white text-journal-primary px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
                Submit Manuscript
            </a>
            <a href="{{ route('guidelines.authors') }}" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-journal-blue transition">
                Author Guidelines
            </a>
        </div>
    </div>
</section>
@endsection