@props(['data'])
@php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));

@endphp

<section class="bg-no-repeat bg-cover">
    <div class="xl:container xl:mx-auto relative space-y-16 px-2 py-16  md:px-[20px] lg:px-[60px]">
        <!-- Blog Header -->

        <div class="w-[60%] mx-auto text-white text-center space-y-2">
            <div class="w-12 h-1 bg-[#0298c0] mx-auto rounded-full"></div>
            <h1 class="text-4xl text-[#113a5e] font-semibold"> {{ $parent['title'] }}</h1>
            <p class="text-sm text-[#4f5f83]">
                {{ $parent['subtitle'] }}
            </p>
        </div>


        <!-- Blog Carousel -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper pb-10">
                <!-- Card -->
                @if (!empty($child[0]))

                    @foreach ($child[0] as $value)
                        <div class="swiper-slide">
                            <a href="{{route('blog.view',$value->id)}}"
                                class="group/card relative block h-[450px] w-full bg-[#ffffff] rounded-md shadow-md px-6 py-6 space-y-4">
                                <!-- title -->
                                <div class="flex items-center gap-3 ">

                                    <h2 class="text-xl text-[#113a5e] font-semibold line-clamp-2">{{ $value->title }}
                                    </h2>
                                </div>

                                <!-- Image -->
                                <div class="w-full h-[250px] relative overflow-hidden">
                                    <img src="{{ asset('images/' . $value->image) }}" alt="service"
                                        class="w-full h-full rounded-md object-cover object-center">
                                    <div
                                        class="w-full h-full absolute top-0 left-0 bg-[#0298c0] rounded-md opacity-0 group-hover/card:opacity-40 transition-opacity duration-300">
                                    </div>
                                    <button
                                        class="absolute top-0 group-hover/card:top-1/2 group-hover/card:opacity-100 transition-all duration-300 opacity-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[70%] rounded-full border-white border-2 group/card-button">
                                        <div
                                            class="relative pl-4 rounded-full text-white flex items-center justify-between">
                                            <span
                                                class="absolute top-0 right-0 bg-white w-12 h-full rounded-full -z-10 group-hover/card-button:w-full transition-[width] duration-300"></span>
                                            <h2
                                                class="group-hover/card-button:text-[#0298c0] transition-colors duration-300 font-semibold text-sm">
                                                VIEW
                                                DETAILS</h2>
                                            <span
                                                class="w-12 h-12 bg-white text-[#0298c0] rounded-full flex items-center justify-center"><i
                                                    class="fa-solid fa-angle-right"></i></span>
                                        </div>
                                    </button>
                                </div>
                                <!-- Details -->
                                <p class="line-clamp-3 text-[#113a5e] text-[12px] ">
                                    {{ strip_tags(html_entity_decode($value->description)) }}</p>
                            </a>
                        </div>
                    @endforeach
                @endif

            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!-- Swiper Navigation -->
        @if (!empty($child[0]))
            @if (count($child[0]) > 3)
                <div
                    class="swiper-custon-nav absolute left-0 top-1/2 hidden w-full -translate-y-1/2 justify-between px-4 py-2 text-xl text-[#ffffff] lg:flex">
                    <!-- Left Navigation Button -->
                    <span id="card-nav-left"
                        class="transition-color cursor-pointer rounded-full bg-[#0861a7] px-3 py-1 duration-300 hover:bg-[#113a5e]"><i
                            class="fa-solid fa-chevron-left"></i></span>
                    <!-- Right Navigation Button -->
                    <span id="card-nav-right"
                        class="transition-color cursor-pointer rounded-full bg-[#0861a7] px-3 py-1 duration-300 hover:bg-[#113a5e]">
                        <i class="fa-solid fa-chevron-right"></i>
                    </span>
                </div>
            @endif
        @endif


    </div>
</section>