import React from "react"
import { FlipWords } from "@/components/ui/flip-words"
import { AvatarMotion } from "@/app/components/avatar-motion"

export const metadata = {
  title: "Nicholai",
  description: "Professional portfolio of Nicholai — VFX Supervisor & Developer",
  openGraph: {
    title: "Nicholai — VFX Supervisor & Developer",
    description: "Professional portfolio of Nicholai — VFX Supervisor & Developer",
    url: "https://nicholai.work",
    images: ["/images/profile.jpg"],
    type: "website",
  },
};

export const dynamic = "force-dynamic"

export default function Home() {
  const year = new Date().getFullYear();

  return (
    <main className="flex min-h-screen items-center justify-center antialiased">
      <div className="w-full max-w-xl mx-auto flex flex-col items-center text-center gap-8 px-4 py-12">
        <section aria-label="Profile photo">
          <AvatarMotion
            src="/images/profile.jpg"
            alt="Hand drawn portrait of Nicholai"
            size={160}
          />
        </section>

        <section aria-labelledby="intro-title" className="space-y-2">
          <h1 id="intro-title" className="text-2xl font-semibold">
            Nicholai
          </h1>
          <p className="text-xs text-neutral-600 dark:text-neutral-400 font-normal">
            I wanted to justify the $6.39 I spent on the domain.
          </p>
          <div className="text-sm text-neutral-700 dark:text-neutral-400">
            <FlipWords words={["VFX Artist", "Developer", "Guitarist", "Owns a gun"]} className="text-neutral-900 dark:text-neutral-200" /> 
          </div>
        </section>

        <nav aria-label="Hyperlinks" className="w-full space-y-1">
          <p className="text-xs font-medium uppercase tracking-wider text-neutral-600 dark:text-neutral-500">
            Hyperlinks
          </p>
          <ul className="space-y-1">
            <li className="text-neutral-900 dark:text-neutral-200">
              VFX Supervisor at{" "}
              <a
                href="https://biohazardvfx.com"
                className=""
                target="_blank"
                rel="noopener noreferrer"
              >
                Biohazard VFX
              </a>
            </li>
            <li className="text-neutral-900 dark:text-neutral-200">
              Developer{" "}
              <a
                href="https://fortura.cc"
                className=""
                target="_blank"
                rel="noopener noreferrer"
              >
                Fortura Data Solutions
              </a>
            </li>
            <li>
              <a
                href="mailto:nicholai@biohazardvfx.com"
                className="text-xs"
              >
                Email me
              </a>
            </li>
            <li className="text-neutral-900 dark:text-neutral-200">
              <a
                href="https://www.instagram.com/nicholai.exe/"
                className=""
                target="_blank"
                rel="me noopener noreferrer"
              >
                Instagram
              </a>
              <span className="text-xs text-neutral-500"> - I hate Instagram</span>
            </li>
          </ul>
        </nav>

        <section aria-labelledby="listening-title" className="w-full space-y-4">
            <h3 id="listening-title" className="text-sm font-medium uppercase tracking-wider text-neutral-600 dark:text-neutral-500 mb-4">
              Listening
            </h3>
            <div className="flex-1 flex items-center justify-center">
              <iframe
                title="Spotify playlist"
                style={{ borderRadius: 12 }}
                src="https://open.spotify.com/embed/playlist/1kV9JPnhvpfk0UtcpslRpa?utm_source=generator&theme=0"
                width="290"
                height="220"
                loading="lazy"
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
              />
            </div>
        </section>

        <footer className="pt-6 text-center text-xs text-neutral-600 dark:text-neutral-500">
          © {year} Nicholai · $6.39 well spent.
        </footer>
      </div>
    </main>
  )
}
