import { ArrowRight } from "lucide-react";
import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { AccordionComp } from "~/components/accordionComp";
import { Card, CardContent } from "~/components/ui/card";
import { useTranslation } from "~/providers/I18nProvider";

const Proprietari: NextPage = () => {
	const { t } = useTranslation();

	return (
		<>
			<Head>
				<title>{t.proprietari.head}</title>
				<meta content={t.proprietari.description} name="description" />
			</Head>
			<main className="mx-auto w-full max-w-8xl space-y-5 px-2 py-5 md:px-8">
				<div className="inline-block rounded-md bg-accent px-3 py-1 text-primary text-sm outline outline-neutral-500">
					{t.proprietari.titolo}
				</div>
				<div className="mx-auto w-full space-y-5 sm:space-y-14">
					<section className="relative mx-auto flex max-w-6xl flex-col-reverse items-center justify-between gap-8 px-4 py-4 sm:flex-row sm:gap-20 md:px-8">
						<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.proprietari.cta1.title1}{" "}
								<span className="text-indigo-600">
									{t.proprietari.cta1.title2}
								</span>
							</h3>
							<p className="mt-3 text-gray-500 leading-relaxed">
								{t.proprietari.cta1.desc}
							</p>
							<Link
								className="mt-5 inline-flex items-center rounded-full bg-indigo-50 px-4 py-2 font-medium text-indigo-600"
								href="/contatti"
							>
								{t.proprietari.contattaci}
								<ArrowRight className="ml-1 h-5 w-5 duration-150" />
							</Link>
						</div>
						<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="/rent_0.webp"
								width={1400}
							/>
						</div>
					</section>

					<Card className="mx-auto w-full max-w-4xl py-3">
						<CardContent>
							<AccordionComp
								className="w-full max-w-full"
								texts={t.proprietari.faq}
							/>
						</CardContent>
					</Card>

					<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="/rent_2.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.proprietari.cta2.title1}{" "}
								<span className="text-indigo-600">
									{t.proprietari.cta2.title2}
								</span>
								{t.proprietari.cta2.title3}
							</h3>
							<p className="mt-3 text-gray-500 leading-relaxed">
								{t.proprietari.cta2.desc}
							</p>
							<Link
								className="mt-5 inline-flex items-center rounded-full bg-indigo-50 px-4 py-2 font-medium text-indigo-600"
								href="/contatti"
							>
								{t.proprietari.contattaci}
								<ArrowRight className="ml-1 h-5 w-5 duration-150" />
							</Link>
						</div>
					</section>
				</div>
			</main>
		</>
	);
};
export default Proprietari;
