@extends('frontend::layouts.app')

@section('content')
    @if (!empty($data['banners']) && count($data['banners']) > 0)
        @include('frontend::components.hero-banner')
    @endif

    @if (!empty($data['intro']) && $data['intro']['status'] == 1)
        <section class="sect-about" style="background: url('{{ asset('assets/frontend/images/bg-white-abscract.jpg') }}') no-repeat center top; background-size: cover;">
            <div class="mx-auto max-w-7xl px-6 lg:px-8">
                <div class="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                        <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6 text-balance">
                            {{ $data['intro']['name'] ?? '' }}
                        </h2>
                        {!! _html($data['intro']['detail'] ?? '') !!}
                        <a class="a-btn" href="{{ $data['about']['url'] ?? '#' }}" aria-label="{{ __('frontend::common.view_more_aria') }}">
                            <span class="a-btn__text">{{ __('frontend::common.view_more') }}</span>
                        </a>
                    </div>
                    <div class="relative h-[300px] md:h-[400px] bg-accent rounded-lg overflow-hidden">
                        <img class="object-cover w-full h-full" src="{{ $data['intro']['image'] ?? '' }}" alt="WBU Community and Scholars">
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if (!empty($data['activities']) && count($data['activities']['list']) > 0)
        <section class="sect-activity" style="background: url('{{ asset('assets/frontend/images/bg-dots.jpg') }}') no-repeat center center; background-size: cover;">
            <div class="mx-auto max-w-7xl px-6 lg:px-8">
                <div class="grid md:grid-cols-2 gap-12 mb-8">
                    <div class="header-title">
                        <h2 class="text-title md:text-4xl font-bold text-foreground mb-6 text-balance">{{ $data['activities']['page']['name'] ?? '' }}</h2>
                    </div>
                    <div class="relative">
                        <p class="mb-3">{{ $data['activities']['page']['desc'] ?? '' }}</p>
                        <a class="a-btn" href="{{ $data['activities']['page']['url'] ?? '#' }}" aria-label="{{ __('frontend::common.view_more_aria') }}">
                            <span class="a-btn__text">{{ __('frontend::common.view_more') }}</span>
                        </a>
                    </div>
                </div>
                @include('frontend::components.activities-slider', ['activities' => $data['activities']['list']])
            </div>
        </section>
    @endif

    @if (!empty($data['news']) && count($data['news']['list']) > 0)
        <section class="sect-news">
            <div class="mx-auto max-w-7xl px-6 lg:px-8">
                <div class="grid md:grid-cols-2 gap-12 mb-8">
                    <div class="header-title">
                        <h2 class="text-title md:text-4xl font-bold mb-6 text-balance">{{ $data['news']['page']['name'] ?? '' }}</h2>
                    </div>
                    <div class="relative">
                        <p class="mb-3 subtitle">
                            {{ $data['news']['page']['desc'] ?? '' }}
                        </p>
                        <a class="a-btn" href="{{ $data['news']['page']['url'] ?? '#' }}" aria-label="{{ __('frontend::common.view_more_aria') }}">
                            <span class="a-btn__text">{{ __('frontend::common.view_more') }}</span>
                        </a>
                    </div>
                </div>
                @include('frontend::components.news-slider', ['news' => $data['news']['list']])
            </div>
        </section>
    @endif

    @if (!empty($data['research']) && count($data['research']['list']) > 0)
        <section class="sect-research">
            <div class="mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-2">
                <div class="cleft">
                    <div class="header-title">
                        <h2 class="text-title md:text-4xl font-bold text-foreground mb-6 text-balance">{{ $data['research']['page']['name'] ?? '' }}</h2>
                    </div>
                    <p class="text-foreground leading-relaxed mb-8 max-w-lg" style="padding-right: 50px;">
                        {{ $data['research']['page']['desc'] ?? '' }}
                    </p>
                    <a class="a-btn" href="{{ $data['research']['page']['url'] ?? '#' }}" aria-label="{{ __('frontend::common.view_more_aria') }}">
                        <span class="a-btn__text">{{ __('frontend::common.view_more') }}</span>
                    </a>
                </div>
                <div class="relative cright">
                    <div class="flex gap-6 overflow-x-auto scrollbar-hide pb-4 px-6 snap-x snap-mandatory" id="research-scroll" style="scrollbar-width: none; -ms-overflow-style: none;">

                        @foreach ($data['research']['list'] as $item)
                            <div class="min-w-[195px] md:min-w-[195px] snap-start" style="flex: 0 0 calc(33.33% - 16px);">
                                <a class="group block h-full" href="{{ $item['url'] ?? '#' }}">
                                    <article class="bg-card rounded-lg overflow-hidden shadow-sm border border-border hover:shadow-md transition-shadow h-full flex flex-col">
                                        <div class="relative h-48 overflow-hidden">
                                            <img class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300" src="{{ $item['image'] ?? '' }}" alt="{{ $item['name'] ?? '' }}">
                                        </div>
                                        <div class="p-4 flex flex-col flex-grow">
                                            <h3 class="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-2 mb-2 flex-grow">
                                                {{ $item['name'] ?? '' }}
                                            </h3>
                                            <div class="flex items-center text-sm ">
                                                <svg class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                                                    </path>
                                                </svg>
                                                <span>{{ $item['publish_at'] ?? '' }}</span>
                                            </div>
                                        </div>
                                    </article>
                                </a>
                            </div>
                        @endforeach
                        <div class="hidden md:flex absolute -left-4 top-1/2 -translate-y-1/2">
                            <button class=" text-secondary-foreground hover:/80 shadow-md rounded-full p-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" id="research-prev" type="button">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                                </svg>
                                <span class="sr-only">{{ __('frontend::common.scroll_left') }}</span>
                            </button>
                        </div>
                        <div class="hidden md:flex absolute -right-4 top-1/2 -translate-y-1/2">
                            <button class=" text-secondary-foreground hover:/80 shadow-md rounded-full p-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" id="research-next" type="button">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                </svg>
                                <span class="sr-only">{{ __('frontend::common.scroll_right') }}</span>
                            </button>
                        </div>
                    </div>
                </div>
        </section>
    @endif

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const scrollContainer = document.getElementById('research-scroll');
            const prevBtn = document.getElementById('research-prev');
            const nextBtn = document.getElementById('research-next');

            function checkScroll() {
                if (!scrollContainer) return;
                const {
                    scrollLeft,
                    scrollWidth,
                    clientWidth
                } = scrollContainer;
                if (prevBtn) {
                    prevBtn.disabled = scrollLeft <= 0;
                }
                if (nextBtn) {
                    nextBtn.disabled = scrollLeft >= scrollWidth - clientWidth - 10;
                }
            }

            function scroll(direction) {
                if (!scrollContainer) return;
                // Calculate scroll amount: 3 cards width + 2 gaps (gap-6 = 24px each)
                const containerWidth = scrollContainer.clientWidth;
                const cardWidth = (containerWidth - 48) / 3; // 3 cards with 2 gaps (24px each)
                const gap = 24; // gap-6 = 1.5rem = 24px
                const scrollAmount = (cardWidth * 3) + (gap * 2);
                scrollContainer.scrollBy({
                    left: direction === 'left' ? -scrollAmount : scrollAmount,
                    behavior: 'smooth'
                });
                setTimeout(checkScroll, 300); // Re-check scroll position after animation
            }
            if (scrollContainer) {
                scrollContainer.addEventListener('scroll', checkScroll);
                checkScroll(); // Initial check
            }
            if (prevBtn) {
                prevBtn.addEventListener('click', () => scroll('left'));
            }
            if (nextBtn) {
                nextBtn.addEventListener('click', () => scroll('right'));
            }
        });
    </script>

@endsection