import Typography, { ETypo, ETypoColor } 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, { EButtonstyletype, 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={ETypo.DISPLAY_LARGE}>
					<div className={classes["title"]}>Connectez-vous à votre plateforme LEcoffre.io</div>
				</Typography>
				<div className={classes["content"]}>
					<div className={classes["section"]}>
						<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
							Je suis un notaire / collaborateur
						</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={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_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={ETypo.TEXT_LG_REGULAR}>
						<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
					</Typography>
					<Link href="mailto:support@lecoffre.io">
						<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
							Contacter l'administrateur
						</Button>
					</Link>
				</div>
			</div>
		</DefaultDoubleSidePage>
	);
}
