<?php
include 'config/koneksi.php';

// 1. Ambil Produk (Sudah ada)
$sql_produk = "SELECT * FROM produk ORDER BY id DESC";
$produk = $koneksi->query($sql_produk);

// 2. Ambil Pengaturan Umum
$pengaturan = [];
$sql_pengaturan = "SELECT * FROM pengaturan";
$result_pengaturan = $koneksi->query($sql_pengaturan);
while ($row_pengaturan = $result_pengaturan->fetch_assoc()) {
    $pengaturan[$row_pengaturan['nama_pengaturan']] = $row_pengaturan['nilai_pengaturan'];
}

// 3. Ambil Testimoni (Limit 3)
$sql_testimoni = "SELECT * FROM testimoni ORDER BY id ASC LIMIT 3";
$testimoni = $koneksi->query($sql_testimoni);

// 4. Ambil Ticker (Pemberitahuan Berjalan)
$ticker_items = [];
$sql_ticker = "SELECT * FROM ticker ORDER BY id ASC";
$result_ticker = $koneksi->query($sql_ticker);
while($row_ticker = $result_ticker->fetch_assoc()) {
    $ticker_items[] = $row_ticker;
}

// 5. Ambil Layanan di Footer
$sql_footer_layanan = "SELECT * FROM footer_layanan ORDER BY urutan ASC";
$footer_layanan = $koneksi->query($sql_footer_layanan);

?>

