<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testimoni Pelanggan | 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; scroll-behavior: smooth; }
        body { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); }
        
        .text-gradient {
            background: linear-gradient(135deg, #1e2b3a 0%, #C5A028 100%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Modern Masonry Effect */
        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.2rem;
        }
        @media (min-width: 768px) {
            .testimonial-grid {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 1.5rem;
            }
        }

        .testi-card {
            break-inside: avoid;
            background: white;
            border: 1px solid rgba(212, 175, 55, 0.15);
            transition: all 0.3s ease;
            border-radius: 1.5rem;
            padding: 1.5rem;
        }
        @media (min-width: 768px) {
            .testi-card {
                border-radius: 2rem;
                padding: 2rem;
            }
        }

        .testi-card:hover {
            border-color: #C5A028;
            transform: translateY(-5px);
            box-shadow: 0 20px 40px -15px rgba(30, 43, 58, 0.15);
        }

        /* Pagination Styles */
        .pagination-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.75rem;
            font-weight: 600;
            transition: all 0.2s ease;
            cursor: pointer;
            background-color: white;
            color: #1e2b3a;
            border: 1px solid rgba(212, 175, 55, 0.3);
        }
        .pagination-item:hover {
            background-color: #E6D5B8;
            border-color: #C5A028;
            transform: translateY(-2px);
        }
        .pagination-item.active {
            background-color: #1e2b3a;
            color: white;
            border-color: #1e2b3a;
        }
        .pagination-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* 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);
        }
        .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);
        }
    </style>
