import Link from 'next/link';

const SITE_NAME = process.env.NEXT_PUBLIC_SITE_NAME ?? 'GamesJi';

const GENRE_LINKS = ['Action', 'RPG', 'Battle Royale', 'Puzzle', 'Strategy', 'Simulation'];
const PLATFORM_LINKS = ['PC', 'PlayStation', 'Xbox', 'Nintendo Switch', 'Mobile'];

export function Footer() {
  return (
    <footer className="mt-24 border-t border-ink-line/80">
      <div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 md:grid-cols-4">
        <div>
          <div className="font-display text-lg font-bold">{SITE_NAME} Hub</div>
          <p className="mt-2 max-w-xs text-sm text-haze">
            An automatically maintained reference for games across every platform — sourced from official
            APIs and public metadata, written fresh by an editorial content pipeline with a quality gate,
            not scraped from other sites.
          </p>
        </div>

        <div>
          <div className="stat-label mb-3">Genres</div>
          <ul className="space-y-2 text-sm text-haze">
            {GENRE_LINKS.map((g) => (
              <li key={g}>
                <Link href={`/games?genre=${encodeURIComponent(g)}`} className="hover:text-mist">
                  {g}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <div className="stat-label mb-3">Platforms</div>
          <ul className="space-y-2 text-sm text-haze">
            {PLATFORM_LINKS.map((p) => (
              <li key={p}>
                <Link href={`/games?platform=${encodeURIComponent(p)}`} className="hover:text-mist">
                  {p}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <div className="stat-label mb-3">About this site</div>
          <ul className="space-y-2 text-sm text-haze">
            <li>Game metadata via IGDB &amp; RAWG</li>
            <li>Original AI-assisted writing, quality-gated before publish</li>
            <li>No content is scraped or copied from other sites</li>
          </ul>
        </div>
      </div>
      <div className="border-t border-ink-line/60 px-4 py-4 text-center text-xs text-haze sm:px-6">
        © {new Date().getFullYear()} {SITE_NAME}. Game data via IGDB and RAWG. All trademarks belong to
        their respective owners.
      </div>
    </footer>
  );
}
