<?php
include 'includes/config.php';
$settings = mysqli_query($conn, "SELECT * FROM settings WHERE id = 1");
$s = mysqli_fetch_assoc($settings);
$bg = $s['background'] ?? 'hero-bg.jpg';
?>
<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="RSUD Lamadukelleng Kabupaten Wajo - Melayani dengan sepenuh hati. Layanan kesehatan profesional, dokter spesialis, dan pendaftaran online.">
    <meta name="keywords"
        content="RSUD Lamadukelleng, RSUD Wajo, Rumah Sakit Wajo, Sengkang, Kesehatan, Pendaftaran Online RSUD">
    <meta name="author" content="RSUD Lamadukelleng">
    <title>
        <?php echo $s['nama_rs'] ?? 'RSUD Lamadukelleng'; ?> - Kabupaten Wajo
    </title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <!-- Icons -->
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    <!-- Styles -->
    <link rel="icon" id="dynamic-favicon" href="assets/images/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="css/style.css?v=1.2">
    <style id="php-style">
        .hero {
            background: linear-gradient(rgba(13, 138, 188, 0.5), rgba(13, 138, 188, 0.5)), url('uploads/<?php echo $bg; ?>?v=<?php echo time(); ?>') !important;
            background-size: cover !important;
            background-position: center !important;
        }
    </style>
</head>

