import Image from "next/image"
import React from "react"
import { FlipWords } from "@/components/ui/flip-words"

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 text-neutral-100 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">
          <Image
            src="/images/profile.jpg"
            alt="Hand drawn portrait of Nicholai"
            width={160}
            height={160}
            className="h-40 w-40 rounded-full object-cover ring-1 ring-neutral-800"
            priority
          />
        </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-400 font-normal">
            I wanted to justify the $6.39 I spent on the domain.
          </p>
          <div className="text-sm text-neutral-400">
            <FlipWords words={["VFX Artist", "Developer", "Guitarist", "Owns a gun"]} className="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-500">
            Hyperlinks
          </p>
          <ul className="space-y-1">
            <li className="text-neutral-200">
              VFX Supervisor at{" "}
              <a
                href="https://biohazardvfx.com"
                className="underline decoration-neutral-500 hover:decoration-neutral-300"
                target="_blank"
                rel="noopener noreferrer"
              >
                Biohazard VFX
              </a>
            </li>
            <li className="text-neutral-200">
              Developer{" "}
              <a
                href="https://fortura.cc"
                className="underline decoration-neutral-500 hover:decoration-neutral-300"
                target="_blank"
                rel="noopener noreferrer"
              >
                Fortura Data Solutions
              </a>
            </li>
            <li>
              <a
                href="mailto:nicholai@biohazardvfx.com"
                className="text-xs underline decoration-neutral-500 hover:decoration-neutral-300"
              >
                Email me
              </a>
            </li>
            <li className="text-neutral-200">
              <a
                href="https://www.instagram.com/nicholai.exe/"
                className="underline decoration-neutral-500 hover:decoration-neutral-300"
                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-2">
          <p id="listening-title" className="mt-2 text-xs font-medium uppercase tracking-wider text-neutral-500">
            Listening
          </p>
          <div className="relative w-full max-w-sm mx-auto py-2">
            <iframe
              title="Spotify playlist"
              style={{ borderRadius: 12 }}
              src="https://open.spotify.com/embed/playlist/1kV9JPnhvpfk0UtcpslRpa?utm_source=generator&theme=0"
              width="100%"
              height="200"
              loading="lazy"
              allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
            />
          </div>
        </section>

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