<div class="card" style="width:100%;max-width:480px;margin:auto;">
    <div class="logo" style="text-align:center;margin-bottom:1rem;">
        <span class="logo" style="display:inline-block;">
            <img src="/assets/logo-dark.png" alt="GestorEasy" style="height:40px; display:block; margin:auto;">
        </span>
        <div class="muted" style="margin-top:8px;">Recuperar senha</div>
    </div>

    <p class="muted" style="text-align:center;margin-bottom:12px;">Digite seu e-mail para receber o link de recuperação.</p>

    <form id="forgotForm">
        <div class="form-group">
            <label for="email">E-mail</label>
            <input type="email" id="email" name="email" required>
        </div>
        <button type="submit" class="btn" id="sendBtn" style="width:100%;">Enviar link</button>
    </form>

    <div id="feedback" class="muted" style="text-align:center;margin-top:10px; display:none;"></div>

    <div style="text-align:center;margin-top:12px;">
        <a href="/login" style="text-decoration:none;color: var(--color-olive);">Voltar para o login</a>
    </div>
</div>

<script>
    const form = document.getElementById('forgotForm');
    const btn = document.getElementById('sendBtn');
    const feedback = document.getElementById('feedback');

    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        btn.disabled = true;
        btn.textContent = 'Enviando...';
        feedback.style.display = 'none';

        // Placeholder: API a definir (/api/auth/forgot-password)
        await new Promise(r => setTimeout(r, 800));
        feedback.textContent = 'Se o e-mail existir, enviaremos um link de recuperação.';
        feedback.style.display = 'block';
        btn.disabled = false;
        btn.textContent = 'Enviar link';
    });
</script>

<div class="muted" style="text-align:center;margin-top:12px;">
    © <?= date('Y') ?> GestorEasy. Todos os direitos reservados.
</div>