import { useTranslations } from "next-intl";
import { TypographyH1, TypographyLead } from "../../components/ui/typography";
import { Badge } from "../../components/ui/badge";
import { Mail, MapPin, Phone } from "lucide-react";
import Image from "next/image";
import { Button } from "../../components/ui/button";
import { InstagramIcon } from "../../components/icons/instagram";
import { LinkedInIcon } from "../../components/icons/linkedin";
import { FacebookIcon } from "../../components/icons/facebook";

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)]"
          loading="eager"
        />
        <div className="flex flex-col gap-4">
          <div className="flex justify-center gap-3 flex-wrap">
            <Button asChild variant="outline">
              <a
                href="mailto:nico@byhaider.dev"
                aria-label={t("landingPage.contact.email")}
              >
                <Mail />
                nico@byhaider.dev
              </a>
            </Button>
            <Button asChild variant="outline">
              <a href="tel:+436702060140" aria-label={t("landingPage.contact.phone")}>
                <Phone />
                +43 670 2060140
              </a>
            </Button>
          </div>
          <div className="flex gap-3 justify-center">
            <Button asChild variant="ghost" size="icon">
              <a
                href="https://www.linkedin.com/in/nico-haider-164444316"
                target="_blank"
                rel="noopener noreferrer"
              >
                <span className="sr-only">{t("landingPage.social.linkedin")}</span>
                <LinkedInIcon className="size-5" />
              </a>
            </Button>
            <Button asChild variant="ghost" size="icon">
              <a
                href="https://www.instagram.com/nico.hdr8/"
                target="_blank"
                rel="noopener noreferrer"
              >
                <span className="sr-only">{t("landingPage.social.instagram")}</span>
                <InstagramIcon className="size-5" />
              </a>
            </Button>
            <Button asChild variant="ghost" size="icon">
              <a
                href="https://www.facebook.com/nico.haider.33/"
                target="_blank"
                rel="noopener noreferrer"
              >
                <span className="sr-only">{t("landingPage.social.facebook")}</span>
                <FacebookIcon className="size-5" />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}