import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { motion } from "framer-motion";
import { useState } from "react";

export default function Portfolio() {
  const [selectedPortfolio, setSelectedPortfolio] = useState(null);

  const portfolioData = [
    {
      id: 1,
      image: "/sdm2.jpg",
      title: "Didukung Tenaga Kerja Profesional & Bersertifikasi BNSP",
      shortDesc:
        "PT. Jaringan Citra Mandiri memiliki tenaga kerja bersertifikasi BNSP dan tenaga ahli berpengalaman.",
      detail: (
        <>
          <h2 className="text-xl font-bold mb-2">
            Didukung Tenaga Kerja Profesional & Bersertifikasi BNSP Untuk Layanan Terbaik
          </h2>
          <p className="text-sm leading-relaxed mb-2">
            PT. Jaringan Citra Mandiri memiliki tenaga kerja dengan kualifikasi tinggi dan telah
            mendapatkan sertifikasi dari BNSP. Tenaga kerja kami memiliki pengetahuan, keterampilan,
            dan pemahaman yang mendalam dalam berbagai bidang pekerjaan.
          </p>
          <p className="text-sm leading-relaxed">
            Lebih dari 200 tenaga kerja siap mendukung semua layanan dengan standar terbaik,
            termasuk tenaga ahli di dalamnya yang siap memaksimalkan layanan yang kami sediakan.
          </p>
        </>
      ),
    },
    {
      id: 2,
      image: "/alat2.jpg",
      title: "Peralatan Fiber Optik",
      shortDesc:
        "PT. Jaringan Citra Mandiri memiliki alat kerja yang lengkap dan tersertifikasi.",
      detail: (
        <>
          <h2 className="text-xl font-bold mb-2">Peralatan Fiber Optik</h2>
          <p className="text-sm leading-relaxed mb-2">
            Kami menggunakan peralatan fiber optik seperti Fujikura, Yokogawa, dan Exfo untuk
            memastikan hasil kerja berkualitas tinggi.
          </p>
          <p className="text-sm leading-relaxed">
            Semua alat kerja sudah sesuai standar industri jaringan serat optik.
          </p>
        </>
      ),
      extraImages: ["/fujikura.jpg", "/yokogwa.jpg", "/exfo.jpg"],
    },
    {
      id: 3,
      image: "/tiang.jpg",
      title: "Produksi / Pabrikasi Tiang",
      shortDesc: "Pabrikasi tiang telco berkualitas dengan standar industri terbaik.",
      detail: (
        <div className="space-y-10">
          <div className="grid md:grid-cols-2 gap-6 items-center">
            <img
              src="/tiang1.jpg"
              alt="Pabrikasi Berkualitas"
              className="w-full h-56 object-cover rounded-lg border shadow"
            />
            <div>
              <h3 className="font-semibold text-gray-800 mb-2">
                Pabrikasi Berkualitas dengan Standar Industri Terbaik
              </h3>
              <p className="text-sm leading-relaxed">
                Selain dari pekerjaan jaringan, PT. Jaringan Citra Mandiri mempunyai Pabrikasi Tiang Telco,
                guna menunjang kebutuhan perusahaan maupun kebutuhan dari luar perusahaan.
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-6 items-center">
            <div className="order-2 md:order-1">
              <h3 className="font-semibold text-gray-800 mb-2">
                Efisiensi Tinggi untuk Memenuhi Permintaan Pelanggan
              </h3>
              <p className="text-sm leading-relaxed">
                Kami dapat memproduksi tiang sebanyak 50 batang per hari. Dengan peralatan dan fasilitas
                yang mumpuni, tenaga kerja yang berkualitas serta sistem manajemen yang efisien, membuat
                kami dapat memenuhi permintaan pelanggan dengan baik.
              </p>
            </div>
            <img
              src="/tiang2.jpg"
              alt="Efisiensi Tinggi"
              className="w-full h-56 object-cover rounded-lg border shadow order-1 md:order-2"
            />
          </div>
        </div>
      ),
    },
    {
      id: 4,
      image: "/map1.jpg",
      title: "Pembangunan & Pemeliharaan Jaringan Serat Optik Antar Kota",
      shortDesc:
        "Pembangunan dan pemeliharaan jaringan serat optik skala besar di berbagai wilayah Jawa Barat.",
      detail: (
        <div className="space-y-4">
          <h2 className="text-xl font-bold mb-2">
            Pembangunan & Pemeliharaan Jaringan Serat Optik Antar Kota
          </h2>
          <p className="text-sm leading-relaxed mb-2">
            PT. Jaringan Citra Mandiri telah menyelesaikan berbagai proyek pembangunan 
            dan pemeliharaan jaringan serat optik antar kota. 
            Beberapa proyek utama mencakup wilayah strategis di Jawa Barat.
          </p>

          <div className="grid grid-cols-2 gap-4 mt-4">
            <div>
              <img src="/subang.jpg" alt="Subang" className="w-full h-36 object-cover rounded-lg border" />
              <p className="text-xs mt-1 text-center font-semibold">Subang – 50 Km</p>
            </div>
            <div>
              <img src="/pangandaran.jpg" alt="Pangandaran" className="w-full h-36 object-cover rounded-lg border" />
              <p className="text-xs mt-1 text-center font-semibold">Pangandaran – 225 Km</p>
            </div>
            <div>
              <img src="/bandungraya.jpg" alt="Bandung Raya" className="w-full h-36 object-cover rounded-lg border" />
              <p className="text-xs mt-1 text-center font-semibold">Bandung Raya – 800 Km</p>
            </div>
            <div>
              <img src="/garut.jpg" alt="Garut" className="w-full h-36 object-cover rounded-lg border" />
              <p className="text-xs mt-1 text-center font-semibold">Garut – 1000 Km</p>
            </div>
            <div>
              <img src="/ciamis.jpg" alt="Ciamis" className="w-full h-36 object-cover rounded-lg border" />
              <p className="text-xs mt-1 text-center font-semibold">Ciamis – 100 Km</p>
            </div>
            <div>
              <img src="/tasik.jpg" alt="Tasik" className="w-full h-36 object-cover rounded-lg border" />
              <p className="text-xs mt-1 text-center font-semibold">Tasik – 100 Km</p>
            </div>
          </div>
        </div>
      ),
    },
  ];

  return (
    <div className="font-sans">
      <Navbar />

      <section className="relative w-full h-[400px] flex items-center justify-center text-center text-white overflow-hidden">
        <video
          className="absolute inset-0 w-full h-full object-cover"
          src="/port2.mp4"
          autoPlay
          loop
          muted
          playsInline
        />
        <div className="absolute inset-0 bg-black/50"></div>
        <div className="relative z-10 px-4">
          <h1 className="text-4xl font-bold mb-8">Portofolio Kami</h1>
          <p className="text-lg opacity-90">
            Lihat karya dan layanan terbaik yang sudah kami bangun
          </p>
        </div>
      </section>

      <section className="relative py-20 bg-gradient-to-br from-indigo-50 via-white to-pink-50 min-h-screen overflow-hidden">
        <div className="relative max-w-6xl mx-auto px-6 lg:px-20">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
            {portfolioData.map((item) => (
              <PortfolioCard
                key={item.id}
                image={item.image}
                title={item.title}
                shortDesc={item.shortDesc}
                onClick={() => setSelectedPortfolio(item)}
              />
            ))}
          </div>
        </div>
      </section>

      {selectedPortfolio && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
          <motion.div
            initial={{ opacity: 0, y: 50, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 50, scale: 0.95 }}
            transition={{ duration: 0.4, ease: "easeOut" }}
            className="relative bg-white/90 backdrop-blur-xl rounded-3xl max-w-5xl w-full h-[85vh] flex flex-col shadow-2xl overflow-hidden"
          >
            <button
              onClick={() => setSelectedPortfolio(null)}
              className="absolute top-4 right-4 z-50 bg-white/80 hover:bg-red-500 hover:text-white rounded-full shadow-md p-2 transition"
            >
              ✕
            </button>

            <div className="relative">
              <img
                src={selectedPortfolio.image}
                alt={selectedPortfolio.title}
                className="w-full h-72 object-cover rounded-t-3xl"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent rounded-t-3xl"></div>
              <div className="absolute bottom-6 left-6">
                <h2 className="text-2xl md:text-3xl font-bold text-white drop-shadow-lg">
                  {selectedPortfolio.title}
                </h2>
              </div>
            </div>

            <div className="p-6 overflow-y-auto flex-1 text-gray-800 space-y-4 text-sm leading-relaxed custom-scrollbar">
              {selectedPortfolio.detail}

              {selectedPortfolio.extraImages && (
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-6">
                  {selectedPortfolio.extraImages.map((img, idx) => (
                    <motion.img
                      key={idx}
                      src={img}
                      alt={`extra-${idx}`}
                      whileHover={{ scale: 1.05 }}
                      className="w-full h-40 object-cover rounded-xl border shadow-sm transition"
                    />
                  ))}
                </div>
              )}
            </div>
          </motion.div>
        </div>
      )}

      <Footer />
    </div>
  );
}

/* Komponen Card */
function PortfolioCard({ image, title, shortDesc, onClick }) {
  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      viewport={{ once: true }}
      className="rounded-2xl overflow-hidden bg-white/90 backdrop-blur-md shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col"
    >
      <div className="relative">
        <img src={image} alt={title} className="w-full h-48 object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
      </div>

      <div className="p-6 flex flex-col flex-grow">
        {/* ==== WARNA JUDUL DIBUAT BIRU NAVBAR ==== */}
        <h3 className="text-lg font-bold bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
          {title}
        </h3>

        <p className="mt-2 text-gray-700 text-sm leading-relaxed flex-grow">
          {shortDesc}
        </p>

        <button
          onClick={onClick}
          className="mt-4 inline-block text-blue-600 font-semibold hover:underline text-sm text-left"
        >
          Lihat Selengkapnya →
        </button>
      </div>
    </motion.div>
  );
}