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";

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-2 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 w-full max-w-6xl space-y-5 sm:space-y-14">
					<section className="relative mx-auto flex max-w-6xl flex-col items-center justify-between gap-8 px-4 py-4 sm:flex-row sm:gap-20 md:px-8">
						<div className="mx-auto mt-5 flex-1 sm:w-9/12 md:mt-0 md:w-auto">
							<Image
								alt=""
								className="w-full rounded-md object-cover"
								height={1050}
								src="/ufficio.webp"
								width={1400}
							/>
						</div>
						<div className="max-w-lg flex-1 py-5 sm:mx-auto sm:text-center md:max-w-max md:text-left">
							<h3 className="font-semibold text-3xl text-gray-800 md:text-4xl">
								{t.chi_siamo.cta.title1}
								<span className="text-indigo-600">
									{t.chi_siamo.cta.title2}
								</span>
							</h3>
							<p className="mt-3 text-gray-500 leading-relaxed">
								{t.chi_siamo.cta.desc}
							</p>
						</div>
					</section>

					<div className="flex w-full flex-col gap-8">
						<div className="flex flex-col gap-8 sm:flex-row sm:items-stretch sm:justify-between">
							<div className="w-full basis-1/2 space-y-2 rounded-lg border border-border p-4 hover:bg-neutral-100">
								<h3 className="font-bold text-xl">{t.chi_siamo.mission}</h3>
								<p>{t.chi_siamo.mission_desc}</p>
							</div>
							<div className="w-full basis-1/2 space-y-2 rounded-lg border border-border p-4 hover:bg-neutral-100">
								<h3 className="font-bold text-xl">{t.chi_siamo.vision}</h3>
								<p>{t.chi_siamo.vision_desc}</p>
							</div>
						</div>
						<div className="w-full space-y-2 rounded-lg border border-border p-4 hover:bg-neutral-100">
							<h3 className="font-bold text-xl">{t.chi_siamo.progetto}</h3>
							<p>{t.chi_siamo.progetto_desc}</p>
						</div>
					</div>

					<section className="text-center">
						<p className="text-lg">{t.chi_siamo.indirizzo}</p>
					</section>
				</div>
			</main>
		</>
	);
};
export default ChiSiamo;
