<div class="w-full max-w-sm" x-data="{
    email: '',
    loading: false,
    sent: false,
    error: '',
    async submit() {
        this.error = '';
        if (!this.email.trim()) { this.error = 'Ingresa tu correo electrónico.'; return; }
        this.loading = true;
        try {
            const res = await fetch('/do/reset-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: 'email=' + encodeURIComponent(this.email),
            });
            const d = await res.json();
            if (d.success) { this.sent = true; }
            else { this.error = d.message || 'No se pudo procesar la solicitud.'; }
        } catch (e) {
            this.error = 'Error de conexión. Intenta de nuevo.';
        }
        this.loading = false;
    }
}">
    <!-- Logo -->
    <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-4" style="background-color:#1e293b">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"/>
            </svg>
        </div>
        <h1 class="text-2xl font-bold text-slate-800">Recuperar contraseña</h1>
        <p class="text-sm text-slate-500 mt-1">Te enviaremos un enlace a tu correo</p>
    </div>

    <!-- Enviado -->
    <div x-show="sent" class="text-center space-y-4">
        <div class="flex items-center justify-center w-16 h-16 rounded-full bg-green-50 border-2 border-green-200 mx-auto">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
            </svg>
        </div>
        <p class="text-slate-700 font-medium">¡Revisa tu correo!</p>
        <p class="text-sm text-slate-500">Si el correo está registrado, recibirás instrucciones para restablecer tu contraseña en los próximos minutos.</p>
        <a href="/login" class="inline-block mt-4 text-sm font-medium hover:underline" style="color:#8eb02f">Volver al inicio de sesión</a>
    </div>

    <!-- Formulario -->
    <div x-show="!sent">
        <!-- Error -->
        <div x-show="error" class="mb-5 flex items-start gap-3 rounded-xl px-4 py-3" style="background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.3)">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0 mt-0.5" style="color:#ef4444" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
            </svg>
            <span class="text-sm" style="color:#ef4444" x-text="error"></span>
        </div>

        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5" for="email">Correo electrónico</label>
                <div class="relative">
                    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
                        </svg>
                    </div>
                    <input type="email" id="email" x-model="email" @keydown.enter="submit()"
                           placeholder="tu@correo.com" autocomplete="email"
                           class="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm outline-none bg-white text-slate-800 focus:border-[#8eb02f] transition-all"
                           style="box-shadow:none"
                           onfocus="this.style.boxShadow='0 0 0 3px rgba(142,176,47,0.15)'; this.style.borderColor='#8eb02f'"
                           onblur="this.style.boxShadow='none'; this.style.borderColor='#e2e8f0'">
                </div>
            </div>

            <button @click="submit()" :disabled="loading"
                    class="w-full py-2.5 rounded-xl text-sm font-semibold text-white transition-all mt-2"
                    :class="loading ? 'opacity-70 cursor-not-allowed' : 'hover:opacity-90'"
                    style="background-color:#8eb02f">
                <span x-show="!loading" class="flex items-center justify-center gap-2">
                    Enviar enlace de recuperación
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                    </svg>
                </span>
                <span x-show="loading" class="flex items-center justify-center gap-2">
                    <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                    </svg>
                    Enviando...
                </span>
            </button>

            <div class="text-center pt-1">
                <a href="/login" class="text-xs text-slate-500 hover:underline">← Volver al inicio de sesión</a>
            </div>
        </div>
    </div>
</div>
