<?php
require_once 'config.php';
$app_title = getSetting($pdo, 'app_title');
$app_desc = getSetting($pdo, 'app_desc');
$slider_duration = getSetting($pdo, 'app_slider_duration');
if (empty($slider_duration) || !is_numeric($slider_duration)) {
    $slider_duration = 10;
}
$slider_duration_ms = $slider_duration * 1000;

// Fetch Tata Cara
$stmt_tc = $pdo->query("SELECT * FROM tbl_tatacara ORDER BY no_urut ASC");
$tatacara = $stmt_tc->fetchAll();
$tatacara_chunks = array_chunk($tatacara, 4);
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= htmlspecialchars($app_title) ?> - Portal Utama</title>
    <link rel="icon" type="image/png" href="<?= base_url('logo/logo.png?v='.time()) ?>">
    
    <!-- Google Fonts: Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- FontAwesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Bootstrap 5 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            margin: 0;
            overflow-x: hidden;
            position: relative;
        }

        /* Dekorasi Lingkaran */
        .shape-1 {
            position: absolute;
            width: 500px;
            height: 500px;
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(41, 128, 185, 0.2));
            border-radius: 50%;
            top: -150px;
            right: -150px;
            z-index: 0;
            animation: pulse 8s ease-in-out infinite;
        }

        .shape-2 {
            position: absolute;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(142, 68, 173, 0.2));
            border-radius: 50%;
            bottom: -50px;
            left: -100px;
            z-index: 0;
            animation: pulse 6s ease-in-out infinite reverse;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            position: relative;
            z-index: 10;
        }

        .hero-container {
            text-align: center;
            max-width: 900px;
            width: 100%;
        }

        .logo-box {
            margin-bottom: 20px;
        }

        .logo-box img {
            max-height: 180px;
            max-width: 90%;
            height: auto;
            filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
            transition: transform 0.3s ease;
        }
        
        .logo-box img:hover {
            transform: scale(1.05);
        }

        .carousel-inner-custom {
            padding: 20px 0;
            min-height: 420px;
        }

        .app-desc-text {
            font-size: 1.5rem;
            color: #2c3e50;
            font-weight: 500;
            line-height: 1.6;
            margin: 0 auto;
            max-width: 750px;
        }

        .tatacara-slider-content {
            padding: 20px 10px;
        }

        .btn-group-custom {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 50px;
        }

        .btn-custom {
            padding: 15px 35px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1rem;
            text-decoration: none;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .btn-primary-custom {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
        }

        .btn-primary-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px rgba(52, 152, 219, 0.3);
            color: white;
        }

        .btn-secondary-custom {
            background: white;
            color: #2c3e50;
            border: 2px solid transparent;
        }

        .btn-secondary-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px rgba(0,0,0,0.1);
            color: #3498db;
        }

        .carousel-indicators [data-bs-target] {
            background-color: #34495e;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .carousel-indicators .active {
            background-color: #2980b9;
        }

        @media (max-width: 768px) {
            .logo-box img {
                max-height: 130px;
            }
            .carousel-inner-custom { min-height: 750px; }
            .btn-group-custom { flex-direction: column; width: 100%; max-width: 300px; margin: 20px auto; gap: 15px;}
            .btn-custom { width: 100%; justify-content: center; padding: 12px 25px; }
            .app-desc-text { font-size: 1.05rem; }
        }
    </style>
