import Menu from "../components/ui/Menu";
import { useWordpressCustomData } from "../services/WordpressFetchData";
import coverWorker from "../assets/img/cover_worker.svg";
import screenWorker1 from "../assets/img/screen_worker_1.svg";
import screenWorker2 from "../assets/img/screen_worker_2.svg";
import { Link } from "react-router-dom";

import AnimatedPage from "../components/AnimatedPage";
// import screensTranslations from "../data/screensTranslations.json";
import { useUser } from "../hooks/useUser";
import { useEffect } from "react";

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

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

	return (
		<AnimatedPage className='page-container page-container--home'>
			<div className='screen screen--home'>
				<Menu />
				<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
						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>
	);
}
