@extends('layouts.layanan')

@section('content')
<!-- Memastikan font premium dan ikon Bootstrap ter-load -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<style>
    /* Menghilangkan Scrollbar di Samping Kanan Browser agar Tampilan Bersih */
    html, body {
        scrollbar-width: none; 
        -ms-overflow-style: none; 
    }
    ::-webkit-scrollbar {
        display: none; 
    }

    /* Core Variable Colors - Deep Blue & Slate Modern */
    :root {
        --pustaka-blue: #004d91;
        --pustaka-dark: #002d5a;
        --slate-50: #f8fafc;
        --slate-100: #f1f5f9;
        --slate-200: #e2e8f0;
        --slate-600: #475569;
        --slate-700: #334155;
        --slate-900: #0f172a;
    }

    body {
        background-color: #f8fafc !important;
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: var(--slate-900);
    }

    .hero-title-custom {
        color: var(--pustaka-blue);
        font-weight: 800;
        letter-spacing: -1px;
    }

    /* Premium Sections Box */
    .service-section-card {
        background: #ffffff;
        padding: 40px;
        margin-bottom: 30px;
        border-radius: 16px;
        border: 1px solid var(--slate-200);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
    }

    .section-subtitle-premium {
        color: var(--pustaka-blue);
        font-weight: 700;
        font-size: 1.25rem;
        letter-spacing: -0.3px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Sub-cards di dalam Layanan Digital */
    .digital-service-subcard {
        background: var(--slate-50);
        border: 1px solid var(--slate-200);
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 20px;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .digital-service-subcard:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    }

    /* Table Customizations */
    .table-premium {
        border-collapse: separate;
        border-spacing: 0;
    }
    .table-premium thead th {
        background-color: var(--slate-100) !important;
        color: var(--slate-700);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        padding: 15px 20px;
        border-bottom: 2px solid var(--slate-200);
    }
    .table-premium tbody td {
        padding: 18px 20px;
        color: var(--slate-700);
        border-bottom: 1px solid var(--slate-100);
    }

    /* Contact Block Custom */
    .contact-badge-info {
        background: var(--slate-50);
        border: 1px solid var(--slate-200);
        border-radius: 12px;
        padding: 24px;
    }
    .contact-link-item {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--slate-700);
        margin-bottom: 14px;
        font-size: 0.9rem;
    }
    .contact-link-item i {
        color: var(--pustaka-blue);
        font-size: 1.1rem;
    }

    .icon-box-premium {
        width: 40px;
        height: 40px;
        background: rgba(0, 77, 145, 0.08);
        color: var(--pustaka-blue);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Alert Box Clean Accent */
    .alert-premium-note {
        background: rgba(0, 77, 145, 0.03);
        border-left: 4px solid var(--pustaka-blue);
        color: var(--slate-700);
        border-radius: 0 12px 12px 0;
    }

    /* Main Action Button UI */
    .btn-return-premium {
        background: transparent;
        color: var(--slate-600);
        border: 1px solid var(--slate-300);
        border-radius: 8px;
        font-size: 0.85rem;
        padding: 10px 20px;
        transition: all 0.2s;
    }
    .btn-return-premium:hover {
        background: var(--slate-100);
        color: var(--slate-900);
    }
    
    .link-premium-action {
        color: var(--pustaka-blue);
        text-decoration: none;
        font-weight: 600;
    }
    .link-premium-action:hover {
        text-decoration: underline;
        color: var(--pustaka-dark);
    }
</style>

<div class="container py-5" data-aos="fade-up">
    
    {{-- Header Section --}}
    <div class="text-center mb-5">
        <span class="badge px-3 py-2 mb-2 text-uppercase fw-800 tracking-wider" style="background: rgba(0, 77, 145, 0.08); color: var(--pustaka-blue); font-size: 0.7rem;">
            E-Library Ecosystem
        </span>
        <h2 class="hero-title-custom display-6 mb-3">💻 Layanan Sistem Perpustakaan Digital</h2>
        <p class="text-muted mx-auto fs-6" style="max-width: 800px; line-height: 1.7;">
            Layanan berbasis digital Perpustakaan Khusus Bakorwil III Malang yang memungkinkan pengguna mengakses koleksi, database, dan informasi secara daring kapan saja dan di mana saja, mendukung efisiensi penelitian dan pengambilan keputusan.
        </p>
        <div style="width: 50px; height: 3px; background: var(--pustaka-blue);" class="mx-auto mt-4 rounded-pill"></div>
    </div>

    {{-- I. Pengantar E-Layanan --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-3">
            <i class="bi bi-info-circle"></i> I. Pengantar E-Layanan
        </h4>
        <p class="lh-lg text-muted mb-0" style="font-size: 0.95rem;">
            Layanan Digital Perpustakaan Bakorwil III Malang hadir untuk memaksimalkan efisiensi kerja pegawai, menyediakan akses <strong>24/7</strong> ke sumber informasi elektronik, dan memfasilitasi transaksi perpustakaan secara daring. Tujuannya adalah mendukung tugas dan fungsi Bakorwil dengan penyediaan data yang cepat, akurat, dan dapat diakses fleksibel dari luar instansi.
        </p>
    </section>

    {{-- II. Jenis-Jenis Layanan Digital --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-4">
            <i class="bi bi-layers"></i> II. Jenis-Jenis Layanan Digital
        </h4>
        <p class="text-muted small mb-4">Kami menyediakan beberapa infrastruktur platform digital terintegrasi untuk mendukung pemenuhan kebutuhan literasi kedinasan Anda:</p>

        <!-- 1. OPAC -->
        <div class="digital-service-subcard">
            <div class="d-flex align-items-start gap-3">
                <div class="icon-box-premium text-primary flex-shrink-0 mt-1">
                    <i class="bi bi-search fs-5"></i>
                </div>
                <div>
                    <h5 class="fw-bold text-dark mb-2" style="font-size: 1.1rem;">1. OPAC (Online Public Access Catalog)</h5>
                    <p class="text-muted small lh-lg mb-2">
                        <strong>Deskripsi:</strong> Sistem katalog daring terpusat yang memungkinkan Pegawai menelusuri seluruh metadata koleksi fisik (buku teks, laporan kajian, regulasi, dan majalah sektoral) secara seketika melalui perangkat pintar.
                    </p>
                    <p class="small mb-3"><strong>Tautan Akses Resmi:</strong> <a href="#" class="link-premium-action">[Link OPAC Internal Bakorwil]</a></p>
                    <ul class="text-muted small ps-3 mb-0" style="line-height: 1.7;">
                        <li>Pencarian multi-variabel (Judul, Nama Penulis, Nomor Panggil/Call Number, atau Subjek spesifik).</li>
                        <li>Verifikasi *real-time* status ketersediaan eksemplar di rak penyimpanan.</li>
                        <li>Dasbor privat memantau riwayat sirkulasi dan status peminjaman mandiri.</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 2. E-Sirkulasi + Alur Mandiri Valid + Catatan Pendaftaran Web -->
        <div class="digital-service-subcard">
            <div class="d-flex align-items-start gap-3">
                <div class="icon-box-premium text-primary flex-shrink-0 mt-1">
                    <i class="bi bi-arrow-left-right fs-5"></i>
                </div>
                <div class="w-100">
                    <h5 class="fw-bold text-dark mb-2" style="font-size: 1.1rem;">2. Layanan Peminjaman Daring & E-Sirkulasi Mandiri</h5>
                    <p class="text-muted small lh-lg mb-3">
                        <strong>Deskripsi:</strong> Memudahkan Manajemen Pustaka dan Pegawai untuk mengelola keanggotaan serta melakukan transaksi sirkulasi mandiri secara digital tanpa melalui birokrasi manual yang panjang.
                    </p>

                    {{-- Catatan Informasi Pendaftaran Anggota Via Web (Tanpa Link/Tombol) --}}
                    <div class="p-3 bg-white border rounded-3 mb-3" style="border-left: 4px solid var(--pustaka-blue) !important;">
                        <h6 class="fw-bold text-dark mb-1" style="font-size: 0.9rem;">
                            <i class="bi bi-info-square-fill text-primary me-2"></i>Catatan Opsional: Pendaftaran Anggota via Web
                        </h6>
                        <p class="text-muted x-small mb-0" style="font-size: 0.8rem; line-height: 1.5;">
                            Bagi Pegawai, PPPK, maupun staff magang baru yang belum terregistrasi dalam basis data, proses pembuatan akun keanggotaan kini dapat dilakukan secara mandiri melalui menu **Pendaftaran Anggota** yang tersedia pada portal utama web perpustakaan ini untuk mendapatkan ID barcode digital.
                        </p>
                    </div>
                    
                    {{-- Sub-Alur Peminjaman Mandiri --}}
                    <div class="p-3 bg-white border rounded-3 mb-3">
                        <span class="badge bg-primary px-2 py-1 mb-3 text-uppercase" style="font-size: 0.65rem; background-color: var(--pustaka-blue) !important;">
                            Prosedur Utama Peminjaman Mandiri (Self-Service Kiosk)
                        </span>
                        <div class="row g-2 text-start">
                            <div class="col-md-3">
                                <div class="p-2 border rounded bg-light h-100 text-center">
                                    <div class="fw-bold text-primary small mb-1">Langkah 1</div>
                                    <div class="fw-bold text-dark mb-1" style="font-size:0.8rem;"><i class="bi bi-barcode-scan me-1"></i>Scan Buku</div>
                                    <p class="text-muted x-small mb-0" style="font-size:0.75rem; line-height:1.4;">Pindai kode barcode logistik pada buku di sensor scanner anjungan mandiri.</p>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="p-2 border rounded bg-light h-100 text-center">
                                    <div class="fw-bold text-primary small mb-1">Langkah 2</div>
                                    <div class="fw-bold text-dark mb-1" style="font-size:0.8rem;"><i class="bi bi-person-vcard me-1"></i>Scan Kartu</div>
                                    <p class="text-muted x-small mb-0" style="font-size:0.75rem; line-height:1.4;">Pindai barcode pada Kartu Anggota (fisik/hasil daftar online) untuk otentikasi.</p>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="p-2 border rounded bg-light h-100 text-center">
                                    <div class="fw-bold text-success small mb-1">Langkah 3</div>
                                    <div class="fw-bold text-dark mb-1" style="font-size:0.8rem;"><i class="bi bi-check-circle-fill me-1 text-success"></i>Selesai</div>
                                    <p class="text-muted x-small mb-0" style="font-size:0.75rem; line-height:1.4;">Transaksi dikunci database dan mesin otomatis mencetak Surat Pengantar resmi.</p>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="p-2 border border-primary rounded h-100 text-center" style="background: rgba(0,77,145,0.01);">
                                    <div class="fw-bold text-primary small mb-1">Langkah 4</div>
                                    <div class="fw-bold text-dark mb-1" style="font-size:0.8rem;"><i class="bi bi-person-workspace me-1"></i>Lapor Admin</div>
                                    <p class="text-muted x-small mb-0" style="font-size:0.75rem; line-height:1.4; font-weight: 500;">Ketika membawa buku keluar, tunjukkan bukti Surat Pengantar ke Admin.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <ul class="text-muted small ps-3 mb-0" style="line-height: 1.7;">
                        <li><strong>Perpanjangan Mandiri:</strong> Melakukan perpanjangan masa pinjam koleksi aktif via dasbor profil web.</li>
                        <li><strong>Reservasi Daring:</strong> Melakukan antrean inden buku yang statusnya sedang dipinjam oleh unit kerja lain.</li>
                        <li><strong>Early Warning System:</strong> Notifikasi pengingat pengembalian otomatis via mail system sebelum jatuh tempo sanksi.</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 3. E-Resources -->
        <div class="digital-service-subcard">
            <div class="d-flex align-items-start gap-3">
                <div class="icon-box-premium text-primary flex-shrink-0 mt-1">
                    <i class="bi bi-journal-bookmark-fill fs-5"></i>
                </div>
                <div>
                    <h5 class="fw-bold text-dark mb-2" style="font-size: 1.1rem;">3. Akses Sumber Daya Elektronik (E-Resources)</h5>
                    <p class="text-muted small lh-lg mb-2">
                        <strong>Deskripsi:</strong> Gerbang digital premium menuju pangkalan data ilmiah eksternal serta repositori lokal penunjang analisis data spasial dan regulasi daerah.
                    </p>
                    <ul class="text-muted small ps-3 mb-3" style="line-height: 1.7;">
                        <li><strong>E-Jurnal & E-Database:</strong> Akses artikel ilmiah internasional terindeks mengenai administrasi pemerintahan umum, manajemen perkotaan, dan kebijakan publik sektoral.</li>
                        <li><strong>Koleksi Digital Internal:</strong> Repositori lokal berbentuk berkas digital PDF berisi dokumen hasil kajian pembangunan, naskah rekomendasi kebijakan, serta statistik wilayah kerja Bakorwil III.</li>
                    </ul>
                    <p class="small mb-1"><strong>Portal Repositori:</strong> <a href="#" class="link-premium-action">[Link Portal E-Resources / Repositori Internal]</a></p>
                    <p class="text-danger mb-0 text-uppercase fw-bold" style="font-size: 0.75rem;"><i class="bi bi-shield-lock-fill me-1"></i> Proteksi Akses: Memerlukan Autentikasi Single Sign-On (SSO) Jaringan LAN/VPN Resmi.</p>
                </div>
            </div>
        </div>

        <!-- 4. CAS -->
        <div class="digital-service-subcard mb-0">
            <div class="d-flex align-items-start gap-3">
                <div class="icon-box-premium text-primary flex-shrink-0 mt-1">
                    <i class="bi bi-bell-fill fs-5"></i>
                </div>
                <div>
                    <h5 class="fw-bold text-dark mb-2" style="font-size: 1.1rem;">4. Layanan Kesiagaan Informasi (Current Awareness Service - CAS)</h5>
                    <p class="text-muted small lh-lg mb-0">
                        <strong>Deskripsi:</strong> Mekanisme diseminasi informasi proaktif di mana sistem secara otomatis menyalurkan ringkasan kebijakan terbaru, kompilasi peraturan perundang-undangan baru, maupun daftar buku rujukan anyar yang sesuai dengan fokus komparatif komisi pembuat keputusan di Bakorwil III.
                    </p>
                </div>
            </div>
        </div>
    </section>

    {{-- III. Syarat dan Cara Akses --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-3">
            <i class="bi bi-shield-check"></i> III. Syarat dan Hak Akses Pengguna
        </h4>
        <p class="text-muted mb-4 small">Matriks standarisasi hak kredensial pengguna guna menjamin keamanan integritas data infrastruktur digital:</p>

        <div class="table-responsive rounded-3 border">
            <table class="table table-premium align-middle mb-0">
                <thead>
                    <tr>
                        <th width="30%">Platform Sistem</th>
                        <th width="35%">Syarat Kredensial</th>
                        <th width="35%">Metode Distribusi Akses</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="fw-bold text-dark">Pendaftaran Anggota Web</span></td>
                        <td>Pegawai aktif / Staff Bakorwil III Malang (Menyiapkan NIP/NIK).</td>
                        <td>Diisi mandiri via menu registrasi sistem. Akun aktif setelah verifikasi otomatis.</td>
                    </tr>
                    <tr>
                        <td><span class="fw-bold text-dark">OPAC & E-Sirkulasi Kiosk</span></td>
                        <td>Memiliki Kartu Anggota fisik atau Barcode Digital hasil daftar web.</td>
                        <td>Dapat langsung digunakan mandiri pada mesin barcode scanner ruang perpustakaan.</td>
                    </tr>
                    <tr>
                        <td><span class="fw-bold text-dark">E-Resources & Repositori</span></td>
                        <td>Akun Otentikasi *Single Sign-On* (SSO) Dinas Bakorwil III Malang.</td>
                        <td>Terbuka otomatis selama gawai terhubung kabel LAN kantor atau enkripsi VPN resmi Jawa Timur.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    {{-- IV. Bantuan Teknis E-Layanan & Kontak --}}
    <div class="row g-4 mb-4">
        <div class="col-lg-5">
            <div class="service-section-card h-100">
                <h4 class="section-subtitle-premium mb-4">
                    <i class="bi bi-headset"></i> IV. Bantuan Teknis IT
                </h4>
                <p class="text-muted small lh-lg mb-4">
                    Jika Anda menemui kendala teknis kegagalan form pendaftaran web, kegagalan pemindaian barcode buku pada anjungan mandiri, atau masalah sinkronisasi akun SSO, tim IT Helpdesk kami siap melayani koordinasi perbaikan.
                </p>
                <div class="p-3 bg-light rounded-3 border alert-premium-note">
                    <span class="small text-dark fw-bold d-block mb-1"><i class="bi bi-clock-fill me-1 text-primary"></i> JAM DUKUNGAN SISTEM:</span>
                    <span class="small text-muted">Pelayanan keluhan teknis beroperasi mengikuti jam dinas resmi operasional perkantoran perpustakaan fisik.</span>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="service-section-card h-100">
                <h4 class="section-subtitle-premium mb-4">
                    <i class="bi bi-envelope-card"></i> Pusat Hubungan Informasi Digital
                </h4>
                <div class="contact-badge-info">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="contact-link-item">
                                <div class="icon-box-premium"><i class="bi bi-whatsapp"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">WhatsApp / Helpdesk</div>
                                    <span class="fw-bold text-dark">0851-3479-1603</span>
                                </div>
                            </div>
                            <div class="contact-link-item">
                                <div class="icon-box-premium"><i class="bi bi-envelope-at"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">E-Mail Admin</div>
                                    <span class="fw-bold text-dark" style="font-size:0.85rem;">arsiptubakorwil@gmail.com</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="contact-link-item">
                                <div class="icon-box-premium"><i class="bi bi-browser-chrome"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Portal Resmi</div>
                                    <a href="https://bakorwilmalang.jatimprov.go.id" target="_blank" class="fw-bold link-premium-action text-decoration-none" style="font-size:0.85rem;">bakorwilmalang.jatimprov.go.id</a>
                                </div>
                            </div>
                            <div class="contact-link-item">
                                <div class="icon-box-premium"><i class="bi bi-geo-alt"></i></div>
                                <div>
                                    <div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Sekretariat Fisik</div>
                                    <span class="fw-bold text-dark" style="font-size:0.85rem;">Jl. Simpang Ijen No. 2, Kota Malang</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Footer Motivating Badge --}}
    <div class="alert text-center border-0 p-4 rounded-4 shadow-sm fw-semibold text-white" style="background: linear-gradient(135deg, var(--pustaka-dark), var(--pustaka-blue));">
        <i class="bi bi-lightning-charge-fill text-warning me-2"></i> Manfaatkan E-Layanan Kami: Akses informasi akurat ada di ujung jari Anda demi mendukung kerja Bakorwil III Malang yang responsif dan berbasis data.
    </div>

    {{-- Back Action --}}
    <div class="text-center mt-5">
        <a href="{{ route('user.layanan') }}" class="btn btn-return-premium fw-semibold">
            <i class="bi bi-arrow-left me-2"></i> Kembali ke Halaman Layanan
        </a>
    </div>
</div>

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