@extends('frontend.master')

@section('page_title', 'Home')

@section('frontend_content')
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container h-100 d-flex flex-column justify-content-center">
            <div class="hero-text-box">
                <h2 class="fw-semibold mb-3 text-dark">A multidisciplinary open access peer-reviewed medical journal of
                    KYAMC Journal</h2>
                <div class="hero-highlight p-3 text-white w-75 rounded-1">
                    Committed to upholding the highest standards of scholarly excellence and publication quality
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content Area -->
    <main class="container my-5">
        <div class="row gx-5">
            <!-- Left Column: Cover and CTAs -->
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="card border-0 shadow-sm mb-3 rounded-2 overflow-hidden">
                    @if($activeJournal && $activeJournal->cover_image)
                        <!-- Dynamic Cover Image -->
                        <img src="{{ asset($activeJournal->cover_image) }}" alt="Journal Cover" class="img-fluid w-100">
                    @else
                        <!-- Fallback Image if no active journal exists -->
                        <img src="https://dummyimage.com/300x420/e0e0e0/196f4c.png&text=Journal+Cover" alt="Journal Cover"
                            class="img-fluid w-100">
                    @endif
                </div>
                <div class="d-grid gap-2">
                    <!-- Link to the active journal's URL -->
                    <a href="{{ $activeJournal ? $activeJournal->link : '#' }}" class="btn btn-theme-accent shadow-sm" {{ $activeJournal ? 'target="_blank"' : '' }}>
                        Current Issue
                    </a>
                    <a target="_blank" href="https://www.banglajol.info/index.php/KYAMCJ/issue/archive"
                        class="btn btn-theme-accent shadow-sm">Archives</a>
                </div>
            </div>

            <!-- Right Column: Notice & Content -->
            <div class="col-lg-9 col-md-8 pt-2">
                @if($aboutJournal)
                    <h2 class="border-bottom pb-2 mb-3 fw-normal text-dark">{{ $aboutJournal->title }}</h2>


                    <div class="text-muted lh-lg" style="text-align: justify;">
                        {!! $aboutJournal->description !!}
                    </div>
                @else
                    <h2 class="border-bottom pb-2 mb-3 fw-normal text-dark">About Khwaja Yunus Ali Medical College Journal</h2>
                    <p class="text-muted lh-lg">
                        Information will be updated soon.
                    </p>
                @endif
            </div>
        </div>
    </main>

    <!-- Mid-page Call to Action Banner -->
    <section class="bg-light py-5 border-top border-bottom">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-lg-4 col-md-6 d-grid gap-3">
                    <a href="#" class="btn btn-theme-accent btn-lg shadow-sm">Author Instruction</a>
                    <a target="_blank" href="https://www.banglajol.info/index.php/KYAMCJ/about/submissions"
                        class="btn btn-theme-accent btn-lg shadow-sm">Submit Your Manuscript</a>
                </div>
            </div>
        </div>
    </section>
@endsection