<!DOCTYPE html>
<html lang="id" data-bs-theme="light">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <meta name="description" content="<?= htmlspecialchars($pengaturan['meta_description'] ?? 'Jasa website profesional') ?>">
    <meta name="keywords" content="<?= htmlspecialchars($pengaturan['meta_keywords'] ?? 'jasa website') ?>">
    <meta name="author" content="<?= htmlspecialchars($pengaturan['brand_name'] ?? 'Author') ?>">
    <title><?= htmlspecialchars($pengaturan['site_title'] ?? 'Selamat Datang') ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">

    <style>
        body {
            padding-top: 56px; /* tinggi navbar fixed-top */
        }

        /* 1. Scroll mulus & Anti-Lompat */
        html, body {
            scroll-behavior: smooth;
            overflow-y: scroll; 
            overflow-x: hidden; 
        }

        /* 3. Penyesuaian Dark Mode */
        [data-bs-theme="dark"] .bg-gradient-hero {
            background: linear-gradient(145deg, #222e3c 0%, #0d1117 50%, #222e3c 100%) !important;
            background-size: 200% 200%;
            animation: gradient-shift 10s ease infinite;
        }
        [data-bs-theme="dark"] .bg-light {
            background-color: var(--bs-dark-bg-subtle) !important;
        }
        [data-bs-theme="dark"] .bg-primary-subtle {
            background-color: var(--bs-dark-bg-subtle) !important;
        }
        
        .theme-toggle {
            cursor: pointer;
            font-size: 1.25rem;
            line-height: 1;
        }
        
        /* 4. CSS Kustom untuk Hamburger */
        .offcanvas-body .nav-item {
            border-bottom: 1px solid var(--bs-border-color);
        }
        .offcanvas-body .nav-item:last-child {
            border-bottom: none;
        }
        .offcanvas-body .nav-link {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }

        /* 5. Menyesuaikan gambar card di grid baru */
        .card-img-top-grid {
            height: 180px; 
            object-fit: cover;
        }
        
        /* CSS BARU: Kursor untuk pemicu modal gambar */
        .view-image-trigger {
            cursor: zoom-in;
        }

        /* 6. Animasi Gradient Hero */
        .bg-gradient-hero {
            background: linear-gradient(145deg, #0d6efd 0%, #0a58ca 50%, #0d6efd 100%) !important;
            background-size: 200% 200%;
            animation: gradient-shift 10s ease infinite;
        }

        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 7. Pemberitahuan Berjalan (Ticker) */
        .ticker-wrap {
            width: 100%;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            padding: 0.75rem 0;
            margin: 1.5rem 0;
        }
        .ticker-track {
            display: inline-block;
            white-space: nowrap;
            animation: ticker-scroll 20s linear infinite;
            padding-left: 100%;
        }
        .ticker-track span {
            display: inline-block;
            padding: 0 2rem;
            font-weight: 500;
        }
        @keyframes ticker-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* 8. Efek Hover Tombol Hero (DIMODIFIKASI) */
        .bg-gradient-hero .btn {
            transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
            border-radius: 50px; /* Membuat tombol jadi "pill" */
            font-weight: 500;
        }
        .bg-gradient-hero .btn:hover {
            transform: scale(1.05);
        }

        .navbar.fixed-top {
            z-index: 1030;
        }

        /* 9. CSS Baru untuk Form Kontak Profesional */
        .form-kontak .input-group-text {
            width: 42px; /* Lebar icon konsisten */
            justify-content: center; /* Icon di tengah */
        }
        .form-kontak .form-control {
            border-left: 0; /* Hilangkan border ganda */
        }
        .form-kontak .input-group:focus-within .input-group-text {
             border-color: #86b7fe; /* Efek focus biru */
             box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
        }
         .form-kontak .form-control:focus {
             box-shadow: none; /* Hapus shadow bawaan input */
         }

        /* 10. Efek Hover Kartu Produk */
        #layanan .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        #layanan .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }
        
        /* 11. CSS BARU: Tombol Interaktif Hero */
        
        /* Animasi Berdenyut (Pulse) */
        @keyframes pulse-animation {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
            }
            70% {
                transform: scale(1.03); /* Sedikit membesar */
                box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            }
        }
        
        /* Terapkan animasi pulse ke tombol dropdown */
        .interactive-contact-group .dropdown-toggle {
            animation: pulse-animation 2s infinite;
        }
        
        /* Animasi dropdown-menu (muncul dari bawah) */
        .interactive-contact-group .dropdown-menu {
            animation: fade-slide-up 0.3s ease-out;
            border-radius: 0.75rem; /* Buat menu lebih modern */
            padding: 0.5rem 0;
        }
        
        @keyframes fade-slide-up {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Styling item di dalam dropdown */
        .interactive-contact-group .dropdown-item {
            font-weight: 500;
            padding: 0.75rem 1.25rem;
            transition: background-color 0.2s ease;
        }
        .interactive-contact-group .dropdown-item i {
            width: 20px; /* Pastikan ikon sejajar */
            font-size: 1.1rem;
            margin-right: 0.5rem;
        }

    </style>
</head>
<body>

<div id="preloader">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand fw-bold" href="#">
            <i class="fas fa-laptop-code me-2"></i><?= htmlspecialchars($pengaturan['brand_name'] ?? 'Brand') ?>
        </a>

        <div class="d-flex align-items-center">
            <span class="nav-link theme-toggle text-white me-2 d-lg-none" id="theme-toggle-mobile">
                <i class="fas fa-moon" id="theme-icon-mobile"></i>
            </span>

            <button class="navbar-toggler" type="button" 
                    data-bs-toggle="offcanvas" data-bs-target="#menuMobile" 
                    aria-controls="menuMobile" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav align-items-center">
                <li class="nav-item"><a class="nav-link" href="#layanan">Layanan</a></li>
                <li class="nav-item"><a class="nav-link" href="#testimoni">Testimoni</a></li>
                <li class="nav-item"><a class="nav-link" href="#kontak">Kontak</a></li>
                
                <li class="nav-item ms-3 d-none d-lg-block">
                    <span class="nav-link theme-toggle text-white" id="theme-toggle-desktop">
                        <i class="fas fa-moon" id="theme-icon-desktop"></i>
                    </span>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section class="bg-gradient-hero py-5 text-white text-center">
    <div class="container">
        <p class="lead fw-normal" data-aos="fade-down" data-aos-delay="100">
            <?= htmlspecialchars($pengaturan['hero_subheadline'] ?? '') ?>
        </p>
        <h1 class="display-5 fw-bold" data-aos="fade-up">
            <?= htmlspecialchars($pengaturan['hero_headline'] ?? '') ?>
        </h1>
        <p class="lead" data-aos="fade-up" data-aos-delay="200">
            <?= htmlspecialchars($pengaturan['hero_description'] ?? '') ?>
        </p>

        <div class="ticker-wrap" data-aos="fade-up" data-aos-delay="300">
            <div class="ticker-track">
                <?php foreach ($ticker_items as $item): ?>
                    <span><i class="<?= htmlspecialchars($item['icon_ticker']) ?> me-1"></i> <?= htmlspecialchars($item['isi_ticker']) ?></span>
                <?php endforeach; ?>
                <?php foreach ($ticker_items as $item): ?>
                    <span><i class="<?= htmlspecialchars($item['icon_ticker']) ?> me-1"></i> <?= htmlspecialchars($item['isi_ticker']) ?></span>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="d-flex justify-content-center align-items-center flex-wrap" data-aos="fade-up" data-aos-delay="400">
            
            <a href="#layanan" class="btn btn-light btn-lg m-2">
                <i class="fas fa-rocket me-2"></i> Lihat Layanan
            </a>
            
            <div class="btn-group interactive-contact-group m-2" role="group">
                <button id="btn-interactive-contact" type="button" class="btn btn-outline-light btn-lg dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-comment-dots me-2"></i> Hubungi Kami
                </button>
                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="btn-interactive-contact">
                    <li>
                        <a class="dropdown-item" href="#kontak">
                            <i class="fas fa-paper-plane text-warning"></i> Hubungi Langsung
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item" href="<?= htmlspecialchars($pengaturan['wa_link'] ?? '#') ?>?text=Halo%20<?= htmlspecialchars($pengaturan['brand_name'] ?? '') ?>,%20saya%20tertarik%20dengan%20layanan%20Anda." target="_blank">
                            <i class="fab fa-whatsapp text-success"></i> WhatsApp
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="<?= htmlspecialchars($pengaturan['telegram_link'] ?? '#') ?>" target="_blank">
                            <i class="fab fa-telegram text-info"></i> Telegram
                        </a>
                    </li>
                </ul>
            </div>

        </div>
        
        </div>
</section>

<section id="layanan" class="py-5 bg-primary-subtle">
    <div class="container overflow-hidden">
        
        <h2 class="text-center mb-5 fw-bold">Produk Kami</h2>
        
        <div class="row">
            <?php if ($produk->num_rows > 0): ?>
                <?php while ($row = $produk->fetch_assoc()): ?>
                    
                    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4">
                        <div class="card h-100 shadow-sm border-0">
                            <img src="uploads/<?= htmlspecialchars($row['gambar']) ?>" 
                                 class="card-img-top card-img-top-grid view-image-trigger" 
                                 alt="<?= htmlspecialchars($row['judul']) ?>"
                                 data-full-image="uploads/<?= htmlspecialchars($row['gambar']) ?>"
                                 data-image-title="<?= htmlspecialchars($row['judul']) ?>">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title"><?= htmlspecialchars($row['judul']) ?></h5>
                                <p class="text-muted"><?= htmlspecialchars($row['harga']) ?></p>
                                <button class="btn btn-primary mt-auto" data-bs-toggle="modal" 
                                    data-bs-target="#modalProduk<?= $row['id'] ?>">
                                    Detail & Pesan
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="modal" id="modalProduk<?= $row['id'] ?>" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title"><?= htmlspecialchars($row['judul']) ?></h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                 </div>
                                <div class="modal-body text-center">
                                    
                                    <img src="uploads/<?= htmlspecialchars($row['gambar']) ?>" 
                                         class="rounded mb-3 view-image-trigger" 
                                         style="max-height: 150px; width: auto; max-width: 100%;"
                                         data-full-image="uploads/<?= htmlspecialchars($row['gambar']) ?>"
                                         data-image-title="<?= htmlspecialchars($row['judul']) ?>"
                                         alt="<?= htmlspecialchars($row['judul']) ?>">
                                    
                                    <div class="bg-body-tertiary p-3 rounded mb-3 text-center">
                                        <small class="text-muted">Harga Layanan</small>
                                        <h4 class="fw-bold mb-0 text-primary-emphasis">
                                            <?= htmlspecialchars($row['harga']) ?>
                                        </h4>
                                    </div>
                                        
                                    <p class="text-start">
                                        <?= nl2br(htmlspecialchars($row['deskripsi'])) ?>
                                    </p>
                                </div>
                                <div class="modal-footer flex-column">
                                    <p class="text-muted small text-center mb-3">
                                        Tertarik untuk memesan? Silakan hubungi kami melalui salah satu platform di bawah ini untuk konsultasi gratis.
                                    </p>
                                    
                                    <a href="<?= htmlspecialchars($pengaturan['wa_link'] ?? '#') ?>?text=Halo%20<?= htmlspecialchars($pengaturan['brand_name'] ?? '') ?>,%20saya%20tertarik%20dengan%20<?= urlencode($row['judul']) ?>" 
                                       class="btn btn-success w-100 mb-2" target="_blank">
                                        <i class="fab fa-whatsapp me-2"></i> Hubungi via WhatsApp
                                    </a>
                                    <a href="<?= htmlspecialchars($pengaturan['telegram_link'] ?? '#') ?>" 
                                       class="btn btn-primary w-100" target="_blank">
                                        <i class="fab fa-telegram me-2"></i> Hubungi via Telegram
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endwhile; ?>
            <?php else: ?>
                <div class="col-12 text-center">
                    <p class="text-muted">Belum ada layanan yang tersedia saat ini.</p>
                </div>
            <?php endif; ?>
        </div>
        </div>
</section>

<section id="testimoni" class="py-5 bg-light border-top">
    <div class="container overflow-hidden">
        <h2 class="text-center mb-5 fw-bold" data-aos="fade-up">Apa Kata Mereka?</h2>
        <div class="row">
            
            <?php if ($testimoni->num_rows > 0): ?>
                <?php 
                $delay = 0; 
                $animations = ['fade-right', 'fade-up', 'fade-left'];
                $i = 0;
                ?>
                <?php while ($row_testi = $testimoni->fetch_assoc()): ?>
                    <div class="col-md-4 mb-4" data-aos="<?= $animations[$i % 3] ?>">
                        <div class="card p-3 h-100">
                            <p>“<?= htmlspecialchars($row_testi['isi_testimoni']) ?>”</p>
                            <div class="d-flex align-items-center mt-auto">
                                <div class="me-3">
                                    <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center" style="width:40px; height:40px;">
                                        <span class="text-white"><?= htmlspecialchars($row_testi['inisial_penulis'] ?? 'A') ?></span>
                                    </div>
                                </div>
                                <div>
                                    <h6 class="mb-0"><?= htmlspecialchars($row_testi['nama_penulis']) ?></h6>
                                    <small class="text-muted"><?= htmlspecialchars($row_testi['jabatan_penulis']) ?></small>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php $i++; endwhile; ?>
            <?php else: ?>
                <div class="col-12 text-center">
                    <p class="text-muted">Belum ada testimoni saat ini.</p>
                </div>
            <?php endif; ?>
            
        </div>
    </div>
</section>

<section id="kontak" class="py-5 border-top">
    <div class="container">
        <h2 class="text-center mb-5 fw-bold" data-aos="fade-up">Kirim Pesan</h2>
        <div class="row justify-content-center">
            <div class="col-lg-8">
                
                <form id="kontakForm" data-aos="fade-up" class="form-kontak">
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                            <input type="text" name="nama" class="form-control" placeholder="Nama Lengkap Anda" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                            <input type="email" name="email" class="form-control" placeholder="Email Aktif Anda" required>
                        </div>
                    </div>
                    <div class="mb-3">
                         <div class="input-group">
                            <span class="input-group-text align-items-start pt-3"><i class="fas fa-comment-dots"></i></span>
                            <textarea name="pesan" class="form-control" rows="4" placeholder="Tuliskan pesan atau pertanyaan Anda..." required></textarea>
                        </div>
                    </div>
                    <button type="submit" id="kirimBtn" class="btn btn-primary w-100 btn-lg">
                        <i class="fas fa-paper-plane me-2"></i> Kirim Pesan
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<footer class="bg-dark text-light py-4">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-3">
                <h5><i class="fas fa-laptop-code me-2"></i><?= htmlspecialchars($pengaturan['brand_name'] ?? 'Brand') ?></h5>
                <p><?= htmlspecialchars($pengaturan['footer_about'] ?? '') ?></p>
            </div>
            <div class="col-md-4 mb-3">
                <h5>Kontak Kami</h5>
                <ul class="list-unstyled">
                    <li>
                        <i class="fab fa-whatsapp me-2 text-success"></i> 
                        <a href="<?= htmlspecialchars($pengaturan['wa_link'] ?? '#') ?>" class="text-light">
                            <?php 
                                $wa_number = preg_replace('/[^0-9]/', '', $pengaturan['wa_link'] ?? '');
                                if (substr($wa_number, 0, 2) == '62') {
                                    $wa_number = '+'. $wa_number;
                                }
                                echo htmlspecialchars($wa_number);
                            ?>
                        </a>
                    </li>
                    <li>
                        <i class="fab fa-telegram me-2 text-primary"></i> 
                        <a href="<?= htmlspecialchars($pengaturan['telegram_link'] ?? '#') ?>" class="text-light">
                            <?php 
                                $tg_username = basename($pengaturan['telegram_link'] ?? '');
                                echo '@' . htmlspecialchars($tg_username);
                            ?>
                        </a>
                    </li>
                    <li>
                        <i class="fas fa-envelope me-2"></i> 
                        <?= htmlspecialchars($pengaturan['contact_email'] ?? '') ?>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 mb-3">
                <h5>Layanan</h5>
                <ul class="list-unstyled">
                    <?php if ($footer_layanan->num_rows > 0): ?>
                        <?php $footer_layanan->data_seek(0); // Reset pointer loop ?>
                        <?php while($row_layanan = $footer_layanan->fetch_assoc()): ?>
                            <li><?= htmlspecialchars($row_layanan['nama_layanan']) ?></li>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
        <hr class="bg-secondary">
        <p class="text-center mb-0">
            <?= $pengaturan['footer_copyright'] ?? '' ?>
        </p>
    </div>
</footer>

<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1100">
  <div id="notifToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="fas fa-check-circle text-success me-2" id="toastIcon"></i>
      <strong class="me-auto" id="toastTitle">Notifikasi</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body" id="toastMessage">
      Pesan berhasil dikirim!
    </div>
  </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="menuMobile" aria-labelledby="menuMobileLabel">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title" id="menuMobileLabel">
            <i class="fas fa-laptop-code me-2"></i>Menu Navigasi
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <ul class="navbar-nav flex-column">
            <li class="nav-item">
                <a class="nav-link fs-5" href="#layanan" data-bs-dismiss="offcanvas">Layanan</a>
            </li>
            <li class="nav-item">
                <a class="nav-link fs-5" href="#testimoni" data-bs-dismiss="offcanvas">Testimoni</a>
            </li>
            <li class="nav-item">
                <a class="nav-link fs-5" href="#kontak" data-bs-dismiss="offcanvas">Kontak</a>
            </li>
            </ul>
        <hr>
        <p class="text-muted small">Hubungi kami untuk konsultasi gratis:</p>
        <a href="<?= htmlspecialchars($pengaturan['wa_link'] ?? '#') ?>" target="_blank" class="btn btn-success w-100 mb-2">
            <i class="fab fa-whatsapp me-2"></i> WhatsApp
        </a>
        <a href="<?= htmlspecialchars($pengaturan['telegram_link'] ?? '#') ?>" target="_blank" class="btn btn-primary w-100">
            <i class="fab fa-telegram me-2"></i> Telegram
        </a>
    </div>
</div>

<div class="modal" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="imageModalLabel">Gambar Produk</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <img src="" id="fullImage" class="img-fluid" alt="Gambar Produk Detail">
      </div>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
    // Inisialisasi AOS
    AOS.init({ duration: 800 });

    // Hilangkan preloader saat halaman selesai load
    window.addEventListener('load', () => {
        const preloader = document.getElementById('preloader');
        if (preloader) preloader.style.display = 'none';
    });

    // --- LOGIKA UNTUK LIGHT/DARK MODE (Sudah Ada) ---
    (function() {
        const htmlElement = document.documentElement;
        
        const themeToggles = document.querySelectorAll('.theme-toggle');
        
        const themeIcons = [
            document.getElementById('theme-icon-desktop'),
            document.getElementById('theme-icon-mobile')
        ].filter(Boolean);

        function applyTheme(theme) {
            htmlElement.setAttribute('data-bs-theme', theme);
            
            themeIcons.forEach(icon => {
                if (theme === 'dark') {
                    icon.classList.remove('fa-moon');
                    icon.classList.add('fa-sun');
                } else {
                    icon.classList.remove('fa-sun');
                    icon.classList.add('fa-moon');
                }
            });
            localStorage.setItem('theme', theme);
        }

        const savedTheme = localStorage.getItem('theme') || 'light';
        applyTheme(savedTheme);

        themeToggles.forEach(toggle => {
            toggle.addEventListener('click', () => {
                const currentTheme = htmlElement.getAttribute('data-bs-theme');
                const newTheme = (currentTheme === 'dark') ? 'light' : 'dark';
                applyTheme(newTheme);
            });
        });
    })();

// --- LOGIKA FORM KONTAK AJAX & TOAST (Sudah Ada) ---

// Ambil elemen-elemen
const toastEl = document.getElementById('notifToast');
const bsToast = new bootstrap.Toast(toastEl, { delay: 5000 }); // Tampilkan 5 detik
const toastHeader = toastEl.querySelector('.toast-header');
const toastIcon = document.getElementById('toastIcon');
const toastMessage = document.getElementById('toastMessage');
const toastTitle = document.getElementById('toastTitle');

const kontakForm = document.getElementById('kontakForm');
const kirimBtn = document.getElementById('kirimBtn');

if (kontakForm) {
    kontakForm.addEventListener('submit', function(e) {
        e.preventDefault(); // Hentikan submit form standar

        // Ubah tombol jadi loading
        kirimBtn.disabled = true;
        kirimBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Mengirim...';

        const formData = new FormData(kontakForm);

        // Kirim data pakai fetch()
        fetch('kontak.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                // Tampilkan toast SUKSES (HIJAU)
                toastHeader.classList.add('bg-success', 'text-white');
                toastHeader.classList.remove('bg-danger');
                toastIcon.className = 'fas fa-check-circle me-2';
                toastTitle.textContent = 'Berhasil!';
                toastMessage.textContent = data.message;
                bsToast.show();
                kontakForm.reset(); // Kosongkan form
            } else {
                // Tampilkan toast ERROR (MERAH)
                toastHeader.classList.add('bg-danger', 'text-white');
                toastHeader.classList.remove('bg-success');
                toastIcon.className = 'fas fa-times-circle me-2';
                toastTitle.textContent = 'Gagal!';
                toastMessage.textContent = data.message;
                bsToast.show();
            }
        })
        .catch(error => {
            // Error jaringan
            toastHeader.classList.add('bg-danger', 'text-white');
            toastHeader.classList.remove('bg-success');
            toastIcon.className = 'fas fa-exclamation-triangle me-2';
            toastTitle.textContent = 'Error Jaringan';
            toastMessage.textContent = 'Tidak dapat terhubung ke server. Coba lagi.';
            bsToast.show();
            console.error('Error:', error);
        })
        .finally(() => {
            // Kembalikan tombol ke kondisi normal
            kirimBtn.disabled = false;
            kirimBtn.innerHTML = '<i class="fas fa-paper-plane me-2"></i> Kirim Pesan';
        });
    });
}


