import Image from "next/image";

export default function MediaOptions() {
  const items = [
    {
      title: "Videotron",
      desc: "Large-format advertising di lokasi strategis dengan traffic tinggi",
      img: "/videotron.png",
    },
    {
      title: "Media Online",
      desc: "Branding interior kereta api dengan jangkauan penumpang tinggi",
      img: "/gemini.png",
    },
    {
      title: "Media Sosial",
      desc: "Display digital untuk konten dinamis dan engaging di stasiun & mall",
      img: "/ai.png",
    },
    {
      title: "Radio Polri",
      desc: "Large-format advertising di lokasi strategis dengan traffic tinggi",
      img: "/radio.png",
    },
    {
      title: "TV Polri",
      desc: "Branding interior kereta api dengan jangkauan penumpang tinggi",
      img: "/tvpolri.png",
    },
    {
      title: "Majalah Digital",
      desc: "Display digital untuk konten dinamis dan engaging di stasiun & mall",
      img: "/majalah.png",
    },
  ];

  return (
    <section className="container mx-auto py-12 px-4">
      <div className="text-center mb-10">
        <h2 className="text-2xl md:text-3xl font-bold text-black">
          Pilihan Media Iklan untuk Brand Anda
        </h2>
        <p className="text-gray-600 mt-2">
          Maksimalkan visibilitas brand dengan media iklan strategis
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mx-16">
        {items.map((item, index) => (
          <div
            key={index}
            className="border rounded-xl overflow-hidden shadow-sm hover:shadow-md transition"
          >
            <div className="relative w-full h-48">
              <Image
                src={item.img}
                alt={item.title}
                fill
                className="object-cover"
              />
            </div>

            <div className="p-4">
              <h3 className="font-semibold text-lg text-black">{item.title}</h3>
              <p className="text-sm text-gray-600 mt-2">{item.desc}</p>

              <button className="mt-4 inline-flex items-center gap-2 text-blue-600 border border-blue-600 px-4 py-2 rounded-full text-sm hover:bg-blue-50">
                Lihat Layanan →
              </button>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}