import { A, useNavigate } from "@solidjs/router";
import type { Component } from "solid-js";
import styles from "./login.module.scss";

const ForgotPassword: Component = () => {
	const navigate = useNavigate();

	const handleSubmit = (event: Event) => {
		event.preventDefault();
		navigate("/auth/login");
	};

	return (
		<main class={styles["login-page"]}>
			<section class={styles["login-shell"]}>
				<div class={styles["login-copy"]}>
					<A href="/" class={styles["back-link"]}>
						Back to home
					</A>

					<p class={styles.eyebrow}>Account help</p>
					<h1 class={styles.title}>Reset your password</h1>
					<p class={styles.description}>We&apos;ll send you a reset link so you can get back into your dashboard quickly.</p>

					<div class={styles["benefit-list"]}>
						<div class={styles["benefit-item"]}>
							<span class={styles["benefit-number"]}>01</span>
							<div>
								<h2>Check your inbox</h2>
								<p>Use the same email address you signed up with and we&apos;ll send a recovery link there.</p>
							</div>
						</div>

						<div class={styles["benefit-item"]}>
							<span class={styles["benefit-number"]}>02</span>
							<div>
								<h2>Create a fresh password</h2>
								<p>Pick a strong new password, then sign back in and continue your assignments.</p>
							</div>
						</div>
					</div>
				</div>

				<form class={styles["login-card"]} onSubmit={handleSubmit}>
					<div class={styles["card-header"]}>
						<h2>Forgot password?</h2>
						<p>Enter your email and we&apos;ll send you a reset link.</p>
					</div>

					<div class={styles["field-group"]}>
						<label for="reset-email">Email address</label>
						<input id="reset-email" type="email" name="email" autocomplete="email" placeholder="you@example.com" />
					</div>

					<button type="submit">Send reset link</button>

					<p class={styles["support-copy"]}>
						Remembered it? <A href="/auth/login">Back to sign in</A>
					</p>
				</form>
			</section>
		</main>
	);
};

export default ForgotPassword;
