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

        {{ $category->name }}

    </h1>


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

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-y-6 lg:gap-x-20 items-start">

            <!-- LEFT SIDE : H1 -->
            @if (!empty($category->h1))
                <div class="max-w-[420px]">
                    <h1 class="text-[22px] md:text-[26px] xl:text-[28px] font-bold leading-tight whitespace-pre-line">
                        {{ $category->h1 }}
                    </h1>
                </div>
            @endif

            <!-- RIGHT SIDE : H2 -->
            @if (!empty($category->h2))
                <div class="max-w-[420px]">
                    <h2 class="font-bold text-[18px] md:text-[24px] leading-snug whitespace-pre-line">
                        {{ $category->h2 }}
                    </h2>
                </div>
            @endif

        </div>
    </section>


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


    <section
        class="grid grid-cols-1 lg:grid-cols-2 gap-y-10 lg:gap-x-24
           px-5 md:px-10 lg:px-20
           pt-12 lg:pt-20 pb-20">

        <!-- LEFT SIDE : SERVICES LIST -->
        <div class="max-w-[420px]">

            <h3 class="font-bold uppercase mb-6 tracking-wide text-[18px] sm:text-[20px]">
                Services
            </h3>

            @if ($category->services->count())
                <ul class="space-y-4">
                    @foreach ($category->services as $service)
                        <li>
                           <a href="{{ route('services.category.service', [$category->slug, $service->slug]) }}"
                           class="relative inline-block text-black group font-medium
                                  text-[16px] md:text-[18px]
                                  transition-colors duration-300 ease-in-out
                                  hover:text-[#f38121]">


                                {{ $service->title }}

                                <span
                                    class="absolute left-1/2 -bottom-1 h-[1px] w-0 bg-[#f38121]
                                       transition-all duration-300 ease-in-out
                                       group-hover:w-full group-hover:left-0
                                       group-hover:bg-black">
                                </span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            @else
                <p class="text-gray-500">No services available.</p>
            @endif

        </div>

        <!-- RIGHT SIDE : DESCRIPTION -->
        <div
            class="max-w-[520px]
                   text-[16px] lg:text-[18px]
                   leading-relaxed">
        
            <p>
                {{ $category->description }}
            </p>
        
        </div>


    </section>
    <!-- ================= CONTACT ================= -->
    <livewire:contact-form />

</div>