@php
    $sectionId = $sectionId ?? 'services';
    $headingId = $headingId ?? $sectionId . '-heading';
    $descriptionField = $descriptionField ?? 'short';
    $expandableDescription = $expandableDescription ?? false;
    $imageLinksToDetail = $imageLinksToDetail ?? true;
    $titleLinksToDetail = $titleLinksToDetail ?? true;
    $bookButtonCompact = $bookButtonCompact ?? false;
    $showSrOnlyPriceHeading = $showSrOnlyPriceHeading ?? false;
@endphp

<section class="relative scroll-mt-24 overflow-hidden bg-white pb-20 pt-10 md:pb-28 md:pt-10" id="{{ $sectionId }}" aria-labelledby="{{ $headingId }}">
    @if (!empty($showTopAccent))
        <div class="absolute left-0 right-0 top-0 z-[1] h-1.5 bg-white" aria-hidden="true"></div>
    @endif

    <div class="pointer-events-none absolute left-0 top-[0%] z-0 h-[min(34%,26rem)] w-[100%] bg-gradient-to-b from-[#fff5fa] to-transparent sm:h-[min(32%,28rem)] md:h-[min(30%,30rem)]" aria-hidden="true" style="clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)"></div>

    <div class="relative z-10 mx-auto max-w-6xl px-4 md:px-6">
        <div class="mx-auto max-w-2xl text-center">
            <p class="scroll-reveal font-script text-3xl text-tsb-primary md:text-4xl" data-scroll-reveal>
                {{ $headingEyebrow }}
            </p>
            <h2 class="scroll-reveal lux-section-title mt-2" id="{{ $headingId }}" data-scroll-reveal>
                {{ $headingTitle }}
            </h2>
            <p class="scroll-reveal mt-5 text-sm leading-relaxed text-lux-ink-muted md:text-base" data-scroll-reveal>
                {{ $headingDescription }}
            </p>
        </div>

        @if ($showSrOnlyPriceHeading)
            <div class="scroll-mt-24">
                <h3 class="sr-only">
                    Service price list
                </h3>
        @endif

        <div class="mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-3 md:mt-16">
            @foreach ($items as $row)
                @php
                    $detailUrl = $row['url'] ?? 'javascript:void(0)';
                    $description = $row['desc'] ?? '';
                @endphp
                <article class="scroll-reveal flex h-full flex-col overflow-hidden rounded-xl border border-lux-ink/10 bg-white shadow-[0_10px_36px_-14px_rgba(74,74,78,0.35)]" data-scroll-reveal>
                    @if ($imageLinksToDetail)
                        <a class="group relative block aspect-[4/3] w-full shrink-0 overflow-hidden bg-lux-cream" href="{{ $detailUrl }}">
                            <img class="h-full w-full object-cover transition duration-700 group-hover:scale-[1.04]" src="{{ $row['image'] ?? '' }}" alt="{{ $row['name'] ?? '' }}" width="640" height="480" loading="lazy" decoding="async" />
                        </a>
                    @else
                        <div class="relative aspect-[4/3] w-full shrink-0 overflow-hidden bg-lux-cream">
                            <img class="h-full w-full object-cover" src="{{ $row['image'] ?? '' }}" alt="{{ $row['name'] ?? '' }}" width="640" height="480" loading="lazy" decoding="async" />
                        </div>
                    @endif

                    <div class="flex flex-1 flex-col px-5 pb-6 pt-5 sm:px-6">
                        <p class="flex items-center gap-2 font-sans text-xs text-lux-ink-muted">
                            <iconify-icon class="h-3.5 w-3.5 shrink-0 text-lux-ink/50" aria-hidden="true" icon="lucide:clock"></iconify-icon>
                            {{ __('frontend::messages.service_pricing_min_duration', ['min' => $row['time']]) }}
                        </p>

                        <h3 class="mt-3 font-script text-xl font-bold leading-snug text-tsb-primary md:text-[1.35rem]">
                            @if ($titleLinksToDetail)
                                <a class="transition-colors hover:text-[#8f5346]" href="{{ $detailUrl }}">{{ $row['name'] }}</a>
                            @else
                                {{ $row['name'] ?? '' }}
                            @endif
                        </h3>

                        @if ($expandableDescription)
                            <div class="mt-3 flex-1" data-service-desc>
                                <p class="text-sm leading-relaxed text-lux-ink md:text-[0.95rem] line-clamp-4" id="service-desc-{{ $loop->index }}" data-service-desc-body>
                                    {{ $description ?? '' }}
                                </p>
                                <button class="mt-2 hidden font-sans text-[0.68rem] font-semibold uppercase tracking-[0.14em] text-tsb-primary transition hover:text-[#8f5346] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#A65E4E]/40" data-service-desc-toggle type="button" aria-expanded="false" aria-controls="service-desc-{{ $loop->index }}">
                                    <span data-service-desc-more>{{ __('frontend::messages.btn.show_more') }}</span>
                                    <span class="hidden" data-service-desc-less>{{ __('frontend::messages.btn.show_less') }}</span>
                                </button>
                            </div>
                        @else
                            <p class="mt-3 flex-1 text-sm leading-relaxed text-lux-ink md:text-[0.95rem]">
                                {{ $description ?? '' }}
                            </p>
                        @endif

                        <div class="{{ $bookButtonCompact ? 'mt-6 flex w-full flex-col gap-2' : 'mt-6' }}">
                            <a class="lux-btn w-full justify-center{{ $bookButtonCompact ? ' !min-h-0 !px-5 !py-2.5' : '' }}" href="{{ $detailUrl }}">
                                {{ __('frontend::messages.nav_book') }}
                            </a>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>

        @if ($showSrOnlyPriceHeading)
    </div>
    @endif
    </div>
</section>