import { useTranslations } from "next-intl";
import { TypographyH1, TypographyLead } from "../../components/ui/typography";
import { Badge } from "../../components/ui/badge";
import { MapPin } from "lucide-react";
import Image from "next/image";

export default function Home() {
  const t = useTranslations();
  
  return (
    <div className="flex flex-row flex-wrap gap-x-20 gap-y-10 justify-center items-center py-10 px-5 md:px-10 lg:px-0">
      <div className="flex flex-col gap-5 w-full basis-full items-center text-center lg:basis-[40%] lg:items-start lg:text-left">
        <TypographyH1>{t('landingPage.title')}</TypographyH1>
        <TypographyLead>{t('landingPage.subtitle')}</TypographyLead>
        <Badge variant="secondary">
          <MapPin/>
          {t('landingPage.location')}
        </Badge>
      </div>
      <Image
        src="/me.png"
        alt="Picture of me"
        width={380}
        height={380}
        style={{
          filter: "drop-shadow(10px 0 25px rgb(from color-mix(in oklch, var(--foreground) 9%, transparent) r g b / .05))",
        }}
        className="mask-[linear-gradient(to_bottom,#000_80%,#0000)]"
      />
    </div>
  );
}