@props([
    'text',              {{-- tooltip body (plain text) --}}
    'align' => 'center', {{-- center | left | right — horizontal anchor of the bubble --}}
])

@php
    $pos = match ($align) {
        'left'  => 'left-0',
        'right' => 'right-0',
        default => 'left-1/2 -translate-x-1/2',
    };
@endphp

{{--
    Inline help: a real <button> trigger whose accessible name IS the help text (announced by
    screen readers on focus), plus a pure-CSS visual bubble for sighted users on hover/focus.
    The bubble is aria-hidden so the text isn't read twice. Works on touch (tap focuses the button).
--}}
<span class="relative inline-flex items-center align-middle group">
    <button type="button" aria-label="{{ $text }}"
            {{ $attributes->merge(['class' => 'inline-flex items-center text-gray-400 hover:text-teal-600 focus:text-teal-600 focus:outline-none rounded-full']) }}>
        <svg class="w-3.5 h-3.5 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
                  d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
    </button>
    <span role="tooltip" aria-hidden="true"
          class="pointer-events-none absolute bottom-full {{ $pos }} mb-1.5 hidden group-hover:block group-focus-within:block
                 w-56 max-w-[15rem] bg-gray-800 text-white text-[11px] leading-snug font-normal
                 px-2.5 py-2 rounded-lg shadow-lg z-50 whitespace-normal text-left normal-case tracking-normal">
        {{ $text }}
    </span>
</span>