@extends('layouts.frontend')
@section('content')

{{-- ======================== Hero Sections Begins ======================== --}}
@include('layouts.frontend-partial.slider')
{{-- ======================== Hero Sections ends ======================== --}}

{{-- ======================== Brand slider start ======================== --}}
@if (!empty($brandInfo) && $brandInfo->isNotEmpty())
<section class="py-16 md:py-24">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-10 text-center">
            <h2 class="text-3xl font-bold tracking-tight text-[#141820] sm:text-4xl">
                Trusted by Leading Companies
            </h2>
            <div class="mt-4 flex flex-col sm:flex-row justify-center items-center gap-4">
                <div class="flex items-center gap-2 border border-gray-300 rounded-full px-4 py-1">
                    <div class="flex items-center text-yellow-400">
                        @foreach ([1,2,3,4,5] as $row)
                        <span>{!! config('icons.star') !!}</span>
                        @endforeach
                    </div>
                    <span class="text-gray-600 font-semibold">4.9</span>
                </div>
                <span class="text-gray-600 font-medium">100+ Reviews</span>
            </div>
        </div>

        @include('layouts.frontend-partial.brand-slider')
    </div>
</section>
@endif
{{-- ======================== Brand slider ends ======================== --}}

{{-- ======================== Service Sections Begins ======================== --}}
@if (!empty($headerServiceList) && $headerServiceList->isNotEmpty())
<section class="py-16 md:py-24 bg-gray-50 relative z-[1]">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col items-start gap-6 lg:flex-row lg:items-center lg:justify-between mb-12">
            <div>
                <p class="text-sm font-semibold uppercase text-purple-600 tracking-wider" data-aos="fade-up" data-aos-duration="1000">
                    What we do.
                </p>
                <h2 class="text-3xl sm:text-4xl font-extrabold text-[#1a202c] mt-2" data-aos="fade-up" data-aos-duration="1000">
                    How does it even work?
                </h2>
            </div>
            <a href="{{ url('services') }}"
               class="inline-flex items-center justify-center rounded-full border border-gray-300 px-6 py-2.5 text-base font-semibold text-gray-700 transition-colors duration-300 hover:bg-gray-100 hover:text-gray-900"
               data-aos="fade-up" data-aos-duration="1000">
                Explore More
            </a>
        </div>
        
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach ($headerServiceList as $service)
            <a href="{{ url('service', $service->page_url) }}" class="group block h-full"
               data-aos="fade-up" data-aos-duration="1000">
                <div class="p-8 md:p-12 h-full flex flex-col items-center gap-6 bg-white rounded-3xl border border-gray-200 transition-all duration-300 transform group-hover:-translate-y-2 group-hover:shadow-xl">
                    @if (!empty($service->icon))
                    <div class="flex-shrink-0">
                        <img src="{{ asset($service->icon) }}"
                             class="size-16 md:size-20 transition-transform duration-300"
                             alt="{{ $service->serviceCategory->name }}">
                    </div>
                    @endif
                    <div class="text-center">
                        <h4 class="text-sm font-medium uppercase tracking-widest text-gray-500">
                            {{ !empty($service->serviceCategory->name) ? $service->serviceCategory->name : '' }}
                        </h4>
                        <h3 class="text-xl md:text-2xl font-semibold text-gray-900 mt-1 transition-colors duration-300 group-hover:text-purple-600">
                            {{ !empty($service->title) ? $service->title : '' }}
                        </h3>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif
{{-- ======================== Service Sections ends ======================== --}}