<body>

    <!-- Top Navigation Bar -->
    <nav class="navbar" id="navbar">
        <div class="container nav-container">
            <div class="nav-logo">
                <div id="nav-logo-container">
                    <i class="ph-fill ph-hospital" id="default-logo-icon"></i>
                    <img src="" id="dynamic-logo" class="logo-img"
                        style="display:none; width: 40px; height: 40px; object-fit: contain;">
                </div>
                <div class="logo-text">
                    <h1 class="rs-name">RSUD Lamadukelleng</h1>
                    <span class="rs-slogan">Kabupaten Wajo</span>
                </div>
            </div>

            <div class="nav-links" id="nav-links">
                <a href="#beranda" class="nav-link active">Beranda</a>
                <a href="#tentang" class="nav-link">Tentang Kami</a>
                <a href="#fasilitas" class="nav-link">Fasilitas</a>
                <a href="#jadwal" class="nav-link">Jadwal Dokter</a>
                <a href="#faq" class="nav-link">FAQ</a>
                <a href="#berita" class="nav-link">Berita</a>
                <a href="#layanan" class="nav-link">Layanan Online</a>
            </div>

            <div class="nav-actions">
                <!-- <button class="btn-primary" id="btn-register-main">Daftar Online</button> -->
                <button class="mobile-menu-btn" id="mobile-menu-btn">
                    <i class="ph ph-list"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="beranda" class="hero-section">
        <div class="hero-bg" id="hero-bg-container">
            <img src="uploads/<?php echo $bg; ?>" alt="RSUD Lamadukelleng" id="hero-main-img">
            <div class="hero-overlay"></div>
        </div>
        <div class="container hero-content">
            <div class="hero-text reveal-left">
                <span class="badge-pill">Melayani dengan Sepenuh Hati</span>
                <h2>Pusat Layanan Kesehatan Terpadu Kabupaten Wajo</h2>
                <p>Memberikan pelayanan kesehatan yang profesional, paripurna, dan terjangkau dengan didukung tenaga
                    medis berpengalaman dan fasilitas modern.</p>
                <div class="hero-buttons">
                   <!-- <button class="btn-primary btn-lg open-registration">Akses Layanan Online</button> -->
                    <a href="#tentang" class="btn-outline-white btn-lg">Kenali Kami Lebih Dekat</a>
                </div>
            </div>

            <!-- AdminUI style stats overlay in hero -->
            <div class="hero-stats-grid reveal-right">
                <div class="stat-box delay-1">
                    <i class="ph ph-users-three"></i>
                    <div class="stat-info">
                        <h3 id="hero-stat-dokter">...</h3>
                        <span>Dokter Spesialis</span>
                    </div>
                </div>
                <div class="stat-box delay-2">
                    <i class="ph ph-bed"></i>
                    <div class="stat-info">
                        <h3 id="211 Bed">...</h3>
                        <span>Tempat Tidur Tersedia</span>
                    </div>
                </div>
                <div class="stat-box delay-3">
                    <i class="ph ph-clock"></i>
                    <div class="stat-info">
                        <h3>24/7</h3>
                        <span>Layanan IGD</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Tentang Kami Section -->
    <section id="tentang" class="section bg-light reveal">
        <div class="container">
            <div class="section-header text-center">
                <h3 class="section-subtitle">PROFIL INSTANSI</h3>
                <h2 class="section-title">Mengenal RSUD Lamadukelleng</h2>
                <div class="divider"></div>
            </div>

            <div class="about-grid">
                <div class="about-content reveal-left">
                    <p class="lead-text">Rumah Sakit Umum Daerah (RSUD) Lamadukelleng adalah fasilitas kesehatan rujukan
                        utama di Kabupaten Wajo yang berkomitmen tinggi pada mutu dan keselamatan pasien.</p>
                    <p>Berdiri sebagai pilar kesehatan masyarakat Wajo, kami terus berinovasi mengintegrasikan teknologi
                        medis modern dengan pelayanan yang humanis. Kami menyediakan layanan dari rawat jalan, rawat
                        inap, hingga penanganan gawat darurat yang responsif.</p>

                    <div class="admin-card mt-4">
                        <div class="card-header bg-primary text-white">
                            <h4><i class="ph ph-target"></i> Visi</h4>
                        </div>
                        <div class="card-body">
                            <p class="mb-0 text-center fw-600">"RSUD Lamaddukkelleng Kabupaten Wajo sebagai Pusat Rujukan Pelayanan Kesehatan yang Unggul, Berkarakter, dan Berkompeten menuju Wajo "MARADEKA".</p>
                        </div>
                    </div>
                </div>

                <div class="about-mission reveal-right">
                    <div class="admin-card h-100">
                        <div class="card-header">
                            <h4><i class="ph ph-list-checks text-primary"></i> Misi Kami</h4>
                        </div>
                        <div class="card-body p-0">
                            <ul class="mission-list">
                                <li class="delay-1">
                                    <div class="icon-circle"><i class="ph ph-check"></i></div>
                                    <span>Meningkatkan pelayanan kesehatan yang dapat memenuhi kebutuhan dan keinginan masyarakat melalui pengembangan sistem pelayanan yang terintegrasi dan komperehensif serta berorientasi kepada kepuasan pelanggan.</span>
                                </li>
                                <li class="delay-2">
                                    <div class="icon-circle"><i class="ph ph-check"></i></div>
                                    <span>Mewujudkan sumber daya manusia yang berkualitas melalui pemenuhan tenaga yang terlatih dan terdidik secara profesional.</span>
                                </li>
                                <li class="delay-3">
                                    <div class="icon-circle"><i class="ph ph-check"></i></div>
                                    <span>Menciptakan tata kelola RS yang baik melalui penataan dan perbaikan manajemen yang berkualitas, profesional serta akuntabel.</span>
                                </li>
                                <li class="delay-4">
                                    <div class="icon-circle"><i class="ph ph-check"></i></div>
                                    <span>Mengembangkan manajemen RS melalui Sistem Informasi Manajemen Rumah Sakit (SIMRS) yang akuntabel.</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Fasilitas Section -->
    <section id="fasilitas" class="section">
        <div class="container">
            <div class="section-header">
                <div class="header-content">
                    <h3 class="section-subtitle">INFRASTRUKTUR & MEDIS</h3>
                    <h2 class="section-title">Fasilitas Unggulan</h2>
                    <p class="section-desc">Sarana dan prasarana modern dirancang khusus untuk memastikan diagnosa
                        akurat dan perawatan optimal bagi kesembuhan Anda.</p>
                </div>
            </div>

            <!-- UI AdminUI style structured grid -->
            <div class="facilities-grid">
                <div class="admin-card facility-card reveal delay-1">
                    <div class="f-icon bg-soft-blue"><i class="ph ph-ambulance text-blue"></i></div>
                    <h4>IGD 24 Jam</h4>
                    <p>Penanganan cepat gawat darurat trauma dan medis oleh tim ahli.</p>
                </div>
                <div class="admin-card facility-card reveal delay-2">
                    <div class="f-icon bg-soft-green"><i class="ph ph-stethoscope text-green"></i></div>
                    <h4>Poliklinik Spesialis</h4>
                    <p>Layanan rawat jalan berbagai bidang spesialisasi penyakit.</p>
                </div>
                <div class="admin-card facility-card reveal delay-3">
                    <div class="f-icon bg-soft-purple"><i class="ph ph-bed text-purple"></i></div>
                    <h4>Ruang Rawat Inap</h4>
                    <p>Pilihan kelas perawatan VVIP, VIP, Kelas I, II, dan III yang nyaman.</p>
                </div>
                <div class="admin-card facility-card reveal delay-4">
                    <div class="f-icon bg-soft-orange"><i class="ph ph-heartbeat text-orange"></i></div>
                    <h4>ICU / NICU</h4>
                    <p>Unit perawatan intensif dilengkapi monitor dan ventilator mutakhir.</p>
                </div>
                <div class="admin-card facility-card reveal delay-1">
                    <div class="f-icon bg-soft-red"><i class="ph ph-bandaids text-red"></i></div>
                    <h4>Instalasi Bedah (IBS)</h4>
                    <p>Ruang operasi steril dengan peralatan pembedahan berstandar tinggi.</p>
                </div>
                <div class="admin-card facility-card reveal delay-2">
                    <div class="f-icon bg-soft-blue"><i class="ph ph-radioactive text-blue"></i></div>
                    <h4>Radiologi & Lab</h4>
                    <p>Layanan diagnostik X-Ray, USG, dan laboratorium klinis 24 jam.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Jadwal Dokter Section -->
    <section id="jadwal" class="section bg-light reveal">
        <div class="container">
            <div class="section-header text-center">
                <h3 class="section-subtitle">PELAYANAN MEDIS</h3>
                <h2 class="section-title">Jadwal Praktik Dokter</h2>
                <p class="section-desc">Cek jadwal praktik dokter spesialis kami untuk merencanakan kunjungan Anda
                    dengan lebih baik.</p>
                <div class="divider"></div>
            </div>

            <div class="schedule-container">
                <table class="schedule-table">
                    <thead>
                        <tr>
                            <th>Nama Dokter</th>
                            <th>Spesialisasi</th>
                            <th>Hari Praktik</th>
                            <th>Jam Kerja</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="doctor-profile">
                                    <div class="doctor-avatar"><i class="ph ph-user"></i></div>
                                    <span class="fw-600">dr. Andi Irawan, Sp.PD</span>
                                </div>
                            </td>
                            <td><span class="specialty-badge">Penyakit Dalam</span></td>
                            <td>Senin - Kamis</td>
                            <td>08.00 - 14.00 WITA</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="doctor-profile">
                                    <div class="doctor-avatar"><i class="ph ph-user"></i></div>
                                    <span class="fw-600">dr. Siti Rahma, Sp.A</span>
                                </div>
                            </td>
                            <td><span class="specialty-badge">Anak</span></td>
                            <td>Senin - Jumat</td>
                            <td>09.00 - 13.00 WITA</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="doctor-profile">
                                    <div class="doctor-avatar"><i class="ph ph-user"></i></div>
                                    <span class="fw-600">dr. H. Muhammad Yunus, Sp.B</span>
                                </div>
                            </td>
                            <td><span class="specialty-badge">Bedah Umum</span></td>
                            <td>Selasa & Sabtu</td>
                            <td>10.00 - 15.00 WITA</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="doctor-profile">
                                    <div class="doctor-avatar"><i class="ph ph-user"></i></div>
                                    <span class="fw-600">dr. Maria Ulfa, Sp.OG</span>
                                </div>
                            </td>
                            <td><span class="specialty-badge">Kandungan</span></td>
                            <td>Rabu - Jumat</td>
                            <td>14.00 - 17.00 WITA</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="doctor-profile">
                                    <div class="doctor-avatar"><i class="ph ph-user"></i></div>
                                    <span class="fw-600">dr. Faisal Malik, Sp.M</span>
                                </div>
                            </td>
                            <td><span class="specialty-badge">Mata</span></td>
                            <td>Senin - Rabu</td>
                            <td>08.00 - 12.00 WITA</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="text-center mt-4">
                <p class="text-muted small">* Jadwal dapat berubah sewaktu-waktu. Silakan hubungi kami untuk konfirmasi
                    terbaru.</p>
            </div>
        </div>
    </section>

    <!-- Tim Medis Section -->
    <section class="section" id="dokter">
        <div class="container">
            <div class="section-header text-center reveal">
                <h3 class="section-subtitle">TENAGA AHLI</h3>
                <h2 class="section-title">Kenali Dokter Kami</h2>
                <div class="divider"></div>
                <p class="section-desc">Didukung oleh tim dokter spesialis yang berpengalaman dan berdedikasi tinggi di
                    bidangnya.</p>
            </div>

            <div id="dokter-container-baru" class="services-wrapper"
                style="display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; opacity: 1 !important; visibility: visible !important; min-height: 300px; position: relative; z-index: 99;">
                <!-- Doctor Card 1 -->
                <div class="admin-card text-center p-5 interactive reveal"
                    onclick="openDoctorProfile('dr. Andi Irawan, Sp.PD', 'Penyakit Dalam', 'Lulusan Universitas Hasanuddin, Spesialis Penyakit Dalam dengan pengalaman lebih dari 15 tahun.', 'https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?auto=format&fit=crop&w=400&q=80')">
                    <div
                        style="width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.5rem; border: 4px solid var(--soft-blue);">
                        <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?auto=format&fit=crop&w=400&q=80"
                            alt="Doctor" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">dr. Andi Irawan, Sp.PD</h3>
                    <p class="text-primary fw-600" style="font-size: 0.9rem; margin-bottom: 1rem;">Spesialis Penyakit
                        Dalam</p>
                    <button class="btn-outline-primary w-100" style="padding: 0.5rem;">Lihat Profil</button>
                </div>

                <!-- Doctor Card 2 -->
                <div class="admin-card text-center p-5 interactive reveal delay-1"
                    onclick="openDoctorProfile('dr. Siti Rahma, Sp.A', 'Spesialis Anak', 'Ahli kesehatan anak yang berfokus pada tumbuh kembang dan imunitas anak di masa pertumbuhan.', 'https://images.unsplash.com/photo-1594824476967-48c8b964273f?auto=format&fit=crop&w=400&q=80')">
                    <div
                        style="width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.5rem; border: 4px solid var(--soft-blue);">
                        <img src="https://images.unsplash.com/photo-1594824476967-48c8b964273f?auto=format&fit=crop&w=400&q=80"
                            alt="Doctor" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">dr. Siti Rahma, Sp.A</h3>
                    <p class="text-primary fw-600" style="font-size: 0.9rem; margin-bottom: 1rem;">Spesialis Anak</p>
                    <button class="btn-outline-primary w-100" style="padding: 0.5rem;">Lihat Profil</button>
                </div>

                <!-- Doctor Card 3 -->
                <div class="admin-card text-center p-5 interactive reveal delay-2"
                    onclick="openDoctorProfile('dr. Faisal Malik, Sp.M', 'Spesialis Mata', 'Pakar bedah mata dan koreksi penglihatan dengan teknologi laser terkini.', 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?auto=format&fit=crop&w=400&q=80')">
                    <div
                        style="width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.5rem; border: 4px solid var(--soft-blue);">
                        <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?auto=format&fit=crop&w=400&q=80"
                            alt="Doctor" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">dr. Faisal Malik, Sp.M</h3>
                    <p class="text-primary fw-600" style="font-size: 0.9rem; margin-bottom: 1rem;">Spesialis Mata</p>
                    <button class="btn-outline-primary w-100" style="padding: 0.5rem;">Lihat Profil</button>
                </div>
            </div>
        </div>
    </section>

    <!-- Layanan Online Section -->
    <section id="layanan" class="section bg-primary text-white">
        <div class="container">
            <div class="section-header text-center light-theme">
                <h3 class="section-subtitle text-white-50">PORTAL DIGITAL</h3>
                <h2 class="section-title">Layanan Publik Online</h2>
                <p class="section-desc text-white-80">Akses layanan rumah sakit kami kapan saja dan dari mana saja tanpa
                    perlu mengantre lama di lokasi.</p>
            </div>

            <div class="services-wrapper">
                <div class="admin-card service-card interactive">
                    <div class="s-icon"><i class="ph ph-monitor-play"></i></div>
                    <h3>Pendaftaran Online</h3>
                    <p>Daftar poliklinik secara digital. Dapatkan nomor antrean langsung dari HP Anda.</p>
                    <button class="btn-outline-primary mt-3 w-100">Mulai Mendaftar</button>
                </div>

                <div class="admin-card service-card interactive">
                    <div class="s-icon"><i class="ph ph-calendar-plus"></i></div>
                    <h3>Jadwal Dokter</h3>
                    <p>Cek jadwal praktik dokter spesialis terupdate hari ini dan minggu ini.</p>
                    <button class="btn-outline-primary mt-3 w-100">Lihat Jadwal</button>
                </div>

                <div class="admin-card service-card interactive">
                    <div class="s-icon"><i class="ph ph-video-camera"></i></div>
                    <h3>Telekonsultasi</h3>
                    <p>Layanan konsultasi kesehatan virtual bersama dokter spesialis kami.</p>
                    <button class="btn-outline-primary mt-3 w-100">Buat Janji</button>
                </div>

                <div class="admin-card service-card interactive">
                    <div class="s-icon"><i class="ph ph-chat-circle-text"></i></div>
                    <h3>Pusat Pengaduan</h3>
                    <p>Kirimkan saran, kritik, atau keluhan Anda untuk peningkatan mutu kami.</p>
                    <button class="btn-outline-primary mt-3 w-100">Sampaikan Saran</button>
                </div>
            </div>
        </div>
    </section>
    <!-- FAQ Section -->
    <section class="section" id="faq">
        <div class="container">
            <div class="section-header text-center reveal">
                <h3 class="section-subtitle">PUSAT BANTUAN</h3>
                <h2 class="section-title">Pertanyaan Umum (FAQ)</h2>
                <div class="divider"></div>
                <p class="section-desc">Temukan jawaban cepat untuk pertanyaan yang sering ditanyakan mengenai layanan
                    kami.</p>
            </div>

            <div style="max-width: 800px; margin: 0 auto;">
                <!-- FAQ Item 1 -->
                <div class="admin-card mb-3 reveal" style="border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.02);">
                    <div class="faq-question p-4"
                        style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
                        <h4 style="margin: 0; font-size: 1.1rem; color: #1e293b;">Apa saja syarat pendaftaran pasien
                            BPJS?</h4>
                        <i class="ph ph-plus" style="transition: 0.3s; color: var(--primary);"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.4s ease; background: #f8fafc;">
                        <div class="p-4" style="color: #64748b; line-height: 1.6;">
                            Syarat pendaftaran pasien BPJS meliputi: Kartu BPJS asli, KTP/KK, dan surat rujukan dari
                            Faskes tingkat pertama (Puskesmas/Klinik) kecuali untuk kondisi gawat darurat.
                        </div>
                    </div>
                </div>

                <!-- FAQ Item 2 -->
                <div class="admin-card mb-3 reveal delay-1"
                    style="border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.02);">
                    <div class="faq-question p-4"
                        style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
                        <h4 style="margin: 0; font-size: 1.1rem; color: #1e293b;">Bagaimana alur pendaftaran online?
                        </h4>
                        <i class="ph ph-plus" style="transition: 0.3s; color: var(--primary);"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.4s ease; background: #f8fafc;">
                        <div class="p-4" style="color: #64748b; line-height: 1.6;">
                            Pilih menu "Layanan Online", isi formulir pendaftaran, lampirkan dokumen yang diperlukan,
                            dan Anda akan menerima nomor antrean serta konfirmasi melalui WhatsApp dalam waktu maksimal
                            1x24 jam.
                        </div>
                    </div>
                </div>

                <!-- FAQ Item 3 -->
                <div class="admin-card mb-3 reveal delay-2"
                    style="border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.02);">
                    <div class="faq-question p-4"
                        style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
                        <h4 style="margin: 0; font-size: 1.1rem; color: #1e293b;">Kapan jam besuk pasien rawat inap?
                        </h4>
                        <i class="ph ph-plus" style="transition: 0.3s; color: var(--primary);"></i>
                    </div>
                    <div class="faq-answer"
                        style="max-height: 0; overflow: hidden; transition: all 0.4s ease; background: #f8fafc;">
                        <div class="p-4" style="color: #64748b; line-height: 1.6;">
                            Jam besuk RSUD Lamadukelleng dibagi menjadi dua sesi: Sesi Siang (11.00 - 13.00 WITA) dan
                            Sesi Sore (17.00 - 20.00 WITA). Pengunjung wajib mematuhi protokol kesehatan.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Berita Section -->
    <section class="section bg-light" id="berita">
        <div class="container">
            <div class="section-header text-center reveal">
                <h3 class="section-subtitle">INFORMASI TERKINI</h3>
                <h2 class="section-title">Berita & Kegiatan</h2>
                <div class="divider"></div>
                <p class="section-desc">Ikuti perkembangan terbaru dan tips kesehatan dari RSUD Lamadukelleng.</p>
            </div>

            <div class="services-wrapper">
                <!-- News Item 1 -->
                <div class="admin-card interactive reveal">
                    <div style="height: 200px; background: #ddd; overflow: hidden;">
                        <img src="https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=800&q=80"
                            alt="News" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="p-5">
                        <div
                            style="display: flex; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.8rem; color: var(--primary);">
                            <span><i class="ph ph-calendar-blank"></i> 11 Mei 2026</span>
                            <span><i class="ph ph-tag"></i> Kegiatan</span>
                        </div>
                        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; line-height: 1.4;">Kunjungan Tim Akreditasi
                            Fasilitas Kesehatan Tingkat Lanjut</h3>
                        <p class="text-muted" style="font-size: 0.9rem; margin-bottom: 1.5rem;">RSUD Lamadukelleng
                            menerima kunjungan tim surveior akreditasi untuk meningkatkan mutu layanan...</p>
                        <a href="baca-berita.html" class="text-primary fw-600" style="text-decoration: none;">Baca
                            Selengkapnya <i class="ph ph-arrow-right"></i></a>
                    </div>
                </div>

                <!-- News Item 2 -->
                <div class="admin-card interactive reveal delay-1">
                    <div style="height: 200px; background: #ddd; overflow: hidden;">
                        <img src="https://images.unsplash.com/photo-1505751172107-5732488c366c?auto=format&fit=crop&w=800&q=80"
                            alt="News" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="p-5">
                        <div
                            style="display: flex; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.8rem; color: var(--primary);">
                            <span><i class="ph ph-calendar-blank"></i> 08 Mei 2026</span>
                            <span><i class="ph ph-tag"></i> Tips Kesehatan</span>
                        </div>
                        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; line-height: 1.4;">Pentingnya Menjaga Pola
                            Makan Sehat di Masa Pancaroba</h3>
                        <p class="text-muted" style="font-size: 0.9rem; margin-bottom: 1.5rem;">Tips praktis dari dokter
                            spesialis gizi RSUD Lamadukelleng untuk menjaga daya tahan tubuh...</p>
                        <a href="baca-berita.html" class="text-primary fw-600" style="text-decoration: none;">Baca
                            Selengkapnya <i class="ph ph-arrow-right"></i></a>
                    </div>
                </div>

                <!-- News Item 3 -->
                <div class="admin-card interactive reveal delay-2">
                    <div style="height: 200px; background: #ddd; overflow: hidden;">
                        <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80"
                            alt="News" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="p-5">
                        <div
                            style="display: flex; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.8rem; color: var(--primary);">
                            <span><i class="ph ph-calendar-blank"></i> 05 Mei 2026</span>
                            <span><i class="ph ph-tag"></i> Inovasi</span>
                        </div>
                        <h3 style="font-size: 1.2rem; margin-bottom: 1rem; line-height: 1.4;">Luncurkan Layanan
                            Drive-Thru Untuk Pengambilan Obat Kronis</h3>
                        <p class="text-muted" style="font-size: 0.9rem; margin-bottom: 1.5rem;">Inovasi terbaru untuk
                            memudahkan pasien rawat jalan dalam mengambil obat rutin tanpa antre panjang...</p>
                        <a href="#" class="text-primary fw-600" style="text-decoration: none;">Baca Selengkapnya <i
                                class="ph ph-arrow-right"></i></a>
                    </div>
                </div>
            </div>

            <div class="text-center mt-4">
                <a href="berita.html" class="btn-outline-primary"
                    style="text-decoration: none; display: inline-block;">Lihat Semua Berita</a>
            </div>
        </div>
    </section>

    <!-- Lokasi & Kontak Section -->
    <section id="lokasi" class="section reveal">
        <div class="container">
            <div class="section-header">
                <h3 class="section-subtitle">TEMUKAN KAMI</h3>
                <h2 class="section-title">Lokasi & Kontak</h2>
                <p class="section-desc">Kunjungi kami di pusat kota Sengkang untuk mendapatkan pelayanan kesehatan
                    terbaik.</p>
            </div>

            <div class="contact-grid">
                <div class="contact-info-cards reveal-left">
                    <div class="admin-card contact-item-card interactive">
                        <div class="c-icon"><i class="ph ph-map-pin"></i></div>
                        <div class="c-text">
                            <h4>Alamat Utama</h4>
                            <p>Jl. Kartika Chandra Kirana No.1, Sengkang, Kabupaten Wajo, Sulawesi Selatan</p>
                        </div>
                    </div>
                    <div class="admin-card contact-item-card interactive">
                        <div class="c-icon"><i class="ph ph-phone-call"></i></div>
                        <div class="c-text">
                            <h4>Telepon / IGD</h4>
                            <p>(0485) 21019 / Emergency: (0485) 21118</p>
                        </div>
                    </div>
                    <div class="admin-card contact-item-card interactive">
                        <div class="c-icon"><i class="ph ph-envelope-simple"></i></div>
                        <div class="c-text">
                            <h4>Email Resmi</h4>
                            <p>info@rsudlamadukelleng.go.id</p>
                        </div>
                    </div>
                    <div class="admin-card contact-item-card interactive">
                        <div class="c-icon"><i class="ph ph-clock"></i></div>
                        <div class="c-text">
                            <h4>Jam Operasional</h4>
                            <p>Pelayanan IGD 24 Jam | Administrasi: 08.00 - 16.00</p>
                        </div>
                    </div>
                </div>

                <div class="map-wrapper reveal-right">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15933.167888636!2d120.0264105!3d-4.1147575!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2d95957d77053e1f%3A0x6b1f24f57c2a4732!2sRSUD%20Lamadukelleng!5e0!3m2!1sid!2sid!4v1715394000000!5m2!1sid!2sid"
                        allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <div class="nav-logo mb-3">
                        <i class="ph-fill ph-hospital text-primary" style="font-size: 2.5rem;"></i>
                        <div class="logo-text">
                            <h1 class="text-dark">RSUD Lamadukelleng</h1>
                            <span class="text-muted">Kabupaten Wajo</span>
                        </div>
                    </div>
                    <p class="text-muted mb-4">Melayani dengan profesionalisme dan sepenuh hati demi kesehatan
                        masyarakat Wajo dan sekitarnya.</p>
                    <div class="social-links">
                        <a href="#"><i class="ph-fill ph-facebook-logo"></i></a>
                        <a href="#"><i class="ph-fill ph-instagram-logo"></i></a>
                        <a href="#"><i class="ph-fill ph-youtube-logo"></i></a>
                    </div>
                </div>

                <div class="footer-links">
                    <h4>Navigasi Cepat</h4>
                    <ul>
                        <li><a href="#beranda">Beranda</a></li>
                        <li><a href="#tentang">Tentang Kami</a></li>
                        <li><a href="#fasilitas">Fasilitas</a></li>
                        <li><a href="#jadwal">Jadwal Dokter</a></li>
                        <li><a href="#faq">Tanya Jawab (FAQ)</a></li>
                        <li><a href="#berita">Berita Terbaru</a></li>
                        <li><a href="#layanan">Layanan Online</a></li>
                    </ul>
                </div>

                <div class="footer-contact">
                    <h4>Hubungi Kami</h4>
                    <ul class="contact-list">
                        <li>
                            <i class="ph ph-map-pin"></i>
                            <span>Jl. Kartika Chandra Kirana No.1, Sengkang, Kab. Wajo, Sulawesi Selatan</span>
                        </li>
                        <li>
                            <i class="ph ph-phone"></i>
                            <span>(0485) 21019 / IGD: (0485) 21118</span>
                        </li>
                        <li>
                            <i class="ph ph-envelope"></i>
                            <span>info@rsudlamadukelleng.go.id</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="footer-bottom">
                <p>&copy; 2026 RSUD Lamadukelleng Kabupaten Wajo. Hak Cipta Dilindungi.</p>
            </div>
        </div>
    </footer>

    <!-- Doctor Profile Modal -->
    <div class="modal-overlay" id="doctor-modal">
        <div class="modal-container" style="max-width: 600px;">
            <div class="modal-header">
                <h3>Profil Detail Dokter</h3>
                <button class="close-modal" onclick="closeDoctorModal()"><i class="ph ph-x"></i></button>
            </div>
            <div class="modal-body text-center">
                <div
                    style="width: 180px; height: 180px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.5rem; border: 5px solid #f1f5f9;">
                    <img id="doc-img" src="" alt="Doctor" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <h2 id="doc-name" style="font-weight: 800; color: #1e293b; margin-bottom: 0.25rem;"></h2>
                <p id="doc-specialty" class="text-primary fw-700 mb-4"></p>
                <div style="text-align: left; background: #f8fafc; padding: 1.5rem; border-radius: 16px;">
                    <h4 class="mb-2"><i class="ph ph-info text-primary"></i> Biodata & Keahlian</h4>
                    <p id="doc-bio" style="color: #64748b; line-height: 1.6;"></p>
                </div>
                <button class="btn-primary w-100 mt-4"
                    onclick="window.location.href='#layanan'; closeDoctorModal();">Buat Janji Temu</button>
            </div>
        </div>
    </div>

    <!-- Satisfaction Survey Modal -->
    <div class="modal-overlay" id="survey-modal">
        <div class="modal-container" style="max-width: 500px;">
            <div class="modal-header">
                <h3>Survei Kepuasan Pasien</h3>
                <button class="close-modal" onclick="closeSurveyModal()"><i class="ph ph-x"></i></button>
            </div>
            <div class="modal-body text-center">
                <p class="mb-4">Bagaimana pengalaman Anda mendapatkan layanan di RSUD Lamadukelleng?</p>
                <div style="display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem;">
                    <button class="survey-emoji" onclick="setRating(1)">😞</button>
                    <button class="survey-emoji" onclick="setRating(2)">😐</button>
                    <button class="survey-emoji" onclick="setRating(3)">😊</button>
                    <button class="survey-emoji" onclick="setRating(4)">🤩</button>
                </div>
                <textarea class="form-control" rows="4" placeholder="Berikan saran atau masukan Anda..."></textarea>
                <button class="btn-primary w-100 mt-4" onclick="submitSurvey()">Kirim Penilaian</button>
            </div>
        </div>
    </div>

    <!-- Floating Survey Button -->
    <button class="floating-btn" onclick="openSurveyModal()"
        style="position: fixed; bottom: 30px; left: 30px; z-index: 999; background: #FFB800; color: white; border: none; padding: 1rem 1.5rem; border-radius: 50px; font-weight: 700; box-shadow: 0 10px 20px rgba(255, 184, 0, 0.3); cursor: pointer; display: flex; align-items: center; gap: 0.5rem;">
        <i class="ph-fill ph-star" style="font-size: 1.2rem;"></i> Beri Nilai
    </button>
    <!-- Registration Modal -->
    <div class="modal-overlay" id="registration-modal">
        <div class="modal-container">
            <div class="modal-header">
                <h3>Pendaftaran Online</h3>
                <button class="close-modal"><i class="ph ph-x"></i></button>
            </div>
            <div class="modal-body">
                <form id="pendaftaran-form">
                    <div class="form-group">
                        <label>Nama Lengkap Pasien</label>
                        <input type="text" name="nama" class="form-input" placeholder="Masukkan nama sesuai KTP"
                            required>
                    </div>
                    <div class="form-group">
                        <label>NIK (Nomor Induk Kependudukan)</label>
                        <input type="text" name="nik" class="form-input" placeholder="16 digit NIK" required>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Pilih Poli Tujuan</label>
                            <select name="poli" class="form-input" required>
                                <option value="">-- Pilih Poli --</option>
                                <option>Poli Umum</option>
                                <option>Poli Gigi</option>
                                <option>Poli Kandungan</option>
                                <option>Poli Anak</option>
                                <option>Poli Penyakit Dalam</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Tanggal Rencana Periksa</label>
                            <input type="date" name="tgl" class="form-input" required>
                        </div>
                    </div>
                    <button type="submit" class="btn-primary w-100" style="margin-top: 1rem;">Kirim Pendaftaran
                        Online</button>
                </form>
            </div>

            <script>
                // Unified Modal Close
                function closeRegistration() {
                    document.getElementById('registration-modal').classList.remove('active');
                    document.body.style.overflow = 'auto';
                }

                document.getElementById('pendaftaran-form').addEventListener('submit', function (e) {
                    e.preventDefault();
                    const formData = new FormData(this);
                    const btn = this.querySelector('button');
                    const originalText = btn.innerText;

                    btn.innerText = 'Mengirim...';
                    btn.disabled = true;

                    fetch('includes/api_manager.php?action=add&table=pendaftaran', {
                        method: 'POST',
                        body: formData
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success') {
                                const nama = formData.get('nama');
                                const poli = formData.get('poli');
                                const tgl = formData.get('tgl');
                                const waMsg = `Halo Admin RSUD Lamadukelleng, saya ingin mengonfirmasi pendaftaran online atas nama ${nama} untuk Poli ${poli} pada tanggal ${tgl}.`;
                                const waUrl = `https://wa.me/628134221907?text=${encodeURIComponent(waMsg)}`;

                                alert('Pendaftaran Berhasil! Anda akan diarahkan ke WhatsApp untuk konfirmasi.');
                                window.open(waUrl, '_blank');
                                this.reset();
                                closeRegistration();
                            } else {
                                alert('Terjadi kesalahan: ' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('Gagal terhubung ke server database.');
                        })
                        .finally(() => {
                            btn.innerText = originalText;
                            btn.disabled = false;
                        });
                });
            </script>
        </div>
    </div>

    <!-- Floating WhatsApp -->
    <a href="https://wa.me/628134221907" class="floating-whatsapp" target="_blank">
        <i class="ph ph-whatsapp-logo"></i>
    </a>

    <script>
        // Doctor Profile Logic
        function openDoctorProfile(name, specialty, bio, img) {
            document.getElementById('doc-name').innerText = name;
            document.getElementById('doc-specialty').innerText = specialty;
            document.getElementById('doc-bio').innerText = bio;
            document.getElementById('doc-img').src = img;
            document.getElementById('doctor-modal').classList.add('active');
        }

        function closeDoctorModal() {
            document.getElementById('doctor-modal').classList.remove('active');
        }

        // Survey Logic
        function openSurveyModal() {
            document.getElementById('survey-modal').classList.add('active');
        }

        function closeSurveyModal() {
            document.getElementById('survey-modal').classList.remove('active');
        }

        let currentRating = 5;
        function setRating(val) {
            currentRating = val;
            document.querySelectorAll('.survey-emoji').forEach((el, idx) => {
                el.style.transform = (idx + 1 === val) ? 'scale(1.3)' : 'scale(1)';
                el.style.background = (idx + 1 === val) ? '#f1f5f9' : 'transparent';
                el.style.borderRadius = '12px';
            });
        }

        function submitSurvey() {
            const komentar = document.querySelector('#survey-modal textarea').value;
            const nama = prompt("Masukkan nama Anda (Opsional):") || "Pasien Anonim";

            const formData = new FormData();
            formData.append('nama', nama);
            formData.append('rating', currentRating);
            formData.append('komentar', komentar);

            fetch('includes/api_manager.php?action=add&table=reviews', {
                method: 'POST',
                body: formData
            })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'success') {
                        alert('Terima kasih atas penilaian Anda! Masukan Anda sangat berarti bagi kami.');
                        closeSurveyModal();
                    }
                });
        }
    </script>
    <script src="js/script.js"></script>
    <script>
        async function initDynamicContent() {
            try {
                const ts = new Date().getTime(); // Timestamp untuk buang cache
                const [summaryRes, docRes, newsRes, settingsRes] = await Promise.all([
                    fetch(`includes/api_manager.php?action=summary&v=${ts}`),
                    fetch(`includes/api_manager.php?action=fetch&table=dokter&v=${ts}`),
                    fetch(`includes/api_manager.php?action=fetch&table=berita&v=${ts}`),
                    fetch(`includes/api_manager.php?action=fetch&table=settings&v=${ts}`)
                ]);

                const summary = await summaryRes.json();
                const doctors = await docRes.json();
                const news = await newsRes.json();
                const settingsArr = await settingsRes.json();
                const settings = settingsArr[0];

                // 1. Update Website Settings (DENGAN CACHE BUSTER)
                if (settings) {
                    if (settings.nama_rs) document.querySelectorAll('.rs-name').forEach(el => el.innerText = settings.nama_rs);
                    if (settings.slogan) document.querySelectorAll('.rs-slogan').forEach(el => el.innerText = settings.slogan);
                    if (settings.hero_title) {
                        const heroEl = document.querySelector('.hero-text h2');
                        if (heroEl) heroEl.innerText = settings.hero_title;
                    }
                    if (settings.logo) {
                        const dynLogo = document.getElementById('dynamic-logo');
                        const dynFavicon = document.getElementById('dynamic-favicon');
                        const defaultIcon = document.getElementById('default-logo-icon');
                        const logoPath = 'uploads/' + settings.logo + '?v=' + ts;

                        if (dynLogo) {
                            dynLogo.src = logoPath;
                            dynLogo.style.display = 'block';
                        }
                        if (dynFavicon) dynFavicon.href = logoPath;
                        if (defaultIcon) defaultIcon.style.display = 'none';
                    }
                }

                // 2. Update Hero Stats
                if (summary) {
                    if (document.getElementById('hero-stat-dokter')) document.getElementById('hero-stat-dokter').innerText = (summary.total_dokter || 0) + '+';
                    if (document.getElementById('hero-stat-kamar')) document.getElementById('hero-stat-kamar').innerText = (summary.tersedia_bed || 0) + ' / ' + (summary.total_bed || 0);
                }

                // 3. Render Doctors
                const teamContainer = document.getElementById('dokter-container-baru');
                const scheduleTable = document.querySelector('#jadwal table tbody');

                if (Array.isArray(doctors) && doctors.length > 0) {
                    if (teamContainer) {
                        teamContainer.innerHTML = '';
                        doctors.forEach(doc => {
                            const foto = doc.foto ? 'uploads/' + doc.foto + '?v=' + ts : 'https://rsudlwajo.com/assets/images/hospital.png';
                            teamContainer.innerHTML += `
                                <div class="admin-card text-center p-5" style="opacity:1!important; visibility:visible!important; display:flex!important; flex-direction:column!important; align-items:center!important; background:white; border-radius:15px; box-shadow:0 10px 25px rgba(0,0,0,0.05); transition:none!important;">
                                    <div style="width:150px; height:150px; border-radius:50%; overflow:hidden; margin:0 auto 1.5rem; border:4px solid #0D8ABC;">
                                        <img src="${foto}" alt="${doc.nama}" style="width:100%; height:100%; object-fit:cover;">
                                    </div>
                                    <h3 style="font-size:1.2rem; margin-bottom:0.5rem; color:#1e293b;">${doc.nama}</h3>
                                    <p class="text-primary fw-600" style="font-size:0.9rem; margin-bottom:1rem;">${doc.spesialis}</p>
                                    <button class="btn-outline-primary w-100" style="padding:0.5rem; border-radius:8px;">Lihat Profil</button>
                                </div>
                            `;
                        });
                    }
                    if (scheduleTable) {
                        scheduleTable.innerHTML = '';
                        doctors.forEach(doc => {
                            scheduleTable.innerHTML += `
                                <tr>
                                    <td><div class="doctor-profile"><div class="doctor-avatar"><i class="ph ph-user"></i></div><span class="fw-600">${doc.nama}</span></div></td>
                                    <td><span class="specialty-badge">${doc.spesialis}</span></td>
                                    <td>${doc.jadwal_hari || 'Senin - Jumat'}</td>
                                    <td>${doc.jadwal_jam || '08.00 - 14.00 WITA'}</td>
                                </tr>
                            `;
                        });
                    }
                }

                // 4. Render News
                const newsContainer = document.querySelector('#berita .services-wrapper');
                if (newsContainer && Array.isArray(news) && news.length > 0) {
                    newsContainer.innerHTML = '';
                    news.slice(0, 3).forEach(n => {
                        const img = n.gambar ? 'uploads/' + n.gambar + '?v=' + ts : 'https://rsudlwajo.com/assets/images/hospital.png';
                        newsContainer.innerHTML += `
                            <div class="admin-card" style="opacity:1; visibility:visible;">
                                <img src="${img}" style="width:100%; height:200px; object-fit:cover;">
                                <div class="p-4">
                                    <h4 style="margin-bottom:10px;">${n.judul}</h4>
                                    <p class="text-muted small">${n.isi.substring(0, 80)}...</p>
                                    <a href="baca-berita.html?id=${n.id}" class="text-primary fw-600">Baca Selengkapnya</a>
                                </div>
                            </div>
                        `;
                    });
                }
            } catch (err) {
                console.error("Gagal sinkronisasi data:", err);
            }
        }
        initDynamicContent();
    </script>
</body>

</html>