import type { NextPage } from "next";
import Head from "next/head";
import { useTranslation } from "~/providers/I18nProvider";
const ChiSiamo: NextPage = () => {
  const { t } = useTranslation();
  //todo aggiungere immagini dell' ufficio
  return (
    <>
      <Head>
        <title>{t.heads.chi_siamo_titolo}</title>
        <meta name="description" content={t.heads.main_description} />
      </Head>
      <main className="mx-auto w-full max-w-6xl space-y-8 px-2 py-5 sm:space-y-20 sm:px-8">
        <div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm">
          {t.chi_siamo.title}
        </div>
        <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="border-border w-full basis-1/2 space-y-2 rounded-lg border p-4 hover:bg-neutral-100">
              <h3 className="text-xl font-bold">{t.chi_siamo.mission}</h3>
              <p>{t.chi_siamo.mission_desc}</p>
            </div>
            <div className="border-border w-full basis-1/2 space-y-2 rounded-lg border p-4 hover:bg-neutral-100">
              <h3 className="text-xl font-bold">{t.chi_siamo.vision}</h3>
              <p>{t.chi_siamo.vision_desc}</p>
            </div>
          </div>
          <div className="border-border w-full space-y-2 rounded-lg border p-4 hover:bg-neutral-100">
            <h3 className="text-xl font-bold">{t.chi_siamo.progetto}</h3>
            <p>{t.chi_siamo.progetto_desc}</p>
          </div>
        </div>
      </main>
    </>
  );
};
export default ChiSiamo;