{{-- ======================== CTA section start ======================== --}}
<section class="bg-gradient-to-br from-purple-800 to-indigo-900 py-12 md:py-16 relative overflow-hidden">
    <div class="absolute inset-0 z-0 opacity-20">
        <svg class="h-full w-full" fill="none" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style="filter: blur(50px);">
            <circle cx="20" cy="80" r="15" fill="#a78bfa" class="animate-pulse-slow"></circle>
            <circle cx="80" cy="20" r="20" fill="#c4b5fd" class="animate-pulse-slow delay-700"></circle>
            <circle cx="50" cy="50" r="10" fill="#e879f9" class="animate-pulse-slow delay-300"></circle>
        </svg>
    </div>

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="flex flex-col lg:flex-row items-center justify-between text-white text-center lg:text-left">
            <div class="mb-10 lg:mb-0 lg:w-3/5" data-aos="fade-right" data-aos-duration="1000">
                <h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold leading-tight tracking-tight mb-4">
                    <span class="block text-indigo-200">Boost Your Website.</span>
                    <span class="block">Start Buy Backlink Today.</span>
                </h2>
                <p class="text-lg md:text-xl opacity-90 max-w-xl mx-auto lg:mx-0">
                    
                </p>
            </div>

            <div class="lg:w-2/5 flex justify-center lg:justify-end" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="300">
                <a href="/contact"
                    class="relative group inline-flex items-center justify-center rounded-full text-lg font-semibold px-10 py-5 transition-all duration-300 ease-out 
                           bg-white text-purple-800 shadow-2xl hover:bg-purple-50 hover:text-purple-900 
                           focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50">
                    <span class="relative z-10">Get Started Now</span>
                    <span class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
                    <svg class="ml-3 h-6 w-6 transform transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

<style>
    @keyframes pulse-slow {
        0%, 100% {
            transform: scale(1);
            opacity: 0.2;
        }
        50% {
            transform: scale(1.1);
            opacity: 0.35;
        }
    }

    .animate-pulse-slow {
        animation: pulse-slow 8s infinite ease-in-out;
    }
    .delay-300 {
        animation-delay: 1.5s;
    }
    .delay-700 {
        animation-delay: 3s;
    }
</style>
{{-- ======================== CTA section end ======================== --}}

{{-- ======================== Statistics section Begins ======================== --}}
@include('layouts.frontend-partial.statistics')
{{-- ======================== Statistics section ends ======================== --}}

{{-- ======================== Why Choose Us Sections Begins ======================== --}}
@include('layouts.frontend-partial.why-us')
{{-- ======================== Why Choose Us Sections ends ======================== --}}

{{-- ======================== Testimonial Sections Begins ======================== --}}
@include('layouts.frontend-partial.testimonial')
{{-- ======================== Testimonial Sections endss ======================== --}}

{{-- ======================== Team section start ======================== --}}
@php
$teamInfo = $sectionData->where('section', 'team')->first();
$teamInfo = (!empty($teamInfo->content) ? json_decode($teamInfo->content) : '');
@endphp
<section class="py-16 md:py-24 bg-gray-50 dark:bg-gray-900">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-12" data-aos="fade-up"
            data-aos-duration="1000">
            <div class="mb-6 md:mb-0 max-w-2xl text-center md:text-left">
                <p class="text-sm font-semibold uppercase text-purple-600 dark:text-purple-400 tracking-wider">
                    {{ !empty($teamInfo->subtitle) ? $teamInfo->subtitle : '' }}
                </p>
                <h2 class="text-3xl sm:text-4xl font-extrabold text-[#1a202c] dark:text-white mt-2">
                    {!! !empty($teamInfo->title) ? $teamInfo->title : '' !!}
                </h2>
            </div>
            <a href="{{ url('team') }}"
                class="inline-flex items-center justify-center rounded-full px-6 py-2.5 text-base font-semibold transition-colors duration-300 ring-2 ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white">
                See all Team
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-5 h-5 ml-2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                </svg>
            </a>
        </div>

        <div class="w-full grid gap-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            @if (!empty($teams) && $teams->isNotEmpty())
            @foreach ($teams as $key => $team)
            <div class="group" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="{{ $key * 150 }}">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300 overflow-hidden">
                    <div class="relative aspect-square w-full">
                        <img class="size-full object-cover transition-transform duration-300 group-hover:scale-105"
                            src="{{ asset($team->image) }}" alt="{{ $team->name }}">
                    </div>
                    
                    <div class="p-6 text-center">
                        <h4 class="text-xl font-bold text-gray-900 dark:text-white transition-colors duration-300 group-hover:text-purple-600 dark:group-hover:text-purple-400">
                            {{ !empty($team->name) ? $team->name : '' }}
                        </h4>
                        <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-1">
                            {{ !empty($team->designation) ? $team->designation : '' }}
                        </p>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</section>

{{-- ======================== Team section end ======================== --}}

{{-- ======================== FAQ Accordion section start ======================== --}}
@include('layouts.frontend-partial.faq')
{{-- ======================== FAQ Accordion section end ======================== --}}

