export default function PigFMHomepage() {
  return (
    <div className="min-h-screen bg-black text-white overflow-hidden">
      {/* Hero Section */}
      <section className="relative flex flex-col items-center justify-center text-center px-6 py-20">
        <div className="absolute inset-0 bg-gradient-to-b from-pink-500/20 to-transparent blur-3xl"></div>

        <img
          src="/mnt/data/a_bold_colorful_logo_style_design_on_a_dark_black.png"
          alt="Pig FM Logo"
          className="relative w-52 h-52 object-contain rounded-full shadow-2xl border-4 border-pink-500"
        />

        <h1 className="mt-8 text-6xl font-extrabold tracking-tight bg-gradient-to-r from-pink-400 to-white bg-clip-text text-transparent">
          PIG FM RADIO
        </h1>

        <p className="mt-4 max-w-2xl text-lg text-gray-300 leading-relaxed">
          Nonstop comedy, trending songs, fun vibes and full entertainment 24×7.
          Tune into Pig FM Radio and enjoy music with unlimited masti.
        </p>

        <div className="mt-8 flex gap-4 flex-wrap justify-center">
          <button className="px-8 py-4 rounded-2xl bg-pink-500 hover:bg-pink-600 transition text-lg font-semibold shadow-lg shadow-pink-500/30">
            ▶ Listen Live
          </button>

          <button className="px-8 py-4 rounded-2xl border border-pink-500 hover:bg-pink-500/10 transition text-lg font-semibold">
            Schedule
          </button>
        </div>
      </section>

      {/* Features */}
      <section className="grid md:grid-cols-3 gap-6 px-8 py-16 max-w-6xl mx-auto">
        {[
          {
            title: 'Comedy Shows',
            desc: 'Daily hilarious content and entertaining RJ talks to keep you smiling.',
            icon: '😂',
          },
          {
            title: 'Top Music',
            desc: 'Bollywood hits, trending songs and evergreen classics all day long.',
            icon: '🎵',
          },
          {
            title: '24×7 Streaming',
            desc: 'Enjoy nonstop entertainment anytime and anywhere.',
            icon: '📻',
          },
        ].map((item, index) => (
          <div
            key={index}
            className="bg-white/5 border border-white/10 backdrop-blur-xl rounded-3xl p-8 hover:scale-105 transition duration-300 shadow-xl"
          >
            <div className="text-5xl">{item.icon}</div>
            <h3 className="mt-5 text-2xl font-bold text-pink-400">
              {item.title}
            </h3>
            <p className="mt-3 text-gray-300 leading-relaxed">
              {item.desc}
            </p>
          </div>
        ))}
      </section>

      {/* Live Banner */}
      <section className="mx-8 mb-16 rounded-3xl bg-gradient-to-r from-pink-600 to-pink-400 p-10 text-center shadow-2xl">
        <h2 className="text-4xl font-extrabold text-black">
          LIVE NOW ON AIR
        </h2>
        <p className="mt-4 text-black/80 text-lg max-w-2xl mx-auto">
          Experience comedy, songs and energetic radio vibes with Pig FM Radio.
        </p>

        <button className="mt-6 px-8 py-4 rounded-2xl bg-black text-white text-lg font-bold hover:scale-105 transition">
          Start Listening
        </button>
      </section>

      {/* Footer */}
      <footer className="border-t border-white/10 py-8 text-center text-gray-400">
        <p>© 2026 Pig FM Radio — Comedy • Music • Masti</p>
      </footer>
    </div>
  );
}