<template>
    <Head title="Forgot Password" />

    <div class="auth-page">
        <div class="auth-card">
            <div class="auth-logo">
                <svg width="36" height="36" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="2" width="13" height="13" rx="3" fill="#EA4335"/>
                    <rect x="17" y="2" width="13" height="13" rx="3" fill="#4285F4"/>
                    <rect x="2" y="17" width="13" height="13" rx="3" fill="#FBBC05"/>
                    <rect x="17" y="17" width="13" height="13" rx="3" fill="#34A853"/>
                </svg>
                <span class="auth-logo-name">CRMfic</span>
            </div>

            <h1 class="auth-title">Forgot your password?</h1>
            <p class="auth-sub">Enter your email and we'll send you a link to reset it.</p>

            <div v-if="status" class="auth-error" style="background:#f0fdf4;border-color:#bbf7d0;color:#16a34a">{{ status }}</div>
            <div v-if="form.errors.email" class="auth-error">{{ form.errors.email }}</div>

            <form @submit.prevent="submit" class="auth-form">
                <div class="form-group">
                    <label for="email" class="form-label">Email address</label>
                    <input
                        id="email"
                        v-model="form.email"
                        type="email"
                        class="form-input"
                        :class="{ 'is-error': form.errors.email }"
                        placeholder="you@example.com"
                        autocomplete="username"
                        required
                        autofocus
                    />
                </div>

                <button type="submit" class="auth-btn" :disabled="form.processing">
                    <span v-if="form.processing" class="auth-btn-spinner"></span>
                    {{ form.processing ? 'Sending…' : 'Email password reset link' }}
                </button>
            </form>

            <a href="/login" class="form-forgot" style="display:block;text-align:center;margin-top:16px">Back to sign in</a>
        </div>

        <p class="auth-footer">
            &copy; {{ new Date().getFullYear() }} CRMfic. All rights reserved.
        </p>
    </div>
</template>

<script setup>
import { Head, useForm } from '@inertiajs/vue3';

defineProps({
    status: String,
});

const form = useForm({
    email: '',
});

const submit = () => {
    form.post(route('password.email'));
};
</script>
