{{--
    Shared “quick booking” card (sidebar + grid form).

    Required:
      - $services: SiteContent::services() shape — each item has slug, name, rates[]

    Therapist field (optional):
      - $therapists: SiteContent::therapists() — when non-empty and $hiddenTherapist is not set, shows a therapist <select name="therapist">
      - $preselectedTherapist: therapist slug for @selected on the select (e.g. from request query)

    Common optional:
      - $sectionId (default: booking-form) — anchor id, e.g. #booking-form
      - $headingId (default: booking-heading)
      - $fieldIdStem (default: booking) — element ids: {stem}-name, {stem}-service, …
        Use "t-booking" on therapist page so app.js finds #t-booking-service / #t-booking-rate
      - $sidebarEyebrow, $sidebarTitle, $sidebarLead (strings)
      - $sidebarBulletItems: list of strings, or items ['icon' => 'lucide:…', 'text' => '…'] (icon optional)
      - $preselectedService: service slug
      - $hiddenTherapist: slug for hidden input (e.g. therapist profile page)
      - $lockedTherapistName: display name shown as read-only when $hiddenTherapist is set (prefill UX)
      - $formAction (default #), $formMethod (default get)
      - $submitLabel (default booking_submit lang)
      - $notePlaceholder (string|null)

    Layout:
      - $formVariant 'quick' (default): name; phone; date|time; [therapist select]; service; rate; notes; privacy (required); mock reCAPTCHA; submit
      - $formVariant 'therapist': same row structure + read-only therapist name when locked; service; rate; address; notes; privacy (required); mock reCAPTCHA; submit (slug via hidden input)
--}}
@php
    $isTh = app()->getLocale() === 'th';
    $sectionId = $sectionId ?? 'booking-form';
    $headingId = $headingId ?? 'booking-heading';
    $fieldIdStem = $fieldIdStem ?? 'booking';
    $formVariant = $formVariant ?? 'quick';
    $formAction = $formAction ?? '#';
    $formMethod = $formMethod ?? 'get';
    $submitLabel = $submitLabel ?? __('frontend::messages.booking_submit');
    $ratesByService = collect($services)->mapWithKeys(fn ($s) => [$s['slug'] => $s['rates']])->all();
    $preselectedService = $preselectedService ?? null;
    $preselectedTherapist = $preselectedTherapist ?? null;
    $hiddenTherapist = $hiddenTherapist ?? null;
    $therapistsList = isset($therapists) && is_array($therapists) ? $therapists : [];
    $showTherapistSelect = $therapistsList !== [] && ! $hiddenTherapist;
    $lockedTherapistName = $lockedTherapistName ?? null;
    $showLockedTherapist = $hiddenTherapist && filled($lockedTherapistName);
    $notePlaceholder = $notePlaceholder ?? ($isTh ? 'เช่น เวลาที่สะดวก ที่อยู่ อาการปวด' : 'e.g. time window, address, focus areas');
    $todayDate = now()->toDateString();
    $id = fn (string $suffix) => $fieldIdStem.'-'.$suffix;
    $requiredMark = '<span class="text-red-500">*</span>';
@endphp

<section id="{{ $sectionId }}" class="scroll-mt-24 bg-lux-cream py-20 md:py-28" aria-labelledby="{{ $headingId }}">
    <div class="mx-auto max-w-6xl px-4 md:px-6">
        <div class="overflow-hidden border border-lux-ink/10 bg-white shadow-[0_28px_70px_-40px_rgba(74,74,78,0.45)] lg:grid lg:grid-cols-5">
            <div class="relative bg-lux-ink p-10 text-white lg:col-span-2 lg:p-12">
                <div class="pointer-events-none absolute -right-8 top-0 h-40 w-40 rounded-full bg-white/5 blur-2xl" aria-hidden="true"></div>
                <p class="scroll-reveal font-script text-3xl text-lux-blush md:text-4xl" data-scroll-reveal>
                    {{ $sidebarEyebrow }}
                </p>
                <h2 id="{{ $headingId }}" class="scroll-reveal mt-2 font-serif text-2xl font-medium uppercase tracking-[0.14em] md:text-3xl" data-scroll-reveal>
                    {{ $sidebarTitle }}
                </h2>
                <p class="scroll-reveal mt-6 text-sm leading-relaxed text-white/80" data-scroll-reveal>
                    {{ $sidebarLead }}
                </p>
                <ul class="scroll-reveal mt-10 space-y-3 border-t border-white/10 pt-8 text-sm text-white/75" data-scroll-reveal>
                    @foreach ($sidebarBulletItems as $item)
                        @php
                            $text = is_array($item) ? ($item['text'] ?? '') : $item;
                            $icon = is_array($item) ? ($item['icon'] ?? null) : null;
                        @endphp
                        @if ($icon)
                            <li class="flex items-start gap-3">
                                <iconify-icon icon="{{ $icon }}" class="mt-0.5 h-4 w-4 shrink-0 text-lux-blush" aria-hidden="true"></iconify-icon>
                                <span>{{ $text }}</span>
                            </li>
                        @else
                            <li>• {{ $text }}</li>
                        @endif
                    @endforeach
                </ul>
            </div>
            <div class="scroll-reveal p-8 lg:col-span-3 lg:p-12" data-scroll-reveal>
                <form class="grid gap-5 sm:grid-cols-2" action="{{ $formAction }}" method="{{ $formMethod }}" novalidate>
                    @if ($hiddenTherapist)
                        <input type="hidden" name="therapist" value="{{ e($hiddenTherapist) }}">
                    @endif
                    <div>
                        <label for="{{ $id('name') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                            {!! ($isTh ? 'ชื่อ ' : 'Full name ').$requiredMark !!}
                        </label>
                        <input id="{{ $id('name') }}" name="name" type="text" autocomplete="name" required class="mt-2 w-full border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink" placeholder="{{ $isTh ? 'ชื่อของคุณ' : 'Your name' }}">
                    </div>
                    <div>
                        <label for="{{ $id('phone') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                            {!! ($isTh ? 'โทรศัพท์ ' : 'Phone ').$requiredMark !!}
                        </label>
                        <input id="{{ $id('phone') }}" name="phone" type="tel" autocomplete="tel" inputmode="tel" required class="mt-2 w-full border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink" placeholder="08xxxxxxxx">
                    </div>
                    <div class="sm:col-span-2">
                        <label for="{{ $id('email') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                            {!! ($isTh ? 'อีเมล ' : 'Email ').$requiredMark !!}
                        </label>
                        <input id="{{ $id('email') }}" name="email" type="email" autocomplete="email" required class="mt-2 w-full border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink" placeholder="{{ $isTh ? 'your@email.com' : 'your@email.com' }}">
                    </div>
                    <div @class(['sm:col-span-2' => $formVariant === 'therapist'])>
                        <label for="{{ $id('service') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                            {!! ($isTh ? 'บริการที่สนใจ ' : 'Service ').$requiredMark !!}
                        </label>
                        <select id="{{ $id('service') }}" name="service" required class="mt-2 w-full border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink">
                            <option value="">{{ $isTh ? 'เลือกบริการ' : 'Select a service' }}</option>
                            @foreach ($services as $svc)
                                <option value="{{ $svc['slug'] }}" @selected($preselectedService === $svc['slug'])>{{ $svc['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div @class(['sm:col-span-2' => $formVariant === 'therapist'])>
                        <label for="{{ $id('rate') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                            {!! ($isTh ? 'ระยะเวลาและราคา ' : 'Duration & price ').$requiredMark !!}
                        </label>
                        <select id="{{ $id('rate') }}" name="booking_rate" disabled required class="mt-2 w-full border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink disabled:cursor-not-allowed disabled:opacity-60">
                            <option value="">{{ $isTh ? 'เลือกบริการก่อน' : 'Choose a service first' }}</option>
                        </select>
                    </div>
                    <div class="grid min-w-0 grid-cols-2 gap-4 sm:col-span-2 sm:gap-5">
                        <div class="min-w-0">
                            <label for="{{ $id('date') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                                {!! ($isTh ? 'วันที่ต้องการ ' : 'Preferred date ').$requiredMark !!}
                            </label>
                            <input id="{{ $id('date') }}" name="date" type="date" min="{{ $todayDate }}" required class="mt-2 w-full min-w-0 border border-lux-ink/15 bg-lux-cream/40 px-3 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink sm:px-4">
                        </div>
                        <div class="min-w-0">
                            <label for="{{ $id('time') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                                {!! ($isTh ? 'เวลาที่ต้องการ ' : 'Preferred time ').$requiredMark !!}
                            </label>
                            <input id="{{ $id('time') }}" name="time" type="time" required class="mt-2 w-full min-w-0 border border-lux-ink/15 bg-lux-cream/40 px-3 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink sm:px-4">
                        </div>
                    </div>
                    @if ($showTherapistSelect)
                        <div class="sm:col-span-2">
                            <label for="{{ $id('therapist') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                                {!! ($isTh ? 'เทอราปิสต์ ' : 'Therapist ').$requiredMark !!}
                            </label>
                            <select id="{{ $id('therapist') }}" name="therapist" required class="mt-2 w-full border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink">
                                <option value="">{{ $isTh ? 'เลือกเทอราปิสต์' : 'Select a therapist' }}</option>
                                @foreach ($therapistsList as $t)
                                    <option value="{{ $t['slug'] }}" @selected($preselectedTherapist === $t['slug'])>{{ $t['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    @elseif ($showLockedTherapist)
                        <div class="sm:col-span-2">
                            <label for="{{ $id('therapist-display') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                                {{ $isTh ? 'เทอราปิสต์' : 'Therapist' }}
                            </label>
                            <input id="{{ $id('therapist-display') }}" type="text" readonly tabindex="-1" value="{{ e($lockedTherapistName) }}" class="mt-2 w-full cursor-default border border-lux-ink/15 bg-lux-ink/[0.04] px-4 py-3 text-lux-ink outline-none" aria-readonly="true">
                        </div>
                    @endif
                    <div class="sm:col-span-2 border-t border-lux-ink/10 pt-5">
                        <p class="text-[0.65rem] font-semibold uppercase tracking-[0.14em] text-lux-ink-muted">
                            {{ $isTh ? 'สถานที่รับบริการ' : 'Service location' }}
                        </p>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="{{ $id('hotel') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                            {!! ($isTh ? 'โรงแรม / คอนโดมิเนียม ' : 'Hotel / Condominium ').$requiredMark !!}
                        </label>
                        <input id="{{ $id('hotel') }}" name="hotel" type="text" autocomplete="organization" required class="mt-2 w-full border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink" placeholder="{{ $isTh ? 'ชื่อโรงแรมหรือคอนโด' : 'Hotel or condo name' }}">
                    </div>
                    <div class="sm:col-span-2">
                        <label for="{{ $id('room-no') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                            {!! ($isTh ? 'เลขห้อง ' : 'Room No. ').$requiredMark !!}
                        </label>
                        <input id="{{ $id('room-no') }}" name="room_no" type="text" inputmode="text" required class="mt-2 w-full border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink" placeholder="{{ $isTh ? 'เช่น 1205' : 'e.g. 1205' }}">
                    </div>
                    <div class="sm:col-span-2">
                        <label for="{{ $id('address-soi') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                            {!! ($isTh ? 'ที่อยู่ (ซอย) ' : 'Address (Soi) ').$requiredMark !!}
                        </label>
                        <textarea id="{{ $id('address-soi') }}" name="address_soi" rows="2" autocomplete="address-line2" required class="mt-2 w-full resize-y border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink" placeholder="{{ $isTh ? 'เช่น ซอยสุขุมวิท 11' : 'e.g. Sukhumvit Soi 11' }}"></textarea>
                    </div>
                    <script type="application/json" id="booking-service-rates-json">@json($ratesByService)</script>
                    @if ($formVariant === 'therapist')
                        <div class="sm:col-span-2">
                            <label for="{{ $id('address') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                                {!! ($isTh ? 'ที่อยู่ ' : 'Address ').$requiredMark !!}
                            </label>
                            <textarea id="{{ $id('address') }}" name="address" rows="2" required class="mt-2 w-full resize-y border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink" placeholder="{{ $isTh ? 'โรงแรม / คอนโด / บ้าน' : 'Hotel / Condo / Home address' }}"></textarea>
                        </div>
                    @endif
                    <div class="sm:col-span-2 border-t border-lux-ink/10 pt-5">
                        <label for="{{ $id('note') }}" class="block text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-lux-ink-muted">
                            {{ $isTh ? 'หมายเหตุ (ไม่บังคับ)' : 'Notes (optional)' }}
                        </label>
                        <textarea id="{{ $id('note') }}" name="note" rows="3" class="mt-2 w-full resize-y border border-lux-ink/15 bg-lux-cream/40 px-4 py-3 text-lux-ink outline-none transition focus:border-lux-ink focus:bg-white focus:ring-1 focus:ring-lux-ink" placeholder="{{ $notePlaceholder }}"></textarea>
                    </div>
                    <div class="sm:col-span-2">
                        <div class="flex gap-3 rounded border border-lux-ink/12 bg-lux-cream/30 px-4 py-3">
                            <input
                                id="{{ $id('privacy') }}"
                                name="privacy_accept"
                                type="checkbox"
                                value="1"
                                required
                                class="mt-1 h-4 w-4 shrink-0 border-lux-ink/30 text-lux-ink focus:ring-lux-ink"
                            >
                            <label for="{{ $id('privacy') }}" class="text-sm leading-relaxed text-lux-ink/90">
                                {!! __('frontend::messages.booking_quick_privacy', [
                                    'policy' => '<a href="'.e(route('frontend.privacy')).'" target="_blank" rel="noopener noreferrer" class="font-medium text-lux-ink underline decoration-lux-ink/35 underline-offset-[3px] transition hover:decoration-lux-ink">'.e(__('frontend::messages.footer_privacy_policy')).'</a>',
                                ]) !!} <span class="text-red-500">*</span>
                            </label>
                        </div>
                    </div>
                    {{-- Mock reCAPTCHA v2–style widget; replace with real g-recaptcha when keys are available --}}
                    <div class="sm:col-span-2">
                        <p class="mb-2 text-[0.65rem] font-semibold uppercase tracking-[0.14em] text-lux-ink-muted">
                            {{ __('frontend::messages.booking_recaptcha_label') }}
                        </p>
                        <div
                            class="pointer-events-none select-none rounded border border-[#d3d3d3] bg-[#f9f9f9] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.6)] sm:inline-flex sm:max-w-md sm:w-full"
                            role="img"
                            aria-hidden="true"
                        >
                            <div class="flex w-full items-center gap-3">
                                <div class="flex h-[58px] w-[58px] shrink-0 items-center justify-center rounded border-2 border-[#c1c1c1] bg-white shadow-sm" aria-hidden="true">
                                    <span class="h-7 w-7 rounded-sm border border-[#b8b8b8] bg-gradient-to-br from-white to-[#e8e8e8]" aria-hidden="true"></span>
                                </div>
                                <span class="text-sm font-medium text-[#555]">{{ __('frontend::messages.booking_recaptcha_mock_title') }}</span>
                                <div class="ml-auto shrink-0 text-right text-[10px] leading-tight text-[#737373]">
                                    <span class="font-semibold tracking-tight text-[#1a73e8]">reCAPTCHA</span>
                                    <div class="mt-0.5 text-[9px] text-[#9e9e9e]">{{ __('frontend::messages.booking_recaptcha_mock_note') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <button type="submit" class="lux-btn w-full sm:w-auto">
                            {{ $submitLabel }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>