{{-- Sound + optional voice announcement toggle. Uses the global DadkaSound engine. --}}
<div x-data="dadkaSoundToggle()" class="flex items-center gap-1">
    <button
        type="button"
        @click="toggleSound()"
        class="btn-ghost btn-sm"
        :class="sound ? '' : 'text-gray-500'"
        :title="sound ? '{{ __('Sound on - click to mute') }}' : '{{ __('Sound off - click to enable') }}'"
        :aria-pressed="sound ? 'true' : 'false'"
    >
        <svg x-show="sound" class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 7h3l4-3v12l-4-3H3z" fill="currentColor" stroke="none"/>
            <path d="M12.5 6.5a4 4 0 0 1 0 7"/>
        </svg>
        <svg x-show="! sound" class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 7h3l4-3v12l-4-3H3z" fill="currentColor" stroke="none"/>
            <path d="m12 7.5 4 5m0-5-4 5"/>
        </svg>
        <span x-text="sound ? '{{ __('Sound') }}' : '{{ __('Muted') }}'"></span>
    </button>

    <button
        type="button"
        @click="toggleSpeech()"
        class="btn-ghost btn-sm"
        :class="speech ? 'text-gold-300' : 'text-gray-500'"
        :title="speech ? '{{ __('Voice announcements on - click to disable') }}' : '{{ __('Voice announcements off - click to enable') }}'"
        :aria-pressed="speech ? 'true' : 'false'"
    >
        <span x-text="speech ? '{{ __('Voice') }}' : '{{ __('No voice') }}'"></span>
    </button>
</div>