</head>
<body>

    <div class="shape-1"></div>
    <div class="shape-2"></div>

    <div class="hero-section">
        <div class="hero-container">
            <!-- LOGO FIXED DI ATAS -->
            <div class="logo-box">
                <?php if(file_exists('logo/logo.png')): ?>
                    <img src="<?= base_url('logo/logo.png?v='.time()) ?>" alt="Logo Instansi">
                <?php else: ?>
                    <div style="width: 100px; height: 100px; background: linear-gradient(135deg, #3498db, #2980b9); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; color: white;">
                        <i class="fas fa-paper-plane fa-3x"></i>
                    </div>
                <?php endif; ?>
            </div>

            <!-- CAROUSEL / SLIDER TENGAH -->
            <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="<?= $slider_duration_ms ?>">
                <div class="carousel-indicators" style="bottom: -40px;">
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Deskripsi"></button>
                    <?php if(count($tatacara) > 0): ?>
                        <?php foreach($tatacara_chunks as $index => $chunk): ?>
                            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="<?= $index + 1 ?>" aria-label="Tata Cara <?= $index + 1 ?>"></button>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>

                <div class="carousel-inner carousel-inner-custom">
                    
                    <!-- SLIDE 1: Deskripsi Singkat -->
                    <div class="carousel-item active w-100 h-100">
                        <div class="d-flex align-items-center justify-content-center h-100">
                            <?php if(!empty($app_desc)): ?>
                                <div class="app-desc-text">
                                    <?= nl2br(htmlspecialchars($app_desc)) ?>
                                </div>
                            <?php else: ?>
                                <div class="app-desc-text">
                                    Sistem Layanan Online Terpadu.
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>

                    <!-- SLIDES TATA CARA -->
                    <?php if(count($tatacara) > 0): ?>
                        <?php foreach($tatacara_chunks as $index => $chunk): ?>
                        <div class="carousel-item w-100 h-100">
                            <div class="tatacara-slider-content">
                                <h4 class="fw-bold mb-4" style="color: #2c3e50;">Tata Cara Pengajuan</h4>
                                <div class="row g-3 justify-content-center text-start">
                                    <?php foreach($chunk as $tc): ?>
                                    <div class="col-md-6 col-lg-6">
                                        <div class="card h-100 border-0 shadow-sm" style="border-radius: 12px; background: rgba(255,255,255,0.85); backdrop-filter: blur(5px);">
                                            <div class="card-body p-3">
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="d-inline-flex align-items-center justify-content-center me-2" style="width: 35px; height: 35px; border-radius: 50%; background: #3498db; color: white; font-weight: bold; font-size: 1rem; flex-shrink: 0;">
                                                        <?= htmlspecialchars($tc->no_urut) ?>
                                                    </div>
                                                    <h6 class="fw-bold mb-0 text-dark" style="font-size: 0.95rem; line-height: 1.3;"><?= htmlspecialchars($tc->judul) ?></h6>
                                                </div>
                                                <p class="text-muted mb-0 ms-1" style="font-size: 0.85rem; line-height: 1.4;"><?= nl2br(htmlspecialchars($tc->deskripsi)) ?></p>
                                                
                                                <?php if(!empty($tc->url_file)): ?>
                                                    <div class="mt-2 ms-1">
                                                        <a href="<?= htmlspecialchars($tc->url_file) ?>" target="_blank" class="btn btn-sm btn-outline-primary rounded-pill" style="font-size: 0.75rem; padding: 2px 10px;">
                                                            <i class="fas fa-link"></i> Link Panduan
                                                        </a>
                                                    </div>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                    
                </div>
            </div>

            <!-- TOMBOL FIXED DI BAWAH -->
            <div class="btn-group-custom">
                <a href="client/index.php" class="btn-custom btn-primary-custom">
                    <i class="fas fa-file-signature"></i> Buat Pengajuan Baru
                </a>
                <a href="client/track.php" class="btn-custom btn-secondary-custom">
                    <i class="fas fa-search"></i> Lacak Status
                </a>
            </div>

        </div>
    </div>

    <!-- Menghilangkan footer abu-abu gelap terpisah, cukup menaruhnya transparan atau menghapusnya jika dirasa mengganggu. -->
    <div style="position: absolute; bottom: 15px; width: 100%; text-align: center; color: #7f8c8d; font-size: 0.85rem;">
        &copy; <?= date('Y') ?> <?= htmlspecialchars($app_title) ?>. Semua Hak Dilindungi.
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
