<?php
/**
 * HOMEPAGE - Yayasan Panti Asuhan
 * Main landing page with all sections
 */

require_once 'config/database.php';
require_once 'config/config.php';
require_once 'config/analytics.php';

// Fetch data untuk homepage
try {
    // Get active sliders
    $sliders = db_fetch_all($pdo, "SELECT * FROM sliders WHERE is_active = 1 ORDER BY order_number ASC LIMIT 5");
    
    // Get statistics
    $stats = db_fetch($pdo, "SELECT 
        (SELECT COUNT(*) FROM donations WHERE status = 'confirmed') as total_donatur,
        (SELECT COUNT(*) FROM campaigns WHERE is_active = 1) as total_campaign,
        (SELECT COALESCE(SUM(collected_amount), 0) FROM campaigns) as total_dana
    ");
    
    // Get site settings
    $site_settings = db_fetch_all($pdo, "SELECT setting_key, setting_value FROM site_settings");
    $settings = [];
    foreach ($site_settings as $setting) {
        $settings[$setting['setting_key']] = $setting['setting_value'];
    }
    
    // Get programs (max 6)
    $programs = db_fetch_all($pdo, "SELECT * FROM programs WHERE is_active = 1 ORDER BY created_at DESC LIMIT 6");
    
    // Get latest news (max 6)
    $news = db_fetch_all($pdo, "SELECT * FROM berita WHERE is_published = 1 ORDER BY published_at DESC LIMIT 6");
    
    // Get featured campaigns
    $campaigns = db_fetch_all($pdo, "SELECT * FROM campaigns WHERE is_active = 1 AND end_date >= CURDATE() ORDER BY is_featured DESC, created_at DESC LIMIT 6");
    
    // Get active videos for slider
    $videos = db_fetch_all($pdo, "SELECT * FROM videos WHERE is_active = 1 ORDER BY order_number ASC LIMIT 5");
    
} catch (PDOException $e) {
    error_log("Homepage Error: " . $e->getMessage());
    $sliders = $programs = $news = $campaigns = [];
    $stats = ['total_donatur' => 0, 'total_campaign' => 0, 'total_dana' => 0];
    $settings = [];
}

// Default settings
$site_name = $settings['site_name'] ?? 'Yayasan Andalusia';
$site_tagline = $settings['site_tagline'] ?? 'Bersama Membangun Masa Depan';
$total_anak_asuh = $settings['total_anak_asuh'] ?? '350';

$page_title = $site_name;
?>
<!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="<?php echo sanitize($site_tagline); ?>">
    <title><?php echo sanitize($page_title); ?></title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    
    <?php echo get_meta_pixel_script(); ?>
</head>
<body>

<?php include 'includes/navbar.php'; ?>

<!-- Hero Slider Section -->
<section class="hero-slider">
   <div id="heroCarousel" class="carousel slide">
        <div class="carousel-indicators">
            <?php foreach ($sliders as $index => $slider): ?>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="<?php echo $index; ?>" 
                        <?php echo $index === 0 ? 'class="active" aria-current="true"' : ''; ?> 
                        aria-label="Slide <?php echo $index + 1; ?>"></button>
            <?php endforeach; ?>
        </div>
        
        <div class="carousel-inner">
            <?php if (empty($sliders)): ?>
                <!-- Default slide jika tidak ada data -->
                <div class="carousel-item active">
                    <div class="carousel-image" style="background-image: url('assets/images/default-slider.jpg');"></div>
                    <div class="carousel-overlay"></div>
                    <div class="carousel-caption">
                        <div class="container">
                            <h1 class="display-4 fw-bold mb-3" data-aos="fade-up">Bantu Anak Yatim Meraih Masa Depan</h1>
                            <p class="lead mb-4" data-aos="fade-up" data-aos-delay="100">Bersama kita wujudkan harapan mereka melalui pendidikan berkualitas</p>
                            <a href="pages/donasi.php" class="btn btn-primary btn-lg" data-aos="fade-up" data-aos-delay="200">
                                <i class="fas fa-heart me-2"></i>Donasi Sekarang
                            </a>
                        </div>
                    </div>
                </div>
            <?php else: ?>
                <?php foreach ($sliders as $index => $slider): ?>
                    <div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
                        <div class="carousel-image" style="background-image: url('<?php echo file_exists(SLIDER_UPLOAD_DIR . $slider['image']) ? SLIDER_UPLOAD_URL . sanitize($slider['image']) : 'assets/images/default-slider.jpg'; ?>');"></div>
                        <div class="carousel-overlay"></div>
                        <div class="carousel-caption">
                            <div class="container">
                                <h1 class="display-4 fw-bold mb-3" data-aos="fade-up"><?php echo sanitize($slider['title']); ?></h1>
                                <p class="lead mb-4" data-aos="fade-up" data-aos-delay="100"><?php echo sanitize($slider['subtitle']); ?></p>
                                <?php if (!empty($slider['button_text']) && !empty($slider['button_link'])): ?>
                                    <a href="<?php echo sanitize($slider['button_link']); ?>" class="btn btn-primary btn-lg" data-aos="fade-up" data-aos-delay="200">
                                        <i class="fas fa-heart me-2"></i><?php echo sanitize($slider['button_text']); ?>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        
        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>

<!-- Statistics Section -->
<section class="statistics-section py-5 bg-light">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-3 col-sm-6" data-aos="fade-up" data-aos-delay="0">
                <div class="stat-card text-center p-4">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-child fa-3x text-primary"></i>
                    </div>
                    <h3 class="stat-number mb-2"><?php echo $total_anak_asuh; ?>+</h3>
                    <p class="stat-label text-muted mb-0">Anak Asuh</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-6" data-aos="fade-up" data-aos-delay="100">
                <div class="stat-card text-center p-4">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-users fa-3x text-success"></i>
                    </div>
                    <h3 class="stat-number mb-2"><?php echo $stats['total_donatur']; ?>+</h3>
                    <p class="stat-label text-muted mb-0">Donatur</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-6" data-aos="fade-up" data-aos-delay="200">
                <div class="stat-card text-center p-4">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-bullhorn fa-3x text-warning"></i>
                    </div>
                    <h3 class="stat-number mb-2"><?php echo $stats['total_campaign']; ?>+</h3>
                    <p class="stat-label text-muted mb-0">Campaign Aktif</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-6" data-aos="fade-up" data-aos-delay="300">
                <div class="stat-card text-center p-4">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-donate fa-3x text-danger"></i>
                    </div>
                    <h3 class="stat-number mb-2"><?php echo format_currency($stats['total_dana']); ?></h3>
                    <p class="stat-label text-muted mb-0">Dana Terkumpul</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Program Section -->
<section class="program-section py-5">
    <div class="container">
        <div class="section-header text-center mb-5" data-aos="fade-up">
            <span class="badge bg-primary mb-2">PROGRAM PENDIDIKAN</span>
            <h2 class="section-title mb-3">Yayasan andalusia</h2>
            <p class="section-subtitle text-muted">Bersama Membangun Masa Depan Melalui Pendidikan Berkualitas dan Pengembangan Potensi Diri</p>
        </div>
        
        <div class="row g-4">
            <?php if (empty($programs)): ?>
                <div class="col-12 text-center">
                    <p class="text-muted">Program belum tersedia</p>
                </div>
            <?php else: ?>
                <?php foreach ($programs as $index => $program): ?>
                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="<?php echo $index * 100; ?>">
                        <div class="program-card h-100">
                            <div class="program-image">
                                <img src="<?php echo file_exists(PROGRAM_UPLOAD_DIR . $program['image']) ? PROGRAM_UPLOAD_URL . sanitize($program['image']) : 'assets/images/default-program.jpg'; ?>" 
                                     alt="<?php echo sanitize($program['title']); ?>" class="img-fluid">
                                <div class="program-overlay">
                                    <a href="pages/program-detail.php?slug=<?php echo sanitize($program['slug']); ?>" class="btn btn-light btn-sm">
                                        <i class="fas fa-arrow-right me-2"></i>Detail
                                    </a>
                                </div>
                            </div>
                            <div class="program-body p-4">
                                <?php if (!empty($program['icon'])): ?>
                                    <div class="program-icon mb-3">
                                        <i class="fas <?php echo sanitize($program['icon']); ?> fa-2x text-primary"></i>
                                    </div>
                                <?php endif; ?>
                                <h5 class="program-title mb-3"><?php echo sanitize($program['title']); ?></h5>
                                <p class="program-description text-muted"><?php echo truncate(sanitize($program['description']), 120); ?></p>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        
        <?php if (!empty($programs)): ?>
            <div class="text-center mt-5" data-aos="fade-up">
                <a href="pages/program.php" class="btn btn-outline-primary btn-lg">
                    <i class="fas fa-eye me-2"></i>Lihat Semua Program
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- Campaign Section -->
<section class="campaign-section py-5 bg-light">
    <div class="container">
        <div class="section-header text-center mb-5" data-aos="fade-up">
            <span class="badge bg-danger mb-2">CAMPAIGN DONASI</span>
            <h2 class="section-title mb-3">Bantu Mereka yang Membutuhkan</h2>
            <p class="section-subtitle text-muted">Mari bersama-sama membantu anak-anak yatim meraih masa depan yang lebih baik</p>
        </div>
        
        <div class="row g-4">
            <?php if (empty($campaigns)): ?>
                <div class="col-12 text-center">
                    <p class="text-muted">Campaign belum tersedia</p>
                </div>
            <?php else: ?>
                <?php foreach ($campaigns as $index => $campaign): 
                    $progress = calculate_percentage($campaign['collected_amount'], $campaign['target_amount']);
                    $progress_color = get_progress_color($progress);
                    $days_left = days_remaining($campaign['end_date']);
                ?>
                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="<?php echo $index * 100; ?>">
                        <div class="campaign-card h-100">
                            <?php if ($campaign['is_featured']): ?>
                                <div class="featured-badge">
                                    <i class="fas fa-star"></i> Featured
                                </div>
                            <?php endif; ?>
                            
                            <div class="campaign-image">
                                <img src="<?php echo file_exists(CAMPAIGN_UPLOAD_DIR . $campaign['image']) ? CAMPAIGN_UPLOAD_URL . sanitize($campaign['image']) : 'assets/images/default-campaign.jpg'; ?>" 
                                     alt="<?php echo sanitize($campaign['title']); ?>" class="img-fluid">
                            </div>
                            
                            <div class="campaign-body p-4">
                                <h5 class="campaign-title mb-3"><?php echo sanitize($campaign['title']); ?></h5>
                                <p class="campaign-description text-muted mb-3"><?php echo truncate(sanitize($campaign['description']), 100); ?></p>
                                
                                <div class="campaign-progress mb-3">
                                    <div class="d-flex justify-content-between mb-2">
                                        <span class="text-muted small">Terkumpul:</span>
                                        <span class="fw-bold"><?php echo format_currency($campaign['collected_amount']); ?></span>
                                    </div>
                                    <div class="progress" style="height: 8px;">
                                        <div class="progress-bar bg-<?php echo $progress_color; ?>" role="progressbar" 
                                             style="width: <?php echo min($progress, 100); ?>%" 
                                             aria-valuenow="<?php echo $progress; ?>" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div class="d-flex justify-content-between mt-2">
                                        <span class="text-muted small"><?php echo $progress; ?>% tercapai</span>
                                        <span class="text-muted small">Target: <?php echo format_currency($campaign['target_amount']); ?></span>
                                    </div>
                                </div>
                                
                                <div class="campaign-footer">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <div>
                                            <i class="fas fa-clock text-primary me-2"></i>
                                            <span class="small text-muted">
                                                <?php echo $days_left > 0 ? $days_left . ' hari lagi' : 'Berakhir'; ?>
                                            </span>
                                        </div>
                                        <?php if (!empty($campaign['category'])): ?>
                                            <span class="badge bg-secondary"><?php echo sanitize($campaign['category']); ?></span>
                                        <?php endif; ?>
                                    </div>
                                    
                                    <div class="d-grid gap-2">
                                        <a href="pages/campaign-detail.php?slug=<?php echo sanitize($campaign['slug']); ?>" class="btn btn-primary">
                                            <i class="fas fa-heart me-2"></i>Donasi Sekarang
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        
        <?php if (!empty($campaigns)): ?>
            <div class="text-center mt-5" data-aos="fade-up">
                <a href="pages/donasi.php" class="btn btn-danger btn-lg">
                    <i class="fas fa-hand-holding-heart me-2"></i>Lihat Semua Campaign
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- News Section -->
<section class="news-section py-5">
    <div class="container">
        <div class="section-header text-center mb-5" data-aos="fade-up">
            <span class="badge bg-success mb-2">BERITA, ARTIKEL & INFORMASI</span>
            <h2 class="section-title mb-3">Yayasan Andalusia</h2>
            <p class="section-subtitle text-muted">Bersama Membangun Masa Depan Melalui Pendidikan Berkualitas dan Pengembangan Potensi Diri</p>
        </div>
        
        <div class="row g-4">
            <?php if (empty($news)): ?>
                <div class="col-12 text-center">
                    <p class="text-muted">Berita belum tersedia</p>
                </div>
            <?php else: ?>
                <?php foreach (array_slice($news, 0, 3) as $index => $item): ?>
                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="<?php echo $index * 100; ?>">
                        <div class="news-card h-100">
                            <div class="news-image">
                                <img src="<?php echo file_exists(BERITA_UPLOAD_DIR . $item['image']) ? BERITA_UPLOAD_URL . sanitize($item['image']) : 'assets/images/default-news.jpg'; ?>" 
                                     alt="<?php echo sanitize($item['title']); ?>" class="img-fluid">
                                <?php if (!empty($item['category'])): ?>
                                    <span class="news-badge badge bg-<?php echo $item['category'] == 'Berita' ? 'success' : 'warning'; ?>">
                                        <?php echo sanitize($item['category']); ?>
                                    </span>
                                <?php endif; ?>
                            </div>
                            <div class="news-body p-4">
                                <div class="news-meta mb-2">
                                    <span class="text-muted small">
                                        <i class="far fa-calendar me-1"></i>
                                        <?php echo format_date($item['published_at'], 'd M Y'); ?>
                                    </span>
                                    <span class="text-muted small ms-3">
                                        <i class="far fa-eye me-1"></i>
                                        <?php echo $item['views']; ?> views
                                    </span>
                                </div>
                                <h5 class="news-title mb-3">
                                    <a href="pages/berita-detail.php?slug=<?php echo sanitize($item['slug']); ?>" class="text-decoration-none text-dark">
                                        <?php echo sanitize($item['title']); ?>
                                    </a>
                                </h5>
                                <p class="news-excerpt text-muted mb-3"><?php echo truncate(sanitize($item['excerpt']), 120); ?></p>
                                <a href="pages/berita-detail.php?slug=<?php echo sanitize($item['slug']); ?>" class="btn btn-outline-primary btn-sm">
                                    Baca Selengkapnya <i class="fas fa-arrow-right ms-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        
        <?php if (!empty($news)): ?>
            <div class="text-center mt-5" data-aos="fade-up">
                <a href="pages/berita.php" class="btn btn-outline-success btn-lg">
                    <i class="fas fa-newspaper me-2"></i>Lihat Semua Berita
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- Video Section -->
<section class="video-section py-5 bg-light">
    <div class="container">

        <div class="section-header text-center mb-5">
            <span class="badge bg-danger mb-2">VIDEO PILIHAN</span>
            <h2 class="section-title mb-3">Yayasan Andalusia</h2>
            <p class="section-subtitle text-muted">
                Bersama Membangun Masa Depan Melalui Pendidikan Berkualitas dan Pengembangan Potensi Diri
            </p>
        </div>

        <?php if (!empty($videos)): ?>

        <div class="swiper videoSwiper">
            <div class="swiper-wrapper">

                <?php foreach ($videos as $v_item): ?>
                <div class="swiper-slide">

                    <div class="ratio ratio-16x9 shadow rounded overflow-hidden">
                        <iframe
                            src="https://www.youtube.com/embed/<?php echo sanitize($v_item['youtube_id']); ?>?rel=0&modestbranding=1"
                            title="<?php echo sanitize($v_item['title']); ?>"
                            allowfullscreen>
                        </iframe>
                    </div>

                    <div class="text-center mt-3">
                        <h5><?php echo sanitize($v_item['title']); ?></h5>
                        <p class="text-muted small">
                            <?php echo sanitize($v_item['description']); ?>
                        </p>
                    </div>

                </div>
                <?php endforeach; ?>

            </div>

            <!-- Navigation -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>

            <!-- Pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <?php endif; ?>

    </div>
</section>


<!-- Testimonial Section -->
<section class="testimonial-section py-5">
    <div class="container">
        <div class="section-header text-center mb-5" data-aos="fade-up">
            <span class="badge bg-warning mb-2">ALUMNI YAYASAN</span>
            <h2 class="section-title mb-3">Andalusia Indonesia</h2>
            <p class="section-subtitle text-muted">Bersama Membangun Masa Depan Melalui Pendidikan Berkualitas dan Pengembangan Potensi Diri</p>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8" data-aos="fade-up">
                <div class="testimonial-card p-5 text-center bg-white shadow">
                    <i class="fas fa-quote-left fa-3x text-primary mb-4"></i>
                    <p class="testimonial-text lead mb-4">Terima kasih untuk Bapak dan Ibu yang menyumbangkan hartanya. Semoga Allah SWT memudahkan jalan kita semua</p>
                    <div class="testimonial-author">
                        <img src="assets/images/testimonial-avatar.jpg" alt="Badrudin" class="rounded-circle mb-3" width="80" height="80">
                        <h6 class="mb-1">WENS EMPEROR</h6>
                        <p class="text-muted small mb-0">Kang Begadang</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section py-5 bg-primary text-white">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8" data-aos="fade-right">
                <h3 class="cta-title mb-3">Percayakan Pendidikan Putera Puteri Anda kepada Kami</h3>
                <p class="cta-description mb-0">Dengan dedikasi dan komitmen yang tinggi, kami siap membimbing putra-putri Anda menuju masa depan yang cerah. Percayakan pendidikan mereka kepada lembaga kami yang berpengalaman dan berfokus pada pengembangan karakter serta akademik.</p>
            </div>
            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0" data-aos="fade-left">
                <a href="pages/kontak.php" class="btn btn-light btn-lg">
                    <i class="fas fa-phone me-2"></i>Apply Now!
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Newsletter Section -->
<section class="newsletter-section py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center" data-aos="fade-up">
                <h4 class="mb-3">Jangan Lewatkan Pembaruan dari Kami</h4>
                <p class="text-muted mb-4">Selalu terhubung dengan informasi terbaru mengenai program pendidikan, kegiatan sekolah, dan berita penting lainnya</p>
                <form class="newsletter-form" id="newsletterForm">
                    <div class="input-group mb-3">
                        <input type="email" class="form-control form-control-lg" placeholder="Ketik pertanyaan disini" required>
                        <button class="btn btn-success btn-lg px-4" type="submit">
                            WhatsApp <i class="fab fa-whatsapp ms-2"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<?php include 'includes/footer.php'; ?>

<!-- Cookie Consent Banner -->
<?php if (COOKIE_CONSENT_ENABLED && !has_user_consent()): ?>
    <div class="cookie-consent" id="cookieConsent">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-9">
                    <p class="mb-lg-0">Kami menggunakan cookie untuk meningkatkan pengalaman Anda dan menganalisis traffic website. Dengan melanjutkan, Anda menyetujui penggunaan cookie kami.</p>
                </div>
                <div class="col-lg-3 text-lg-end">
                    <button class="btn btn-primary me-2" id="acceptCookies">Terima</button>
                    <button class="btn btn-outline-light" id="declineCookies">Tolak</button>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- AOS Animation -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        once: true
    });
</script>
<script src="assets/js/hero-mobile-fix.js"></script>

<!-- Cookie Consent Script -->
<script src="assets/js/cookie-consent.js"></script>

<!-- Custom JS -->
<script src="assets/js/main.js"></script>

<script>
const videoSwiper = new Swiper('.videoSwiper', {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,

    allowTouchMove: true,
    simulateTouch: true,
    touchStartPreventDefault: false,

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    }
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const hero = document.querySelector('#heroCarousel');
    if (hero) {
        new bootstrap.Carousel(hero, {
            interval: 5000,
            ride: 'carousel',
            touch: true,
            pause: false
        });
    }
});
</script>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

</body>
</html>