import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import { Badge } from "~/components/ui/badge";
import { useTranslation } from "~/providers/I18nProvider";

/**
 * Pagina chi siamo: /chi-siamo
 */
const ChiSiamo: NextPage = () => {
	const { t } = useTranslation();
	return (
		<>
			<Head>
				<title>{t.heads.chi_siamo_titolo}</title>
				<meta content={t.heads.main_description} name="description" />
			</Head>
			<main className="mx-auto w-full max-w-8xl space-y-5 px-4 py-5 md:px-8">
				<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
					{t.chi_siamo.title}
				</Badge>
				<div className="mx-auto grid w-full max-w-6xl grid-flow-row grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
					<Image
						alt="Ufficio"
						className="w-full rounded-lg bg-neutral-200 object-cover dark:bg-neutral-800"
						height={1050}
						src="/ufficio.webp"
						width={1400}
					/>
					<div className="flex w-full flex-1 flex-col items-center justify-center rounded-lg bg-neutral-200 p-4 sm:mx-auto sm:text-center md:max-w-max md:text-left dark:bg-neutral-800">
						<h3 className="font-semibold text-3xl text-foreground md:text-4xl">
							{t.chi_siamo.cta.title1}
							<span className="text-indigo-600">{t.chi_siamo.cta.title2}</span>
						</h3>
						<p className="mt-3 leading-relaxed">{t.chi_siamo.cta.desc}</p>
					</div>
					<div className="w-full space-y-2 rounded-lg bg-neutral-200 p-4 dark:bg-neutral-800">
						<h3 className="font-bold text-xl">{t.chi_siamo.mission}</h3>
						<p>{t.chi_siamo.mission_desc}</p>
					</div>
					<div className="w-full space-y-2 rounded-lg bg-neutral-200 p-4 dark:bg-neutral-800">
						<h3 className="font-bold text-xl">{t.chi_siamo.vision}</h3>
						<p>{t.chi_siamo.vision_desc}</p>
					</div>
					<div className="w-full space-y-2 rounded-lg bg-neutral-200 p-4 sm:col-span-2 dark:bg-neutral-800">
						<h3 className="font-bold text-xl">{t.chi_siamo.progetto}</h3>
						<p>{t.chi_siamo.progetto_desc}</p>
					</div>
					<div className="p-2 text-center sm:col-span-2">
						<p className="text-lg">{t.chi_siamo.indirizzo}</p>
					</div>
				</div>
			</main>
		</>
	);
};
export default ChiSiamo;
