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

@section('content')
    @if (!empty($banner[0]))
        <section class="relative h-[80vh] min-h-[500px] flex items-center justify-center overflow-hidden bg-kx-dark">
            <div class="swiper index-banner-swiper">
                <div class="swiper-wrapper">
                    @foreach ($banner as $item)
                        @if (empty($item['src']))
                            @continue
                        @endif

                        <div class="swiper-slide">
                            @if ($item['type'] == 'image')
                                <img class="slide-image" src="{{ $item['src'] }}" alt="{{ $item['name'] ?? '' }}">
                                @if (!empty($item['detail']))
                                    <div class="absolute inset-0 bg-black/30 flex flex-col justify-center items-center text-white p-4">
                                        <div class="w-4/5 md:w-3/5 mx-auto">
                                            {!! $item['detail'] !!}
                                        </div>
                                    </div>
                                @endif
                            @elseif ($item['type'] == 'video')
                                <video class="slide-video" autoplay muted loop playsinline>
                                    <source src="{{ asset($item['src']) }}" type="video/mp4">
                                </video>
                            @elseif ($item['type'] == 'youtube')
                                <div class="youtube-container">
                                    <iframe src="https://www.youtube.com/embed/{{ $item['src'] }}" title="{{ $item['name'] ?? '' }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </section>
    @endif
    @if (!empty($about_us['status']))
        <section class="max-w-7xl mx-auto px-6 py-16">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    {!! $about_us['detail'] !!}
                    @if (!empty($link_about_us['status']))
                        <a class="inline-block bg-med-primary text-white px-8 py-3 my-5 rounded-full font-semibold hover:bg-med-dark transition shadow-lg transform hover:-translate-y-1" href="{{ $link_about_us['url'] ?? 'javascript:void(0)' }}">
                            {{ __('frontend::lang.btn.view_more') }}
                            <i class="fa-solid fa-angle-right"></i>
                        </a>
                    @endif
                </div>
                <div>
                    <img class="rounded-lg" src="{{ asset($about_us['image']) }}" alt="image about us">
                </div>
            </div>
        </section>
    @endif
    @if (!empty($categories['list'][0]))
        <section class="bg-med-gray">
            <div class="max-w-7xl mx-auto px-6 py-16">
                <div class="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 mb-8 justify-between items-center">
                    <h2 class="text-4xl font-bold text-gray-800">{{ __('frontend::lang.label.categories') }}</h2>
                    @if (!empty($link_products['status']))
                        <div>
                            <a class="inline-block bg-med-primary text-white px-8 py-3 rounded-full font-semibold hover:bg-med-dark transition shadow-lg transform hover:-translate-y-1" href="{{ $link_products['url'] ?? 'javascript:void(0)' }}">
                                {{ __('frontend::lang.btn.view_all') }}
                                <i class="fa-solid fa-angle-right"></i>
                            </a>
                        </div>
                    @endif
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                    @foreach ($categories['list'] ?? [] as $category)
                        @if (!auth()->guard('member')->check())
                            <a class="group relative rounded-2xl overflow-hidden shadow-md hover:shadow-2xl h-full" href="javascript:void(0)" onclick="openLoginModal('{{ mwz_route('frontend.login') . '?redirect=' . urlencode($link_products['url'] . '?q=' . $category['uid']) }}')">
                            @else
                                <a class="group relative rounded-2xl overflow-hidden shadow-md hover:shadow-2xl h-full" href="{{ $link_products['url'] }}?q={{ $category['uid'] }}">
                        @endif
                        <div class="aspect-square w-full relative">
                            <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="{{ $category['image'] ?? '' }}" alt="{{ $category['name'] ?? '' }}">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-90"></div>
                            <div class="absolute bottom-0 left-0 w-full p-5 translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
                                <h3 class="font-bold text-white text-xl drop-shadow-md mb-1">{{ $category['name'] ?? '' }}</h3>
                            </div>
                        </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    @if (!empty($blogs['list'][0]))
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 mb-8 justify-between items-center">
                <h2 class="text-4xl font-bold text-gray-800">{{ __('frontend::lang.label.blogs') }}</h2>
                @if (!empty($link_blogs['status']))
                    <div>
                        <a class="inline-block bg-med-primary text-white px-8 py-3 rounded-full font-semibold hover:bg-med-dark transition shadow-lg transform hover:-translate-y-1" href="{{ $link_blogs['url'] ?? 'javascript:void(0)' }}">
                            {{ __('frontend::lang.btn.view_all') }}
                            <i class="fa-solid fa-angle-right"></i>
                        </a>
                    </div>
                @endif
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:h-[550px]">
                <div class="lg:col-span-7 h-96 lg:h-full relative group overflow-hidden rounded-2xl shadow-lg">
                    <a href="{{ $blogs['list'][0]['url'] ?? 'javascript:void(0)' }}">
                        <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="{{ $blogs['list'][0]['image'] ?? '' }}" alt="{{ $blogs['list'][0]['name'] ?? '' }}">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div>
                        <div class="absolute bottom-0 left-0 p-6 sm:p-8 w-full">
                            <h3 class="text-2xl sm:text-3xl font-bold text-white mb-2 leading-tight group-hover:text-med-secondary transition-colors">
                                {{ $blogs['list'][0]['name'] ?? '' }}
                            </h3>
                            <div class="flex items-center text-gray-300 text-sm mt-4 space-x-4">
                                <div class="flex items-center">
                                    <i class="fa-solid fa-calendar mr-2"></i>
                                    <span>{{ str_date($blogs['list'][0]['publish_at'], 'd m Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="lg:col-span-5 flex flex-col gap-6 h-full">
                    @foreach ($blogs['list'] ?? [] as $k => $blog)
                        @if ($k == 0)
                            @continue
                        @endif

                        <article class="flex-1 bg-white rounded-2xl p-4 flex gap-4 shadow-sm hover:shadow-md transition-shadow border border-gray-100 group">
                            <div class="w-1/3 h-full relative overflow-hidden rounded-xl">
                                <a href="{{ $blog['url'] ?? 'javascript:void(0)' }}">
                                    <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="{{ $blog['image'] ?? '' }}" alt="{{ $blog['name'] ?? '' }}">
                                </a>
                            </div>
                            <div class="w-2/3 flex flex-col justify-center">
                                <a href="{{ $blog['url'] ?? 'javascript:void(0)' }}">
                                    <h4 class="text-lg font-bold text-med-dark leading-snug mb-2 group-hover:text-med-primary transition-colors line-clamp-4">
                                        {{ $blog['name'] ?? '' }}
                                    </h4>
                                </a>
                                <div class="text-gray-400 text-xs flex items-center mt-auto">
                                    <i class="fa-solid fa-calendar mr-2"></i>
                                    <span>{{ str_date($blog['publish_at'], 'd m Y') }}</span>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
            @if (!empty($link_blogs['status']))
                <div class="mt-8 sm:hidden text-center">
                    <a class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-med-dark bg-white hover:bg-med-gray w-full" href="{{ $link_blogs['url'] ?? 'javascript:void(0)' }}">
                        {{ __('frontend::lang.btn.view_all_blogs') }}
                    </a>
                </div>
            @endif
        </section>
    @endif
    @if (!empty($faqs['list'][0]))
        <section class="w-full bg-white py-16">
            <div class="max-w-3xl mx-auto px-4 sm:px-6">
                <div class="text-center mb-10">
                    <span class="text-med-primary font-semibold text-sm uppercase tracking-wider">{{ __('frontend::lang.label.faqs_desc') }}</span>
                    <h2 class="text-3xl font-bold text-med-dark mt-2">{{ __('frontend::lang.label.faqs') }}</h2>
                </div>
                <div class="space-y-4">
                    @foreach ($faqs['list'] ?? [] as $faq)
                        <x-frontend::faq-item question="{{ $faq['name'] ?? '' }}" answer="{{ $faq['desc'] ?? '' }}" />
                    @endforeach
                    @if (!empty($link_faqs['status']))
                        <div class="text-center mt-6">
                            <a class="inline-block bg-med-primary text-white px-8 py-3 rounded-full font-semibold hover:bg-med-dark transition shadow-lg transform hover:-translate-y-1" href="{{ $link_faqs['url'] ?? 'javascript:void(0)' }}">
                                {{ __('frontend::lang.btn.view_policy_related') }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif
@endsection