<?php
session_start();
include 'koneksi.php';

// ========== HIT COUNTER PENGUNJUNG ==========
$ip = $_SERVER['REMOTE_ADDR'];
$tanggal = date('Y-m-d');

mysqli_query($koneksi, "
    CREATE TABLE IF NOT EXISTS visitor_counter (
        id INT AUTO_INCREMENT PRIMARY KEY,
        ip_address VARCHAR(100),
        tanggal DATE,
        user_agent VARCHAR(255)
    )
");

$cek = mysqli_query($koneksi, "
    SELECT * FROM visitor_counter 
    WHERE ip_address = '$ip' AND tanggal = '$tanggal'
");

if(mysqli_num_rows($cek) == 0){
    mysqli_query($koneksi, "
        INSERT INTO visitor_counter (ip_address, tanggal) 
        VALUES ('$ip', '$tanggal')
    ");
}

$totalVisitor = mysqli_fetch_assoc(mysqli_query($koneksi, "
    SELECT COUNT(DISTINCT ip_address) as total FROM visitor_counter
"))['total'];
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layanan Kunjungan | DPAD Solok Selatan</title>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f0f7f2;
            min-height: 100vh;
            padding-top: 80px;
        }

        /* ========== HEADER ========== */
        .header {
            background: linear-gradient(135deg, #0a3d32 0%, #1a5f4b 50%, #0f3b2c 100%);
            padding: 0;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .header.scrolled {
            padding: 5px 0;
            box-shadow: 0 4px 25px rgba(0,0,0,0.15);
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 12px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-img {
            width: 60px;
            height: 60px;
            border-radius: 14px;
            background: rgba(255,255,255,0.12);
            padding: 8px;
            border: 2px solid rgba(255,255,255,0.12);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-img:hover {
            border-color: #f5c542;
            transform: scale(1.05);
        }

        .logo-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .logo-img i {
            font-size: 28px;
            color: #f5c542;
        }

        .logo-text h1 {
            font-size: 1.3rem;
            font-weight: 800;
            color: white;
            font-family: 'Playfair Display', serif;
            line-height: 1.2;
        }

        .logo-text p {
            color: rgba(255,255,255,0.7);
            font-size: 0.7rem;
        }

        .header-menu {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .menu-item {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .menu-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.08);
            color: white;
            font-size: 16px;
            border: 1px solid rgba(255,255,255,0.06);
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .menu-icon:hover {
            background: white;
            color: #1a5f4b;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .menu-item .tooltip {
            position: absolute;
            bottom: -38px;
            left: 50%;
            transform: translateX(-50%) scale(0.9);
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(10px);
            color: white;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 0.6rem;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s ease;
            pointer-events: none;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .menu-item:hover .tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) scale(1);
            bottom: -42px;
        }

        /* ========== HERO / PAGE HEADER ========== */
        .hero-page {
            background: linear-gradient(135deg, #0f3b2c, #1a5f4b);
            margin: 20px 40px 30px;
            border-radius: 30px;
            padding: 55px 50px;
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .hero-page::before {
            content: "🏛️";
            position: absolute;
            right: -20px;
            top: -20px;
            font-size: 200px;
            opacity: 0.06;
        }

        .hero-page::after {
            content: "👥";
            position: absolute;
            left: -20px;
            bottom: -20px;
            font-size: 200px;
            opacity: 0.06;
        }

        .hero-page .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(245,197,66,0.2);
            padding: 6px 18px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            color: #f5c542;
            margin-bottom: 15px;
        }

        .hero-page h1 {
            font-size: 2.5rem;
            font-weight: 800;
            font-family: 'Playfair Display', serif;
            position: relative;
            z-index: 2;
            margin-bottom: 8px;
        }

        .hero-page h1 span {
            color: #f5c542;
        }

        .hero-page p {
            font-size: 1.05rem;
            opacity: 0.9;
            max-width: 600px;
            position: relative;
            z-index: 2;
            line-height: 1.7;
        }

        /* ========== BREADCRUMB ========== */
        .breadcrumb-wrap {
            max-width: 1400px;
            margin: -8px auto 0;
            padding: 0 40px 25px;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            color: #94a3b8;
            flex-wrap: wrap;
        }

        .breadcrumb a {
            color: #1a5f4b;
            text-decoration: none;
            font-weight: 500;
            transition: 0.3s;
        }

        .breadcrumb a:hover {
            color: #f5c542;
        }

        .breadcrumb .sep {
            color: #cbd5e1;
        }

        .breadcrumb .active {
            color: #1a5f4b;
            font-weight: 600;
        }

        /* ========== MAIN CONTENT ========== */
        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 40px 50px;
        }

        /* ========== STATS CARD ========== */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: white;
            border-radius: 20px;
            padding: 25px 20px;
            text-align: center;
            border: 1px solid #e8edf2;
            box-shadow: 0 4px 15px rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-6px);
            border-color: #1a5f4b;
            box-shadow: 0 12px 30px rgba(0,0,0,0.08);
        }

        .stat-card .stat-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #eaf5ed, #d4e8db);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            transition: all 0.3s ease;
        }

        .stat-card:hover .stat-icon {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            transform: scale(1.05);
        }

        .stat-card:hover .stat-icon i {
            color: white;
        }

        .stat-card .stat-icon i {
            font-size: 26px;
            color: #1a5f4b;
            transition: all 0.3s ease;
        }

        .stat-card .stat-number {
            font-size: 1.8rem;
            font-weight: 800;
            color: #0f3b2c;
        }

        .stat-card .stat-label {
            font-size: 0.85rem;
            color: #64748b;
            margin-top: 2px;
        }

        /* ========== CONTENT BOX ========== */
        .content-box {
            background: white;
            border-radius: 24px;
            padding: 40px 45px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.04);
            border: 1px solid #e8edf2;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }

        .content-box:hover {
            border-color: #1a5f4b;
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
        }

        .content-box .box-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.3rem;
            font-weight: 700;
            color: #0f3b2c;
            margin-bottom: 18px;
        }

        .content-box .box-title i {
            color: #f5c542;
            font-size: 1.5rem;
        }

        .content-box p {
            color: #475569;
            line-height: 1.8;
            font-size: 1rem;
            margin-bottom: 12px;
        }

        .content-box .highlight-box {
            background: linear-gradient(135deg, #eaf5ed, #d4e8db);
            border-radius: 16px;
            padding: 20px 25px;
            margin: 15px 0;
            border-left: 4px solid #1a5f4b;
        }

        .content-box .highlight-box p {
            margin-bottom: 0;
            color: #0f3b2c;
        }

        /* ========== LIST MANFAAT ========== */
        .benefit-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }

        .benefit-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: #f8fafc;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .benefit-item:hover {
            background: #eaf5ed;
            transform: translateX(5px);
        }

        .benefit-item i {
            color: #1a5f4b;
            font-size: 1rem;
            width: 20px;
        }

        .benefit-item span {
            color: #334155;
            font-size: 0.9rem;
        }

        /* ========== SYARAT GRID ========== */
        .syarat-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 30px;
        }

        .syarat-card {
            background: white;
            border-radius: 20px;
            padding: 30px 30px;
            border: 1px solid #e8edf2;
            box-shadow: 0 4px 15px rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }

        .syarat-card:hover {
            transform: translateY(-5px);
            border-color: #1a5f4b;
            box-shadow: 0 12px 30px rgba(0,0,0,0.08);
        }

        .syarat-card .syarat-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.1rem;
            font-weight: 700;
            color: #0f3b2c;
            margin-bottom: 18px;
        }

        .syarat-card .syarat-title i {
            color: #f5c542;
            font-size: 1.2rem;
        }

        .syarat-list {
            list-style: none;
        }

        .syarat-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .syarat-list li:last-child {
            border-bottom: none;
        }

        .syarat-list li:hover {
            padding-left: 5px;
        }

        .syarat-list li i {
            color: #1a5f4b;
            width: 20px;
            font-size: 0.9rem;
        }

        .syarat-list li strong {
            color: #0f3b2c;
        }

        /* ========== CONTACT CARD ========== */
        .contact-card {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            border-radius: 24px;
            padding: 35px 40px;
            color: white;
            margin-top: 10px;
        }

        .contact-card .contact-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .contact-card .contact-title i {
            color: #f5c542;
        }

        .contact-card .contact-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .contact-card .contact-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .contact-card .contact-item:hover {
            background: rgba(255,255,255,0.15);
            transform: translateY(-2px);
        }

        .contact-card .contact-item i {
            color: #f5c542;
            font-size: 1.1rem;
            width: 22px;
        }

        .contact-card .contact-item span {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        /* ========== BUTTONS ========== */
        .btn-group-bottom {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 10px;
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 32px;
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            color: white;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(26,95,75,0.3);
        }

        .btn-back:hover {
            transform: translateY(-3px);
            gap: 15px;
            box-shadow: 0 8px 30px rgba(26,95,75,0.4);
        }

        .btn-back i {
            transition: transform 0.3s ease;
        }

        .btn-back:hover i {
            transform: translateX(-5px);
        }

        .btn-wa {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 32px;
            background: #25d366;
            color: white;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(37,211,102,0.3);
        }

        .btn-wa:hover {
            transform: translateY(-3px);
            gap: 15px;
            box-shadow: 0 8px 30px rgba(37,211,102,0.4);
        }

        .btn-wa i {
            transition: transform 0.3s ease;
        }

        .btn-wa:hover i {
            transform: scale(1.1);
        }

        /* ========== FOOTER ========== */
        .footer-premium {
            background: linear-gradient(135deg, #0a3d32, #0f3b2c);
            color: white;
            padding-top: 50px;
            margin-top: 30px;
            position: relative;
            overflow: hidden;
        }

        .footer-premium::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #f5c542, #eab308, #f5c542);
        }

        .footer-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 35px;
            margin-bottom: 40px;
        }

        .footer-col h3 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 10px;
            position: relative;
            color: #f5c542;
        }

        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background: #f5c542;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 15px;
        }

        .footer-logo .logo-icon {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.08);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-logo .logo-icon i {
            font-size: 28px;
            color: #f5c542;
        }

        .footer-logo .logo-text h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: white;
            margin-bottom: 2px;
        }

        .footer-logo .logo-text p {
            font-size: 0.7rem;
            opacity: 0.7;
        }

        .footer-description {
            color: #cbd5e1;
            line-height: 1.6;
            font-size: 0.85rem;
            margin-bottom: 15px;
        }

        .footer-menu {
            list-style: none;
        }

        .footer-menu li {
            margin-bottom: 10px;
        }

        .footer-menu li a {
            color: #cbd5e1;
            text-decoration: none;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 0.85rem;
        }

        .footer-menu li a i {
            color: #f5c542;
            width: 20px;
        }

        .footer-menu li a:hover {
            color: #f5c542;
            transform: translateX(8px);
        }

        .social-links {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .social-icon {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s;
            text-decoration: none;
            font-size: 0.9rem;
        }

        .social-fb { background: #1877f2; }
        .social-ig { background: #e4405f; }
        .social-yt { background: #ff0000; }
        .social-tt { background: #010101; }

        .social-icon:hover {
            transform: translateY(-4px);
            filter: brightness(1.1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .footer-contact-item {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
            color: #cbd5e1;
            font-size: 0.85rem;
        }

        .footer-contact-item i {
            width: 35px;
            height: 35px;
            background: rgba(245,197,66,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f5c542;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.06);
            padding-top: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .footer-bottom p {
            color: rgba(255,255,255,0.5);
            font-size: 0.75rem;
        }

        .visitor-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.06);
            padding: 5px 14px;
            border-radius: 30px;
            font-size: 0.7rem;
            color: #f5c542;
        }

        .dev-credit {
            text-align: center;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.04);
            color: #94a3b8;
            font-size: 0.75rem;
        }

        .dev-credit a {
            color: #f5c542;
            text-decoration: none;
            font-weight: 500;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .benefit-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 992px) {
            .syarat-grid {
                grid-template-columns: 1fr;
            }
            .contact-card .contact-grid {
                grid-template-columns: 1fr 1fr;
            }
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            body {
                padding-top: 70px;
            }

            .header-content {
                padding: 8px 15px;
            }
            .logo-img {
                width: 40px;
                height: 40px;
                padding: 6px;
            }
            .logo-text h1 {
                font-size: 0.85rem;
            }
            .logo-text p {
                font-size: 0.6rem;
            }
            .menu-icon {
                width: 36px;
                height: 36px;
                font-size: 13px;
            }
            .header-menu {
                gap: 4px;
            }
            .menu-item .tooltip {
                display: none;
            }

            .hero-page {
                margin: 15px;
                padding: 30px 20px;
                border-radius: 20px;
            }
            .hero-page h1 {
                font-size: 1.8rem;
            }
            .hero-page p {
                font-size: 0.95rem;
            }
            .hero-page .hero-badge {
                font-size: 0.65rem;
                padding: 4px 14px;
            }

            .breadcrumb-wrap {
                padding: 0 15px 18px;
            }
            .breadcrumb {
                font-size: 0.7rem;
            }

            .main-container {
                padding: 0 15px 30px;
            }

            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }
            .stat-card {
                padding: 18px 15px;
            }
            .stat-card .stat-number {
                font-size: 1.3rem;
            }
            .stat-card .stat-icon {
                width: 50px;
                height: 50px;
            }
            .stat-card .stat-icon i {
                font-size: 20px;
            }

            .content-box {
                padding: 25px 20px;
            }
            .content-box .box-title {
                font-size: 1.1rem;
            }
            .content-box p {
                font-size: 0.9rem;
            }

            .benefit-item {
                padding: 10px 14px;
            }
            .benefit-item span {
                font-size: 0.85rem;
            }

            .syarat-card {
                padding: 22px 20px;
            }
            .syarat-card .syarat-title {
                font-size: 1rem;
            }
            .syarat-list li {
                font-size: 0.85rem;
                padding: 8px 0;
            }

            .contact-card {
                padding: 25px 20px;
            }
            .contact-card .contact-title {
                font-size: 1.1rem;
            }
            .contact-card .contact-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .contact-card .contact-item {
                padding: 10px 14px;
            }
            .contact-card .contact-item span {
                font-size: 0.85rem;
            }

            .btn-group-bottom {
                flex-direction: column;
            }
            .btn-back, .btn-wa {
                justify-content: center;
                padding: 12px 24px;
                font-size: 0.9rem;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 25px;
                text-align: center;
            }
            .footer-col h3::after {
                left: 50%;
                transform: translateX(-50%);
            }
            .footer-logo {
                justify-content: center;
            }
            .footer-menu li a {
                justify-content: center;
            }
            .social-links {
                justify-content: center;
            }
            .footer-contact-item {
                justify-content: center;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            .hero-page h1 {
                font-size: 1.4rem;
            }
            .hero-page p {
                font-size: 0.85rem;
            }
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }
            .stat-card {
                padding: 14px 10px;
                border-radius: 14px;
            }
            .stat-card .stat-number {
                font-size: 1.1rem;
            }
            .stat-card .stat-label {
                font-size: 0.7rem;
            }
            .stat-card .stat-icon {
                width: 40px;
                height: 40px;
            }
            .stat-card .stat-icon i {
                font-size: 16px;
            }
            .content-box {
                padding: 18px 15px;
            }
            .content-box .box-title {
                font-size: 1rem;
            }
            .content-box p {
                font-size: 0.85rem;
            }
            .syarat-card {
                padding: 18px 15px;
            }
            .syarat-list li {
                font-size: 0.8rem;
            }
            .btn-back, .btn-wa {
                font-size: 0.85rem;
                padding: 10px 18px;
            }
        }
    </style>
</head>
<body>

<!-- ========== HEADER ========== -->
<div class="header" id="mainHeader">
    <div class="header-content">
        <div class="logo-area">
            <div class="logo-img">
                <?php if(file_exists("img/logo.png")): ?>
                    <img src="img/logo.png" alt="Logo DPAD">
                <?php else: ?>
                    <i class="fas fa-archive"></i>
                <?php endif; ?>
            </div>
            <div class="logo-text">
                <h1>Dinas Arsip Solok Selatan</h1>
                <p>Dinas Arsip Daerah</p>
            </div>
        </div>

        <div class="header-menu">
            <div class="menu-item">
                <a href="dashboard.php" class="menu-icon">
                    <i class="fas fa-table-columns"></i>
                </a>
                <span class="tooltip">Dashboard</span>
            </div>
            <div class="menu-item">
                <a href="layanan_arsip.php" class="menu-icon">
                    <i class="fas fa-concierge-bell"></i>
                </a>
                <span class="tooltip">Layanan</span>
            </div>
            <div class="menu-item">
                <a href="berita.php" class="menu-icon">
                    <i class="fas fa-newspaper"></i>
                </a>
                <span class="tooltip">Berita</span>
            </div>
        </div>
    </div>
</div>

<!-- ========== HERO ========== -->
<div class="hero-page" data-aos="fade-up">
    <div class="hero-badge">
        <i class="fas fa-star"></i> Layanan DPAD Solok Selatan
    </div>
    <h1>Layanan <span>Kunjungan</span></h1>
    <p>Kunjungan edukasi dan studi banding ke Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan</p>
</div>

<!-- ========== BREADCRUMB ========== -->
<div class="breadcrumb-wrap">
    <div class="breadcrumb">
        <a href="dashboard.php"><i class="fas fa-home"></i></a>
        <span class="sep">/</span>
        <a href="layanan_arsip.php">Layanan</a>
        <span class="sep">/</span>
        <span class="active">Kunjungan</span>
    </div>
</div>

<!-- ========== MAIN CONTENT ========== -->
<div class="main-container">

    <!-- ===== STATS ===== -->
    <div class="stats-grid" data-aos="fade-up" data-aos-delay="100">
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-calendar-check"></i></div>
            <div class="stat-number">Senin-Jumat</div>
            <div class="stat-label">Jadwal Kunjungan</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-users"></i></div>
            <div class="stat-number">50</div>
            <div class="stat-label">Kapasitas Maksimal</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-clock"></i></div>
            <div class="stat-number">1-2 Jam</div>
            <div class="stat-label">Durasi Kunjungan</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-building"></i></div>
            <div class="stat-number">Gratis</div>
            <div class="stat-label">Biaya Kunjungan</div>
        </div>
    </div>

    <!-- ===== TENTANG KUNJUNGAN ===== -->
    <div class="content-box" data-aos="fade-up" data-aos-delay="150">
        <div class="box-title">
            <i class="fas fa-info-circle"></i> Tentang Layanan Kunjungan
        </div>
        <p>
            Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan membuka layanan kunjungan bagi masyarakat umum, 
            pelajar, mahasiswa, dan instansi yang ingin melakukan studi banding atau kunjungan edukasi ke perpustakaan dan 
            arsip daerah.
        </p>
        <p>
            Kunjungan ini bertujuan untuk memperkenalkan fungsi dan peran perpustakaan serta kearsipan, serta memberikan 
            pemahaman tentang pentingnya pengelolaan arsip dan literasi informasi bagi masyarakat.
        </p>

        <div class="highlight-box">
            <p><i class="fas fa-quote-left" style="color:#1a5f4b; margin-right:8px;"></i>
            Kunjungan edukasi ini adalah bagian dari upaya kami untuk meningkatkan literasi dan kesadaran masyarakat 
            akan pentingnya arsip dan perpustakaan.
            </p>
        </div>
    </div>

    <!-- ===== MANFAAT ===== -->
    <div class="content-box" data-aos="fade-up" data-aos-delay="200">
        <div class="box-title">
            <i class="fas fa-list-check"></i> Manfaat Kunjungan
        </div>
        <div class="benefit-grid">
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <span>Memahami pengelolaan arsip dan perpustakaan</span>
            </div>
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <span>Mengenal koleksi dan layanan yang tersedia</span>
            </div>
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <span>Belajar tentang digitalisasi arsip</span>
            </div>
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <span>Studi banding untuk pengembangan perpustakaan</span>
            </div>
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <span>Edukasi tentang literasi informasi</span>
            </div>
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <span>Pengenalan sistem kearsipan modern</span>
            </div>
        </div>
    </div>

    <!-- ===== SYARAT KUNJUNGAN ===== -->
    <div class="syarat-grid" data-aos="fade-up" data-aos-delay="250">
        <div class="syarat-card">
            <div class="syarat-title">
                <i class="fas fa-file-alt"></i> Persyaratan Kunjungan
            </div>
            <ul class="syarat-list">
                <li><i class="fas fa-check-circle"></i> Surat permohonan kunjungan dari instansi/sekolah</li>
                <li><i class="fas fa-check-circle"></i> Daftar nama peserta kunjungan</li>
                <li><i class="fas fa-check-circle"></i> Konfirmasi jadwal minimal 3 hari sebelumnya</li>
                <li><i class="fas fa-check-circle"></i> Mematuhi protokol kesehatan</li>
                <li><i class="fas fa-check-circle"></i> Mengisi buku tamu kunjungan</li>
            </ul>
        </div>
        <div class="syarat-card">
            <div class="syarat-title">
                <i class="fas fa-clock"></i> Jadwal & Ketentuan
            </div>
            <ul class="syarat-list">
                <li><i class="fas fa-calendar-day"></i> <strong>Hari:</strong> Senin - Jumat</li>
                <li><i class="fas fa-clock"></i> <strong>Waktu:</strong> 08.00 - 16.00 WIB</li>
                <li><i class="fas fa-utensils"></i> <strong>Istirahat:</strong> 12.00 - 13.00 WIB</li>
                <li><i class="fas fa-users"></i> <strong>Maksimal:</strong> 50 orang/rombongan</li>
                <li><i class="fas fa-hourglass"></i> <strong>Durasi:</strong> 1 - 2 jam/sesi</li>
            </ul>
        </div>
    </div>

</div>

<!-- ========== FOOTER PREMIUM ========== -->
<footer class="footer-premium">
    <div class="footer-container">
        <div class="footer-grid">
            <div class="footer-col" data-aos="fade-up">
                <div class="footer-logo">
                    <div class="logo-icon">
                        <?php if(file_exists("img/logo.png")): ?>
                            <img src="img/logo.png" style="width:35px; height:35px; object-fit:contain;">
                        <?php else: ?>
                            <i class="fas fa-archive"></i>
                        <?php endif; ?>
                    </div>
                    <div class="logo-text">
                        <h3>Dinas Kearsipan Solok Selatan</h3>
                        <p>Dinas Perpustakaan & Arsip Daerah</p>
                    </div>
                </div>
                <p class="footer-description">
                    Melestarikan sejarah, menjaga arsip, dan membangun peradaban literasi untuk masyarakat Solok Selatan yang cerdas dan berbudaya.
                </p>
                <div class="social-links">
                    <a href="https://www.facebook.com/profile.php?id=61573699960407" class="social-icon social-fb"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://www.instagram.com/arsip_solsel/" class="social-icon social-ig" target="_blank"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.youtube.com/@pustakadpksolsel" class="social-icon social-yt"><i class="fab fa-youtube"></i></a>
                    <a href="https://www.tiktok.com/@solselnews" class="social-icon social-tt"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>

            <div class="footer-col" data-aos="fade-up" data-aos-delay="100">
                <h3><i class="fas fa-link"></i> Menu Cepat</h3>
                <ul class="footer-menu">
                    <li><a href="dashboard.php"><i class="fas fa-home"></i> Beranda</a></li>
                    <li><a href="profil_istansi.php"><i class="fas fa-building"></i> Profil</a></li>
                    <li><a href="visi.php"><i class="fas fa-eye"></i> Visi & Misi</a></li>
                    <li><a href="struktur.php"><i class="fas fa-diagram-project"></i> Struktur Organisasi</a></li>
                    <li><a href="berita.php"><i class="fas fa-newspaper"></i> Berita</a></li>
                </ul>
            </div>

            <div class="footer-col" data-aos="fade-up" data-aos-delay="200">
                <h3><i class="fas fa-star"></i> Layanan</h3>
                <ul class="footer-menu">
                    <li><a href="https://perpustakaan.solselkab.go.id/read/166/bidang-kearsipan"><i class="fas fa-book"></i> Perpustakaan</a></li>
                    <li><a href="layanan_arsip.php"><i class="fas fa-archive"></i> Kearsipan</a></li>
                    <li><a href="layanan_kunjungan.php"><i class="fas fa-users"></i> Kunjungan Edukasi</a></li>
                    <li><a href="layanan_konsultasi.php"><i class="fas fa-comments"></i> Konsultasi Arsip</a></li>
                    <li><a href="pengaduan.php"><i class="fas fa-headset"></i> Pengaduan Masyarakat</a></li>
                </ul>
            </div>

            <div class="footer-col" data-aos="fade-up" data-aos-delay="300">
                <h3><i class="fas fa-map-marker-alt"></i> Lokasi & Kontak</h3>
                <div class="footer-contact-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>Jl. Lubuk Gadang - Simpang Tigo Rimbo Tangah, Sangir, Solok Selatan</span>
                </div>
                <div class="footer-contact-item">
                    <i class="fas fa-envelope"></i>
                    <span>pustaka.arsipsolsel@gmail.com</span>
                </div>
                <div class="footer-contact-item">
                    <i class="fas fa-clock"></i>
                    <span>Senin - Jumat, 08:00 - 16:00 WIB</span>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <div>
                <p>&copy; <?php echo date('Y'); ?> Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan</p>
                <p style="margin-top: 5px;">All Rights Reserved | <a>Kebijakan Privasi</a> | <a>Sitemap</a></p>
            </div>
            <div>
                <p>Sistem Informasi Perpustakaan dan Arsip Daerah</p>
                <div class="visitor-badge">
                    <i class="fas fa-eye"></i> <?php echo number_format($totalVisitor); ?> Pengunjung
                </div>
            </div>
        </div>
        
        <div class="dev-credit">
            Developed by <a href="https://www.pnp.ac.id/download/psdku-solok-selatan/" target="_blank">PSDKU Solok Selatan</a>
        </div>
    </div>
</footer>

<!-- ========== SCRIPTS ========== -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 600,
        once: true,
        offset: 30
    });

    // Header Sticky
    const header = document.getElementById('mainHeader');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });
</script>

</body>
</html>