import { motion } from "framer-motion";
import { MapPin } from "lucide-react";

export default function Cakupan() {
  return (
    <section id="cakupan" className="relative py-20 bg-gray-50 overflow-hidden">
      {/* Animated Gradient Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-blue-100 animate-gradient bg-[length:300%_300%]"></div>

      <div className="relative z-10">
        {/* Title */}
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-extrabold text-blue-900 drop-shadow-md">
            Cakupan Area
          </h2>
          <p className="mt-3 text-gray-700 max-w-2xl mx-auto leading-relaxed">
            Saat ini jaringan dan layanan{" "}
            <span className="font-semibold text-blue-600">WTELL</span> telah
            berhasil menghadirkan internet di berbagai daerah di Kota Bandung
            hingga Desa 3T (Tertinggal, Terdepan, Terluar).
          </p>
        </div>

        {/* Content */}
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-12 px-6">
          {/* Map */}
          <motion.div
            whileHover={{ scale: 1.05 }}
            className="flex-1 flex justify-center"
          >
            <img
              src="/map-bandung.jpg"
              alt="Map Bandung"
              className="w-full max-w-xl rounded-2xl shadow-xl border-4 border-blue-100"
            />
          </motion.div>

          {/* List Area */}
          <motion.div
            whileHover={{ y: -5 }}
            className="flex-1 bg-white/80 p-8 rounded-2xl shadow-xl backdrop-blur-md border border-blue-100"
          >
            <h3 className="text-xl font-bold mb-6 text-blue-700 border-b pb-3">
              Fokus Layanan
            </h3>
            <ul className="space-y-4 text-gray-700">
              {[
                "Bandung Kota",
                "Cimahi",
                "Cileunyi",
                "Ngamprah",
                "Desa 3T sekitar Bandung",
              ].map((area, index) => (
                <li
                  key={index}
                  className="flex items-center gap-3 hover:bg-blue-50 p-3 rounded-lg transition"
                >
                  <MapPin className="w-5 h-5 text-red-500" />
                  <span className="font-medium">{area}</span>
                </li>
              ))}
            </ul>
          </motion.div>
        </div>
      </div>
    </section>
  );
}