@once
    @push('head')
        <title>{{ $service->meta_title ?? $service->title }}</title>
        <meta name="description"
            content="{{ $service->meta_description ?? \Illuminate\Support\Str::limit(strip_tags($service->description), 160) }}">
        <meta name="keywords" content="{{ $service->meta_keywords }}">
        <link rel="canonical" href="{{ $service->canonical_url ?? url()->current() }}">

        <meta property="og:title" content="{{ $service->og_title ?? ($service->meta_title ?? $service->title) }}">
        <meta property="og:description" content="{{ $service->og_description ?? $service->meta_description }}">
        <meta property="og:image" content="{{ $service->og_image ?? asset('default-og.jpg') }}">
        <meta property="og:url" content="{{ url()->current() }}">
    @endpush



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




<div>
    <!-- ================= HERO (TEXT ONLY) ================= -->
    <h3
        class="px-5 pt-20 pb-10
           md:px-10 lg:px-20 lg:py-30
           text-[48px] leading-tight
           sm:text-[56px]
           md:text-5xl md:leading-[1]
           lg:text-[120px] lg:leading-[0.9]
           xl:text-9xl xl:leading-[0.95]
           font-black">
        {{ $service->title }}
    </h3>


    <!-- ================= VIDEO (SCROLL TO VIEW) ================= -->
    @if ($service->hero_video)
        <section
            class="px-5 md:px-10 lg:px-20
                    pt-6 md:pt-16 lg:pt-24
                    pb-6 md:pb-10">
            <video src="{{ $service->hero_video }}" playsinline autoplay loop muted
                class="w-full aspect-video object-cover object-top">
            </video>
        </section>
    @endif


    <!-- ================= SERVICES + INTRO ================= -->
    <section class="
    px-5 md:px-10 lg:px-20
    pt-8 pb-12 lg:pb-20
    -mt-4 lg:-mt-6">

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-start">

            <!-- LEFT SIDE : HEADING BLOCK -->
            @if (!empty($service->h1))
                <div class="space-y-3 max-w-[350px]">
                    <h1 class="text-[22px] md:text-[26px] xl:text-[28px] font-bold leading-tight break-words">
                        {!! nl2br(e($service->h1)) !!}
                    </h1>
                </div>
            @endif



           <!-- RIGHT SIDE : DESCRIPTION -->
        <div class="text-[16px] lg:text-[18px] leading-relaxed space-y-4 text-justify">
        
            @if (!empty($service->h2))
                <h2 class="font-bold text-[18px] md:text-[22px] lg:text-[24px] leading-snug max-w-[420px] text-left">
                    {{ $service->h2 }}
                </h2>
            @endif
        
            <p>
                {!! nl2br(e($service->description)) !!}
            </p>
        
        </div>


        </div>
    </section>








    @if ($service->works->count())

        <section class="px-5 md:px-10 lg:px-20 py-20">

            <!-- SECTION HEADER -->
            <div class="flex justify-between items-start mb-16">
                <h2 class="text-[28px] sm:text-[32px] lg:text-[36px] font-bold leading-tight">
                    Bharat at the core.<br>
                    Impact at scale.<br>
                </h2>

               <a href="/work" class="hidden lg:inline-flex group items-center gap-2 text-[18px] font-bold">
                        See All Work
                 <span class="transition-transform duration-300 group-hover:translate-x-1">→</span>
                </a>

            </div>

            @php
                $works = $service->works;
                $patterns = ['6-4-2', '5-7', '2-4-6', '7-5'];
                $i = 0;
                $p = 0;
                $total = $works->count();
            @endphp

            @while ($i < $total)
                @php $pattern = $patterns[$p % count($patterns)]; @endphp

                {{-- 6 / 4 / 2 --}}
                @if ($pattern === '6-4-2' && $i + 1 < $total)
                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-y-16 lg:gap-x-10 mt-16">
                        <x-work-card :work="$works[$i]" grid="lg:col-span-6" />
                        <x-work-card :work="$works[$i + 1]" grid="lg:col-span-4" />
                        <div class="hidden lg:block lg:col-span-2"></div>
                    </div>
                    @php
                        $i += 2;
                        $p++;
                    @endphp
                    @continue
                @endif

                {{-- 5 / 7 --}}
                @if ($pattern === '5-7')
                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mt-16">
                        <div class="hidden lg:block lg:col-span-5"></div>
                        <x-work-card :work="$works[$i]" grid="lg:col-span-7" />
                    </div>
                    @php
                        $i++;
                        $p++;
                    @endphp
                    @continue
                @endif

                {{-- 2 / 4 / 6 --}}
                @if ($pattern === '2-4-6' && $i + 1 < $total)
                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-x-12 gap-y-16 mt-16">
                        <div class="hidden lg:block lg:col-span-2"></div>
                        <x-work-card :work="$works[$i]" grid="lg:col-span-4" />
                        <x-work-card :work="$works[$i + 1]" grid="lg:col-span-6" />
                    </div>
                    @php
                        $i += 2;
                        $p++;
                    @endphp
                    @continue
                @endif

                {{-- 7 / 5 --}}
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mt-16">
                    <x-work-card :work="$works[$i]" grid="lg:col-span-7" />
                    <div class="hidden lg:block lg:col-span-5"></div>
                </div>

                @php
                    $i++;
                    $p++;
                @endphp
            @endwhile


        </section>
    @endif




</div>