@props(['class' => ''])

<div {{ $attributes->merge(['class' => 'space-y-3 ' . $class]) }}>
    {{-- What to expect from us --}}
    <details class="group rounded-lg border border-zinc-200 bg-white">
        <summary class="flex cursor-pointer items-center justify-between gap-3 p-4 font-medium text-zinc-900 [&::-webkit-details-marker]:hidden">
            <div class="flex items-center gap-3">
                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-green-100">
                    <flux:icon name="check-badge" class="h-5 w-5 text-green-600" />
                </div>
                <span>{{ __('booking.expectations_from_us_title') }}</span>
            </div>
            <flux:icon name="chevron-down" class="h-5 w-5 text-zinc-400 transition-transform group-open:rotate-180" />
        </summary>
        <div class="border-t border-zinc-100 px-4 pb-4 pt-3">
            <ul class="space-y-3 text-sm text-zinc-600">
                <li class="flex gap-3">
                    <flux:icon name="light-bulb" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div>
                        <span class="font-medium text-zinc-800">{{ __('booking.expect_focused_consultation') }}</span>
                        <p class="mt-0.5">{{ __('booking.expect_focused_consultation_desc') }}</p>
                    </div>
                </li>
                <li class="flex gap-3">
                    <flux:icon name="shield-check" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div>
                        <span class="font-medium text-zinc-800">{{ __('booking.expect_confidentiality') }}</span>
                        <p class="mt-0.5">{{ __('booking.expect_confidentiality_desc') }}</p>
                    </div>
                </li>
                <li class="flex gap-3">
                    <flux:icon name="puzzle-piece" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div>
                        <span class="font-medium text-zinc-800">{{ __('booking.expect_practical_solutions') }}</span>
                        <p class="mt-0.5">{{ __('booking.expect_practical_solutions_desc') }}</p>
                    </div>
                </li>
                <li class="flex gap-3">
                    <flux:icon name="map" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div>
                        <span class="font-medium text-zinc-800">{{ __('booking.expect_roadmap') }}</span>
                        <p class="mt-0.5">{{ __('booking.expect_roadmap_desc') }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </details>

    {{-- What we expect from you --}}
    <details class="group rounded-lg border border-zinc-200 bg-white">
        <summary class="flex cursor-pointer items-center justify-between gap-3 p-4 font-medium text-zinc-900 [&::-webkit-details-marker]:hidden">
            <div class="flex items-center gap-3">
                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100">
                    <flux:icon name="user-circle" class="h-5 w-5 text-blue-600" />
                </div>
                <span>{{ __('booking.expectations_from_you_title') }}</span>
            </div>
            <flux:icon name="chevron-down" class="h-5 w-5 text-zinc-400 transition-transform group-open:rotate-180" />
        </summary>
        <div class="border-t border-zinc-100 px-4 pb-4 pt-3">
            <ul class="space-y-3 text-sm text-zinc-600">
                <li class="flex gap-3">
                    <flux:icon name="document-text" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div>
                        <span class="font-medium text-zinc-800">{{ __('booking.your_transparency') }}</span>
                        <p class="mt-0.5">{{ __('booking.your_transparency_desc') }}</p>
                    </div>
                </li>
                <li class="flex gap-3">
                    <flux:icon name="clock" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div>
                        <span class="font-medium text-zinc-800">{{ __('booking.your_punctuality') }}</span>
                        <p class="mt-0.5">{{ __('booking.your_punctuality_desc') }}</p>
                    </div>
                </li>
                <li class="flex gap-3">
                    <flux:icon name="clipboard-document-check" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                    <div>
                        <span class="font-medium text-zinc-800">{{ __('booking.your_confirmation') }}</span>
                        <p class="mt-0.5">{{ __('booking.your_confirmation_desc') }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </details>

    {{-- Before booking - Important notes --}}
    <details class="group rounded-lg border border-amber-200 bg-amber-50" open>
        <summary class="flex cursor-pointer items-center justify-between gap-3 p-4 font-medium text-zinc-900 [&::-webkit-details-marker]:hidden">
            <div class="flex items-center gap-3">
                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-200">
                    <flux:icon name="exclamation-triangle" class="h-5 w-5 text-amber-700" />
                </div>
                <span>{{ __('booking.before_booking_title') }}</span>
            </div>
            <flux:icon name="chevron-down" class="h-5 w-5 text-amber-600 transition-transform group-open:rotate-180" />
        </summary>
        <div class="border-t border-amber-200 px-4 pb-4 pt-3">
            <ul class="space-y-2 text-sm text-zinc-700">
                <li class="flex items-start gap-2">
                    <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"></span>
                    <span>{{ __('booking.note_purpose') }}</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"></span>
                    <span>{{ __('booking.note_duration') }}</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"></span>
                    <span>{{ __('booking.note_format') }}</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"></span>
                    <span>{{ __('booking.note_prepare') }}</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"></span>
                    <span>{{ __('booking.note_confidential') }}</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"></span>
                    <span>{{ __('booking.note_no_obligation') }}</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"></span>
                    <span>{{ __('booking.note_arbitration') }}</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500"></span>
                    <span>{{ __('booking.note_cancellation') }}</span>
                </li>
            </ul>
        </div>
    </details>
</div>