import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function MessiWebsite() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-sky-100 to-white text-gray-800">
      {/* HERO */}
      <header className="relative h-[70vh] flex items-center justify-center text-center bg-black">
        <img
          src="https://images.unsplash.com/photo-1518091043644-c1d4457512c6?auto=format&fit=crop&w=1600&q=80"
          alt="Football stadium"
          className="absolute inset-0 w-full h-full object-cover opacity-50"
        />
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="relative z-10 text-white px-4"
        >
          <h1 className="text-5xl font-bold">Lionel Messi</h1>
          <p className="text-xl mt-4">La légende du football mondial</p>
          <Button className="mt-6">Découvrir sa carrière</Button>
        </motion.div>
      </header>

      {/* ABOUT */}
      <section className="max-w-6xl mx-auto p-6 grid md:grid-cols-2 gap-10 items-center">
        <img
          src="https://images.unsplash.com/photo-1521412644187-c49fa049e84d?auto=format&fit=crop&w=800&q=80"
          alt="Football player"
          className="rounded-2xl shadow-lg"
        />
        <div>
          <h2 className="text-3xl font-bold mb-4">À propos</h2>
          <p className="text-gray-700 leading-relaxed">
            Lionel Messi est considéré comme l’un des plus grands joueurs de football
            de tous les temps. Né en Argentine, il a marqué l’histoire avec le FC Barcelone,
            le PSG et l’équipe nationale d’Argentine.
          </p>
        </div>
      </section>

      {/* STATS */}
      <section className="bg-sky-50 py-12">
        <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-6 text-center">
          <Card>
            <CardContent className="p-6">
              <h3 className="text-2xl font-bold">7 Ballons d'Or</h3>
              <p className="text-gray-600">Record historique</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <h3 className="text-2xl font-bold">800+ buts</h3>
              <p className="text-gray-600">Carrière professionnelle</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <h3 className="text-2xl font-bold">1 Coupe du Monde</h3>
              <p className="text-gray-600">Argentine 2022</p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* CAREER */}
      <section className="max-w-6xl mx-auto p-6">
        <h2 className="text-3xl font-bold mb-6">Carrière</h2>
        <ul className="space-y-4">
          <li>⚽ FC Barcelone (2004 - 2021)</li>
          <li>⚽ Paris Saint-Germain (2021 - 2023)</li>
          <li>⚽ Inter Miami (2023 - présent)</li>
        </ul>
      </section>

      {/* GALLERY */}
      <section className="bg-gray-100 py-12">
        <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-4 p-6">
          <img className="rounded-xl" src="https://images.unsplash.com/photo-1508098682722-e99c43a406b2?auto=format&fit=crop&w=800&q=80" />
          <img className="rounded-xl" src="https://images.unsplash.com/photo-1517927033932-b3d18e61fb3a?auto=format&fit=crop&w=800&q=80" />
          <img className="rounded-xl" src="https://images.unsplash.com/photo-1521412644187-c49fa049e84d?auto=format&fit=crop&w=800&q=80" />
        </div>
      </section>

      {/* FOOTER */}
      <footer className="text-center p-6 bg-black text-white">
        <p>© 2026 - Site hommage à Lionel Messi</p>
      </footer>
    </div>
  );
}