{{-- ======================== blog section begins ======================== --}}
@php
$blogInfo = $sectionData->where('section', 'blog')->first();
$blogInfo = (!empty($blogInfo->content) ? json_decode($blogInfo->content) : '');
@endphp

<section class="py-16 md:py-24">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-12 text-center">
            <p class="text-sm font-semibold uppercase text-purple-600 tracking-wider" data-aos="fade-up"
                data-aos-duration="1000">
                {{ !empty($blogInfo->subtitle) ? $blogInfo->subtitle : '' }}
            </p>
            <h2 class="text-3xl sm:text-4xl font-extrabold text-[#1a202c] mt-2" data-aos="fade-up"
                data-aos-duration="1000">
                {!! !empty($blogInfo->title) ? $blogInfo->title : '' !!}
            </h2>
            <a href="{{ url('blog') }}"
                class="inline-flex items-center justify-center rounded-full border border-gray-300 px-6 py-2.5 text-base font-semibold text-gray-700 transition-colors duration-300 hover:bg-gray-100 hover:text-gray-900 mt-6"
                data-aos="fade-up" data-aos-duration="1000">
                See All Blog Posts
            </a>
        </div>

        @if (!empty($recentBlog) && $recentBlog->isNotEmpty())
        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($recentBlog as $blog)
            <a href="{{ url('blog-details/' . $blog->page_url) }}" class="group block" data-aos="fade-up"
                data-aos-duration="1000">
                <div class="rounded-xl overflow-hidden shadow-md transition-shadow duration-300 group-hover:shadow-lg">
                    <div class="aspect-video w-full">
                        <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                            src="{{ asset($blog->featured_image) }}" width="400" height="225" alt="{{ $blog->title }}">
                    </div>

                    <div class="p-6">
                        <h3 class="text-xl font-bold text-header transition-colors duration-300 group-hover:text-purple-600 mb-2"
                            style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
                            {{ $blog->title }}
                        </h3>
                        <div class="flex items-center gap-2 text-sm text-gray-500">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                            </svg>
                            <span>
                                {{ !empty($blog->created) ? date('M d, Y', strtotime($blog->created)) : date('M d, Y')}}
                            </span>
                        </div>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
        @endif
    </div>
</section>
{{-- ======================== blog section ends ======================== --}}

@endsection

@push('headerPartial')
<style>
    #actualRating {
        --percent: calc(var(--rating) / 5 * 100%);
        width: var(--percent);
    }

    .header {
        background-color: transparent;
    }

    .brandSlider .swiper-wrapper {
        transition-timing-function: linear !important;
    }
</style>
@endpush

@push('footerPartial')
<script src="{{ asset('/') }}vendor/js/swiper-bundle.min.js"></script>
<script>
    $(document).ready(function() {
        var swiper = new Swiper('.reviewSwiper', {
            loop: true,
            autoplay: true,
            slidesPerView: 1,
            spaceBetween: 30,
            centeredSlides: true,
            breakpoints: {
                640: {
                    slidesPerView: 1.75,
                },
                768: {
                    slidesPerView: 2,
                },
                1024: {
                    slidesPerView: 2.75,
                },
                1280: {
                    slidesPerView: 3.75,
                },

            },
            pagination: {
                el: '#swiper-pagination',
                clickable: true,
            },
        });
    });


    // see all blog button
    const btn = document.querySelector("#seeAllBlogBtn");
    const bg = btn.querySelector("#seeAllBlogBtnBg");

    const handleOrigin = (e) => {
      bg.style.left = `${e.pageX - btn.offsetLeft}px`;
      bg.style.top = `${e.pageY - btn.offsetTop}px`;
    };

    const handleTranslate = (e) => {
      const rect = btn.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const width = rect.width;
      const height = rect.height;

      const translateX = (x - width / 2) / 3;
      const translateY = (y - height / 2) / 3;
      btn.style.transform = `translate(${translateX}px, ${translateY}px)`;
    };

    const resetTranslate = () => {
      btn.style.transition = "transform 0.5s ease-out";
      btn.style.transform = "translate(0, 0)";
    };

    btn.addEventListener("mousemove", (e) => {
      handleOrigin(e);
      handleTranslate(e);
    });

    btn.addEventListener("mouseleave", resetTranslate);
</script>
@endpush