import Link from 'next/link';
import { ThemeToggle } from './ThemeToggle';

const SITE_NAME = process.env.NEXT_PUBLIC_SITE_NAME ?? 'GamesJi';
const PLAY_URL = process.env.GAMESJI_PLAY_URL ?? 'https://gamesji.com/games';

export function Header() {
  return (
    <header className="sticky top-0 z-40 border-b border-ink-line/80 bg-ink/80 backdrop-blur-lg">
      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
        <Link href="/" className="flex items-center gap-2 font-display text-xl font-bold tracking-wide">
          <span className="inline-block h-2.5 w-2.5 bg-signal shadow-signal" aria-hidden />
          {SITE_NAME}
          <span className="text-haze">/hub</span>
        </Link>

        <nav className="hidden items-center gap-6 font-mono text-sm uppercase tracking-wide text-haze md:flex">
          <Link href="/games" className="transition-colors hover:text-mist">
            Directory
          </Link>
          <Link href="/games?sort=trending" className="transition-colors hover:text-mist">
            Trending
          </Link>
          <Link href="/games?sort=upcoming" className="transition-colors hover:text-mist">
            Upcoming
          </Link>
        </nav>

        <div className="flex items-center gap-3">
          <ThemeToggle />
          <a href={PLAY_URL} className="btn-primary !px-4 !py-2 text-sm">
            Play Free Games
          </a>
        </div>
      </div>
    </header>
  );
}
