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

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

// Buat tabel visitor_counter jika belum ada
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),
        last_visit TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    )
");

// Cek apakah IP sudah tercatat hari ini
$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, user_agent) 
        VALUES ('$ip', '$tanggal', '{$_SERVER['HTTP_USER_AGENT']}')
    ");
} else {
    // Update last_visit jika sudah ada
    mysqli_query($koneksi, "
        UPDATE visitor_counter 
        SET last_visit = NOW() 
        WHERE ip_address = '$ip' AND tanggal = '$tanggal'
    ");
}

// Hitung total pengunjung unik (semua waktu)
$totalVisitor = 0;
$query_total_visitor = mysqli_query($koneksi, "SELECT COUNT(DISTINCT ip_address) as total FROM visitor_counter");
if($query_total_visitor && mysqli_num_rows($query_total_visitor) > 0){
    $row = mysqli_fetch_assoc($query_total_visitor);
    $totalVisitor = $row['total'];
}

// Hitung pengunjung hari ini
$hariIni = 0;
$query_hari = mysqli_query($koneksi, "SELECT COUNT(DISTINCT ip_address) as total FROM visitor_counter WHERE tanggal = '$tanggal'");
if($query_hari && mysqli_num_rows($query_hari) > 0){
    $row = mysqli_fetch_assoc($query_hari);
    $hariIni = $row['total'];
}

// Hitung pengunjung online (15 menit terakhir)
$batas_online = date('Y-m-d H:i:s', strtotime('-15 minutes'));
$online = 0;
$query_online = mysqli_query($koneksi, "SELECT COUNT(DISTINCT ip_address) as total FROM visitor_counter WHERE last_visit > '$batas_online'");
if($query_online && mysqli_num_rows($query_online) > 0){
    $row = mysqli_fetch_assoc($query_online);
    $online = $row['total'];
}

// ========== QUERY ARSIP STATIS ==========
$query_total = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM arsip_statis");
$totalArsip = 0;

// Cek apakah query berhasil
if($query_total && mysqli_num_rows($query_total) > 0){
    $row = mysqli_fetch_assoc($query_total);
    $totalArsip = $row['total'];
} else {
    // Jika tabel belum ada, buat tabel terlebih dahulu
    mysqli_query($koneksi, "
        CREATE TABLE IF NOT EXISTS arsip_statis (
            id INT AUTO_INCREMENT PRIMARY KEY,
            judul VARCHAR(200),
            nomor VARCHAR(100),
            tahun YEAR,
            keterangan TEXT,
            isi_arsip TEXT,
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
        )
    ");
}

// Insert data contoh jika tabel kosong
$cek_data = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM arsip_statis");
if(mysqli_num_rows($cek_data) > 0){
    $data_kosong = mysqli_fetch_assoc($cek_data);
    if($data_kosong['total'] == 0){
        mysqli_query($koneksi, "
            INSERT INTO arsip_statis (judul, nomor, tahun, keterangan, isi_arsip) VALUES 
            ('Peraturan Daerah Kabupaten Solok Selatan', 'Perda No. 1', 2010, 'Tentang Pembentukan Organisasi Perangkat Daerah', 
            '<strong>Peraturan Daerah Kabupaten Solok Selatan Nomor 1 Tahun 2010</strong><br><br>
            <strong>Tentang:</strong> Pembentukan Organisasi Perangkat Daerah<br><br>
            <strong>Isi Peraturan:</strong><br>
            1. Kedudukan, Tugas Pokok dan Fungsi<br>
            2. Susunan Organisasi Perangkat Daerah<br>
            3. Eselon dan Kepangkatan<br>
            4. Tata Kerja Perangkat Daerah<br>
            5. Pembiayaan'),
            
            ('Dokumen Sejarah Berdirinya DPAD', 'DOK/001', 2009, 'Dokumen awal pembentukan Dinas Perpustakaan dan Arsip Daerah',
            '<strong>Dokumen Sejarah Berdirinya DPAD Solok Selatan</strong><br><br>
            <strong>Tahun Berdiri:</strong> 2009<br><br>
            <strong>Latar Belakang:</strong><br>
            Dinas Perpustakaan dan Arsip Daerah (DPAD) Kabupaten Solok Selatan didirikan sebagai 
            implementasi dari Undang-Undang Nomor 43 Tahun 2009 tentang Kearsipan.<br><br>
            <strong>Pejabat Pertama:</strong><br>
            Kepala Dinas: Drs. H. Ahmad Fauzi, M.Si'),
            
            ('Koleksi Arsip Foto Pembangunan', 'FOTO/001', 2015, 'Dokumentasi pembangunan infrastruktur daerah',
            '<strong>Koleksi Arsip Foto Pembangunan</strong><br><br>
            Koleksi ini berisi dokumentasi foto pembangunan infrastruktur di Kabupaten Solok Selatan.<br><br>
            <strong>Isi Koleksi:</strong><br>
            • Foto pembangunan jalan Padang - Solok (2010)<br>
            • Foto pembangunan jembatan Batang Hari (2012)<br>
            • Foto pembangunan kantor Bupati baru (2014)')
        ");
        $totalArsip = 3;
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Layanan Arsip Statis | DPAD Solok Selatan</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&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: #f5f7fb;
            color: #1e293b;
        }
        
        /* Header Premium */
        .header {
            background: linear-gradient(135deg, #0a3d32, #1a5f4b);
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .logo-area {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo-icon {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.15);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }
        
        .logo-icon:hover {
            transform: scale(1.05);
            background: rgba(255,255,255,0.25);
        }
        
        .logo-icon i {
            font-size: 26px;
            color: #f5c542;
        }
        
        .logo-text h2 {
            color: white;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.3;
        }
        
        .logo-text p {
            color: rgba(255,255,255,0.7);
            font-size: 0.65rem;
            margin-top: 3px;
        }
        
        /* Header Actions */
        .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .icon-btn {
            position: relative;
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(10px);
            color: white;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            text-decoration: none;
            font-size: 1.2rem;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .icon-btn:hover {
            background: white;
            color: #1a5f4b;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .icon-btn .tooltip {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            color: white;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.7rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 100;
            pointer-events: none;
        }
        
        .icon-btn .tooltip::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #1e293b;
        }
        
        .icon-btn:hover .tooltip {
            opacity: 1;
            visibility: visible;
            bottom: -35px;
        }
        
        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #1a5f4b 0%, #0f3b2c 100%);
            padding: 60px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .hero h1 {
            font-size: 2.5rem;
            font-weight: 800;
            color: white;
            margin-bottom: 15px;
        }
        
        .hero p {
            max-width: 700px;
            margin: 0 auto;
            font-size: 1rem;
            color: rgba(255,255,255,0.9);
            line-height: 1.6;
        }
        
        /* Container */
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 60px 20px;
        }
        
        /* Card Style */
        .card {
            background: white;
            border-radius: 24px;
            padding: 35px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .card h2 {
            font-size: 1.5rem;
            color: #0f3b2c;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #f5c542;
            display: inline-block;
        }
        
        /* Grid 2 kolom */
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin: 30px 0;
        }
        
        /* Feature Box */
        .feature-box {
            background: #f8fafc;
            border-radius: 16px;
            padding: 25px;
            transition: 0.3s;
            border: 1px solid #e2e8f0;
        }
        
        .feature-box:hover {
            transform: translateY(-5px);
            border-color: #f5c542;
            background: white;
        }
        
        .feature-box h4 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #0f3b2c;
        }
        
        .feature-box p {
            font-size: 0.9rem;
            color: #64748b;
            line-height: 1.6;
        }
        
        /* List Style */
        .list-style {
            list-style: none;
            padding-left: 0;
        }
        
        .list-style li {
            padding: 10px 0;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .list-style li strong {
            color: #0f3b2c;
            min-width: 180px;
        }
        
        .list-style li span {
            color: #475569;
        }
        
        /* Step Container */
        .step-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin: 20px 0;
        }
        
        .step-box {
            text-align: center;
            padding: 20px;
            background: #f8fafc;
            border-radius: 16px;
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            background: #1a5f4b;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-weight: 700;
            font-size: 1.2rem;
        }
        
        .step-box h4 {
            margin-bottom: 8px;
            color: #0f3b2c;
        }
        
        .step-box p {
            font-size: 0.85rem;
            color: #64748b;
        }
        
        /* Tabel Informasi */
        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .info-table tr {
            border-bottom: 1px solid #e2e8f0;
        }
        
        .info-table th {
            background: #f1f5f9;
            padding: 14px 18px;
            text-align: left;
            font-weight: 600;
            color: #0f3b2c;
            width: 30%;
        }
        
        .info-table td {
            padding: 14px 18px;
            color: #475569;
        }
        
        /* Daftar Arsip */
        .arsip-list {
            margin-top: 20px;
        }
        
        .arsip-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: #f8fafc;
            border-radius: 12px;
            margin-bottom: 12px;
            transition: 0.3s;
            cursor: pointer;
        }
        
        .arsip-item:hover {
            background: #dcfce7;
            transform: translateX(5px);
        }
        
        .arsip-icon {
            width: 50px;
            height: 50px;
            background: #dcfce7;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .arsip-icon i {
            font-size: 24px;
            color: #1a5f4b;
        }
        
        .arsip-info {
            flex: 1;
        }
        
        .arsip-info h4 {
            font-size: 1rem;
            margin-bottom: 5px;
            color: #0f3b2c;
        }
        
        .arsip-info p {
            font-size: 0.8rem;
            color: #64748b;
            margin: 0;
        }
        
        .arsip-tahun {
            background: #e2e8f0;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.7rem;
            color: #475569;
        }
        
        /* Modal Arsip */
        .modal-arsip {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }
        
        .modal-arsip.active {
            display: flex;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-content {
            background: white;
            border-radius: 24px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
        }
        
        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .modal-header {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            padding: 25px;
            color: white;
            position: sticky;
            top: 0;
        }
        
        .modal-header h3 {
            font-size: 1.2rem;
            margin-bottom: 8px;
        }
        
        .modal-header .meta {
            font-size: 0.8rem;
            opacity: 0.8;
            display: flex;
            gap: 15px;
        }
        
        .modal-body {
            padding: 25px;
        }
        
        .modal-body p {
            color: #475569;
            line-height: 1.7;
            margin-bottom: 15px;
        }
        
        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            transition: 0.3s;
        }
        
        .modal-close:hover {
            background: #dc2626;
            transform: rotate(90deg);
        }
        
        /* Statistik */
        .stats-wrapper {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            border-radius: 24px;
            padding: 40px;
            margin-top: 40px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            text-align: center;
        }
        
        .stats-item h3 {
            font-size: 2rem;
            font-weight: 800;
            color: #f5c542;
            margin-bottom: 5px;
        }
        
        .stats-item p {
            color: rgba(255,255,255,0.8);
            font-size: 0.85rem;
        }
        
/* ======================================== */
        /* FOOTER PREMIUM - DENGAN LOGO YANG DIPERBAIKI */
        /* ======================================== */
        .footer {
            background: linear-gradient(135deg, #0a3d32, #0f3b2c);
            color: #ffffff;
            position: relative;
            overflow: hidden;
            padding: 60px 20px 30px;
            margin-top: 60px;
        }
        
        .footer::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;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 35px;
            margin-bottom: 50px;
        }
        
        /* ========== LOGO FOOTER YANG DIPERBAIKI ========== */
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .footer-logo-icon {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, rgba(245, 197, 66, 0.2), rgba(245, 197, 66, 0.05));
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border: 2px solid rgba(245, 197, 66, 0.3);
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(245, 197, 66, 0.1);
        }
        
        .footer-logo-icon:hover {
            transform: scale(1.05) rotate(-3deg);
            border-color: #f5c542;
            box-shadow: 0 8px 25px rgba(245, 197, 66, 0.25);
        }
        
        .footer-logo-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 8px;
            border-radius: 12px;
        }
        
        .footer-logo-icon i {
            font-size: 28px;
            color: #f5c542;
            text-shadow: 0 0 20px rgba(245, 197, 66, 0.3);
        }
        
        .footer-logo-text {
            display: flex;
            flex-direction: column;
        }
        
        .footer-logo-text h2 {
            color: white;
            font-size: 1.1rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.5px;
        }
        
        .footer-logo-text h2:first-child {
            color: #f5c542;
        }
        
        .footer-logo-text p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.7rem;
            margin-top: 3px;
            letter-spacing: 0.3px;
        }
        
        .footer-description {
            color: #cbd5e1;
            line-height: 1.7;
            margin-bottom: 20px;
            font-size: 0.85rem;
        }
        
        /* Social Media */
        .footer-social {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .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;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .social-fb { background: #1877f2; }
        .social-ig { background: linear-gradient(45deg, #f09433, #d62976, #962fbf); }
        .social-yt { background: #ff0000; }
        .social-tt { background: #010101; }
        
        .social-icon:hover {
            transform: translateY(-4px) scale(1.05);
            filter: brightness(1.15);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 255, 255, 0.3);
        }
        
        /* Kolom Menu */
        .footer-col h3 {
            color: #f5c542;
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
            padding-bottom: 10px;
        }
        
        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background: #f5c542;
            border-radius: 2px;
        }
        
        .footer-col h3 i {
            margin-right: 8px;
        }
        
        .footer-menu {
            list-style: none;
            padding: 0;
        }
        
        .footer-menu li {
            margin-bottom: 12px;
        }
        
        .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 {
            width: 20px;
            font-size: 0.8rem;
            color: #f5c542;
        }
        
        .footer-menu li a:hover {
            color: #f5c542;
            transform: translateX(8px);
        }
        
        /* Kolom Kontak */
        .footer-contact-item {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
            color: #cbd5e1;
            font-size: 0.85rem;
        }
        
        .footer-contact-item i {
            width: 35px;
            height: 35px;
            background: rgba(245, 197, 66, 0.12);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f5c542;
            font-size: 0.9rem;
            flex-shrink: 0;
        }
        
        /* Bottom Footer */
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .footer-copyright p {
            font-size: 0.75rem;
            color: #94a3b8;
            margin-bottom: 5px;
        }
        
        .footer-copyright a {
            color: #94a3b8;
            text-decoration: none;
            transition: 0.3s;
        }
        
        .footer-copyright a:hover {
            color: #f5c542;
        }
        
        .footer-credit {
            text-align: right;
        }
        
        .footer-credit p {
            font-size: 0.7rem;
            color: #64748b;
            margin-bottom: 5px;
        }
        
        .visitor-stats {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        
        .visitor-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.08);
            padding: 5px 12px;
            border-radius: 30px;
            font-size: 0.7rem;
            color: #f5c542;
        }
        
        .footer-dev {
            text-align: center;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 0.7rem;
            color: #64748b;
        }
        
        .footer-dev a {
            color: #f5c542;
            text-decoration: none;
        }
        
        /* ========== RESPONSIVE ========== */
        @media (max-width: 1200px) {
            .container {
                padding: 50px 20px;
            }
            .card {
                padding: 30px;
            }
        }
        
        @media (max-width: 992px) {
            .step-container {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 35px;
            }
            .hero h1 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 768px) {
            .header {
                padding: 12px 20px;
                flex-wrap: wrap;
            }
            .logo-text h2 {
                font-size: 0.8rem;
            }
            .logo-icon {
                width: 40px;
                height: 40px;
            }
            .icon-btn {
                width: 38px;
                height: 38px;
                font-size: 1rem;
            }
            .hero {
                padding: 40px 20px;
            }
            .hero h1 {
                font-size: 1.6rem;
            }
            .hero p {
                font-size: 0.9rem;
            }
            .grid-2 {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .step-container {
                grid-template-columns: 1fr;
            }
            .stats-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .card {
                padding: 25px;
            }
            .card h2 {
                font-size: 1.3rem;
            }
            .info-table th, .info-table td {
                padding: 10px 12px;
                font-size: 0.85rem;
                display: block;
                width: 100%;
            }
            .info-table tr {
                display: block;
                margin-bottom: 15px;
                border: 1px solid #e2e8f0;
            }
            .list-style li {
                flex-direction: column;
                gap: 5px;
            }
            .list-style li strong {
                min-width: auto;
            }
            
            /* Footer Responsive */
            .footer {
                padding: 45px 20px 25px;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 35px;
                text-align: center;
            }
            .footer-logo {
                justify-content: center;
            }
            .footer-logo-text {
                text-align: left;
            }
            .footer-logo-text h2 {
                font-size: 0.95rem;
            }
            .footer-logo-icon {
                width: 48px;
                height: 48px;
            }
            .footer-logo-icon i {
                font-size: 24px;
            }
            .footer-col h3::after {
                left: 50%;
                transform: translateX(-50%);
            }
            .footer-menu li a {
                justify-content: center;
            }
            .footer-social {
                justify-content: center;
            }
            .footer-contact-item {
                justify-content: center;
            }
            .footer-description {
                text-align: center;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
            .footer-credit {
                text-align: center;
            }
            .visitor-stats {
                justify-content: center;
            }
        }
        
        @media (max-width: 480px) {
            .header-actions {
                gap: 8px;
            }
            .icon-btn {
                width: 35px;
                height: 35px;
                font-size: 0.9rem;
            }
            .hero h1 {
                font-size: 1.4rem;
            }
            .card {
                padding: 20px;
            }
            .footer-logo-icon {
                width: 42px;
                height: 42px;
            }
            .footer-logo-icon i {
                font-size: 20px;
            }
            .footer-contact-item {
                font-size: 0.75rem;
            }
            .visitor-badge {
                font-size: 0.65rem;
            }
            .footer-logo-text h2 {
                font-size: 0.85rem;
            }
            .footer-logo-text p {
                font-size: 0.6rem;
            }
        }
        
    </style>
</head>
<body>

<!-- HEADER -->
<div class="header">
    <div class="logo-area">
        <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">
            <h2>DINAS KEARSIPAN<br>KABUPATEN SOLOK SELATAN</h2>
            <p>Dinas Perpustakaan dan Arsip Daerah</p>
        </div>
    </div>
    
    <div class="header-actions">
        <a href="dashboard.php" class="icon-btn">
            <i class="fas fa-home"></i>
            <span class="tooltip">Halaman Utama</span>
        </a>
        <a href="layanan_arsip.php" class="icon-btn">
            <i class="fas fa-archive"></i>
            <span class="tooltip">Layanan Arsip</span>
        </a>
        <a href="javascript:history.back()" class="icon-btn">
            <i class="fas fa-arrow-left"></i>
            <span class="tooltip">Kembali</span>
        </a>
    </div>
</div>

<!-- HERO -->
<section class="hero">
    <div class="hero-content" data-aos="fade-up">
        <h1>Layanan Arsip Statis</h1>
        <p>Pelestarian dan pemanfaatan arsip yang memiliki nilai guna permanen untuk generasi mendatang</p>
    </div>
</section>

<div class="container">
    
    <!-- PENGERTIAN -->
    <div class="card" data-aos="fade-up">
        <h2>Apa itu Arsip Statis?</h2>
        <p><strong>Arsip Statis</strong> adalah arsip yang dihasilkan oleh pencipta arsip karena memiliki nilai guna kesejarahan, telah habis masa retensinya, dan telah diverifikasi baik secara langsung maupun tidak langsung. Arsip statis bersifat permanen dan tidak dapat dimusnahkan karena memiliki nilai sejarah yang tinggi.</p>
        <p>Menurut Undang-Undang Nomor 43 Tahun 2009 tentang Kearsipan, arsip statis merupakan arsip yang sudah tidak digunakan secara langsung dalam kegiatan perkantoran sehari-hari tetapi memiliki nilai penting untuk kepentingan penelitian, sejarah, dan pertanggungjawaban nasional.</p>
    </div>

    <!-- PERBEDAAN -->
    <div class="card" data-aos="fade-up">
        <h2>Perbedaan Arsip Dinamis dan Arsip Statis</h2>
        <div class="grid-2">
            <div class="feature-box">
                <h4>Arsip Dinamis</h4>
                <p>Masih digunakan dalam kegiatan administrasi sehari-hari</p>
                <p>Memiliki masa retensi tertentu</p>
                <p>Disimpan di unit pengolah</p>
                <p>Dapat dimusnahkan setelah masa retensi habis</p>
            </div>
            <div class="feature-box">
                <h4>Arsip Statis</h4>
                <p>Tidak digunakan langsung dalam administrasi sehari-hari</p>
                <p>Bersifat permanen (selamanya)</p>
                <p>Disimpan di lembaga kearsipan</p>
                <p>Tidak dapat dimusnahkan karena nilai sejarah</p>
            </div>
        </div>
    </div>

    <!-- KARAKTERISTIK -->
    <div class="card" data-aos="fade-up">
        <h2>Karakteristik Arsip Statis</h2>
        <div class="grid-2">
            <div>
                <ul class="list-style">
                    <li><strong>Nilai Guna Permanen</strong><span>Memiliki nilai sejarah yang abadi</span></li>
                    <li><strong>Tidak Dapat Dimusnahkan</strong><span>Dilindungi undang-undang untuk selamanya</span></li>
                    <li><strong>Autentik dan Terpercaya</strong><span>Keasliannya dapat dipertanggungjawabkan</span></li>
                </ul>
            </div>
            <div>
                <ul class="list-style">
                    <li><strong>Unik dan Langka</strong><span>Tidak ada duplikatnya di tempat lain</span></li>
                    <li><strong>Bernilai Kesejarahan</strong><span>Merekam peristiwa penting di masa lalu</span></li>
                    <li><strong>Disimpan Khusus</strong><span>Dalam ruang dengan standar tertentu</span></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- JENIS-JENIS -->
    <div class="card" data-aos="fade-up">
        <h2>Jenis-Jenis Arsip Statis</h2>
        <div class="grid-2">
            <div class="feature-box">
                <h4>Arsip Tekstual</h4>
                <p>Dokumen tertulis seperti naskah asli, surat-surat penting, laporan tahunan, peraturan daerah, dan dokumen kebijakan.</p>
            </div>
            <div class="feature-box">
                <h4>Arsip Kartografis</h4>
                <p>Peta, denah, gambar teknik, dan dokumen yang berisi informasi spasial suatu wilayah.</p>
            </div>
            <div class="feature-box">
                <h4>Arsip Fotografi</h4>
                <p>Foto-foto dokumentasi kegiatan, pembangunan, dan peristiwa sejarah yang terekam dalam gambar.</p>
            </div>
            <div class="feature-box">
                <h4>Arsip Audiovisual</h4>
                <p>Rekaman suara, video dokumenter, film pendek yang merekam peristiwa penting di masa lalu.</p>
            </div>
        </div>
    </div>

    <!-- SIKLUS -->
    <div class="card" data-aos="fade-up">
        <h2>Siklus Pengelolaan Arsip Statis</h2>
        <div class="step-container">
            <div class="step-box">
                <div class="step-number">1</div>
                <h4>Akuisisi</h4>
                <p>Pengadaan arsip dari pencipta arsip</p>
            </div>
            <div class="step-box">
                <div class="step-number">2</div>
                <h4>Pengolahan</h4>
                <p>Inventarisasi, klasifikasi, dan deskripsi</p>
            </div>
            <div class="step-box">
                <div class="step-number">3</div>
                <h4>Preservasi</h4>
                <p>Pelestarian fisik dan informasi</p>
            </div>
            <div class="step-box">
                <div class="step-number">4</div>
                <h4>Akses</h4>
                <p>Penyediaan layanan akses untuk publik</p>
            </div>
        </div>
    </div>

    <!-- NILAI GUNA -->
    <div class="card" data-aos="fade-up">
        <h2>Nilai Guna Arsip Statis</h2>
        <div class="grid-2">
            <div class="feature-box">
                <h4>Nilai Guna Primer</h4>
                <p>Nilai administrasi, hukum, keuangan, dan perencanaan yang masih diperlukan untuk kepentingan internal organisasi.</p>
            </div>
            <div class="feature-box">
                <h4>Nilai Guna Sekunder</h4>
                <p>Nilai pembuktian, informasi, penelitian, dan sejarah yang bermanfaat bagi masyarakat umum dan peneliti.</p>
            </div>
        </div>
    </div>

    <!-- LAYANAN -->
    <div class="card" data-aos="fade-up">
        <h2>Layanan Arsip Statis di DPAD</h2>
        <table class="info-table">
            <tr><th>Layanan</th><td>Pelestarian, pengolahan, dan pelayanan akses arsip statis</td></tr>
            <tr><th>Jenis Arsip</th><td>Dokumen bersejarah, peta kuno, foto lawas, peraturan daerah</td></tr>
            <tr><th>Waktu Layanan</th><td>Senin - Jumat, 08:00 - 16:00 WIB</td></tr>
            <tr><th>Persyaratan</th><td>Surat permohonan, KTP, dan mengisi formulir penelitian</td></tr>
            <tr><th>Biaya</th><td>GRATIS (tidak dipungut biaya)</td></tr>
        </table>
    </div>

    <!-- DAFTAR ARSIP -->
    <div class="card" data-aos="fade-up">
        <h2>Koleksi Arsip Statis</h2>
        <div class="arsip-list">
            <?php
            $query_arsip = mysqli_query($koneksi, "SELECT * FROM arsip_statis ORDER BY tahun DESC");
            if(mysqli_num_rows($query_arsip) > 0){
                while($arsip = mysqli_fetch_array($query_arsip)){
            ?>
            <div class="arsip-item" onclick="showDetail(<?php echo $arsip['id']; ?>, '<?php echo addslashes($arsip['judul']); ?>', '<?php echo $arsip['tahun']; ?>', '<?php echo addslashes($arsip['nomor']); ?>', `<?php echo addslashes($arsip['isi_arsip']); ?>`)">
                <div class="arsip-icon"><i class="fas fa-file-alt"></i></div>
                <div class="arsip-info">
                    <h4><?php echo htmlspecialchars($arsip['judul']); ?></h4>
                    <p><?php echo htmlspecialchars($arsip['keterangan']); ?></p>
                </div>
                <div class="arsip-tahun"><i class="fas fa-calendar"></i> <?php echo $arsip['tahun']; ?></div>
            </div>
            <?php 
                }
            } else { 
            ?>
            <div class="arsip-item">
                <div class="arsip-icon"><i class="fas fa-database"></i></div>
                <div class="arsip-info">
                    <h4>Data Arsip Statis</h4>
                    <p>Belum ada data arsip statis yang tersimpan</p>
                </div>
            </div>
            <?php } ?>
        </div>
    </div>

    <!-- DASAR HUKUM -->
    <div class="card" data-aos="fade-up">
        <h2>Dasar Hukum</h2>
        <ul class="list-style">
            <li><strong>UU No. 43 Tahun 2009</strong><span>Tentang Kearsipan</span></li>
            <li><strong>PP No. 28 Tahun 2012</strong><span>Tentang Pelaksanaan UU Kearsipan</span></li>
            <li><strong>Peraturan Kepala ANRI No. 1 Tahun 2010</strong><span>Tentang Pedoman Pengelolaan Arsip Statis</span></li>
            <li><strong>Peraturan Daerah Solok Selatan</strong><span>Tentang Pengelolaan Arsip Statis Daerah</span></li>
        </ul>
    </div>
</div>

<!-- MODAL ARSIP -->
<div id="modalArsip" class="modal-arsip">
    <div class="modal-content">
        <div class="modal-header">
            <button class="modal-close" onclick="closeModal()">&times;</button>
            <h3 id="modalJudul"></h3>
            <div class="meta">
                <span><i class="fas fa-calendar"></i> Tahun: <span id="modalTahun"></span></span>
                <span><i class="fas fa-tag"></i> Kode: <span id="modalNomor"></span></span>
            </div>
        </div>
        <div class="modal-body" id="modalIsi"></div>
    </div>
</div>

<!-- ======================================== -->
<!-- FOOTER PREMIUM - DENGAN LOGO YANG DIPERBAIKI -->
<!-- ======================================== -->
<footer class="footer">
    <div class="footer-container">
        <div class="footer-grid">
            
            <!-- Kolom 1: Logo & Deskripsi -->
            <div class="footer-col">
                <div class="footer-logo">
                    <div class="footer-logo-icon">
                        <?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="footer-logo-text">
                        <h2>Dinas Kearsipan</h2>
                        <h2>Solok Selatan</h2>
                        <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>

            <!-- Kolom 2: Menu Cepat -->
            <div class="footer-col">
                <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 Instansi</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>

            <!-- Kolom 3: Layanan -->
            <div class="footer-col">
                <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>

            <!-- Kolom 4: Lokasi & Kontak -->
            <div class="footer-col">
                <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>

        <!-- Footer Bottom -->
        <div class="footer-bottom">
            <div class="footer-copyright">
                <p>&copy; <?php echo date('Y'); ?> Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan</p>
                <p>All Rights Reserved | <a href="privacy.php">Kebijakan Privasi</a> | <a href="sitemap.php">Sitemap</a></p>
            </div>
            <div class="footer-credit">
                <p>Sistem Informasi Perpustakaan dan Arsip Daerah</p>
                <div class="visitor-stats">
                    <div class="visitor-badge"><i class="fas fa-globe"></i> <?php echo number_format($totalVisitor); ?> Total</div>
                    <div class="visitor-badge"><i class="fas fa-calendar-day"></i> <?php echo number_format($hariIni); ?> Hari ini</div>
                    <div class="visitor-badge"><i class="fas fa-circle" style="color: #4ade80; font-size: 0.6rem;"></i> <?php echo $online; ?> Online</div>
                </div>
            </div>
        </div>
        
        <!-- Footer Dev -->
        <div class="footer-dev">
            <p>Developed by <a href="https://www.pnp.ac.id/download/psdku-solok-selatan/">PSDKU Solok Selatan</a></p>
        </div>
    </div>
</footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        once: true,
        offset: 50
    });
    
    function showDetail(id, judul, tahun, nomor, isi) {
        document.getElementById('modalJudul').innerHTML = judul;
        document.getElementById('modalTahun').innerHTML = tahun;
        document.getElementById('modalNomor').innerHTML = nomor;
        document.getElementById('modalIsi').innerHTML = isi || '<p>Detail arsip sedang dimuat...</p>';
        document.getElementById('modalArsip').classList.add('active');
        document.body.style.overflow = 'hidden';
    }
    
    function closeModal() {
        document.getElementById('modalArsip').classList.remove('active');
        document.body.style.overflow = '';
    }
    
    document.getElementById('modalArsip').addEventListener('click', function(e) {
        if (e.target === this) closeModal();
    });
    
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeModal();
    });
</script>
</body>
</html>