import { useUser } from "../hooks/useUser";
import { Link } from "react-router-dom";

import Nav from "../components/ui/Nav";
import coverWorker from "../assets/img/illustrations/cover_worker.svg";
import screenWorker1 from "../assets/img/illustrations/screen_worker_1.svg";
import screenWorker2 from "../assets/img/illustrations/screen_worker_2.svg";
import AnimatedPage from "../components/AnimatedPage";

import Clouds from "../components/animations/Clouds";

export default function Home() {
	const { screensTranslations } = useUser();

	if (!screensTranslations || !screensTranslations.home) return <p>loading</p>;
	const currentScreenTranslations = screensTranslations.home;
	const uiTranslations = screensTranslations.ui;

	return (
		<>
			<Clouds />
			<AnimatedPage className='page-container page-container--home'>
				<div className='screen screen--home'>
					<Nav />
					<section className='screen__content'>
						<img className='cover_worker' src={coverWorker} alt='' />
						<h1 className='application_title'>stay safe</h1>
						<h2 className='application_subtitle'>interactive</h2>
						<p className='application_description'>
							{currentScreenTranslations.app_description}
						</p>
						<Link
							title={uiTranslations.start}
							to='/select-profile'
							className='cta cta--construction cta--round cta--button-icon cta--play  '
						/>
					</section>
					<img className='screen_worker_1' src={screenWorker1} alt='' />
					<img className='screen_worker_2' src={screenWorker2} alt='' />
				</div>
			</AnimatedPage>
		</>
	);
}