<?php 
include 'koneksi.php'; 

// Cek fungsi getConf agar tidak error jika file koneksi belum punya fungsi ini
if (!function_exists('getConf')) {
    function getConf($key) {
        global $conn;
        $q = mysqli_query($conn, "SELECT config_value FROM site_config WHERE config_key='$key'");
        if (mysqli_num_rows($q) > 0) {
            $row = mysqli_fetch_assoc($q);
            return $row['config_value'];
        }
        return "";
    }
}

// Ambil Data Slider
$slides_q = mysqli_query($conn, "SELECT * FROM hero_slides");
$slides = [];
while($row = mysqli_fetch_assoc($slides_q)) { $slides[] = $row; }

// Ambil Data Produk
$products_q = mysqli_query($conn, "SELECT * FROM products ORDER BY id DESC");
?>

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Furniture Abadi Tlogopucang</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'wood-dark': '#2D1B15', 'wood-main': '#8D6E63',
                        'deep-black': '#0F0F0F', 'soft-cream': '#EFEBE9',
                        'gold-accent': '#D4AF37',
                    },
                    fontFamily: { sans: ['Inter', 'sans-serif'] }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0F0F0F; }
        ::-webkit-scrollbar-thumb { background: #3E2723; border-radius: 4px; }
        .bg-slide { transition: opacity 1.5s ease-in-out; position: absolute; inset: 0; background-size: cover; background-position: center; }
        .opacity-0 { opacity: 0; }
        .opacity-100 { opacity: 1; }
        .wa-pulse { animation: pulse-green 2s infinite; }
        @keyframes pulse-green {
            0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
            100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
        }
    </style>
</head>
<body class="bg-deep-black text-soft-cream antialiased overflow-x-hidden">

    <nav class="fixed w-full z-50 bg-deep-black/95 backdrop-blur-md border-b border-white/10 transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex-shrink-0" data-aos="fade-down">
                    <a href="#" class="text-xl font-bold text-gold-accent tracking-widest uppercase hover:text-white transition-colors">
                        Furniture<span class="text-white">Abadi</span>
                    </a>
                </div>

                <div class="hidden md:flex items-center ml-10 space-x-8">
                    <a href="#home" class="hover:text-gold-accent text-sm font-medium transition">Beranda</a>
                    <a href="#about" class="hover:text-gold-accent text-sm font-medium transition">Tentang</a>
                    <a href="#products" class="hover:text-gold-accent text-sm font-medium transition">Katalog</a>
                    <a href="#contact" class="border border-gold-accent text-gold-accent hover:bg-gold-accent hover:text-deep-black px-5 py-1.5 rounded-full text-xs font-bold uppercase transition">Kontak</a>
                    <a href="admin.php" class="text-gray-500 text-xs hover:text-white"><i class="fas fa-lock"></i></a>
                </div>

                <div class="flex md:hidden">
                    <button onclick="toggleMobileMenu()" class="text-white hover:text-gold-accent p-2 focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <div id="mobile-menu" class="hidden md:hidden bg-neutral-900 border-t border-gray-800">
            <div class="px-4 pt-2 pb-4 space-y-1">
                <a href="#home" onclick="toggleMobileMenu()" class="block px-3 py-3 text-base font-medium text-white hover:text-gold-accent hover:bg-gray-800 rounded-md">Beranda</a>
                <a href="#about" onclick="toggleMobileMenu()" class="block px-3 py-3 text-base font-medium text-white hover:text-gold-accent hover:bg-gray-800 rounded-md">Tentang</a>
                <a href="#products" onclick="toggleMobileMenu()" class="block px-3 py-3 text-base font-medium text-white hover:text-gold-accent hover:bg-gray-800 rounded-md">Katalog</a>
                <a href="#contact" onclick="toggleMobileMenu()" class="block px-3 py-3 text-base font-medium text-gold-accent hover:bg-gray-800 rounded-md font-bold">HUBUNGI KAMI</a>
                <a href="admin.php" class="block px-3 py-3 text-xs text-gray-500 hover:text-white">Login Admin</a>
            </div>
        </div>
    </nav>

    <section id="home" class="h-screen flex items-center justify-center relative overflow-hidden">
        <div class="absolute inset-0 w-full h-full z-0">
            <?php if(count($slides) > 0): ?>
                <?php $i=0; foreach($slides as $slide): ?>
                    <div class="bg-slide <?= $i===0?'opacity-100':'opacity-0' ?>" style="background-image: url('<?= $slide['image_url'] ?>');"></div>
                <?php $i++; endforeach; ?>
            <?php else: ?>
                <div class="bg-slide opacity-100" style="background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=2000');"></div>
            <?php endif; ?>
            <div class="absolute inset-0 bg-black/60 z-10"></div>
        </div>
        
        <div class="relative z-20 text-center px-4 max-w-3xl mx-auto" data-aos="zoom-in">
            <div class="inline-block border-b-2 border-gold-accent mb-4 pb-1">
                <span class="text-gold-accent text-xs font-bold tracking-[0.3em] uppercase">Furniture Abadi Tlogopucang</span>
            </div>
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight tracking-tight drop-shadow-lg">
                <?= getConf('hero_title') ?>
            </h1>
            <p class="mt-2 text-sm md:text-base text-gray-200 max-w-xl mx-auto font-light leading-relaxed mb-8">
                <?= getConf('hero_desc') ?>
            </p>
            <a href="https://wa.me/<?= getConf('contact_wa') ?>" target="_blank" class="bg-gold-accent hover:bg-yellow-600 text-deep-black font-semibold py-3 px-8 rounded-sm shadow-lg transition transform hover:-translate-y-1">Pesan Sekarang</a>
        </div>
    </section>

    <section id="about" class="py-24 bg-deep-black relative">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div class="grid grid-cols-2 gap-4" data-aos="fade-right">
                    <img src="<?= getConf('about_img_1') ?>" class="rounded-lg object-cover h-48 w-full border border-gray-800">
                    <img src="<?= getConf('about_img_2') ?>" class="rounded-lg object-cover h-64 w-full mt-8 border border-gray-800">
                </div>
                <div data-aos="fade-left">
                    <h2 class="text-gold-accent font-bold text-sm tracking-widest uppercase mb-2">Tentang Kami</h2>
                    <h3 class="text-3xl md:text-4xl font-bold text-white mb-6"><?= getConf('about_title') ?></h3>
                    <p class="text-gray-400 text-sm leading-7 mb-6 text-justify"><?= getConf('about_desc') ?></p>
                </div>
            </div>
        </div>
    </section>

    <section id="products" class="py-24 bg-neutral-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16" data-aos="fade-up">
                <span class="text-gold-accent text-xs font-bold tracking-widest uppercase">Katalog Pilihan</span>
                <h2 class="text-3xl font-bold text-white mt-2">Koleksi Terbaru</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <?php while($prod = mysqli_fetch_assoc($products_q)): ?>
                <div class="group bg-neutral-900 rounded-xl overflow-hidden shadow-lg border border-white/5 hover:border-gold-accent/50 transition duration-300" data-aos="fade-up">
                    <div class="h-64 overflow-hidden relative">
                        <img src="<?= $prod['image_url'] ?>" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-700">
                        <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
                            <a href="https://wa.me/<?= getConf('contact_wa') ?>?text=Tanya Produk: <?= $prod['name'] ?>" class="bg-white text-black px-4 py-2 text-xs font-bold uppercase rounded-full hover:bg-gold-accent transition">Detail</a>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-lg font-bold text-white mb-2 group-hover:text-gold-accent"><?= $prod['name'] ?></h3>
                        <p class="text-gray-500 text-xs leading-5 mb-4"><?= $prod['description'] ?></p>
                    </div>
                </div>
                <?php endwhile; ?>
            </div>
        </div>
    </section>

       <section class="py-16 bg-wood-dark border-t border-white/5">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div class="p-4 group" data-aos="zoom-in" data-aos-delay="100">
                    <div class="w-12 h-12 mx-auto bg-neutral-800 rounded-full flex items-center justify-center mb-4 group-hover:bg-gold-accent transition duration-300">
                        <i class="fas fa-hammer text-gold-accent group-hover:text-black"></i>
                    </div>
                    <h4 class="font-bold text-sm mb-1">Pengrajin Ahli</h4>
                    <p class="text-xs text-gray-400">Tenaga lokal berpengalaman</p>
                </div>
                <div class="p-4 group" data-aos="zoom-in" data-aos-delay="200">
                    <div class="w-12 h-12 mx-auto bg-neutral-800 rounded-full flex items-center justify-center mb-4 group-hover:bg-gold-accent transition duration-300">
                        <i class="fas fa-tree text-gold-accent group-hover:text-black"></i>
                    </div>
                    <h4 class="font-bold text-sm mb-1">Kayu Legal</h4>
                    <p class="text-xs text-gray-400">Bahan baku berkualitas</p>
                </div>
                <div class="p-4 group" data-aos="zoom-in" data-aos-delay="300">
                    <div class="w-12 h-12 mx-auto bg-neutral-800 rounded-full flex items-center justify-center mb-4 group-hover:bg-gold-accent transition duration-300">
                        <i class="fas fa-truck text-gold-accent group-hover:text-black"></i>
                    </div>
                    <h4 class="font-bold text-sm mb-1">Siap Antar</h4>
                    <p class="text-xs text-gray-400">Aman sampai tujuan</p>
                </div>
                <div class="p-4 group" data-aos="zoom-in" data-aos-delay="400">
                    <div class="w-12 h-12 mx-auto bg-neutral-800 rounded-full flex items-center justify-center mb-4 group-hover:bg-gold-accent transition duration-300">
                        <i class="fas fa-wallet text-gold-accent group-hover:text-black"></i>
                    </div>
                    <h4 class="font-bold text-sm mb-1">Harga Wajar</h4>
                    <p class="text-xs text-gray-400">Langsung dari pengrajin</p>
                </div>
            </div>
        </div>
    </section>

    <section id="contact" class="py-24 bg-deep-black relative overflow-hidden">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="bg-neutral-900/80 backdrop-blur border border-white/5 rounded-2xl p-8 md:p-12 shadow-2xl" data-aos="fade-up">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                    <div>
                        <h2 class="text-2xl font-bold text-white mb-6">Hubungi Kami</h2>
                        <div class="space-y-6">
                            <div class="flex items-start group">
                                <i class="fab fa-whatsapp text-xl text-gold-accent mt-1 mr-4"></i>
                                <div><h4 class="text-sm font-bold text-white">WhatsApp</h4><p class="text-gold-accent font-mono">+<?= getConf('contact_wa') ?></p></div>
                            </div>
                            <div class="flex items-start group">
                                <i class="fas fa-map-marker-alt text-xl text-gold-accent mt-1 mr-4"></i>
                                <div><h4 class="text-sm font-bold text-white">Lokasi</h4><p class="text-gray-400 text-sm"><?= getConf('contact_address') ?></p></div>
                            </div>
                            <div class="flex items-start group">
                                <i class="fas fa-envelope text-xl text-gold-accent mt-1 mr-4"></i>
                                <div><h4 class="text-sm font-bold text-white">Email</h4><p class="text-gray-400 text-sm"><?= getConf('contact_email') ?></p></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col justify-center text-center">
                         <a href="https://wa.me/<?= getConf('contact_wa') ?>" target="_blank" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded transition flex items-center justify-center gap-2 transform hover:scale-105">
                            <i class="fab fa-whatsapp text-xl"></i> Hubungi via WhatsApp
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="bg-black border-t border-white/10 pt-10 pb-6 text-center text-gray-500 text-xs">
        &copy; 2024 Furniture Abadi Tlogopucang.
    </footer>

    <div class="fixed bottom-6 right-6 z-50 flex flex-col items-end">
        <div id="wa-chat-box" class="hidden mb-4 w-80 bg-white rounded-lg shadow-2xl overflow-hidden transform transition-all scale-0 opacity-0">
            <div class="bg-[#075E54] p-4 flex justify-between text-white"><span class="font-bold">Admin Furniture</span> <button onclick="toggleWaChat()"><i class="fas fa-times"></i></button></div>
            <div class="bg-[#E5DDD5] p-4 h-48 text-black text-sm">Halo! Ada yang bisa kami bantu?</div>
            <div class="p-3 bg-white border-t"><a href="https://wa.me/<?= getConf('contact_wa') ?>" class="block bg-[#25D366] text-white text-center py-2 rounded-full font-bold">Lanjut Chat WA</a></div>
        </div>
        <button onclick="toggleWaChat()" class="bg-[#25D366] w-16 h-16 rounded-full shadow-2xl flex items-center justify-center wa-pulse text-white text-4xl hover:scale-110 transition"><i class="fab fa-whatsapp"></i></button>
    </div>

    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init({ once: true, offset: 100 });
        
        // 1. FUNGSI TOGGLE WA
        function toggleWaChat() {
            const box = document.getElementById('wa-chat-box');
            if(box.classList.contains('hidden')){ 
                box.classList.remove('hidden'); 
                setTimeout(()=>box.classList.remove('scale-0','opacity-0'),10); 
            } else { 
                box.classList.add('scale-0','opacity-0'); 
                setTimeout(()=>box.classList.add('hidden'),300); 
            }
        }

        // 2. FUNGSI TOGGLE MOBILE MENU (BARU)
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            if (menu.classList.contains('hidden')) {
                menu.classList.remove('hidden');
            } else {
                menu.classList.add('hidden');
            }
        }
        
        // 3. FUNGSI SLIDER OTOMATIS
        const slides = document.querySelectorAll('.bg-slide');
        let current = 0;
        if(slides.length > 0) {
            setInterval(() => {
                slides[current].classList.replace('opacity-100', 'opacity-0');
                current = (current + 1) % slides.length;
                slides[current].classList.replace('opacity-0', 'opacity-100');
            }, 4000);
        }
    </script>
</body>
</html>