const links = [
  {
    label: "LinkedIn",
    url: "https://www.linkedin.com/in/juntekim",
    icon: "💼",
    color: "bg-blue-600 hover:bg-blue-700",
  },
  {
    label: "YouTube — The Pragmatic Automator",
    url: "https://www.youtube.com/@juntekim",
    icon: "▶️",
    color: "bg-red-600 hover:bg-red-700",
  },
  {
    label: "GitHub",
    url: "https://github.com/kimjunte",
    icon: "🐙",
    color: "bg-zinc-800 hover:bg-zinc-700",
  },
  {
    label: "My Self-Hosted Stack",
    url: "/SelfHosted",
    icon: "🖥️",
    color: "bg-zinc-700 hover:bg-zinc-600",
  },
];

export default function About() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-zinc-950 px-4 py-16">
      <div className="flex flex-col items-center mb-10">
        <h1 className="text-2xl font-bold text-white">Junte Kim</h1>
        <p className="text-zinc-400 mt-1 text-sm">Builder · Automator · Homelab Tinkerer</p>
      </div>

      <div className="w-full max-w-sm flex flex-col gap-3">
        {links.map((link) => (
          <a
            key={link.label}
            href={link.url}
            target={link.url.startsWith("http") ? "_blank" : "_self"}
            rel="noopener noreferrer"
            className={`${link.color} text-white rounded-xl px-5 py-4 flex items-center gap-3 font-medium transition-colors duration-150`}
          >
            <span className="text-xl">{link.icon}</span>
            <span>{link.label}</span>
          </a>
        ))}
      </div>
    </div>
  );
}