import { motion } from "framer-motion";

export default function AtlantaMusicFranc() {
  return (
    <div className="min-h-screen bg-white text-black font-sans">

      {/* HEADER */}
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur border-b border-zinc-200">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <h1 className="text-lg md:text-xl font-bold tracking-[0.4em]">
            AMF
          </h1>

          <nav className="hidden md:flex gap-10 text-xs tracking-widest uppercase">
            <a href="#home" className="hover:opacity-60 transition">Home</a>
            <a href="#artists" className="hover:opacity-60 transition">Artists</a>
            <a href="#about" className="hover:opacity-60 transition">About</a>
            <a href="#news" className="hover:opacity-60 transition">News</a>
          </nav>
        </div>
      </header>

      {/* HERO */}
      <section id="home" className="min-h-screen flex items-center justify-center text-center px-6">
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9 }}
          className="max-w-3xl"
        >
          <p className="uppercase tracking-[0.5em] text-zinc-400 mb-6 text-xs">
            Music • Culture • Innovation
          </p>

          <h2 className="text-5xl md:text-7xl font-semibold mb-6 leading-tight">
            Shaping the Future
            <br />
            of Music
          </h2>

          <p className="text-zinc-500 text-lg mb-10">
            Atlanta Music France développe des artistes et construit une vision moderne de la musique.
          </p>

          <div className="flex gap-4 justify-center flex-wrap">
            <button className="px-6 py-3 border border-black rounded-full hover:bg-black hover:text-white transition">
              Explore Artists
            </button>
            <button className="px-6 py-3 bg-black text-white rounded-full hover:opacity-80 transition">
              Latest Releases
            </button>
          </div>
        </motion.div>
      </section>

      {/* ARTISTS */}
      <section id="artists" className="py-28 bg-zinc-50">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <h3 className="text-4xl font-semibold mb-16">Artists</h3>

          <div className="grid md:grid-cols-3 gap-10">
            {["Artist One", "Artist Two", "Artist Three"].map((name, i) => (
              <motion.div
                key={name}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.2 }}
                className="bg-white rounded-3xl p-6 shadow-sm hover:shadow-xl transition"
              >
                <div className="h-64 bg-gradient-to-br from-zinc-200 to-zinc-300 rounded-2xl mb-5"></div>
                <h4 className="text-xl font-medium">{name}</h4>
                <p className="text-zinc-400 text-sm">Recording Artist</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ABOUT */}
      <section id="about" className="py-28 px-6 text-center">
        <div className="max-w-3xl mx-auto">
          <h3 className="text-4xl font-semibold mb-6">About</h3>
          <p className="text-zinc-500 text-lg leading-relaxed">
            Atlanta Music France est un label moderne dédié à l'excellence artistique,
            à la culture et à l'innovation musicale. Nous accompagnons les talents de demain.
          </p>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="py-10 text-center text-sm text-zinc-400 border-t">
        © 2026 ATLANTA MUSIC FRANCE — ALL RIGHTS RESERVED
      </footer>

    </div>
  );
}