"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay, EffectFade } from "swiper/modules";
import {
  FaArrowLeft,
  FaArrowRight,
  FaChevronRight,
  FaInstagram,
  FaWhatsapp,
  FaMapMarkerAlt,
  FaPhone,
} from "react-icons/fa";

// Import Swiper Styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/effect-fade";

import Navbar from "../components/Navbar";
import { HERO_SLIDES } from "../constants/hero-data";
import { HeroSlide } from "../components/HeroSlide";
import { ServiceCard } from "../components/ServiceCard";
import { SERVICES_DATA } from "../constants/services";
import Image from "next/image";

export default function Home() {
  const WA_NUMBER = "6281296498062";
  const getWaLink = (text: string) =>
    `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(text)}`;

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

      {/* --- HERO SECTION --- */}
      <section className="relative w-full h-[80vh] lg:h-[90vh] overflow-hidden group">
        <NavigationButton
          id="slider-prev"
          icon={<FaArrowLeft size={18} />}
          position="left-6 lg:left-10"
        />
        <NavigationButton
          id="slider-next"
          icon={<FaArrowRight size={18} />}
          position="right-6 lg:right-10"
        />

        <Swiper
          modules={[Navigation, Pagination, Autoplay, EffectFade]}
          effect="fade"
          loop
          speed={1000}
          autoplay={{ delay: 7000, disableOnInteraction: false }}
          navigation={{ prevEl: "#slider-prev", nextEl: "#slider-next" }}
          pagination={{
            clickable: true,
            el: ".custom-pagination",
            bulletClass:
              "swiper-pagination-bullet !bg-white/50 !w-3 !h-3 !mx-1 transition-all",
            bulletActiveClass: "!bg-blue-600 !w-8 !rounded-full",
          }}
          className="w-full h-full"
        >
          {HERO_SLIDES.map((slide, index) => (
            <SwiperSlide key={`hero-${index}`}>
              <HeroSlide
                data={slide}
                getWaLink={getWaLink}
                isPriority={index === 0}
              />
            </SwiperSlide>
          ))}
        </Swiper>
        <div className="custom-pagination absolute bottom-10 left-1/2 -translate-x-1/2 z-40 flex justify-center gap-3 w-full"></div>
      </section>

      {/* --- SERVICES SECTION --- */}
      <section
        id="layanan"
        className="relative pt-20 pb-16 lg:pt-32 lg:pb-24 px-6 bg-white overflow-hidden scroll-mt-20"
      >
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full pointer-events-none opacity-40">
          <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-50 blur-[120px] rounded-full"></div>
          <div className="absolute bottom-[10%] right-[-5%] w-[30%] h-[30%] bg-slate-50 blur-[100px] rounded-full"></div>
        </div>

        <div className="max-w-7xl mx-auto relative z-10">
          {/* --- HEADER SECTION --- */}
          <div className="flex flex-col items-center text-center max-w-5xl mx-auto mb-16 lg:mb-20">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-50 rounded-full border border-blue-100 mb-6">
              <span className="w-1.5 h-1.5 bg-blue-600 rounded-full animate-pulse"></span>
              <h2 className="text-blue-600 font-bold uppercase tracking-[0.3em] text-[9px]">
                Our Expertise
              </h2>
            </div>
            <h3 className="text-2xl md:text-4xl lg:text-5xl font-black text-slate-900 leading-tight tracking-tight uppercase">
              Layanan{" "}
              <span className="text-blue-600 italic font-serif lowercase">
                terbaik
              </span>{" "}
              untuk momen ikonik anda
            </h3>
            <p className="mt-6 text-slate-500 text-sm md:text-base leading-relaxed max-w-3xl font-medium">
              Mulya Balon menghadirkan standar kualitas premium dalam setiap
              instalasi. Kami memadukan kreativitas tanpa batas dengan presisi
              profesional untuk memastikan setiap detail acara Anda tampil
              sempurna dan berkesan.
            </p>

            
            <div className="mt-8 flex items-center gap-3">
              <div className="w-10 h-px bg-slate-200"></div>
              <div className="w-1.5 h-1.5 bg-blue-600 rounded-full"></div>
              <div className="w-10 h-px bg-slate-200"></div>
            </div>
          </div>

          {/* --- GRID LAYANAN --- */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
            {SERVICES_DATA.map((service) => (
              <div
                key={service.id}
                className="group relative h-full transition-all duration-700"
              >
                <div className="absolute -inset-2 bg-blue-600/0 rounded-[3rem] blur-xl group-hover:bg-blue-600/5 transition-all duration-700"></div>

                <div className="relative h-full transform transition-transform duration-500 group-hover:-translate-y-3">
                  <ServiceCard {...service} />
                </div>
              </div>
            ))}
          </div>

          {/* --- FOOTER SECTION (Optional) --- */}
          <div className="mt-20 text-center">
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em]">
              Butuh Dekorasi Custom?{" "}
              <a
                href="https://wa.me/6281314859858"
                className="text-blue-600 border-b border-blue-200 pb-0.5 hover:text-slate-900 transition-colors"
              >
                Hubungi Tim Ahli Kami
              </a>
            </p>
          </div>
        </div>
      </section>

      {/* --- ABOUT SECTION --- */}
      <section
        id="tentang"
        className="pt-12 pb-20 lg:pt-16 lg:pb-32 px-6 scroll-mt-20 overflow-hidden bg-white"
      >
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-24">
            <div className="flex-1 relative w-full group/about">
              <div className="relative z-10 rounded-[2.5rem] overflow-hidden shadow-2xl aspect-4/5 border-8 lg:border-16 border-white bg-slate-50">
                <Image
                  src="/about-balon.jpg"
                  alt="About Mulya Balon"
                  fill
                  className="object-cover transition-transform duration-1000 group-hover/about:scale-110"
                />
              </div>
              <div className="absolute -top-10 -right-10 w-48 h-48 bg-blue-100/60 rounded-full mix-blend-multiply blur-3xl opacity-70 animate-pulse"></div>
              <div className="absolute -bottom-12 -left-12 w-64 h-64 bg-slate-100/60 rounded-full mix-blend-multiply blur-3xl opacity-70"></div>

              <div className="absolute -bottom-4 -right-4 z-20 bg-slate-900 text-white p-6 lg:p-8 rounded-3xl lg:rounded-4xl shadow-2xl hidden md:block transform hover:-rotate-3 transition-transform duration-500 border-b-4 border-blue-600">
                <p className="text-4xl lg:text-5xl font-black mb-1 leading-none">
                  5+
                </p>
                <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
                  Years of <br /> Craftsmanship
                </p>
              </div>
            </div>

            <div className="flex-1 space-y-8">
              <div className="space-y-4">
                <div className="inline-flex items-center gap-3 px-5 py-2 bg-blue-50 rounded-full border border-blue-100">
                  <span className="w-2 h-2 bg-blue-600 rounded-full animate-ping"></span>
                  <span className="text-blue-600 font-bold text-[10px] uppercase tracking-[0.3em]">
                    Our Story
                  </span>
                </div>

                <h3 className="text-3xl md:text-5xl lg:text-6xl font-black text-slate-900 leading-[1.1] tracking-tight text-balance">
                  Kami Tidak Sekadar Menghias, <br />
                  <span className="text-blue-600 italic font-serif">
                    Kami Menciptakan Atmosfer.
                  </span>
                </h3>
              </div>
              <p className="text-slate-500 text-lg md:text-xl leading-relaxed font-medium border-l-4 border-blue-600 pl-6 lg:pl-8 max-w-xl">
                Sejak 2020,{" "}
                <span className="text-slate-900 font-bold">MULYA BALON</span>{" "}
                dipercaya ratusan klien melalui seni dekorasi balon yang
                memadukan teknik dan kreativitas.
              </p>

              <div className="grid grid-cols-2 gap-8 pt-4 border-t border-slate-100">
                <div>
                  <p className="text-3xl font-black text-slate-900 leading-none mb-2">
                    1.2K+
                  </p>
                  <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">
                    Events Done
                  </p>
                </div>
                <div>
                  <p className="text-3xl font-black text-slate-900 leading-none mb-2">
                    99%
                  </p>
                  <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">
                    Satisfaction
                  </p>
                </div>
              </div>

              <button className="group flex items-center gap-6 transition-all">
                <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-full bg-slate-900 text-white flex items-center justify-center group-hover:bg-blue-600 group-hover:scale-110 transition-all shadow-xl">
                  <FaChevronRight size={18} />
                </div>
                <span className="font-black uppercase tracking-[0.2em] text-xs text-slate-900 group-hover:text-blue-600 transition-colors">
                  Explore Our Journey
                </span>
              </button>
            </div>
          </div>
        </div>
      </section>
{/* FOOTER SECTION */}
      <footer className="bg-slate-950 text-white pt-16 lg:pt-24 pb-12 px-6">
        <div className="max-w-7xl mx-auto flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-16">
          <div className="max-w-sm">
            <h4 className="text-3xl font-black tracking-tighter mb-4 text-white">
              MULYA <span className="text-blue-600">BALON</span>
            </h4>
            <p className="text-slate-400 leading-relaxed mb-6 text-sm font-medium">
              Spesialis dekorasi balon premium yang mengedepankan kualitas dan
              kreativitas untuk setiap momen berharga Anda.
            </p>
            <div className="flex gap-3">
              <SocialLink
                href="https://instagram.com/mulyabalon62"
                icon={<FaInstagram />}
              />
              {/* ICON WHATSAPP FOOTER */}
              <SocialLink
                href={getWaLink(
                  "Halo Mulya Balon, saya ingin konsultasi mengenai dekorasi.",
                )}
                icon={<FaWhatsapp />}
              />
            </div>
          </div>

          <div className="w-full lg:max-w-2xl grid grid-cols-1 md:grid-cols-2 gap-10">
            <div className="space-y-6">
              <h5 className="font-bold uppercase tracking-widest text-[11px] text-blue-500 border-b border-white/10 pb-2 inline-block">
                Hubungi Kami
              </h5>
              <div className="space-y-4">
                <div className="flex items-start gap-4 text-slate-400 group">
                  <div className="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center group-hover:text-blue-500 transition-colors">
                    <FaMapMarkerAlt size={14} />
                  </div>
                  <span className="text-xs leading-relaxed font-medium">
                    JL. Kampoeng Pelangi, Kp. Rawahingki Rt01/Rw19, <br />
                    Desa Cileungsi, Kec Cileungsi, Kab. Bogor
                  </span>
                </div>

                {/* NOMOR TELEPON BISA DIKLIK LANGSUNG KE WA */}
                <a
                  href={getWaLink(
                    "Halo Mulya Balon, saya mencatat nomor Anda dari website.",
                  )}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-4 text-slate-400 group hover:text-white transition-colors"
                >
                  <div className="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center group-hover:bg-blue-600/20 group-hover:text-blue-500 transition-all">
                    <FaPhone size={14} />
                  </div>
                  <span className="text-xs font-bold tracking-widest">
                    +62 812-9649-8062
                  </span>
                </a>
              </div>
            </div>

            <div className="w-full h-40 md:h-52 rounded-3xl overflow-hidden border border-white/10 relative group">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.234327680074!2d106.9944!3d-6.3637!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNsKwMjEnNDkuMyJTIDEwNsKwNTknMzkuOCJF!5e0!3m2!1sid!2sid!4v1700000000000!5m2!1sid!2sid"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen={true}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                className="grayscale-[0.8] invert-[0.1] contrast-[1.2] group-hover:grayscale-0 transition-all duration-1000"
              ></iframe>
            </div>
          </div>
        </div>
        <div className="max-w-7xl mx-auto border-t border-white/5 mt-12 pt-8 text-center">
          <p className="text-[9px] font-bold uppercase tracking-[0.3em] text-slate-600">
            © 2026 MULYA BALON OFFICIAL.
          </p>
        </div>
      </footer>
    </main>
  );
}

// Sub-components
const NavigationButton = ({
  id,
  icon,
  position,
}: {
  id: string;
  icon: React.ReactNode;
  position: string;
}) => (
  <button
    id={id}
    className={`absolute ${position} top-1/2 -translate-y-1/2 z-50 w-14 h-14 bg-white/10 backdrop-blur-lg border border-white/20 text-white rounded-full flex items-center justify-center shadow-2xl hover:bg-blue-600 hover:text-white hover:border-blue-500 transition-all duration-500 opacity-0 group-hover:opacity-100 hidden md:flex active:scale-95`}
  >
    {icon}
  </button>
);

const SocialLink = ({
  href,
  icon,
}: {
  href: string;
  icon: React.ReactNode;
}) => (
  <a
    href={href}
    className="w-10 h-10 bg-white/5 border border-white/10 rounded-xl flex items-center justify-center text-lg hover:bg-blue-600 hover:border-blue-500 hover:text-white transition-all duration-300"
  >
    {icon}
  </a>
);