@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>

    @if (!empty($service->hero_video))
        @php
            $path = $service->hero_video;

            // local uploaded file ko full URL banao
            if (!\Illuminate\Support\Str::startsWith($path, ['http://', 'https://'])) {
                $src = url('/' . ltrim($path, '/'));
            } else {
                $src = $path; // external full URL
            }

            // extension nikaalo (query string ignore karke)
            $ext = strtolower(pathinfo(parse_url($src, PHP_URL_PATH), PATHINFO_EXTENSION));
        @endphp

        <section class="px-5 md:px-10 lg:px-20 md:pt-16 lg:pt-24 pb-6 md:pb-10">
            @if (in_array($ext, ['mp4', 'webm', 'ogg']))
                <video src="{{ $src }}" autoplay muted loop playsinline
                    class="w-full aspect-video object-cover object-top mb-5">
                </video>
            @else
                <img src="{{ $src }}" alt="Hero Image" class="w-full aspect-video object-cover object-top mb-5">
            @endif
        </section>
    @endif





    <!-- ================= SERVICES + INTRO ================= -->
    <section class="px-5 md:px-10 lg:px-20 pt-8 pb-12 lg:pb-20 -mt-6 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-[500px]">
                    <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-[22px] md:text-[25px] lg:text-[28px] font-bold leading-tight">-->
                <!--    Bharat at the core.<br>-->
                <!--    Impact at scale.<br>-->
                <!--</h2>-->

                @php
                    $words = explode(' ', $service->work_section_header);
                @endphp

                <h2 class="text-[28px] sm:text-[32px] lg:text-[36px] font-bold leading-tight">
                    {{ implode(' ', array_slice($words, 0, 3)) }}<br>
                    {{ implode(' ', array_slice($words, 3)) }}
                </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>

            {{-- ================= 2x2 GRID ================= --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                @foreach ($service->works as $work)
                    <x-work-card :work="$work" />
                @endforeach
            </div>

        </section>
    @endif


</div>