@extends('layouts.app')

@section('title', __('pages.meta.product-category-3.title'))
@section('meta_description', __('pages.meta.product-category-3.description'))
@section('meta_keywords', __('pages.meta.product-category-3.keywords'))
@section('meta_author', __('pages.meta.author'))

@php
    $data = $productCategory3Data ?? [];
    $bannerSlides = data_get($data, 'banner.slides', []);
    $breadcrumbsTop = data_get($data, 'breadcrumbs.top', []);
    $luxurySection = data_get($data, 'luxurySection', []);
    $transport = data_get($data, 'transport', []);
    $video = data_get($data, 'video', []);
    $videoItems = data_get($video, 'items', []);
    $cruiseExpert = data_get($data, 'cruiseExpert', []);
    $curated = data_get($data, 'curatedItineraries', []);
    $curatedGroups = data_get($curated, 'groups', []);
    $about = data_get($data, 'about', []);
    $reviews = data_get($data, 'reviews', []);
    $floatingActions = data_get($data, 'floatingActions', []);
    $mobileNavData = data_get($data, 'mobileNavData', []);
@endphp

@section('content')
<div class="site" id="product-category-3">
        @include('pages.home.shared.header')

        <main class="site-content">

            <section class="section-1-banner pt-0">
                <div class="section-1-section">
                    <div class="section-1-swiper" data-swiper data-loop="true" data-speed="1000" data-space="30"
                        data-effect="slide" data-next=".swiper-button-next" data-prev=".swiper-button-prev"
                        data-pagination=".swiper-pagination-section-1">
                        <div class="container section-1-navigation">
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>

                        <div class="swiper-pagination swiper-pagination-section-1"></div>

                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach ($bannerSlides as $index => $slide)
                                    <div class="swiper-slide slide-{{ $index + 1 }}" @if(!empty($slide['image'])) style="background-image: url('{{ $slide['image'] }}')" @endif>
                                        <div class="section-1-content container">
                                            <h1 class="section-1-title section-title text-white fw-600 text-uppercase text-center mb-2">{{ $slide['title'] ?? '' }}</h1>
                                            <p class="section-1-subtitle text-white text-16 text-center">{{ $slide['subtitle'] ?? '' }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-3__product-3 pt-10px">
                <div class="container luxury-section">
                    <div class="breadcrumb mb-30px">
                        @foreach ($breadcrumbsTop as $index => $item)
                            @if ($index === 0)
                                <span>{{ $item['text'] ?? '' }}</span>
                            @else
                                <span class="px-2">/</span>
                                @if (!empty($item['link']))
                                    <a class="breadcrumb-link color-body" href="{{ $item['link'] }}">{{ $item['text'] ?? '' }}</a>
                                @else
                                    <span>{{ $item['text'] ?? '' }}</span>
                                @endif
                            @endif
                        @endforeach
                    </div>
                    <h2 class="section-title">{{ $luxurySection['title'] ?? '' }}</h2>
                    <p class="section-subtitle">{{ $luxurySection['subtitle'] ?? '' }}</p>

                    <div class="section-3__product-3--content">
                        <div class="row features-grid">
                            @foreach (data_get($luxurySection, 'features', []) as $feature)
                                <div class="col-6 col-lg-3">
                                    <div class="feature-item">
                                        <div class="feature-number">{{ $feature['number'] ?? '' }}</div>
                                        <div class="feature-text">
                                            <h4>{{ $feature['title'] ?? '' }}</h4>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-4__product-3">
                <div class="container">
                    <div id="product-3__swiper" class="transport-swiper relative" data-swiper data-loop="true"
                        data-speed="1000" data-slides-mobile="2" data-slides-desktop="4" data-space="30"
                        data-effect="slide" data-next=".product-3__swiper--next" data-prev=".product-3__swiper--prev">
                        <div class="swiper-button-prev-border product-3__swiper--prev"></div>
                        <div class="swiper-button-next-border product-3__swiper--next"></div>
                        <div class="swiper transportSwiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($transport, 'items', []) as $item)
                                    <div class="swiper-slide">
                                        <a href="{{ $item['link'] ?? '#' }}" class="transport-card">
                                            <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" alt="{{ $item['alt'] ?? '' }}">
                                            <div class="transport-overlay">
                                                <h3 class="transport-title">{{ $item['title'] ?? '' }}</h3>
                                                <button class="btn-color-primary">{{ $item['buttonText'] ?? '' }}</button>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-5__product-3">
                <div class="container">
                    <div class="video-swiper-wrapper relative" data-swiper data-loop="true" data-speed="1000"
                        data-space="30" data-slides-mobile="1" data-slides-desktop="2" data-effect="slide"
                        data-next=".video-swiper-next" data-prev=".video-swiper-prev"
                        data-watch-overflow="false" data-loop-additional-slides="2">
                        <div class="swiper-button-prev-border video-swiper-prev"></div>
                        <div class="swiper-button-next-border video-swiper-next"></div>
                        <div class="swiper video-swiper">
                            <div class="swiper-wrapper">
                                @if (!empty($videoItems))
                                    @foreach ($videoItems as $item)
                                        <div class="swiper-slide">
                                            <div class="video-embed">
                                                <iframe loading="lazy" src="{{ $item['src'] ?? '' }}" title="{{ $item['title'] ?? 'Video' }}"
                                                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
                                                    allowfullscreen>
                                                </iframe>
                                            </div>
                                        </div>
                                    @endforeach
                                @elseif (!empty($video['src']))
                                    <div class="swiper-slide">
                                        <div class="video-embed">
                                            <iframe loading="lazy" src="{{ $video['src'] }}" title="Video"
                                                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
                                                allowfullscreen>
                                            </iframe>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-5-product-3">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <div class="image">
                                <img loading="lazy" decoding="async" src="{{ $cruiseExpert['image'] ?? '' }}" alt="{{ $cruiseExpert['alt'] ?? '' }}">
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <h2 class="section-title text-20">{{ $cruiseExpert['title'] ?? '' }}</h2>
                            <p class="desc pre-line">{{ $cruiseExpert['description'] ?? '' }}</p>
                            <div class="text-center">
                                <a href="{{ $cruiseExpert['buttonLink'] ?? '#' }}" class="btn-gradient inline-block mt-5">{{ $cruiseExpert['buttonText'] ?? '' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="section-4 section-4-product-1">
                <div class="container">
                    <div class="mb-4 text-center section-4-product-1-header">
                        <h2 class="section-title mb-4">{{ $curated['curatedItineraries'] ?? '' }}</h2>
                        <p class="text-left">{!! $curated['description'] ?? '' !!}</p>
                        <p class="text-20 fw-600 text-left mb-4">{{ data_get($curatedGroups, '0.subtitle', '') }}</p>
                    </div>
                    <div id="section-4-swiper" class="relative" data-swiper data-loop="true" data-space="30"
                        data-slides-mobile="2" data-slides-desktop="4" data-prev=".swiper4-prev"
                        data-next=".swiper4-next">
                        <div class="swiper-button-prev-border swiper4-prev"></div>
                        <div class="swiper-button-next-border swiper4-next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($curatedGroups, '0.items', []) as $item)
                                    <div class="swiper-slide">
                                        <a href="{{ $item['link'] ?? '#' }}" class="text-decoration-none text-reset">
                                            <div class="card h-100 section-4-card">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" class="card-img-top img-fluid fit-cover" alt="{{ $item['alt'] ?? '' }}">
                                                <div class="card-body">
                                                    <h3 class="h6 card-title fw-500 mb-3">{{ $item['title'] ?? '' }}</h3>
                                                    <p class="card-text text-muted mb-3">{{ $item['location'] ?? '' }}</p>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="fw-500 text-16">{{ $item['price'] ?? '' }}</span>
                                                        @if (!empty($item['sale']))
                                                            <span class="span-gradient">{{ $item['sale'] }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <p class="text-20 fw-600 text-left sub-title">{{ data_get($curatedGroups, '1.subtitle', '') }}</p>

                    <div id="section-4__product--group-2" class="relative" data-swiper data-loop="true"
                        data-speed="1000" data-space="30" data-effect="slide" data-slides-mobile="2"
                        data-slides-desktop="4" data-next=".swiper4__product-2--next"
                        data-prev=".swiper4__product-2--prev">
                        <div class="swiper-button-prev-border swiper4__product-2--prev"></div>
                        <div class="swiper-button-next-border swiper4__product-2--next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($curatedGroups, '1.items', []) as $item)
                                    <div class="swiper-slide">
                                        <a href="{{ $item['link'] ?? '#' }}" class="text-decoration-none text-reset">
                                            <div class="card h-100 section-4-card">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" class="card-img-top img-fluid fit-cover" alt="{{ $item['alt'] ?? '' }}">
                                                <div class="card-body">
                                                    <h3 class="h6 card-title fw-500 mb-3">{{ $item['title'] ?? '' }}</h3>
                                                    <p class="card-text text-muted mb-3">{{ $item['location'] ?? '' }}</p>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="fw-500 text-16">{{ $item['price'] ?? '' }}</span>
                                                        @if (!empty($item['sale']))
                                                            <span class="span-gradient">{{ $item['sale'] }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <p class="text-20 fw-600 text-left sub-title">{{ data_get($curatedGroups, '2.subtitle', '') }}</p>

                    <div id="section-4__product--group-3" class="py-4 relative" data-swiper data-loop="true"
                        data-speed="1000" data-space="30" data-effect="slide" data-slides-mobile="2"
                        data-slides-desktop="4" data-next=".swiper4__product-3--next"
                        data-prev=".swiper4__product-3--prev">

                        <div class="swiper-button-prev-border swiper4__product-3--prev"></div>
                        <div class="swiper-button-next-border swiper4__product-3--next"></div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach (data_get($curatedGroups, '2.items', []) as $item)
                                    <div class="swiper-slide">
                                        <a href="{{ $item['link'] ?? '#' }}" class="text-decoration-none text-reset">
                                            <div class="card h-100 section-4-card">
                                                <img loading="lazy" decoding="async" src="{{ $item['image'] ?? '' }}" class="card-img-top img-fluid fit-cover" alt="{{ $item['alt'] ?? '' }}">
                                                <div class="card-body">
                                                    <h3 class="h6 card-title fw-500 mb-3">{{ $item['title'] ?? '' }}</h3>
                                                    <p class="card-text text-muted mb-3">{{ $item['location'] ?? '' }}</p>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="fw-500 text-16">{{ $item['price'] ?? '' }}</span>
                                                        @if (!empty($item['sale']))
                                                            <span class="span-gradient">{{ $item['sale'] }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <p class="mt-5">{!! $curated['disclaimer'] ?? '' !!}</p>
                </div>
            </section>

            <section class="section-7">
                <div class="container">
                    <div class="accordion accordion-flush" id="accordionFlushExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingOne">
                                <button class="section-title accordion-button collapsed p-0" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false"
                                    aria-controls="flush-collapseOne">
                                    {{ $about['title'] ?? '' }}
                                </button>
                            </h2>
                            <div id="flush-collapseOne" class="accordion-collapse collapse"
                                aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body">{!! $about['content'] ?? '' !!}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div class="container">
                    <div class="breadcrumb mb-30px">
                        @foreach ($breadcrumbsTop as $index => $item)
                            @if ($index === 0)
                                <span>{{ $item['text'] ?? '' }}</span>
                            @else
                                <span class="px-2">/</span>
                                @if (!empty($item['link']))
                                    <a class="breadcrumb-link color-body" href="{{ $item['link'] }}">{{ $item['text'] ?? '' }}</a>
                                @else
                                    <span>{{ $item['text'] ?? '' }}</span>
                                @endif
                            @endif
                        @endforeach
                    </div>
                    <div class="border-top border-secondary"></div>
                </div>
            </section>

            @include('pages.home.shared.section-benefits', ['sectionBenefitsData' => $sectionBenefits])

            <section class="section-6-product-2">
                <div class="container">
                    @include('pages.home.shared.trustpilot-section', ['trustpilotData' => $reviews])
                </div>
            </section>
        </main>

        @include('pages.home.shared.footer')
        @include('pages.home.shared.popup-booking')

        <div class="floating-actions" id="floatingActions">
            @foreach ($floatingActions as $action)
                <a href="{{ $action['href'] ?? '#' }}" class="floating-btn{{ ($action['id'] ?? '') === 'saveBtn' ? ' save-btn' : '' }}" id="{{ $action['id'] ?? '' }}">
                    <img loading="lazy" decoding="async" src="{{ $action['img'] ?? '' }}" width="{{ $action['width'] ?? 25 }}" height="{{ $action['height'] ?? 25 }}" alt="{{ $action['alt'] ?? '' }}">
                    @if (!empty($action['badge']))
                        <span class="badge">{{ $action['badge'] }}</span>
                    @endif
                    @if (!empty($action['text']))
                        <span class="save-bag">{{ $action['text'] }}</span>
                    @endif
                </a>
            @endforeach
        </div>

        <div class="mobile-bottom-nav" id="mobileBottomNav">
            <div class="nav-container bottom-menu">
                @foreach ($mobileNavData as $item)
                    @php
                        $isTrends = ($item['href'] ?? '') === './trends.html';
                        $hasTwoStates = !empty($item['imgCurrent']) && !empty($item['imgNotCurrent']);
                        $isHome = in_array($item['href'] ?? '', ['/', '/vi', './index.html'], true);
                    @endphp
                    @if ($isTrends)
                        <a href="{{ $item['href'] ?? '#' }}" class="nav-item nav-top-bottom" id="trends">
                            <div class="nav-icon icon-top-bottom-mobile">
                                <img loading="lazy" decoding="async"class="not-current" src="{{ $item['imgNotCurrent'] ?? '' }}" width="50" height="50" alt="{{ $item['alt'] ?? '' }}">
                                <img loading="lazy" decoding="async"class="current-page" src="{{ $item['imgCurrent'] ?? '' }}" width="50" height="50" alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @elseif ($hasTwoStates)
                        <a href="{{ $item['href'] ?? '#' }}" class="nav-item" @if($isHome) id="home" @endif>
                            <div class="nav-icon">
                                <img loading="lazy" decoding="async"class="current-page" src="{{ $item['imgCurrent'] ?? '' }}" width="25" height="25" alt="{{ $item['alt'] ?? '' }}">
                                <img loading="lazy" decoding="async"class="not-current" src="{{ $item['imgNotCurrent'] ?? '' }}" width="25" height="25" alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @else
                        <a href="{{ $item['href'] ?? '#' }}" class="nav-item">
                            <div class="nav-icon">
                                <img loading="lazy" decoding="async" src="{{ $item['imgNotCurrent'] ?? '' }}" width="25" height="25" alt="{{ $item['alt'] ?? '' }}">
                            </div>
                            <div class="nav-label">{{ $item['label'] ?? '' }}</div>
                        </a>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        window.__HOME_SSR_SHARED__ = true;
        window.__HOME_UI_TEXTS = @json($homeSharedData['ui'] ?? []);
    </script>
    <script src="{{ asset('assets/js/lib/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/lib/swiper-bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom-swiper.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/intlTelInput.min.js"></script>
    <script src="{{ asset('assets/js/header-events.js') }}"></script>
    <script src="{{ asset('assets/js/popup-booking.js') }}"></script>
    <script src="{{ asset('assets/js/home.js') }}"></script>
@endpush