</head>
<body class="text-slate-700 antialiased">

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

    <!-- HEADER SECTION -->
    <header class="max-w-7xl mx-auto px-6 pt-16 md:pt-20 pb-10 md:pb-12 text-center">
        <span class="px-3 md:px-4 py-1.5 bg-[#C5A028]/10 text-[#C5A028] text-xs font-bold uppercase tracking-widest rounded-full border border-[#C5A028]/20">Kisah Nyata Keluarga Efata</span>
        <h1 class="text-3xl md:text-6xl font-extrabold text-[#1e2b3a] mt-4 md:mt-6 mb-3 md:mb-4">Suara <span class="text-gradient">Pelanggan Kami</span></h1>
        <p class="text-slate-500 text-sm md:text-lg max-w-2xl mx-auto leading-relaxed px-2">
            Kepercayaan Anda adalah prioritas kami. Lihat bagaimana Efata Gemilang Jaya telah membantu ribuan keluarga menemukan kenyamanan di rumah.
        </p>
        
        <!-- Statistik -->
        <div class="flex flex-wrap justify-center gap-6 md:gap-8 mt-10 md:mt-12 py-6 md:py-8 border-y border-slate-200">
            <div class="text-center min-w-[80px] md:min-w-0">
                <p class="text-xl md:text-3xl font-bold text-[#1e2b3a]">500+</p>
                <p class="text-xs md:text-sm text-slate-400 font-medium uppercase">Keluarga Aktif</p>
            </div>
            <div class="w-px h-8 md:h-12 bg-slate-200 hidden md:block"></div>
            <div class="text-center min-w-[80px] md:min-w-0">
                <p class="text-xl md:text-3xl font-bold text-[#1e2b3a]">98%</p>
                <p class="text-xs md:text-sm text-slate-400 font-medium uppercase">Tingkat Kepuasan</p>
            </div>
            <div class="w-px h-8 md:h-12 bg-slate-200 hidden md:block"></div>
            <div class="text-center min-w-[80px] md:min-w-0">
                <p class="text-xl md:text-3xl font-bold text-[#1e2b3a]">15+</p>
                <p class="text-xs md:text-sm text-slate-400 font-medium uppercase">Tahun Pengalaman</p>
            </div>
        </div>
    </header>

    <!-- MAIN TESTIMONIAL GRID (dengan pagination) -->
    <main class="max-w-7xl mx-auto px-6 pb-16 md:pb-24">
        <!-- Info jumlah testimoni dan halaman -->
        <div class="flex flex-wrap justify-between items-center mb-6">
            <p class="text-slate-500 text-sm md:text-base">
                Menampilkan <span id="startCount">1</span> - <span id="endCount">10</span> dari <span id="totalCount">0</span> testimoni
            </p>
            <div class="flex gap-2">
                <select id="itemsPerPage" class="bg-white border border-slate-200 rounded-xl px-3 py-2 text-sm text-slate-700 focus:outline-none focus:border-[#C5A028] focus:ring-2 focus:ring-[#C5A028]/20">
                    <option value="10" selected>10 per halaman</option>
                    <option value="20">20 per halaman</option>
                    <option value="30">30 per halaman</option>
                </select>
            </div>
        </div>

        <!-- Grid Testimoni -->
        <div id="testimonialGrid" class="testimonial-grid min-h-[600px]">
            <!-- Akan diisi oleh JavaScript -->
        </div>

        <!-- Pagination Controls -->
        <div class="mt-12 flex flex-wrap justify-center items-center gap-2">
            <button id="prevPage" class="pagination-item">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            <div id="paginationNumbers" class="flex flex-wrap justify-center gap-2">
                <!-- Akan diisi JavaScript -->
            </div>
            <button id="nextPage" class="pagination-item">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </button>
        </div>

        <!-- CTA Section -->
        <div class="mt-16 md:mt-20 bg-[#1e2b3a] rounded-[2rem] md:rounded-[3rem] p-8 md:p-12 text-center text-white relative overflow-hidden">
            <div class="relative z-10">
                <h2 class="text-xl md:text-3xl font-bold mb-3 md:mb-4">Ingin Menjadi Keluarga Bahagia Selanjutnya?</h2>
                <p class="text-slate-300 text-sm md:text-base mb-6 md:mb-8 max-w-xl mx-auto px-2">Konsultasikan kebutuhan rumah tangga Anda hari ini secara gratis dengan konsultan kami.</p>
                <a href="https://wa.me/6285283399086" class="inline-block bg-[#C5A028] text-[#1e2b3a] px-6 md:px-10 py-3 md:py-4 rounded-full font-bold shadow-lg hover:bg-white hover:text-[#1e2b3a] transition-all transform hover:scale-105 text-sm md:text-base">
                    Hubungi via WhatsApp Sekarang
                </a>
            </div>
            <div class="absolute -right-20 -bottom-20 w-48 md:w-64 h-48 md:h-64 bg-white/5 rounded-full"></div>
        </div>
    </main>

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

    <!-- Data Testimoni dan Pagination Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Generate 250 data testimoni
            const testimonials = [];
            const totalTestimonials = 250;
            
            // Data dummy untuk variasi
            const names = [
                "Ibu Clarissa Wijaya", "Bpk. Andreansyah", "Ibu Maria Ulfa", "Bpk. Steven", "Ibu Dr. Sarah",
                "Bpk. Ahmad Fauzi", "Ibu Siti Nurhaliza", "Bpk. Budi Santoso", "Ibu Dewi Sartika", "Bpk. Agus Salim",
                "Ibu Ratna Sari", "Bpk. Hendra Kurniawan", "Ibu Lestari Handayani", "Bpk. Rudi Hartono", "Ibu Mega Wati",
                "Bpk. Dodi Firmansyah", "Ibu Rina Marlina", "Bpk. Indra Lesmana", "Ibu Nia Kurniasih", "Bpk. Reza Pahlevi"
            ];
            
            const cities = [
                "Jakarta Pusat", "Jakarta Selatan", "Jakarta Barat", "Jakarta Timur", "Jakarta Utara",
                "Tangerang", "Bekasi", "Depok", "Bogor", "Bandung"
            ];
            
            const jobs = [
                "Pengusaha", "Karyawan Swasta", "Ibu Rumah Tangga", "Dokter Anak", "Arsitek",
                "Pengacara", "Dosen", "Apoteker", "Wiraswasta", "PNS"
            ];
            
            const testimonialTexts = [
                "Menemukan baby sitter yang cocok itu seperti mencari jarum dalam jerami. Tapi lewat Efata, kami dipertemukan dengan Suster Ani yang sangat telaten dan sabar. Anak saya yang biasanya sulit dengan orang baru, langsung akrab dalam sehari.",
                "Sangat profesional! Driver yang dikirim sangat menguasai rute Jakarta dan yang terpenting, sopan santunnya luar biasa.",
                "Terima kasih Efata sudah menyediakan perawat lansia untuk ibu saya. Sangat membantu keluarga kami di masa sulit.",
                "ART-nya rajin, jujur, dan kerjanya sangat bersih. Worth every penny!",
                "Proses administrasinya sangat simpel dan transparan. Tidak ada biaya tersembunyi. Garansi penggantian tenaga kerjanya juga beneran diproses tanpa ribet saat saya butuh penggantian.",
                "Pelayanan sangat memuaskan, baby sitter yang dikirim benar-benar berpengalaman dan penyayang anak.",
                "Supir pribadinya sangat sopan dan tepat waktu. Mobil selalu bersih dan terawat. Highly recommended!",
                "Pengurus lansia dari Efata sangat sabar dan telaten. Ibu saya jadi lebih ceria dan bersemangat.",
                "Proses seleksi yang ketat membuat kami percaya. ART yang ditempatkan sangat jujur dan bertanggung jawab.",
                "Respon cepat dan solusi tepat. Terima kasih Efata sudah membantu keluarga kami.",
                "Baby sitter yang diberikan sangat ahli dalam menstimulasi anak. Anak saya jadi lebih aktif dan cerdas.",
                "Driver kami sangat profesional dan menguasai rute alternatif. Perjalanan jadi lebih efisien.",
                "Perawat lansianya sangat perhatian dan selalu memantau kesehatan ibu saya dengan baik.",
                "ART kami sangat rajin dan bisa memasak dengan enak. Keluarga jadi lebih harmonis.",
                "Terima kasih Efata, proses penggantian ART berjalan lancar dan cepat.",
                "Sangat puas dengan layanan Efata. Tenaga kerja yang dikirim sesuai dengan profil yang dijanjikan.",
                "Konsultasinya gratis dan sangat membantu. Tim Efata ramah dan profesional.",
                "Baby sitter kami sangat kreatif dan selalu punya ide baru untuk bermain dengan anak.",
                "Supir pribadi sangat menjaga privasi keluarga. Kami merasa aman dan nyaman.",
                "Perawat lansia sangat memahami kondisi kesehatan ibu. Terima kasih atas dedikasinya."
            ];
            
           for (let i = 1; i <= totalTestimonials; i++) {
                const nameIndex = i % names.length;
                const cityIndex = (i * 2) % cities.length;
                const jobIndex = (i * 3) % jobs.length;
                const textIndex = i % testimonialTexts.length;

                const name = names[nameIndex];

                let avatar;

                if (name.startsWith("Ibu")) {
                    avatar = `/egj/assets/image/foto_profil/wanita/wanita${((i - 1) % 75) + 1}.jpg`;
                } else {
                    avatar = `/egj/assets/image/foto_profil/pria/pria${((i - 1) % 75) + 1}.jpg`;
                }

                testimonials.push({
                    id: i,
                    name: name,
                    city: cities[cityIndex],
                    job: jobs[jobIndex],
                    text: testimonialTexts[textIndex],
                    rating: 5,
                    avatar: avatar
                });
            }

            // State pagination
            let currentPage = 1;
            let itemsPerPage = 10;

            // DOM Elements
            const grid = document.getElementById('testimonialGrid');
            const paginationNumbers = document.getElementById('paginationNumbers');
            const prevBtn = document.getElementById('prevPage');
            const nextBtn = document.getElementById('nextPage');
            const startCount = document.getElementById('startCount');
            const endCount = document.getElementById('endCount');
            const totalCount = document.getElementById('totalCount');
            const itemsPerPageSelect = document.getElementById('itemsPerPage');

            totalCount.textContent = testimonials.length;

            function renderTestimonials(page) {
                const start = (page - 1) * itemsPerPage;
                const end = Math.min(start + itemsPerPage, testimonials.length);
                const pageData = testimonials.slice(start, end);

                startCount.textContent = start + 1;
                endCount.textContent = end;

                grid.innerHTML = pageData.map(t => `
                    <div class="testi-card flex flex-col gap-3 md:gap-4">
                        <div class="flex text-[#C5A028] gap-1 text-sm">★★★★★</div>
                        <p class="text-slate-600 leading-relaxed italic text-sm md:text-base">"${t.text}"</p>
                        <div class="mt-2 md:mt-4 flex items-center gap-3 md:gap-4">
                            <div class="w-10 h-10 md:w-12 md:h-12 bg-[#E6D5B8] rounded-full overflow-hidden shrink-0">
                                <img src="${t.avatar}" alt="${t.name}" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <h4 class="font-bold text-sm md:text-base text-[#1e2b3a]">${t.name}</h4>
                                <p class="text-xs text-slate-400 uppercase font-semibold">${t.job}, ${t.city}</p>
                            </div>
                        </div>
                    </div>
                `).join('');
            }

            function renderPagination() {
                const totalPages = Math.ceil(testimonials.length / itemsPerPage);
                let paginationHTML = '';
                
                let startPage = Math.max(1, currentPage - 2);
                let endPage = Math.min(totalPages, currentPage + 2);
                
                if (currentPage <= 3) {
                    endPage = Math.min(5, totalPages);
                }
                if (currentPage > totalPages - 3) {
                    startPage = Math.max(1, totalPages - 4);
                }

                for (let i = startPage; i <= endPage; i++) {
                    paginationHTML += `<span class="pagination-item ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</span>`;
                }

                paginationNumbers.innerHTML = paginationHTML;

                prevBtn.classList.toggle('disabled', currentPage === 1);
                nextBtn.classList.toggle('disabled', currentPage === totalPages);

                document.querySelectorAll('.pagination-item[data-page]').forEach(item => {
                    item.addEventListener('click', function() {
                        const page = parseInt(this.dataset.page);
                        if (page !== currentPage) {
                            currentPage = page;
                            renderTestimonials(currentPage);
                            renderPagination();
                        }
                    });
                });
            }

            prevBtn.addEventListener('click', function() {
                if (currentPage > 1) {
                    currentPage--;
                    renderTestimonials(currentPage);
                    renderPagination();
                }
            });

            nextBtn.addEventListener('click', function() {
                const totalPages = Math.ceil(testimonials.length / itemsPerPage);
                if (currentPage < totalPages) {
                    currentPage++;
                    renderTestimonials(currentPage);
                    renderPagination();
                }
            });

            itemsPerPageSelect.addEventListener('change', function() {
                itemsPerPage = parseInt(this.value);
                currentPage = 1;
                renderTestimonials(currentPage);
                renderPagination();
            });

            // Initial render
            renderTestimonials(currentPage);
            renderPagination();
        });
    </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>