const links = [
  {
    label: 'Email',
    value: 'jonathan@example.com',
    href: 'mailto:jonathan@example.com',
  },
  {
    label: 'GitHub',
    value: 'github.com/jonathan',
    href: 'https://github.com/jonathan',
  },
]

export default function ContactPage() {
  return (
    <div className="mx-auto max-w-3xl px-6 py-16">
      <h1 className="mb-3 text-3xl font-semibold text-zinc-900 dark:text-white">Contact</h1>
      <p className="mb-12 text-sm text-zinc-600 dark:text-zinc-400">
        The best way to reach me is by email. I&apos;m also on GitHub.
      </p>
      <ul className="divide-y divide-zinc-200 border-y border-zinc-200 dark:divide-zinc-800 dark:border-zinc-800">
        {links.map(({ label, value, href }) => (
          <li key={label} className="flex flex-col gap-1 py-5 sm:flex-row sm:items-center sm:gap-8">
            <span className="w-24 shrink-0 text-sm text-zinc-500">{label}</span>
            <a
              href={href}
              className="text-sm text-zinc-700 transition-colors hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
              {...(href.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
            >
              {value}
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}