import { DATA } from "@/app/resume";
import Image from "next/image";

import { Button } from "@/components/ui/button";
import { BlurFade } from "@/components/magicui/blur-fade";
import { TrackedLink } from "@/components/util-tracked-link";

const BLUR_FADE_DELAY = 0.01;

export default function ConnectPage() {
  const featuredSocials = ["Email", "LinkedIn", "GoogleScholar", "arXiv", "ResearchGate", "Gitea"];
  const socialLinks = Object.entries(DATA.contact.social)
    .filter(([name]) => featuredSocials.includes(name));

  return (
    <main 
      className="inset-0 flex flex-col items-center justify-center bg-background"
    >
      <div className="flex flex-col items-center space-y-8 text-center max-w-sm w-full p-6">
        <BlurFade delay={BLUR_FADE_DELAY * 1}>
          <Image
            src="/images/newshot_2.jpg"
            alt="Dr. Steffen Illium's headshot"
            width={128}
            height={128}
            className="rounded-full border shadow-sm"
          />
        </BlurFade>
        
        <BlurFade delay={BLUR_FADE_DELAY * 2}>
          <h1 className="text-4xl font-bold tracking-tight">
            Dr. Steffen Illium
          </h1>
        </BlurFade>
        <BlurFade delay={BLUR_FADE_DELAY * 3}>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-2 w-full">              
            {socialLinks.map(([name, social]) => (
                <TrackedLink className="truncate" href={social.url} key={name} eventName={`${name}-social`} target="_blank">
                    <Button variant="outline" className="w-full">
                        <social.icon className="size-4 mr-2" />
                        {name}
                    </Button>
                </TrackedLink>
            ))}
          </div>
        </BlurFade>

        <div className="flex w-full flex-col items-center space-y-4 pb-4">

          <BlurFade delay={BLUR_FADE_DELAY * 5}>
            <a href="/images/qr.png" download="SteffenIllium-QRCode.png">
              <Image
                src="/images/qr.png"
                alt="QR Code to connect"
                width={240}
                height={240}
                className="rounded-xl shadow-lg hover:opacity-80 transition-opacity"
              />
            </a>
          </BlurFade>
        </div>
      </div>
    </main>
  );
}