<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layanan Kami | Efata Gemilang Jaya</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Plus Jakarta Sans', sans-serif; }
        body { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); }
        .hover-lift {
            transition: transform 0.25s ease, box-shadow 0.3s ease;
        }
        .hover-lift:hover {
            transform: translateY(-6px);
            box-shadow: 0 25px 30px -12px rgba(0, 20, 40, 0.2);
        }
        .glass-nav {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
        }
        .btn-shine {
            position: relative;
            overflow: hidden;
        }
        .btn-shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 200%;
            height: 200%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transform: rotate(25deg);
            transition: transform 0.6s ease;
        }
        .btn-shine:hover::after {
            transform: rotate(25deg) translate(80%, 0);
        }
        /* Slideshow styling untuk setiap layanan */
        .service-slideshow {
            position: relative;
            width: 100%;
            height: 220px;
            overflow: hidden;
            border-radius: 1.5rem;
        }
        @media (min-width: 768px) {
            .service-slideshow {
                height: 280px;
            }
        }
        .service-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
        }
        .service-slide.active {
            opacity: 1;
        }
        .slide-nav-service {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 20;
        }
        .slide-dot-service {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        .slide-dot-service.active-dot {
            background-color: #C5A028;
            transform: scale(1.2);
            border-color: white;
        }
        .slide-dot-service:hover {
            background-color: white;
        }
        .map-container {
            filter: grayscale(0.2) contrast(1.1);
            transition: filter 0.3s;
            border-radius: 1rem;
        }
        .map-container:hover {
            filter: grayscale(0) contrast(1.1);
        }
        /* Mobile menu styles */
        .mobile-menu {
            transition: all 0.3s ease-in-out;
        }
        .hamburger-line {
            transition: all 0.3s ease;
        }
        .mobile-menu.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .mobile-menu.closed {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
        }
    </style>
</head>
<body class="text-slate-700 antialiased">

    <?php include __DIR__ . "/../components/header.php"; ?>

    <!-- TITLE HALAMAN LAYANAN (dengan tema baru) -->
    <div class="max-w-7xl mx-auto px-6 md:px-8 pt-16 pb-12 text-center md:text-left">
        <h1 class="text-4xl md:text-6xl font-extrabold text-[#1e2b3a] tracking-tight">Layanan <span class="text-[#C5A028]">Kami</span></h1>
        <p class="text-slate-600 text-base md:text-lg mt-3 max-w-3xl mx-auto md:mx-0">Solusi tenaga profesional rumah tangga yang terpercaya, terlatih, dan siap menjadi bagian keluarga Anda.</p>
    </div>

    <!-- LAYANAN 1: ASISTEN RUMAH TANGGA -->
    <section class="max-w-7xl mx-auto px-6 md:px-8 py-8 md:py-12 border-b border-slate-200">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
            <!-- Slideshow ART (3 gambar) -->
            <div class="relative group order-1 lg:order-1">
                <div class="absolute -inset-2 bg-gradient-to-r from-[#C5A028]/20 to-[#1e2b3a]/20 rounded-[2rem] opacity-30 blur-xl group-hover:opacity-60 transition duration-700"></div>
                <div class="service-slideshow shadow-2xl relative z-10" id="slideshow-art">
                    <div class="service-slide active" style="background-image: url('/egj/assets/image/art2.jpeg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/art.jpeg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/art3.jpeg')"></div>
                    <div class="slide-nav-service" id="nav-art">
                        <span class="slide-dot-service active-dot" data-index="0"></span>
                        <span class="slide-dot-service" data-index="1"></span>
                        <span class="slide-dot-service" data-index="2"></span>
                    </div>
                </div>
            </div>
            <!-- Deskripsi ART -->
            <div class="space-y-4 md:space-y-5 order-2">
                <h2 class="text-2xl md:text-4xl font-bold text-[#1e2b3a]">Asisten Rumah Tangga</h2>
                <p class="text-slate-600 text-base md:text-lg leading-relaxed">ART kami tidak hanya ahli dalam membersihkan dan merawat rumah, tetapi juga memiliki etika kerja yang baik, jujur, dan dapat diandalkan. Mereka terlatih dalam manajemen waktu, perawatan furnitur, dan kebersihan mendalam.</p>
                <ul class="space-y-2 text-slate-600 text-sm md:text-base">
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Membersihkan & merapikan seluruh area rumah</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Mencuci, menyetrika, dan merawat pakaian</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Memasak masakan Indonesia & internasional</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Telah mengikuti pelatihan standar Efata</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- LAYANAN 2: BABY SITTER -->
    <section class="max-w-7xl mx-auto px-6 md:px-8 py-8 md:py-12 border-b border-slate-200">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
            <!-- Slideshow Baby Sitter -->
            <div class="relative group order-1">
                <div class="absolute -inset-2 bg-gradient-to-r from-[#C5A028]/20 to-[#1e2b3a]/20 rounded-[2rem] opacity-30 blur-xl group-hover:opacity-60 transition duration-700"></div>
                <div class="service-slideshow shadow-2xl relative z-10" id="slideshow-baby">
                    <div class="service-slide active" style="background-image: url('/egj/assets/image/baby_sister.jpg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/baby_sister2.jpg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/baby_sister3.jpg')"></div>
                    <div class="slide-nav-service" id="nav-baby">
                        <span class="slide-dot-service active-dot" data-index="0"></span>
                        <span class="slide-dot-service" data-index="1"></span>
                        <span class="slide-dot-service" data-index="2"></span>
                    </div>
                </div>
            </div>
            <!-- Deskripsi Baby Sitter -->
            <div class="space-y-4 md:space-y-5 order-2">
                <h2 class="text-2xl md:text-4xl font-bold text-[#1e2b3a]">Baby Sitter</h2>
                <p class="text-slate-600 text-base md:text-lg leading-relaxed">Pengasuh anak terlatih yang memahami tumbuh kembang anak, stimulasi dini, dan keselamatan si kecil. Mereka adalah pribadi penyabar, penyayang, dan memiliki sertifikat pelatihan pengasuhan anak.</p>
                <ul class="space-y-2 text-slate-600 text-sm md:text-base">
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Merawat anak dengan penuh kasih sayang</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Mendampingi bermain & belajar</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Menyiapkan makanan sehat untuk anak</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Terlatih dalam pertolongan pertama anak</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- LAYANAN 3: PET SITTER -->
    <section class="max-w-7xl mx-auto px-6 md:px-8 py-8 md:py-12 border-b border-slate-200">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
            <!-- Slideshow Pet Sitter -->
            <div class="relative group order-1">
                <div class="absolute -inset-2 bg-gradient-to-r from-[#C5A028]/20 to-[#1e2b3a]/20 rounded-[2rem] opacity-30 blur-xl group-hover:opacity-60 transition duration-700"></div>
                <div class="service-slideshow shadow-2xl relative z-10" id="slideshow-pet">
                    <div class="service-slide active" style="background-image: url('/egj/assets/image/pet.jpg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/pet2.jpg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/pet3.jpg')"></div>
                    <div class="slide-nav-service" id="nav-pet">
                        <span class="slide-dot-service active-dot" data-index="0"></span>
                        <span class="slide-dot-service" data-index="1"></span>
                        <span class="slide-dot-service" data-index="2"></span>
                    </div>
                </div>
            </div>
            <!-- Deskripsi Pet Sitter -->
            <div class="space-y-4 md:space-y-5 order-2">
                <h2 class="text-2xl md:text-4xl font-bold text-[#1e2b3a]">Pet Sitter</h2>
                <p class="text-slate-600 text-base md:text-lg leading-relaxed">Mereka yang menyayangi hewan dan memahami kebutuhan fisik serta emosional hewan peliharaan Anda. Mulai dari memberi makan, mengajak jalan, hingga membersihkan kandang.</p>
                <ul class="space-y-2 text-slate-600 text-sm md:text-base">
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Perawatan harian: makan, mandi, grooming ringan</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Mengajak jalan dan bermain</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Memantau kesehatan dasar hewan</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Pengalaman dengan berbagai jenis hewan</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- LAYANAN 4: PENGURUS LANSIA -->
    <section class="max-w-7xl mx-auto px-6 md:px-8 py-8 md:py-12 border-b border-slate-200">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
            <!-- Slideshow Pengurus Lansia -->
            <div class="relative group order-1">
                <div class="absolute -inset-2 bg-gradient-to-r from-[#C5A028]/20 to-[#1e2b3a]/20 rounded-[2rem] opacity-30 blur-xl group-hover:opacity-60 transition duration-700"></div>
                <div class="service-slideshow shadow-2xl relative z-10" id="slideshow-lansia">
                    <div class="service-slide active" style="background-image: url('/egj/assets/image/lansia2.jpg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/lansia.jpg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/lansia3.jpg')"></div>
                    <div class="slide-nav-service" id="nav-lansia">
                        <span class="slide-dot-service active-dot" data-index="0"></span>
                        <span class="slide-dot-service" data-index="1"></span>
                        <span class="slide-dot-service" data-index="2"></span>
                    </div>
                </div>
            </div>
            <!-- Deskripsi Pengurus Lansia -->
            <div class="space-y-4 md:space-y-5 order-2">
                <h2 class="text-2xl md:text-4xl font-bold text-[#1e2b3a]">Pengurus Lansia</h2>
                <p class="text-slate-600 text-base md:text-lg leading-relaxed">Perawat lansia yang sabar, telaten, dan memahami kondisi fisik serta psikologis orang tua. Mereka terlatih dalam merawat lansia dengan berbagai kebutuhan, termasuk pendampingan kesehatan ringan.</p>
                <ul class="space-y-2 text-slate-600 text-sm md:text-base">
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Pendampingan aktivitas harian (makan, minum, mandi)</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Memantau jadwal obat dan kondisi kesehatan</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Menemani ngobrol dan aktivitas ringan</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Pelatihan khusus perawatan lansia</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- LAYANAN 5: SUPIR PRIBADI -->
    <section class="max-w-7xl mx-auto px-6 md:px-8 py-8 md:py-12 border-b border-slate-200">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
            <!-- Slideshow Supir -->
            <div class="relative group order-1">
                <div class="absolute -inset-2 bg-gradient-to-r from-[#C5A028]/20 to-[#1e2b3a]/20 rounded-[2rem] opacity-30 blur-xl group-hover:opacity-60 transition duration-700"></div>
                <div class="service-slideshow shadow-2xl relative z-10" id="slideshow-supir">
                    <div class="service-slide active" style="background-image: url('/egj/assets/image/supir.jpg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/supir2.jpg')"></div>
                    <div class="service-slide" style="background-image: url('/egj/assets/image/supir3.jpg')"></div>
                    <div class="slide-nav-service" id="nav-supir">
                        <span class="slide-dot-service active-dot" data-index="0"></span>
                        <span class="slide-dot-service" data-index="1"></span>
                        <span class="slide-dot-service" data-index="2"></span>
                    </div>
                </div>
            </div>
            <!-- Deskripsi Supir -->
            <div class="space-y-4 md:space-y-5 order-2">
                <h2 class="text-2xl md:text-4xl font-bold text-[#1e2b3a]">Supir Pribadi</h2>
                <p class="text-slate-600 text-base md:text-lg leading-relaxed">Pengemudi berpengalaman dengan catatan mengamankan SIM A, pengetahuan rute yang luas, serta sikap sopan dan profesional. Mereka menjaga kendaraan seperti milik sendiri.</p>
                <ul class="space-y-2 text-slate-600 text-sm md:text-base">
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Pengalaman mengemudi minimal 5 tahun</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Menguasai rute Jabodetabek & luar kota</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Perawatan kendaraan rutin & kebersihan mobil</li>
                    <li class="flex gap-2 md:gap-3"><span class="text-[#C5A028] text-lg md:text-xl">✓</span> Telah melewati tes psikologi mengemudi</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- BAGIAN JAMINAN TRAINING DAN VERIFIKASI (dengan tema baru) -->
    <section class="max-w-7xl mx-auto px-6 md:px-8 py-12 md:py-20">
        <div class="bg-[#1e2b3a] text-white rounded-2xl md:rounded-3xl p-6 md:p-12 shadow-2xl relative overflow-hidden">
            <div class="absolute right-0 top-0 w-48 md:w-64 h-48 md:h-64 opacity-10">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M40,-60.5C52.3,-51.5,62.9,-40.7,69.5,-27.1C76.2,-13.5,78.9,3,73.6,17.7C68.2,32.4,54.8,45.3,40.4,54.8C26,64.3,10.6,70.3,-5.6,70.9C-21.9,71.5,-39.1,66.6,-52.6,56.2C-66.1,45.7,-76,29.7,-79.5,12C-83,-5.7,-80.2,-25.1,-69.3,-38C-58.3,-50.9,-39.1,-57.3,-22.2,-61.2C-5.3,-65.1,9.3,-66.5,27.7,-63.3C46.1,-60.2,68.2,-52.4,40,-60.5Z" transform="translate(100 100)" /></svg>
            </div>
            <div class="relative z-10 text-center max-w-4xl mx-auto">
                <span class="text-[#C5A028] font-semibold tracking-widest uppercase text-xs md:text-sm">— jaminan kualitas —</span>
                <h2 class="text-xl md:text-4xl font-bold mt-3 md:mt-4 mb-4 md:mb-6">Setiap Tenaga Kerja Telah Melalui Proses Training & Verifikasi Ketat</h2>
                <p class="text-slate-300 text-sm md:text-lg leading-relaxed mb-6 md:mb-8 px-2">
                    Kami tidak hanya menyalurkan, tetapi membentuk karakter dan keterampilan. Setiap asisten, babysitter, pet sitter, pengurus lansia, dan supir telah melewati pelatihan internal, psikotes, verifikasi latar belakang, serta pengawasan langsung dari trainer profesional kami. Kami jamin AMANAH untuk ditempatkan di rumah Anda.
                </p>
                <div class="flex flex-wrap justify-center gap-2 md:gap-5">
                    <span class="bg-white/20 backdrop-blur-sm px-3 md:px-6 py-2 md:py-3 rounded-full border border-white/30 font-semibold text-xs md:text-base hover:bg-white/30 transition">✅ Pelatihan bersertifikat</span>
                    <span class="bg-white/20 backdrop-blur-sm px-3 md:px-6 py-2 md:py-3 rounded-full border border-white/30 font-semibold text-xs md:text-base hover:bg-white/30 transition">✅ Psikotes & wawancara</span>
                    <span class="bg-white/20 backdrop-blur-sm px-3 md:px-6 py-2 md:py-3 rounded-full border border-white/30 font-semibold text-xs md:text-base hover:bg-white/30 transition">✅ Cek latar belakang</span>
                    <span class="bg-white/20 backdrop-blur-sm px-3 md:px-6 py-2 md:py-3 rounded-full border border-white/30 font-semibold text-xs md:text-base hover:bg-white/30 transition">✅ Garansi penggantian</span>
                </div>
            </div>
        </div>
    </section>

    <?php include __DIR__ . "/../components/footer.php" ?>

    <!-- SCRIPT SLIDESHOW UNTUK MASING-MASING LAYANAN -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function initSlideshow(containerId) {
                const container = document.getElementById(containerId);
                if (!container) return;
                
                const slides = container.querySelectorAll('.service-slide');
                const dots = container.querySelectorAll('.slide-dot-service');
                let currentIndex = 0;
                let interval;

                function showSlide(index) {
                    if (index >= slides.length) index = 0;
                    if (index < 0) index = slides.length - 1;
                    
                    slides.forEach((slide, i) => {
                        slide.classList.toggle('active', i === index);
                    });
                    dots.forEach((dot, i) => {
                        dot.classList.toggle('active-dot', i === index);
                    });
                    currentIndex = index;
                }

                function nextSlide() {
                    showSlide(currentIndex + 1);
                }

                interval = setInterval(nextSlide, 4000);

                dots.forEach((dot, idx) => {
                    dot.addEventListener('click', () => {
                        clearInterval(interval);
                        showSlide(idx);
                        interval = setInterval(nextSlide, 4000);
                    });
                });

                container.addEventListener('mouseenter', () => clearInterval(interval));
                container.addEventListener('mouseleave', () => {
                    interval = setInterval(nextSlide, 4000);
                });
            }

            initSlideshow('slideshow-art');
            initSlideshow('slideshow-baby');
            initSlideshow('slideshow-pet');
            initSlideshow('slideshow-lansia');
            initSlideshow('slideshow-supir');
        });
    </script>
    <!-- Transition masuk dari landing page -->
    <style>
        @keyframes pageEnter {
            0% {
                opacity: 0;
                transform: scale(0.95);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        body {
            animation: pageEnter 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
        
        /* Optional: tambahkan efek glow saat pertama masuk */
        .hero-section {
            animation: glowPulse 1s ease-out;
        }
        
        @keyframes glowPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(197, 160, 40, 0.5);
            }
            50% {
                box-shadow: 0 0 30px 10px rgba(197, 160, 40, 0.2);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(197, 160, 40, 0);
            }
        }
    </style>
</body>
</html>