import React, { useState } from "react";

export default function HomeSignupFun() {
  const [nom, setNom] = useState("");
  const [prenom, setPrenom] = useState("");
  const [age, setAge] = useState("");
  const [sexe, setSexe] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    console.log({ nom, prenom, age, sexe });
  }

  return (
    <main
      className="min-h-screen bg-cover bg-center flex items-center justify-center p-4"
      style={{ backgroundImage: "url('/images/affiche-reseaux-sociaux.jpg')" }}
    >
      <div className="bg-white/90 backdrop-blur-sm p-8 rounded-2xl shadow-2xl max-w-md w-full border-4 border-yellow-400">
        <h1 className="text-3xl font-extrabold text-blue-800 text-center mb-4">
          🚧 Bienvenue sur AdopteUnAgent.fr 🚧
        </h1>
        <p className="text-center text-gray-700 mb-6">
          Fun, délire et plaisir – remplis ce formulaire pour entrer dans la zone !
        </p>
        <form onSubmit={handleSubmit} className="space-y-4">
          <input
            type="text"
            placeholder="Prénom"
            value={prenom}
            onChange={(e) => setPrenom(e.target.value)}
            className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"
            required
          />
          <input
            type="text"
            placeholder="Nom"
            value={nom}
            onChange={(e) => setNom(e.target.value)}
            className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"
            required
          />
          <input
            type="number"
            placeholder="Âge"
            value={age}
            onChange={(e) => setAge(e.target.value)}
            className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"
            required
          />
          <select
            value={sexe}
            onChange={(e) => setSexe(e.target.value)}
            className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400"
            required
          >
            <option value="">Sexe</option>
            <option value="Homme">Homme 🚹</option>
            <option value="Femme">Femme 🚺</option>
            <option value="Autre">Autre 🌈</option>
          </select>
          <button
            type="submit"
            className="w-full bg-yellow-400 text-blue-900 font-bold py-3 rounded-full hover:brightness-110 transition"
          >
            🚧 Entrer dans la zone de plaisir 🚧
          </button>
        </form>
      </div>
    </main>
  );
}