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

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>
      <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 className="flex flex-col gap-4">
          <div className="flex justify-center gap-3">
            <Button variant="outline">
              <Mail/>
              nico@byhaider.dev
            </Button>
            <Button variant="outline">
              <Phone/>
              +43 670 2060140
            </Button>
          </div>
          <div className="flex gap-3 justify-center">
            {/* TODO: social media icons and links */}
            <Button variant="ghost"><Apple/></Button>
            <Button variant="ghost"><Apple/></Button>
            <Button variant="ghost"><Apple/></Button>
          </div>
        </div>
      </div>
    </div>
  );
}