"use client";

import Image from "next/image";
import Link from "next/link";
import { useParams } from "next/navigation";
import {
  FaWhatsapp,
  FaArrowLeft,
  FaCheckCircle,
  FaShieldAlt,
} from "react-icons/fa";
import { SERVICES_DATA } from "@/constants/services";
import Navbar from "@/components/Navbar";

export default function DetailLayananPage() {
  const params = useParams();
  const id = params?.id as string;

  // Mencari data layanan berdasarkan ID dari URL
  const service = SERVICES_DATA.find((s) => s.id === id);

  // Jika data tidak ditemukan
  if (!service) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p className="text-slate-500 font-bold uppercase tracking-widest">
          Layanan tidak ditemukan...
        </p>
      </div>
    );
  }

  return (
    <main className="min-h-screen bg-white selection:bg-blue-50 selection:text-blue-600">
      <Navbar />

      <section className="pt-28 pb-12 px-6 max-w-6xl mx-auto overflow-hidden">
        {/* --- TOMBOL KEMBALI --- */}
        <Link
          href="/#layanan"
          className="inline-flex items-center gap-2 text-slate-400 hover:text-blue-600 transition-all mb-10 text-[10px] font-bold uppercase tracking-widest group"
        >
          <FaArrowLeft className="group-hover:-translate-x-1 transition-transform" />
          Kembali ke Layanan
        </Link>

        {/* --- GRID UTAMA --- */}
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-16 items-start relative">
          {/* --- SISI KIRI: IMAGE & INFO BOX --- */}
          <div className="w-full lg:w-[35%] lg:sticky lg:top-28">
            <div className="relative aspect-4/5 w-full rounded-4xl overflow-hidden shadow-xl border-8 border-slate-50 bg-slate-50 group">
              <Image
                src={service.image}
                alt={service.title}
                fill
                className="object-cover transition-transform duration-2000 group-hover:scale-105"
                priority
              />
            </div>

            {/* Info Box */}
            <div className="mt-6 p-6 bg-slate-900 rounded-3xl text-white shadow-lg border-l-4 border-blue-500">
              <p className="text-[9px] font-black text-blue-400 uppercase tracking-widest mb-2">
                Pesan Sekarang
              </p>
              <p className="text-slate-300 text-xs md:text-sm leading-relaxed font-medium">
                Sangat disarankan booking{" "}
                <span className="text-white font-bold underline decoration-blue-500 underline-offset-4">
                  H-3
                </span>{" "}
                untuk persiapan tim{" "}
                <span className="text-blue-400 uppercase font-bold">
                  Mulya Balon
                </span>{" "}
                yang maksimal.
              </p>
            </div>
          </div>

          {/* --- SISI KANAN: KONTEN TEKS --- */}
          <div className="w-full lg:w-[65%] space-y-10">
            <div className="space-y-4">
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-50 rounded-full border border-blue-100">
                <FaShieldAlt className="text-blue-600" size={10} />
                <span className="text-blue-600 font-bold text-[8px] uppercase tracking-widest">
                  Official Mulya Balon Service
                </span>
              </div>
              <h1 className="text-3xl md:text-5xl font-black text-slate-900 leading-tight tracking-tight uppercase">
                {service.title.split(" ").map((word, i) =>
                  i === service.title.split(" ").length - 1 ? (
                    <span key={i} className="text-blue-600">
                      {" "}
                      {word}
                    </span>
                  ) : (
                    <span key={i}>{word} </span>
                  ),
                )}
              </h1>
            </div>

            {/* Deskripsi */}
            <div className="relative pl-6 border-l-2 border-slate-100">
              <p className="text-slate-500 text-sm md:text-base leading-relaxed font-medium whitespace-pre-line">
                {service.longDescription || service.description}
              </p>
            </div>

            {/* Keunggulan */}
            <div className="space-y-6">
              <p className="font-bold text-slate-900 uppercase text-[10px] tracking-widest">
                Kenapa Memilih Kami?
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {service.features?.map((item, idx) => (
                  <div
                    key={idx}
                    className="flex items-center gap-3 p-4 bg-white rounded-2xl border border-slate-100 hover:border-blue-100 transition-all group"
                  >
                    <FaCheckCircle className="text-blue-500 text-sm group-hover:scale-110 transition-transform" />
                    <span className="text-[11px] font-bold text-slate-700 uppercase tracking-tight">
                      {item}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* BUTTON WA */}
            <div className="pt-6">
              <a
                href={`https://wa.me/6281296498062?text=${encodeURIComponent(`Halo Mulya Balon, saya tertarik dengan layanan ${service.title}`)}`}
                target="_blank"
                rel="noopener noreferrer"
                className="group inline-flex items-center gap-4 bg-blue-600 text-white pl-8 pr-2 py-2 rounded-full font-bold uppercase tracking-widest text-[10px] hover:bg-slate-900 transition-all shadow-lg hover:-translate-y-1 active:scale-95"
              >
                Konsultasi & Booking
                <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center group-hover:bg-blue-500 transition-colors">
                  <FaWhatsapp size={18} />
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* --- SECTION GALLERY */}
      <section className="py-20 px-6 bg-slate-50 mt-12 rounded-t-[3rem]">
        <div className="max-w-6xl mx-auto">
          <div className="flex flex-col items-center text-center mb-16 space-y-3">
            <p className="text-blue-600 font-bold uppercase tracking-[0.3em] text-[9px]">
              Our Portfolio
            </p>
            <h2 className="text-2xl md:text-3xl font-black text-slate-900 tracking-tight uppercase">
              Project{" "}
              <span className="text-blue-600 italic font-serif lowercase">
                terbaru
              </span>{" "}
              kami
            </h2>
            <div className="w-12 h-1 bg-blue-600 rounded-full"></div>
            <p className="text-slate-400 text-[10px] font-medium uppercase tracking-widest pt-2">
              Dokumentasi Asli Pengerjaan {service.title}
            </p>
          </div>

          {/* MENGGUNAKAN COLUMNS AGAR FOTO TAMPIL UTUH (MASONRY) */}
          <div className="columns-2 md:columns-3 lg:columns-4 gap-4 space-y-4">
            {(service.gallery && service.gallery.length > 0
              ? service.gallery
              : [service.image]
            ).map((img, index) => (
              <div
                key={index}
                className="break-inside-avoid relative rounded-2xl overflow-hidden shadow-md border-2 border-white group transition-all duration-500 hover:shadow-xl hover:shadow-blue-200/50"
              >
                
                <img
                  src={img}
                  alt={`Gallery ${service.title} ${index + 1}`}
                  className="w-full h-auto object-contain transition-transform duration-700 group-hover:scale-105"
                />

                
                <div className="absolute inset-0 bg-blue-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

                
                <div className="absolute bottom-4 left-4 transform translate-y-10 group-hover:translate-y-0 transition-transform duration-500">
                  <span className="bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full text-[7px] font-black uppercase tracking-widest text-slate-900 shadow-sm">
                    Mulya Balon Project
                  </span>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-16 text-center">
            <p className="text-[9px] font-bold text-slate-400 uppercase tracking-[0.4em]">
              Ingin Dekorasi Seperti ini?
              <a
                href="https://wa.me/6281314859858"
                className="text-blue-600 ml-2 hover:underline"
              >
                Tanyakan via WhatsApp
              </a>
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}