"use client";

import Link from "next/link";
import { useSession } from "next-auth/react";
import Header from "@/components/Header";

export default function LandingPage() {
  const { data: session } = useSession();

  const isAdmin = session?.user?.role === "ADMIN";

  return (
    <main className="min-h-screen flex flex-col">
      <Header />
      <div className="flex flex-1 flex-col items-center justify-center px-4 py-8">
        <div className="mb-8 mt-4 text-center">
          <div className="mx-auto mb-4 h-24 w-24 overflow-hidden rounded-full border-2 border-primary-500">
            <img
              src="/images/logo-muaythai.jpg"
              alt="Juanito Logo"
              className="h-full w-full object-cover"
            />
          </div>
          <h1 className="text-3xl font-extrabold tracking-tight">
            Juanito<span className="text-primary-500">Sport</span>
          </h1>
          <p className="mt-2 text-white/60">
            Force, Mobilité & Performance
          </p>
        </div>

        <div className="flex w-full max-w-sm flex-col gap-4">
          <Link
            href="/muay-thai"
            className="group flex flex-col items-center rounded-3xl border border-primary-600/40 bg-gradient-to-br from-primary-800/40 to-dark-800 p-8 text-center shadow-xl transition-all hover:scale-[1.02] hover:border-primary-500 active:scale-95"
          >
            <span className="mb-3 h-20 w-20 overflow-hidden rounded-full border-2 border-primary-500">
              <img
                src="/images/logo-muaythai.jpg"
                alt="Muay Thai"
                className="h-full w-full object-cover"
              />
            </span>
            <span className="text-2xl font-bold text-primary-300">
              Juanito Muay Thai
            </span>
            <span className="mt-2 text-sm text-white/60">
              L&apos;art martial du Siam
            </span>
          </Link>

          <Link
            href="/yog4fight"
            className="group flex flex-col items-center rounded-3xl border border-emerald-500/40 bg-gradient-to-br from-emerald-800/40 to-dark-800 p-8 text-center shadow-xl transition-all hover:scale-[1.02] hover:border-emerald-400 active:scale-95"
          >
            <span className="mb-3 h-20 w-20 overflow-hidden rounded-full border-2 border-emerald-500">
              <img
                src="/images/logo-yoga.png"
                alt="Yog4Fight"
                className="h-full w-full object-cover"
              />
            </span>
            <span className="text-2xl font-bold text-emerald-300">
              Juanito Yog 4 Fight
            </span>
            <span className="mt-2 text-sm text-white/60">
              #mobilité égale performance
            </span>
          </Link>
        </div>

        {isAdmin && (
          <Link
            href="/admin"
            className="btn-secondary mt-8 text-sm"
          >
            ⚙️ Tableau de bord admin
          </Link>
        )}
      </div>
    </main>
  );
}