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

@section('content')

    @if (!empty($data['banners']))
        <!-- Hero Banner Slider -->
        <section class="relative w-full overflow-hidden" aria-label="Featured banner">
            <div class="swiper hero-banner-swiper">
                <div class="swiper-wrapper">
                    @foreach ($data['banners'] as $index => $slide)
                        @if (($slide['type'] ?? '') === 'youtube')
                            <div class="swiper-slide hero-banner-slide">
                                <div class="hero-banner-slide-inner hero-youtube-slide relative h-full w-full min-h-0 overflow-hidden bg-black">
                                    {{-- แบบเดิม  --}}
                                    {{-- <iframe class="pointer-events-auto absolute inset-0 z-0 h-full w-full border-0" src="{{ \Modules\Frontend\app\Support\YoutubeEmbed::playerUrl('https://www.youtube-nocookie.com/embed/' . ($slide['src'] ?? '') . '?rel=0&modestbranding=1') }}" title="{{ $slide['name'] ?? 'Video' }}" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> --}}

                                    {{-- แบบใหม่ ปรับไม่ให้ แสดง logo ของ youtube และ ไม่ให้มีปุ่ม play --}}
                                    <iframe class="pointer-events-none absolute inset-0 z-0 h-full w-full border-0" src="https://www.youtube-nocookie.com/embed/{{ $slide['src'] ?? '' }}?autoplay=1&mute=1&controls=0&loop=1&playlist={{ $slide['src'] ?? '' }}&rel=0&playsinline=1" title="{{ $slide['name'] ?? 'Video' }}" loading="lazy" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                                </div>
                            </div>
                        @else
                            <div class="swiper-slide hero-banner-slide">
                                <div class="hero-banner-slide-inner relative flex min-h-0 flex-1 flex-col">
                                    <div class="pointer-events-none absolute inset-0">
                                        <img class="h-full w-full object-cover" src="{{ check_file($slide['src']) }}" alt="{{ $slide['name'] ?? '' }}" @if ($index > 0) loading="lazy" @endif>
                                        <div class="absolute inset-0 bg-gradient-to-b from-black/70 via-black/55 to-black/80">
                                        </div>
                                    </div>
                                    <div class="relative z-10 flex flex-1 flex-col items-center justify-center px-4 py-10 text-center sm:px-6 sm:py-12 md:px-8 md:py-14 lg:px-10">
                                        {{-- @if (!empty($slide['src']))
                                            <div class="mb-5 sm:mb-6 md:mb-8 mx-auto flex h-24 w-full max-w-[11rem] items-center justify-center sm:h-28 sm:max-w-[13rem] md:h-32 md:max-w-[15rem] lg:h-36 lg:max-w-[18rem] xl:h-40 xl:max-w-[22rem]">
                                                <img src="{{ check_file($slide['src']) }}" alt="{{ $slide['name'] ?? '' }}" class="h-full w-full object-contain">
                                            </div>
                                        @endif --}}
                                        @if (!empty($slide['name']))
                                            <h1 class="mb-3 max-w-3xl text-2xl font-bold tracking-wide text-white sm:mb-4 sm:text-3xl md:text-4xl lg:text-5xl">
                                                {{ $slide['name'] }}
                                            </h1>
                                        @endif
                                        @if (!empty($slide['desc']))
                                            <p class="mb-6 max-w-2xl text-sm leading-relaxed text-gray-200 sm:mb-8 sm:text-base md:max-w-3xl md:text-lg">
                                                {{ $slide['desc'] }}
                                            </p>
                                        @endif
                                        <a class="inline-flex items-center gap-2 rounded-full bg-le-primary px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-le-primary/80 sm:px-8 sm:py-3" href="{{ $slide['url'] ?? '#' }}">
                                            {{ $slide['button_label'] ?? __('action.explore_more') }}
                                            <i class="ph ph-caret-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>

                <div class="swiper-pagination hero-banner-pagination"></div>
                <button class="swiper-button-prev hero-banner-nav-prev" type="button" aria-label="Previous slide"></button>
                <button class="swiper-button-next hero-banner-nav-next" type="button" aria-label="Next slide"></button>
            </div>
        </section>
    @endif

    @if (!empty($data['service']['list']))
        <!-- Our Services Section -->
        @include('frontend::components.services-section')
    @endif

    @if (!empty($data['ourwork']['page']))
        <!-- Our Work Section -->
        <section class="py-24 relative">
            <!-- Background Overlay for Section -->
            <div class="absolute inset-0">
                <img class="w-full h-full object-cover object-center" src="{{ asset('modules/frontend/images/bg/bg-image-section-01.png') }}" alt="Our Work background">
            </div>
            <div class="absolute inset-0 bg-gradient-to-b from-[#050505] via-transparent to-[#050505]"></div>

            <div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8 relative z-10">

                <div class="max-w-7xl mb-12 mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="max-w-2xl mb-12">
                        <h2 class="text-4xl md:text-5xl font-bold mb-6 uppercase tracking-wide">
                            {{ $data['ourwork']['page']['name'] ?? '' }}</h2>
                        <p class="text-gray-300 mb-8 leading-relaxed text-sm md:text-base">
                            {{ $data['ourwork']['page']['desc'] ?? '' }}
                        </p>
                        <a class="inline-flex items-center gap-2 bg-le-primary hover:bg-le-primary/80 transition-colors text-white rounded-full px-6 py-2 text-sm font-medium" href="{{ $data['ourwork']['page']['url'] ?? '#' }}">
                            {{ $data['ourwork']['page']['button_label'] ?? __('action.explore_more') }} <i class="ph ph-caret-right"></i>
                        </a>
                    </div>
                </div>
                <!-- Portfolio Slider (Swiper) — same item shape as archive card-gallery; pass custom `items` from controller for other pages -->
                @if (!empty($data['ourwork']['list']))
                    @include('frontend::components.portfolio-gallery-slider', [
                        'items' => $data['ourwork']['list'] ?? [],
                    ])
                @endif
            </div>
        </section>
    @endif

    @if (!empty($data['client']['list']))
        <!-- Logos Slide -->
        @include('frontend::components.logos-slide')
    @endif

    @if (!empty($data['news']['list']))
        <!-- News Update Section -->
        <section class="py-24">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">

                    <!-- Left Content -->
                    <div class="lg:col-span-4">
                        <h2 class="text-4xl md:text-5xl font-bold mb-6 uppercase tracking-wide">
                            {{ $data['news']['page']['name'] ?? '' }}</h2>
                        <p class="text-gray-400 mb-8 leading-relaxed text-sm">
                            {{ $data['news']['page']['desc'] ?? '' }}
                        </p>
                        <a class="inline-flex items-center gap-2 bg-le-primary hover:bg-le-primary/80 transition-colors text-white rounded-full px-6 py-2 text-sm font-medium" href="{{ $data['news']['page']['url'] ?? '#' }}">
                            {{ $data['news']['page']['button_label'] ?? __('action.explore_more') }} <i class="ph ph-caret-right"></i>
                        </a>
                    </div>

                    <!-- Right Grid -->
                    <div class="lg:col-span-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                        @foreach ($data['news']['list'] as $index => $item)
                            @php
                                $mediaSlides = \Modules\Frontend\app\Support\GalleryMediaSlides::fromContentListRow($item);
                                $coverImage = null;
                                foreach ($mediaSlides as $slide) {
                                    if (($slide['type'] ?? '') === 'image') {
                                        $coverImage = $slide['src'];
                                        break;
                                    }
                                }
                                if ($coverImage === null && ! empty($item['image'])) {
                                    $coverImage = $item['image'];
                                }
                            @endphp
                            <div class="group block">
                                @if (count($mediaSlides) > 0)
                                    <button
                                        type="button"
                                        class="w-full cursor-pointer text-left"
                                        data-lightbox-trigger="archive"
                                        data-gallery-slides='@json($mediaSlides)'
                                        data-gallery-index="{{ $index }}"
                                        aria-label="{{ __('Open gallery') }}: {{ $item['name'] }}"
                                    >
                                        <div class="relative mb-4 aspect-[4/5] overflow-hidden rounded-2xl">
                                            @if ($coverImage)
                                                <img class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110" src="{{ $coverImage }}" alt="{{ $item['name'] }}">
                                            @else
                                                <div class="flex h-full w-full items-center justify-center bg-black/50">
                                                    <i class="ph ph-play-circle text-4xl text-white/80"></i>
                                                </div>
                                            @endif
                                            @if (count($mediaSlides) > 1)
                                                <span class="absolute right-3 top-3 rounded-full bg-black/70 px-2.5 py-1 text-[11px] font-semibold tabular-nums text-white">
                                                    {{ count($mediaSlides) }}
                                                </span>
                                            @endif
                                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                                        </div>
                                    </button>
                                @else
                                    <div class="relative mb-4 aspect-[4/5] overflow-hidden rounded-2xl">
                                        <img class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110" src="{{ $item['image'] }}" alt="{{ $item['name'] }}">
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                                    </div>
                                @endif
                                <a class="block px-2" href="{{ $data['news']['page']['url'] ?? '#' }}&id={{ $item['id'] }}">
                                    <span class="mb-2 inline-block rounded-full bg-white/10 px-3 py-1 text-[10px] text-gray-300">{{ $item['publish_at'] ?? '' }}</span>
                                    <h4 class="mb-1 text-lg font-bold leading-tight transition-colors group-hover:text-le-primary">
                                        {{ $item['name'] }}</h4>
                                    <p class="text-sm text-gray-500">{{ $item['location'] ?? '' }}</p>
                                </a>
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </section>
    @endif

    @if (! empty($data['ourwork']['list']) || ! empty($data['news']['list']))
        @include('frontend::components.card-gallery-lightbox')
    @endif
@endsection