import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";

import classes from "./classes.module.scss";
import LandingImage from "../Login/landing-connect.jpeg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Link from "next/link";
import Module from "@Front/Config/Module";

export default function LoginHome() {
	return (
		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
			<div className={classes["root"]}>
				<Typography typo={ITypo.H1}>
					<div className={classes["title"]}>Connectez-vous à votre plateforme LEcoffre.io</div>
				</Typography>
				<div className={classes["content"]}>
					<div className={classes["section"]}>
						<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
							Je suis un notaire
						</Typography>
						<Link href={Module.getInstance().get().modules.pages.Login.props.path}>
							<Button>Se connecter</Button>
						</Link>
					</div>
					<div className={classes["separator"]} />
					<div className={classes["section"]}>
						<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
							Je suis un client
						</Typography>
						<Link href={Module.getInstance().get().modules.pages.CustomersLogin.props.path}>
							<Button>Se connecter</Button>
						</Link>
					</div>
				</div>
				<div className={classes["bottom"]}>
					<Typography typo={ITypo.P_18}>
						<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
					</Typography>
					<Link href="mailto:g.texier@notaires.fr">
						<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
					</Link>
				</div>
			</div>
		</DefaultDoubleSidePage>
	);
}