@php
    use App\Models\Rutina;
    $textos = [
        'paso' => __('app.ejercicio.paso_de'),
        'repite' => __('app.ejercicio.repite'),
        'segundos' => __('app.ejercicio.seg'),
        'siguiente' => __('app.ejercicio.siguiente'),
        'listo' => __('app.ejercicio.listo_siguiente'),
        'fin' => __('app.ejercicio.fin_voz'),
        'empieza' => __('app.ejercicio.empieza_voz'),
    ];
@endphp
<x-layouts.base :titulo="$rutina->titulo">
    <main class="mx-auto flex min-h-screen max-w-app flex-col px-4 pb-8 pt-4"
          data-guiada data-idioma="{{ app()->getLocale() === 'en' ? 'en-US' : 'es-MX' }}"
          data-pasos="{{ json_encode($pasos, JSON_UNESCAPED_UNICODE) }}" data-textos="{{ json_encode($textos, JSON_UNESCAPED_UNICODE) }}">

        {{-- Barra superior: salir, título, voz --}}
        <div class="flex items-center gap-3">
            <a href="{{ route('ejercicio.show', $rutina) }}" class="flex h-12 w-12 items-center justify-center rounded-2xl bg-white shadow-sm ring-1 ring-slate-200"
               aria-label="{{ __('app.ejercicio.salir') }}">
                <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </a>
            <p class="flex-1 truncate font-semibold">{{ $rutina->titulo }}</p>
            <button type="button" class="flex h-12 w-12 items-center justify-center rounded-2xl bg-white shadow-sm ring-1 ring-slate-200" data-voz-boton
                    aria-pressed="true" aria-label="{{ __('app.ejercicio.voz') }}">
                <x-icono nombre="voz" data-voz-on />
                <x-icono nombre="campana-off" class="hidden h-6 w-6" data-voz-off />
            </button>
        </div>

        {{-- Avance --}}
        <div class="mt-4 flex gap-1.5" aria-hidden="true" data-segmentos>
            @foreach ($pasos as $paso)
                <span class="h-1.5 flex-1 rounded-full bg-slate-200 transition-colors"></span>
            @endforeach
        </div>

        {{-- Portada --}}
        <section class="mt-8 flex flex-1 flex-col justify-center space-y-6 text-center" data-portada>
            <span class="mx-auto flex h-24 w-24 items-center justify-center rounded-[2rem] bg-gradient-to-br from-green-500 to-teal-600 text-white shadow-xl shadow-green-600/30">
                <x-icono :nombre="Rutina::ICONOS[$rutina->tipo] ?? 'actividad'" class="h-12 w-12" />
            </span>
            <div>
                <h1>{{ $rutina->titulo }}</h1>
                <p class="mt-2 text-lg text-slate-600">{{ __('app.ejercicio.portada', ['n' => count($pasos), 'min' => $rutina->duracion_min]) }}</p>
            </div>
            <p class="aviso-alerta text-left">{{ __('app.ejercicio.aviso') }}</p>
            <button type="button" class="btn-primario text-xl" style="min-height: 76px" data-empezar>
                <x-icono nombre="play" class="h-6 w-6 fill-current" /> {{ __('app.ejercicio.empezar') }}
            </button>
        </section>

        {{-- Paso actual --}}
        <section class="mt-5 hidden flex-1 flex-col" data-escenario aria-live="polite">
            <div class="relative aspect-[4/3] overflow-hidden rounded-3xl bg-white shadow-suave">
                <img src="" alt="" class="hidden h-full w-full object-contain" data-imagen>
                <div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-green-50 to-teal-50 text-green-700" data-sin-imagen>
                    <x-icono :nombre="Rutina::ICONOS[$rutina->tipo] ?? 'actividad'" class="h-24 w-24 opacity-80" />
                </div>
                <span class="absolute left-3 top-3 rounded-full bg-slate-900/80 px-3 py-1 text-sm font-semibold text-white" data-contador></span>
            </div>

            <h2 class="mt-5 text-[26px] font-extrabold" data-titulo></h2>
            <p class="mt-2 text-lg leading-relaxed text-slate-700" data-instruccion></p>

            {{-- Temporizador o repeticiones --}}
            <div class="mt-5 rounded-3xl bg-white p-5 text-center shadow-suave">
                <p class="font-extrabold tabular-nums leading-none text-slate-900" style="font-size: 64px" data-reloj></p>
                <p class="mt-1 text-slate-600" data-reloj-texto></p>
                <div class="barra mt-4" data-barra-tiempo><div class="barra-relleno transition-[width] duration-1000 ease-linear" style="width: 100%" data-relleno></div></div>
            </div>

            {{-- Controles --}}
            <div class="mt-5 grid grid-cols-4 gap-2">
                <button type="button" class="btn-secundario px-0" data-anterior aria-label="{{ __('app.ejercicio.anterior') }}">
                    <x-icono nombre="flecha" class="h-6 w-6 rotate-180" />
                </button>
                <button type="button" class="btn-secundario px-0" data-pausa aria-label="{{ __('app.ejercicio.pausa') }}">
                    <x-icono nombre="pausa" data-icono-pausa />
                    <x-icono nombre="play" class="hidden h-6 w-6 fill-current" data-icono-play />
                </button>
                <button type="button" class="btn-primario col-span-2" data-siguiente>{{ __('app.ejercicio.siguiente') }}</button>
            </div>
        </section>

        {{-- Final --}}
        <section class="mt-8 hidden flex-1 flex-col justify-center space-y-6 text-center" data-final>
            <span class="mx-auto flex h-24 w-24 items-center justify-center rounded-[2rem] bg-green-600 text-white shadow-xl shadow-green-600/30">
                <x-icono nombre="check" class="h-12 w-12" />
            </span>
            <div>
                <h1>{{ __('app.ejercicio.terminaste') }}</h1>
                <p class="mt-2 text-lg text-slate-600">{{ $rutina->titulo }} · {{ $rutina->duracion_min }} min</p>
            </div>
            @if ($hechaHoy)
                <p class="aviso-ok">{{ __('app.ejercicio.ya_hecha') }}</p>
                <a href="{{ route('ejercicio.index') }}" class="btn-primario">{{ __('app.comun.volver') }}</a>
            @else
                <form method="POST" action="{{ route('ejercicio.completar', $rutina) }}">
                    @csrf
                    <button type="submit" class="btn-primario text-xl" style="min-height: 76px"><x-icono nombre="check-circulo" class="h-7 w-7" /> {{ __('app.ejercicio.guardar_sesion') }}</button>
                </form>
            @endif
        </section>
    </main>

    @vite('resources/js/rutina-guiada.js')
</x-layouts.base>