@props([
    'src' => null,
    'alt' => '',
    'points' => [],   // [['x' => 32, 'y' => 60, 'title' => ..., 'body' => ...], ...]
    'ratio' => '16/9',
])

{{--
    Annotated image: click points that open a short note about part of a scheme
    or drawing. Each hotspot is a real button, so the whole set is reachable by
    keyboard, and every note is also listed underneath — hover and pointer
    precision are never the only route to the content.
--}}
<div x-data="{ active: null }" {{ $attributes->merge(['class' => 'space-y-6']) }}>
    <div class="relative">
        <x-image :src="$src" :alt="$alt" :ratio="$ratio" :thumb="false" />

        @foreach ($points as $index => $point)
            <div class="absolute -translate-x-1/2 -translate-y-1/2"
                 style="left: {{ (float) ($point['x'] ?? 50) }}%; top: {{ (float) ($point['y'] ?? 50) }}%">

                <button type="button" @click="active = active === {{ $index }} ? null : {{ $index }}"
                        :aria-expanded="active === {{ $index }}"
                        aria-controls="hotspot-{{ $index }}"
                        class="flex size-8 items-center justify-center rounded-full border-2 border-white bg-primary font-mono text-[0.625rem] font-semibold text-white transition hover:scale-110"
                        :class="active === {{ $index }} && 'ring-4 ring-white/40'">
                    {{ $index + 1 }}
                    <span class="sr-only">{{ $point['title'] ?? __('Detail :n', ['n' => $index + 1]) }}</span>
                </button>

                <div id="hotspot-{{ $index }}" x-show="active === {{ $index }}" x-cloak
                     x-transition.opacity
                     class="absolute left-1/2 top-10 z-10 w-64 -translate-x-1/2 rounded-xl border border-border bg-surface p-4 text-left shadow-raised">
                    <p class="font-display text-sm font-semibold text-text">{{ $point['title'] ?? '' }}</p>
                    @if (! empty($point['body']))
                        <p class="mt-1.5 text-xs leading-relaxed text-text-secondary">{{ $point['body'] }}</p>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    {{-- Same content, linear: works on touch, on small screens and for screen readers. --}}
    <ol class="grid gap-3 sm:grid-cols-2">
        @foreach ($points as $index => $point)
            <li class="flex gap-3 rounded-xl border border-border bg-surface p-4">
                <span class="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary-50 font-mono text-[0.625rem] font-semibold text-primary">
                    {{ $index + 1 }}
                </span>
                <span class="min-w-0">
                    <span class="block text-sm font-medium text-text">{{ $point['title'] ?? '' }}</span>
                    @if (! empty($point['body']))
                        <span class="mt-0.5 block text-xs text-text-secondary">{{ $point['body'] }}</span>
                    @endif
                </span>
            </li>
        @endforeach
    </ol>
</div>