import Link from 'next/link'

export default function Hero() {
  return (
    <section className="mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">

      {/* Eyebrow label */}
      <div className="mb-10 flex items-center gap-4">
        <span className="h-px w-10 bg-zinc-300 dark:bg-zinc-700" />
        <span className="font-mono text-xs uppercase tracking-[0.2em] text-zinc-500">
          Software Engineer
        </span>
        <span className="h-px w-10 bg-zinc-300 dark:bg-zinc-700" />
      </div>

      {/* Name */}
      <h1 className="text-7xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-8xl">
        Jonathan
      </h1>

      {/* Tagline */}
      <p className="mt-6 max-w-md text-base leading-7 text-zinc-600 dark:text-zinc-400">
        I build clean, fast web applications — focused on great user
        experiences and solid engineering.
      </p>

      {/* Actions */}
      <div className="mt-12 flex flex-wrap items-center justify-center gap-4">
        <Link
          href="/projects"
          className="rounded-sm bg-zinc-900 px-8 py-3 text-sm font-semibold text-white transition-colors hover:bg-zinc-700 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
        >
          View Projects
        </Link>
        <Link
          href="/contact"
          className="rounded-sm border border-zinc-300 px-8 py-3 text-sm font-medium text-zinc-700 transition-colors hover:border-zinc-400 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-900 dark:hover:text-white"
        >
          Contact Me
        </Link>
      </div>

    </section>
  )
}