import { Metadata } from 'next';
import styles from '@/app/styles/login.module.scss'
import LogoIcon from '@/app/ui/logo-icon';
import Link from 'next/link';
import LoginForm from '@/app/ui/login-form';

export const metadata: Metadata = {
	title: 'Login',
};

export default function Home() {
	return (
		<div className={`${styles['login-container-wrapper']}`}>
			<div className={`${styles['login-container']}`}>
				<div className={`${styles['logo']}`}>
					<LogoIcon />
					<h1>NO COPY</h1>
					<p>Защита авторских прав</p>
				</div>
				<LoginForm />
				<div className="divider">
					<span>или войти через</span>
				</div>
				<div className={`${styles['register-link']}`}>
					<p>Нет аккаунта? <Link href="register">Зарегистрироваться</Link></p>
				</div>
				<div className={`${styles['features']}`}>
					<div className={`${styles['feature']}`}>
						<svg className={`${styles['feature-icon']}`} viewBox="0 0 24 24" fill="currentColor">
							<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
						</svg>
						Защита контента скрытыми водяными знаками
					</div>
					<div className={`${styles['feature']}`}>
						<svg className={`${styles['feature-icon']}`} viewBox="0 0 24 24" fill="currentColor">
							<path d="M13 10V3L4 14h7v7l9-11h-7z"></path>
						</svg>
						Мониторинг нарушений в реальном времени
					</div>
					<div className={`${styles['feature']}`}>
						<svg className={`${styles['feature-icon']}`} viewBox="0 0 24 24" fill="currentColor">
							<path d="M12 1L3 5v6c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V5l-9-4z"></path>
						</svg>
						Надежное хранение и безопасность данных
					</div>
				</div>
			</div>
		</div>
	);
}