import React from "react"
import Link from "next/link"
import SidebarMenu from "@/app/components/sidebar-menu"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { FlipWords } from "@/components/ui/flip-words"
import { AvatarMotion } from "@/app/components/avatar-motion"
import { BlogPosts } from "@/components/posts"

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="min-h-screen">
      <div className="mx-auto grid w-full max-w-5xl grid-cols-1 gap-6 px-4 pt-10 pb-16 md:grid-cols-12 md:gap-8">
        {/* Sidebar */}
        <div className="md:col-span-3">
          <SidebarMenu />
        </div>

        {/* Content column */}
        <div className="md:col-span-9 flex flex-col gap-6">
          {/* About */}
          <section id="about" aria-label="About">
            <Card>
              <CardHeader className="flex items-center gap-4 sm:flex-row">
                <AvatarMotion
                  src="/images/profile.jpg"
                  alt="Hand drawn portrait of Nicholai"
                  size={96}
                />
                <div>
                  <CardTitle className="tracking-tight !normal-case">About</CardTitle>
                  <CardDescription>Nicholai • VFX Artist & Developer</CardDescription>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-sm text-neutral-700 dark:text-neutral-300">
                  I wanted to justify the $6.39 I spent on the domain. Building cinematic, accessible web experiences.
                </p>

                <div className="text-sm text-neutral-800 dark:text-neutral-200">
                  <FlipWords words={["VFX Artist", "Developer"]} className="font-medium" />
                </div>

                <ul className="flex flex-wrap gap-3 pt-1 text-sm">
                  <li className="text-neutral-900 dark:text-neutral-200">
                    VFX Supervisor at{" "}
                    <a href="https://biohazardvfx.com" target="_blank" rel="noopener noreferrer">
                      Biohazard VFX
                    </a>
                  </li>
                  <li className="text-neutral-900 dark:text-neutral-200">
                    Developer{" "}
                    <a href="https://fortura.cc" target="_blank" rel="noopener noreferrer">
                      Fortura Data Solutions
                    </a>
                  </li>
                  <li>
                    <a href="mailto:nicholai@biohazardvfx.com" className="underline underline-offset-4">
                      Email me
                    </a>
                  </li>
                  <li className="text-neutral-900 dark:text-neutral-200">
                    <a
                      href="https://www.instagram.com/nicholai.exe/"
                      target="_blank"
                      rel="me noopener noreferrer"
                    >
                      Instagram
                    </a>
                    <span className="ml-1 text-xs text-neutral-500">– I hate Instagram</span>
                  </li>
                </ul>

                {/* Listening */}
                <div className="pt-2">
                  <h3 className="mb-2 text-xs font-medium uppercase tracking-wider text-neutral-600 dark:text-neutral-500">
                    Listening
                  </h3>
                  <div className="spotify-card">
                    <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>
                </div>
              </CardContent>
            </Card>
          </section>

          {/* Writing */}
          <section id="writing" aria-label="Writing">
            <Card>
              <CardHeader>
                <CardTitle className="!normal-case">Writing</CardTitle>
                <CardDescription>Recent posts</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="my-2">
                  <BlogPosts />
                </div>
                <div className="mt-4">
                  <Link
                    href="/blog"
                    className="inline-flex items-center rounded-md border border-black/10 dark:border-white/10 px-3 py-2 text-sm hover:bg-black/[0.04] dark:hover:bg-white/5"
                  >
                    View all posts
                  </Link>
                </div>
              </CardContent>
            </Card>
          </section>

          {/* Contact */}
          <section id="contact" aria-label="Contact">
            <Card>
              <CardHeader>
                <CardTitle className="!normal-case">Contact</CardTitle>
                <CardDescription>Let's build something</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm">
                  Prefer email:
                  {" "}
                  <a href="mailto:nicholai@biohazardvfx.com" className="underline underline-offset-4">
                    nicholai@biohazardvfx.com
                  </a>
                </p>
                <p className="footer-small mt-4">© {year} Nicholai · $6.39 well spent.</p>
              </CardContent>
            </Card>
          </section>
        </div>
      </div>
    </main>
  )
}