/* Logika modal gambar (Sudah dimodifikasi)
    Sekarang menangani SEMUA elemen dengan class '.view-image-trigger'
*/
try {
    // 1. Dapatkan referensi ke modal gambar besar dan elemen di dalamnya
    const imageModalElement = document.getElementById('imageModal');
    const imageModal = new bootstrap.Modal(imageModalElement, {}); // Inisialisasi modal
    const fullImageElement = document.getElementById('fullImage');
    const imageModalTitle = document.getElementById('imageModalLabel');

    // 2. Gunakan event delegation untuk menangani klik pada gambar
    document.addEventListener('click', function(e) {
        
        // Cek apakah yang diklik (atau parent-nya) adalah pemicu
        const trigger = e.target.closest('.view-image-trigger');

        if (trigger) {
            e.preventDefault(); // Hentikan aksi default

            // 3. Ambil data dari atribut data-*
            const fullImagePath = trigger.getAttribute('data-full-image');
            const imageTitle = trigger.getAttribute('data-image-title');

            // 4. Setel src dan alt untuk gambar di modal besar
            if(fullImageElement) fullImageElement.src = fullImagePath;
            if(fullImageElement) fullImageElement.alt = imageTitle;
            
            // 5. Setel judul modal besar
            if(imageModalTitle) imageModalTitle.textContent = imageTitle;

            // 6. Tampilkan modal gambar besar
            imageModal.show();
        }
    });
} catch (err) {
    console.error("Error saat setup image modal:", err);
}


</script>

</body>
</html>
