'use client'

import Image from 'next/image'
import imageHacker from '/public/images/image_accueil.webp' // change ce chemin selon ton image

export default function HomePage() {
  return (
    <div className="min-h-screen bg-black text-white flex flex-col">
      {/* NAVBAR */}
      <header className="bg-black border-b border-gray-800">
        <nav className="container mx-auto px-4 py-4 flex justify-between items-center">
          <span className="text-lg font-bold">CRYPTABYSS</span>
          <div className="space-x-6 text-sm">
            <button className="hover:underline">Accueil</button>
            <button className="hover:underline">Infos</button>
            <button className="hover:underline">Contact</button>
          </div>
        </nav>
      </header>

      {/* CONTENU CENTRAL */}
      <main className="flex flex-col items-center justify-center flex-grow text-center px-4 py-16">
        <h1 className="text-4xl md:text-6xl font-bold mb-6">Bienvenue sur CryptAbyss</h1>
        <p className="text-gray-300 mb-2">
          Un projet mené par des étudiants en Master ISRI de l&apos;Université de Picardie Jules Verne
        </p>
        <p className="text-gray-400 mb-8">Rendez-vous .........</p>
        {/* <p className="text-2xl font-semibold text-white mb-12">CTF Terminé !</p> */}

        <div className="w-full max-w-4xl">
          <Image
            src={imageHacker}
            alt="Image CryptAbyss"
            className="rounded shadow-lg"
            layout="responsive"
            objectFit="cover"
          />
        </div>
      </main>

      {/* FOOTER */}
      <footer className="bg-black text-gray-500 text-center text-sm py-4 border-t border-gray-800">
        © {new Date().getFullYear()} CryptAbyss. Tous droits réservés.
      </footer>
    </div>
  )
}