<section class="dark:bg-bodybg bg-white">
    <div class="lg:pt-140 sm:pt-90 pt-60 md:pb-90 pb-20 relative z-1">
        <div class="container">
            <div class="row">
                <div class="xl:w-[40%] w-full">
                    <div class="my-sticky top-100 pxl-heading-scroll-effect xl:mb-0 sm:mb-50 mb-20">
                        @if(isset($args['subtitle']) && $args['subtitle'] != '')
                        <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                        @endif
                        <h2 class="lg:text-8xl sm:text-7xl/65 text-[50px]/50 lg:mb-80 sm:mb-50 mb-20 heading-text xl:text-start text-center">{{ isset($args['title']) ? $args['title'] : '' }}</h2>
                        @if(isset($args['description']) && $args['description'] != '')
                        <p class="sm:text-2xl text-lg font-light">{{ $args['description'] }}</p>
                        @endif
                        @if (isset($args['view_all']) && $args['view_all'] == 'true')
                        <div class="text-center">
                            <a 
                                class="w-200 relative rounded-full md:inline-block hidden" 
                                href="{{ isset($args['page_id']) ? DzHelper::laraPageLink($args['page_id']) : 'javascript:void(0);' }}"
                            >
                                <!-- Gradient border wrapper -->
                                <div class="p-1 rounded-full dark:bg-linear-(--text-row-gradient) bg-linear-(--text-row-gradient-dark)">
                                    <!-- Actual content with background -->
                                    <div class="flex justify-center items-center size-200 rounded-full dark:bg-bodybg bg-white text-row text-center animate-rotate word-rotate-box style-1 relative z-10">
                                    <span class="word-rotate"> See Our Creative Works . </span>
                                        <svg class="block animate-rotate [animation-direction:reverse] badge__emoji" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_23_608)">
                                            <path class="dark:fill-white fill-dark" fill-rule="evenodd" clip-rule="evenodd" d="M7.49103 0.725181C3.63945 0.505475 0.496738 3.65947 0.729224 7.50995C1.35295 17.8402 4.85648 27.663 10.1926 36.2844C11.4085 38.2486 13.4387 39.3104 15.4503 39.2855C17.5007 39.2601 19.4598 38.0969 20.3533 35.8389C21.9845 31.7172 22.5403 27.2044 22.8827 22.8709C27.2253 22.4924 31.7449 21.9044 35.8657 20.2412C38.1155 19.3333 39.2666 17.3688 39.282 15.3193C39.2972 13.3084 38.2277 11.284 36.26 10.0764C27.6307 4.78061 17.8095 1.31378 7.49103 0.725181Z" fill="white"/>
                                            </g>
                                            <defs>
                                            <clipPath id="clip0_23_608">
                                                <rect width="40" height="40" fill="white"/>
                                            </clipPath>
                                            </defs>
                                        </svg>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="xl:w-[60%] w-full">

                    @php
                        $args['post_type'] = 'portfolio';
                        $blogs = HelpDesk::elementPostsByArgs($args);
                    @endphp

                    @foreach($blogs as $index => $blog)

                    {{-- SINGLE CENTER ITEM --}}
                    @if($loop->index % 3 === 0)
                        <div class="flex justify-center sm:mb-50 mb-20">
                            <div class="group max-w-650">
                                <div class="mb-20 overflow-hidden wow clip-right-animation">
                                    <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="duration-500 group-hover:scale-105 w-full">
                                </div>
                                <div class="content flex items-center justify-between">
                                    <div class="">
                                        <h4 class="text-2xxl md:mb-10">
                                            <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="link-hover">{{ $blog->title }}</a>
                                        </h4>
                                        <span class="dark:text-white/40 text-black/40 text-sm uppercase">Design - 2025</span>
                                    </div>
                                    <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="px-28 py-13 border dark:border-bordercolor border-primary rounded-5xl dark:bg-dark bg-primary overflow-hidden -translate-x-100 scale-0 group-hover:scale-100 group-hover:translate-x-0 group/second">
                                        <svg class="group/second-hover:animate-toTopFromBottom" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path class="dark:stroke-primary stroke-dark" d="M5 12H19" stroke="#E3FF75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path class="dark:stroke-primary stroke-dark" d="M12 5L19 12L12 19" stroke="#E3FF75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>

                    {{-- DOUBLE SIDE-BY-SIDE ITEMS --}}
                    @elseif($loop->index % 3 === 1)
                        <div class="flex max-sm:flex-col md:gap-60 gap-30 mb-30 3xl:-ms-40 3xl:-me-230">
                    @endif

                    @if($loop->index % 3 !== 0)
                        <div class="group flex-1">
                            <div class="mb-20 overflow-hidden wow clip-right-animation">
                                <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="duration-500 group-hover:scale-105 w-full">
                            </div>
                            <div class="content flex items-center justify-between">
                                <div class="">
                                    <h4 class="text-2xxl md:mb-10">
                                        <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="link-hover">{{ $blog->title }}</a>
                                    </h4>
                                    <span class="dark:text-white/40 text-black/40 text-sm uppercase">Design - 2025</span>
                                </div>
                                <a href="{{ DzHelper::laraBlogLink($blog->id) }}" class="px-28 py-13 border dark:border-bordercolor border-primary rounded-5xl dark:bg-dark bg-primary overflow-hidden -translate-x-100 scale-0 group-hover:scale-100 group-hover:translate-x-0 group/second">
                                    <svg class="group/second-hover:animate-toTopFromBottom" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dark:stroke-primary stroke-dark" d="M5 12H19" stroke="#E3FF75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path class="dark:stroke-primary stroke-dark" d="M12 5L19 12L12 19" stroke="#E3FF75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </a>
                            </div>
                        </div>

                        {{-- Close the pair row after 2nd item --}}
                        @if($loop->index % 3 === 2 || $loop->last)
                            </div>
                        @endif
                    @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="absolute top-0 right-0 md:w-600 w-300 overflow-hidden z-0 mix-blend-exclusion">
        <div class="pointer-events-none absolute left-0 top-0 h-full w-200 bg-[linear-gradient(90deg,rgba(0,0,0,1)_0%,_rgba(0,0,0,0.71)_62%,_rgba(0,0,0,0)_100%)] z-10"></div>
        <div class="pointer-events-none absolute bottom-0 left-0 w-full h-200 bg-[linear-gradient(0deg,rgba(0,0,0,1)_0%,_rgba(0,0,0,0.71)_62%,_rgba(0,0,0,0)_100%)] z-10"></div>
        <video src="{{ theme_asset('video/video1.mp4') }}" class="scale-125" autoplay loop muted  playsinline preload="auto"></video>
    </div>
</section>