@once
    {{-- ================= CATEGORY SEO ================= --}}
    @push('head')
        <title>{{ $category->meta_title ?? $category->name }}</title>
        <meta name="description"
            content="{{ $category->meta_description ?? \Illuminate\Support\Str::limit(strip_tags($category->description), 160) }}">
        <meta name="keywords" content="{{ $category->meta_keywords }}">
        <link rel="canonical" href="{{ $category->canonical_url ?? url()->current() }}">
        <meta property="og:title" content="{{ $category->og_title ?? ($category->meta_title ?? $category->name) }}">
        <meta property="og:description" content="{{ $category->og_description ?? $category->meta_description }}">
        <meta property="og:image" content="{{ $category->og_image ?? asset('default-og.jpg') }}">
        <meta property="og:url" content="{{ url()->current() }}">
    @endpush


    {{-- ================= CATEGORY SCHEMA FROM DB ================= --}}
    @foreach ([$category->schema_markup, $category->faq_schema, $category->org_schema, $category->webpage_schema, $category->article_schema, $category->breadcrumb_schema, $category->localbusiness_schema] as $schema)
        @if (!empty($schema))
            @push('schema')
                {!! $schema !!}
            @endpush
        @endif
    @endforeach
@endonce


<div>

    <!-- ================= HERO (TEXT ONLY) ================= -->
    <h1
        class="px-5 pt-10 pb-6
           md:px-10 lg:px-20 lg:pt-20 lg:pb-8
           text-[36px] leading-tight
           sm:text-[44px]
           md:text-5xl md:leading-[1]
           lg:text-[120px] lg:leading-[0.9]
           xl:text-9xl xl:leading-[0.95]
           font-black uppercase">

        {{ $category->name }}

    </h1>


    <!-- ================= VIDEO ================= -->
    @if (!empty($category->video_url))
        <section class="px-5 md:px-10 lg:px-20 pt-0 pb-6 md:pb-16 mt-5">
            <video src="{{ $category->video_url }}" playsinline autoplay loop muted
                class="w-full aspect-video object-cover object-top">
            </video>
        </section>
    @endif



    <!-- ================= SERVICES + INTRO ================= -->

    <section class="bg-white 
               px-5 md:px-12 lg:px-20 
               py-8 md:py-20">

        <div class="max-w-full mx-auto space-y-10 md:space-y-20">

            <!-- BLOCK 1 -->
            <div class="grid md:grid-cols-12 gap-6 md:gap-8 items-start">

                <!-- LEFT TITLE -->
                <div class="md:col-span-4 mt-2 md:mt-5">
                    <h2 class="text-xl sm:text-2xl md:text-3xl font-semibold leading-snug">
                        {{ $category->h1 ?? 'No Data Found' }}
                    </h2>
                </div>

                <!-- RIGHT CONTENT -->
                <div
                    class="md:col-span-8 
                        md:border-l-4 border-gray-300 
                        md:pl-6 
                        pt-2 md:pt-0">

                    <p class="text-sm sm:text-base md:text-lg text-gray-600 leading-relaxed mb-4 text-justify">
                        {!! nl2br(trim(preg_replace('/\n+/', "\n", $category->description_sub ?? 'No Description'))) !!}
                    </p>
                </div>

            </div>

            <!-- BLOCK 2 -->
            <div class="grid md:grid-cols-12 gap-6 md:gap-8 items-start">

                <!-- LEFT TITLE -->
                <div class="md:col-span-4 mt-2 md:mt-5">
                    <h2 class="text-xl sm:text-2xl md:text-3xl font-semibold leading-snug">
                        {{ $category->h2 ?? 'No Data Found' }}
                    </h2>
                </div>

                <!-- RIGHT CONTENT -->
                <div
                    class="md:col-span-8 
                        md:border-l-4 border-gray-300 
                        md:pl-6 
                        pt-2 md:pt-0">

                    <p class="text-sm sm:text-base md:text-lg text-gray-600 leading-relaxed mb-4 text-justify">
                        {!! nl2br(trim(preg_replace('/\n+/', "\n", $category->description ?? ''))) !!}
                    </p>

                </div>

            </div>

            {{-- BLOCK 3 --}}
            @if (!empty($category->h2_title_3) || !empty($category->description_3))
                <div class="grid md:grid-cols-12 gap-6 md:gap-8 items-start">

                    <!-- LEFT TITLE -->
                    <div class="md:col-span-4 mt-2 md:mt-0">
                        @if (!empty($category->h2_title_3))
                            <h2 class="text-xl sm:text-2xl md:text-3xl font-semibold leading-snug">
                                {{ $category->h2_title_3 }}
                            </h2>
                        @endif
                    </div>

                    <!-- RIGHT CONTENT -->
                    <div
                        class="md:col-span-8 
                            md:border-l-4 border-gray-300 
                            md:pl-6 
                            pt-2 md:pt-0">

                        @if (!empty($category->description_3))
                            <p class="text-sm sm:text-base md:text-lg text-gray-600 leading-relaxed mb-4 text-justify">
                                {!! nl2br(trim(preg_replace('/\n+/', "\n", $category->description_3 ?? ''))) !!}
                            </p>
                        @endif

                    </div>

                </div>
            @endif

        </div>

    </section>

    <section class="bg-[#f8fafc] px-6 md:px-12 lg:px-20 pt-8 pb-24 md:py-24 lg:py-20">

        <div class="max-w-full mx-auto">

            <div class="mt-3 mb-8 md:mt-5 md:mb-5">

                <!-- SMALL LABEL -->
                <p
                    class="text-[11px] md:text-xs tracking-[0.25em] md:tracking-[0.3em] uppercase mb-3 md:mb-4 
                text-gray-600 font-medium 
                border-l-2 border-gray-900 pl-3">
                    Our Services
                </p>

                <!-- HEADING -->
                <h2
                    class="text-2xl sm:text-3xl md:text-5xl font-semibold text-gray-900 leading-tight md:leading-[1.1] max-w-4xl">

                    <span class="block">
                        {{ $category->categoryServices->first()->heading ?? 'Complete Brand Consulting' }}
                    </span>

                </h2>
            </div>

            <!-- SERVICES -->
            <div class="space-y-5 md:space-y-6 mt-0 md:mt-10">

                @foreach ($category->categoryServices as $index => $item)
                    @php
                        $service = $item->service;
                    @endphp

                    <a href="{{ url('services/' . $category->slug . '/' . $service->slug) }}"
                        class="group relative flex flex-col md:flex-row md:items-center md:justify-between
                    bg-white px-4 md:px-8 py-4 md:py-6 
                    overflow-hidden transition-all duration-300 hover:shadow-xl">

                        <!-- BORDER (UNCHANGED) -->
                        <span class="absolute inset-0 pointer-events-none overflow-hidden">

                            <span
                                class="absolute top-0 left-0 h-[2px] w-0 bg-[#f38121]
                            transition-all duration-500 group-hover:w-full"></span>

                            <span
                                class="absolute top-0 right-0 w-[2px] h-0 bg-[#f38121]
                            transition-all duration-500 delay-150 group-hover:h-full"></span>

                            <span
                                class="absolute bottom-0 left-0 h-[2px] w-0 bg-[#f38121]
                            transition-all duration-500 delay-300 group-hover:w-full"></span>

                            <span
                                class="absolute top-0 left-0 w-[2px] h-0 bg-[#f38121]
                            transition-all duration-500 delay-450 group-hover:h-full"></span>

                        </span>

                        <!-- LEFT -->
                        <div class="flex items-start md:items-center gap-3 md:gap-5 flex-1">

                            <!-- NUMBER -->
                            <div
                                class="w-9 h-9 md:w-12 md:h-12 flex items-center justify-center rounded-sm 
                            bg-gray-100 text-gray-900 font-semibold border shrink-0
                            group-hover:bg-[#f38121]/10 group-hover:text-[#f38121] transition
                            text-sm md:text-base">
                                {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
                            </div>

                            <!-- TEXT -->
                            <div class="flex-1">

                                <h3
                                    class="text-base sm:text-lg md:text-2xl font-semibold text-gray-900 
                                group-hover:text-[#f38121] transition leading-snug">
                                    {{ $item->custom_title ?? $service->title }}
                                </h3>

                                <p
                                    class="mt-1 md:mt-2 text-sm sm:text-base md:text-lg text-gray-600 text-justify
                                group-hover:text-gray-800 transition 
                                leading-6 md:leading-7 
                                md:text-justify
                                max-w-xl md:max-w-2xl">
                                    {!! nl2br(e($item->custom_description ?? '')) !!}
                                </p>

                            </div>

                        </div>

                        <!-- RIGHT -->
                        <div
                            class="flex items-center gap-3 md:gap-4 
                        mt-3 md:mt-0 shrink-0 
                        w-full md:w-auto 
                        justify-end">

                            <div
                                class="flex items-center justify-center 
                            w-8 h-8 md:w-10 md:h-10 rounded-sm 
                            bg-gray-100 group-hover:bg-[#f38121]/10 transition">

                                <svg xmlns="http://www.w3.org/2000/svg"
                                    class="w-4 h-4 md:w-5 md:h-5 text-gray-600 
                                group-hover:text-[#f38121] 
                                transition-transform duration-300 group-hover:translate-x-1"
                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">

                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 12h16M12 5l7 7-7 7" />
                                </svg>

                            </div>

                        </div>

                    </a>
                @endforeach

            </div>
        </div>

    </section>
    <x-brands />


    @if (!empty($category->why_choose_title) || !empty($category->why_choose_description))
        <section class="bg-[#fff] px-5 md:px-12 lg:px-20 py-12 md:py-20">

            <div class="max-w-5xl">

                <span class="text-xs uppercase tracking-[3px] text-gray-400">
                    Why Choose Us
                </span>

                <h2
                    class="mt-2 md:mt-3 text-2xl sm:text-3xl md:text-5xl font-semibold text-gray-900 leading-tight md:leading-[1.1] max-w-3xl">
                    {!! $category->why_choose_title !!}
                </h2>

                <div class="w-16 h-[2px] bg-black mt-4 md:mt-5"></div>

                @php
                    $paragraphs = preg_split('/\n+/', $category->why_choose_description);
                @endphp

                <!-- PARA 1 -->
                <p class="mt-5 md:mt-6 text-[14px] md:text-lg text-gray-600 leading-relaxed text-justify max-w-3xl">
                    {!! nl2br(trim($paragraphs[0] ?? '')) !!}
                </p>

                <!-- PARA 2 -->
                <p class="mt-3 md:mt-4 text-[14px] md:text-base text-gray-500 leading-relaxed text-justify max-w-3xl">
                    {!! nl2br(trim($paragraphs[1] ?? '')) !!}
                </p>

            </div>

        </section>
    @else
        <div class="px-6 md:px-12 lg:px-20 py-8 md:py-10 text-center text-gray-400 text-sm">
            Why Choose content not available
        </div>
    @endif



   <section class="mt-5 bg-[#f8fafc] px-6 md:px-12 lg:px-20 py-10">

    <h2 class="mb-6 md:mb-8 max-w-4xl text-2xl sm:text-3xl md:text-5xl font-semibold text-gray-900 leading-tight md:leading-[1.1] tracking-tight">
        <span>Other Services</span>
        <span class="text-[#f38121] ml-2 relative inline-block">
            We Offer
            <span class="absolute left-0 -bottom-1 md:-bottom-2 w-full h-[2px] md:h-[3px] bg-[#f38121] rounded-full"></span>
        </span>
    </h2>

    @php
        // Services Array
        $services = [
            ['title' => 'Brand Strategy', 'slug' => 'brand-strategy', 'category' => 'strategy-consulting', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/brand-strategy.png'],
            ['title' => 'Rural & Semi-Urban Marketing', 'slug' => 'rural-semi-urban-marketing', 'category' => 'strategy-consulting', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/rural-marketing.png'],
            ['title' => 'PR and Media', 'slug' => 'pr-and-media', 'category' => 'strategy-consulting', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/pr-media.png'],
            ['title' => 'Brand Building & Communication', 'slug' => '#', 'category' => 'brand-building-communication', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/brand-communication.png'],
            ['title' => 'Ad Film Production', 'slug' => 'ad-film-production', 'category' => 'brand-building-communication', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/ad-film.png'],
            ['title' => 'Brand Identity, Design And Packaging', 'slug' => 'branding-and-packaging', 'category' => 'brand-building-communication', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/packaging.png'],
            ['title' => 'Content Creation', 'slug' => 'content-creation', 'category' => 'brand-building-communication', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/content-creation.png'],
            ['title' => 'Podcast Channel Management & Distribution', 'slug' => 'podcast-management', 'category' => 'brand-building-communication', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/podcast.png'],
            ['title' => 'AI-Enabled Automation', 'slug' => 'ai-enabled-automation', 'category' => 'digital-experiential', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/ai.png'],
            ['title' => 'Website Design & Development', 'slug' => 'website-design-development', 'category' => 'digital-experiential', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/website-development.png'],
            ['title' => 'Digital Marketing', 'slug' => '#', 'category' => 'digital-marketing', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/visibility.png'],
            ['title' => 'Performance Marketing Agency', 'slug' => 'performance-marketing-agency', 'category' => 'digital-marketing', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/performance-marketing.png'],
            ['title' => 'Search Engine Optimization', 'slug' => 'seo-agency-mumbai', 'category' => 'digital-marketing', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/strategy-consulting.png'],
            ['title' => 'Social Media Marketing', 'slug' => 'social-media-marketing-agency', 'category' => 'digital-marketing', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/social-media.png'],
            ['title' => 'Celebrity & Influencer Marketing', 'slug' => '#', 'category' => 'celebrity-influencer-marketing', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/celebrity-infulencer.png'],
            ['title' => 'Influencer Marketing', 'slug' => 'influencer-marketing', 'category' => 'celebrity-influencer-marketing', 'icon' => 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/logo/influencer-marketing.png'],
        ];

        // Get the current category from the URL
        $currentCategory = request()->segment(2);

        // Filter out the service matching the current category and slug
        $filteredServices = collect($services)->filter(function ($service) use ($currentCategory) {
            return $service['category'] !== $currentCategory && $service['slug'] !== request()->segment(3);
        })->toArray();
    @endphp

    <div class="relative overflow-visible">
        <!-- LEFT -->
        <div class="swiper-button-prev after:!hidden !absolute !top-1/2 !-translate-y-1/2 !w-8 !h-8 md:!w-10 md:!h-10 !bg-white !rounded-full !shadow flex items-center justify-center !left-[5px] md:!left-[-20px] z-20">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 md:w-4 md:h-4 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
            </svg>
        </div>

        <!-- RIGHT -->
        <div class="swiper-button-next after:!hidden !absolute !top-1/2 !-translate-y-1/2 !w-8 !h-8 md:!w-10 md:!h-10 !bg-white !rounded-full !shadow flex items-center justify-center !right-[5px] md:!right-[-20px] z-20">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 md:w-4 md:h-4 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
            </svg>
        </div>

        <!-- SWIPER -->
        <div class="swiper mySwiper w-full overflow-visible">
            <div class="swiper-wrapper">
                @foreach ($filteredServices as $service)
                    <div class="swiper-slide px-2 !overflow-visible">
                        <a href="{{ route('services.category.service', [$service['category'], $service['slug']]) }}" class="block group">
                            <div class="bg-white border border-gray-200 rounded-2xl px-4 md:px-6 py-6 md:py-8 text-center min-h-[200px] md:min-h-[240px] lg:min-h-[260px] flex flex-col justify-center items-center transition duration-300 hover:-translate-y-2 md:hover:-translate-y-3 hover:scale-[1.03] md:hover:scale-105 hover:z-10 hover:shadow-[0_20px_40px_rgba(0,0,0,0.08)]">
                                <img src="{{ $service['icon'] }}" loading="lazy" class="w-12 h-12 md:w-16 md:h-16 object-contain mb-3 md:mb-4 transition-transform duration-300 group-hover:scale-110">
                                <p class="text-[14px] sm:text-base md:text-lg lg:text-xl font-semibold text-gray-900 leading-snug transition-all duration-300 group-hover:text-[#f38121] relative inline-block text-center">
                                    {{ $service['title'] }}
                                    <span class="absolute left-0 -bottom-1 w-0 h-[2px] bg-[#f38121] transition-all duration-300 group-hover:w-full"></span>
                                </p>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>



    @if (!empty($category->growth_title) || !empty($category->growth_description))

        <section class="mt-5 px-5 md:px-12 lg:px-20 py-14 md:py-24 lg:py-10">

            <div class="max-w-full mx-auto">

                <div>
                    @php
                        $title = trim($category->growth_title ?? '');
                        $title = preg_replace('/\s+/', ' ', $title);

                        $words = explode(' ', $title);

                        $line1 = implode(' ', array_slice($words, 0, 2)); // Let’s Turn
                        $line2 = implode(' ', array_slice($words, 2, 4)); // Influencers & Celebrities into
                        $line3 = implode(' ', array_slice($words, 6)); // Growth Engines for Your Brand

                        // 🔥 Highlight only "Influencers & Celebrities"
                        $line2 = preg_replace(
                            '/(Influencers\s*&\s*Celebrities)/i',
                            '<span class="text-[#f38121]">$1</span>',
                            $line2,
                        );

                        // Prevent bad break
                        $line2 = str_replace('into', 'into&nbsp;', $line2);
                    @endphp
                    <!-- HEADING -->
                    <h2
                        class="text-2xl sm:text-3xl md:text-5xl font-semibold text-gray-900 
                        leading-tight md:leading-[1.1] max-w-4xl">

                        <span class="block">
                            {{ $line1 }}
                        </span>

                        <span class="block">
                            {!! $line2 !!}
                        </span>

                        <span class="block">
                            {{ $line3 }}
                        </span>

                    </h2>
                    <!-- PARAGRAPH -->
                    @if (!empty($category->growth_description))
                        <p
                            class="mt-5 md:mt-6 text-[14px] md:text-lg text-gray-600 leading-relaxed max-w-2xl text-justify">
                            {{ $category->growth_description }}
                        </p>
                    @endif

                    <!-- CTA -->
                    <div class="mt-8 md:mt-10">
                        <a href="{{ url('/contact-us') }}" wire:navigate
                            class="inline-flex items-center justify-center
                        px-6 md:px-7 py-2.5 text-[14px] md:text-[16px] font-medium
                        bg-[#f38121] text-white
                        border border-transparent
                        transition-all duration-300 ease-out
                        hover:bg-white hover:text-black hover:border-black">

                            Start a Project

                            <span class="ml-2 transition-transform duration-300">
                                →
                            </span>
                        </a>
                    </div>

                </div>

            </div>

        </section>
    @else
        <!-- FALLBACK -->
        <div class="px-6 md:px-12 lg:px-20 py-10 text-center text-gray-400 text-sm">
            Growth content not available
        </div>
    @endif
    <!-- ================= CONTACT ================= -->
    <livewire:contact-form />



</div>