"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card } from "@/components/ui/card";
import { Youtube, Instagram, ShoppingBag, Mail, ArrowUpRight } from "lucide-react";
import Image from "next/image";

const links = [
  {
    title: "Watch my latest YouTube video",
    url: "https://youtube.com",
    icon: <Youtube className="w-6 h-6" />,
    color: "bg-[#FF0000]",
  },
  {
    title: "Follow me on Instagram",
    url: "https://instagram.com",
    icon: <Instagram className="w-6 h-6" />,
    color: "bg-[#E1306C]",
  },
  {
    title: "Shop my digital products",
    url: "https://shop.com",
    icon: <ShoppingBag className="w-6 h-6" />,
    color: "bg-[#00B2FF]",
  },
  {
    title: "Join the Newsletter",
    url: "https://newsletter.com",
    icon: <Mail className="w-6 h-6" />,
    color: "bg-[#FFD700]",
  },
];

export default function Home() {
  return (
    <main className="min-h-screen bg-[#FF3D00] pt-24 pb-12 px-4 relative overflow-hidden">
      <div className="fixed inset-0 z-0 opacity-30 pointer-events-none">
        <Image 
          src="https://images.unsplash.com/photo-1705254613735-1abb457f8a60?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHx2aWJyYW50JTIwYWJzdHJhY3QlMjBiYWNrZ3JvdW5kJTIwY29sb3JmdWx8ZW58MHx8fHwxNzY4NDEzMTQzfDA&ixlib=rb-4.1.0&q=80&w=1080"
          alt="background"
          fill
          className="object-cover"
        />
      </div>

      <Container className="relative z-10 max-w-xl">
        <div className="flex flex-col items-center text-center mb-12">
          <div className="relative w-32 h-32 mb-6 border-4 border-black rounded-full overflow-hidden shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
            <Image
              src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=400&h=400&fit=crop"
              alt="Profile"
              fill
              className="object-cover"
            />
          </div>
          <Heading className="text-white text-5xl md:text-6xl font-black uppercase tracking-tighter drop-shadow-[4px_4px_0px_rgba(0,0,0,1)]">
            Alex Creates
          </Heading>
          <Subheading className="text-black bg-white px-4 py-1 mt-4 font-bold text-xl border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
            Digital Creator & Artist
          </Subheading>
          <p className="mt-6 text-white font-medium text-lg max-w-md drop-shadow-md">
            Building cool things on the internet. Sharing my journey through art, code, and content.
          </p>
        </div>

        <div className="space-y-4">
          {links.map((link, index) => (
            <a
              key={index}
              href={link.url}
              target="_blank"
              rel="noopener noreferrer"
              className="block group"
            >
              <Card className={`p-4 flex items-center justify-between border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-none ${link.color}`}>
                <div className="flex items-center gap-4">
                  <div className="p-2 bg-white border-2 border-black rounded-lg">
                    {link.icon}
                  </div>
                  <span className="font-black text-xl uppercase tracking-tight text-black">
                    {link.title}
                  </span>
                </div>
                <ArrowUpRight className="w-6 h-6 text-black" />
              </Card>
            </a>
          ))}
        </div>

        <footer className="mt-16 text-center">
          <p className="font-bold text-black uppercase tracking-widest text-sm">
            © 2026 Alex Creates Studio
          </p>
        </footer>
      </Container>
    </main>
  );
}