<div>

    {{-- ================= HERO IMAGE ================= --}}
    @if (optional($work->detail)->inner_hero_media)
        <section class="w-full pt-8 lg:pt-4">
            <img src="{{ asset('storage/' . $work->detail->inner_hero_media) }}"
                 alt="{{ $work->title }}"
                 class="w-full h-auto object-contain"
                 loading="lazy" />
        </section>
    @endif

    {{-- ================= BODY (Title Left + Description Right) ================= --}}
    <section class="mx-auto max-w-8xl px-4 sm:px-6 lg:px-8">

        {{-- GRID --}}
        <div class="grid grid-cols-1 gap-10 py-10 md:grid-cols-2 md:gap-14 md:py-14">

            {{-- LEFT : TITLE --}}
            <div>
                <h2 class="text-2xl sm:text-6xl font-extrabold leading-tight">
    @php
        $heading = $work->detail->intro_heading ?? $work->title;
        $words = explode(' ', trim($heading));

        if(count($words) > 2){
            $lastTwo = array_splice($words, -2);
            $firstPart = implode(' ', $words);
            $secondLine = implode(' ', $lastTwo);
        } else {
            $firstPart = '';
            $secondLine = implode(' ', $words);
        }
    @endphp

    {!! $firstPart !!}
    <span class="block">{{ $secondLine }}</span>
</h2>




            </div>

            {{-- RIGHT : DESCRIPTION --}}
            <div class="text-zinc-700">

               {{-- DESCRIPTION --}}
                @if (optional($work->detail)->intro_description)
                    <p class="leading-relaxed text-[16px] lg:text-[18px] text-justify">
                        {{ $work->detail->intro_description }}
                    </p>
                @endif


                {{-- SERVICES --}}
                @php
                    $services = $work->detail->services ?? null;
                    if (is_string($services)) {
                        $services = json_decode($services, true);
                    }
                @endphp

                @if (!empty($services) && is_array($services))
                    <div class="mt-10">
                        <div class="text-[18px] font-bold text-zinc-900">
                            SERVICES
                        </div>

                        <ul class="mt-3 space-y-2 text-sm">
                            @foreach ($services as $service)
                                <li class="font-semibold text-zinc-900">
                                    {{ $service }}
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

            </div>
        </div>

       {{-- ================= VIDEO (ONLY IF EXISTS) ================= --}}
@if (optional($work->detail)->inner_video)
    <div class="pb-20">
        <div class="overflow-hidden rounded-md border border-black/10 bg-black">
            <div class="relative w-full aspect-video">

                {{-- YOUTUBE --}}
                @if (Str::contains($work->detail->inner_video, ['youtube.com', 'youtu.be']))
                    @php
                        preg_match(
                            '%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i',
                            $work->detail->inner_video,
                            $m
                        );
                        $videoId = $m[1] ?? null;
                    @endphp

                    @if($videoId)
                      <iframe
                        id="yt-player"
                        class="absolute inset-0 w-full h-full"
                        src="https://www.youtube-nocookie.com/embed/{{ $videoId }}?autoplay=0&mute=0&controls=0&modestbranding=1&rel=0&fs=0&disablekb=1&playsinline=1&enablejsapi=1&iv_load_policy=3"
                        allow="autoplay; encrypted-media"
                        allowfullscreen>
                    </iframe>

                    @endif

                {{-- UPLOADED VIDEO --}}
                @elseif (Str::startsWith($work->detail->inner_video, 'works/'))
                    <video controls loop playsinline class="w-full h-full object-cover">
                        <source src="{{ asset('storage/'.$work->detail->inner_video) }}" type="video/mp4">
                    </video>

                {{-- DIRECT VIDEO URL --}}
                @else
                    <video controls loop playsinline class="w-full h-full object-cover">
                        <source src="{{ $work->detail->inner_video }}" type="video/mp4">
                    </video>
                @endif

            </div>
        </div>
    </div>
@endif


    </section>

</div>
