import { Helmet } from "react-helmet";
import { Link } from "react-router-dom";

export default function Landing() {
  return (
    <>
      <Helmet>
        <title>Clickerz — Tetard Universe</title>
        <meta
          name="description"
          content="Clickerz — Clicker idle dans le Tetard Universe. Fais éclore des têtards, évolue et domine le marais !"
        />
      </Helmet>
      <main className="min-h-[92vh] mt-20 flex flex-col items-center justify-center gap-8 bg-[var(--bg-color)]">
        <div className="flex flex-col items-center gap-4 text-center px-4">
          <h1 className="text-4xl md:text-6xl font-bold text-gray-800 font-[var(--font)]">
            Clickerz
          </h1>
          <p className="text-lg md:text-xl text-gray-600 font-[var(--font)] max-w-md">
            Fais éclore des têtards, construis ton empire et domine le marais.
          </p>
        </div>

        <Link
          to="/jeu"
          className="px-8 py-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-lg font-semibold font-[var(--font)] transition-all hover:scale-105 shadow-lg shadow-emerald-600/30"
        >
          Entrer dans le Marais
        </Link>

        <p className="text-sm text-gray-500 font-[var(--font)]">
          Pas de compte requis — joue en mode invité
        </p>
      </main>
    </>
  );
}
