@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;
    }

    /* 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: 20px;
        color: var(--slate-700);
        border-bottom: 1px solid var(--slate-200);
    }
    .table-premium tbody tr:last-child td {
        border-bottom: none;
    }

    /* 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);
    }

    /* Step Procedure Numbering Style */
    .step-badge-number {
        width: 28px;
        height: 28px;
        background-color: var(--pustaka-blue);
        color: #ffffff;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.8rem;
    }
</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;">
            Knowledge Partner
        </span>
        <h2 class="hero-title-custom display-6 mb-3">💼 Layanan Informasi dan Konsultasi</h2>
        <p class="text-muted mx-auto fs-6" style="max-width: 800px; line-height: 1.7;">
            Layanan profesional Perpustakaan Khusus Bakorwil III Malang untuk mendukung riset, analisis komparatif, dan perumusan kebijakan strategis berbasis data di lingkungan Bakorwil III Malang.
        </p>
        <div style="width: 50px; height: 3px; background: var(--pustaka-blue);" class="mx-auto mt-4 rounded-pill"></div>
    </div>

    {{-- I. Pengantar Layanan --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-3">
            <i class="bi bi-info-circle"></i> I. Pengantar Layanan
        </h4>
        <p class="lh-lg text-muted mb-0" style="font-size: 0.95rem;">
            Layanan Informasi dan Konsultasi dirancang sebagai mitra strategis bagi Pejabat dan Pegawai Bakorwil III Malang dalam menyusun rancangan kebijakan pemerintahan umum serta pelaksanaan tugas analisis kewilayahan. Layanan ini melampaui sirkulasi konvensional; kami menyediakan dukungan pustakawan ahli guna menemukan, melakukan sintesis data, dan merangkum informasi literatur yang bersifat spesifik maupun kompleks.
        </p>
    </section>

    {{-- II. Jenis-Jenis Layanan Konsultasi dan Informasi --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-4">
            <i class="bi bg-layers"></i> II. Bidang Layanan Informasi dan Konsultasi
        </h4>
        <p class="text-muted small mb-4">Kami menawarkan kluster dukungan data personal guna menjamin ketepatan pemenuhan urgensi tugas kedinasan Anda:</p>

        <div class="table-responsive rounded-3 border">
            <table class="table table-premium align-middle mb-0">
                <thead>
                    <tr>
                        <th width="35%">Jenis Layanan Spesifik</th>
                        <th width="65%">Orientasi Target & Aktivitas Kerja</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <span class="fw-bold text-dark d-block" style="font-size: 0.95rem;">Konsultasi Riset & Penelusuran Literatur</span>
                        </td>
                        <td>
                            <p class="text-muted small mb-2"><strong>Tujuan:</strong> Menunjang Pegawai dalam perumusan naskah akademik, pengerjaan kajian internal, maupun penyusunan draf rekomendasi kebijakan daerah.</p>
                            <ul class="text-muted small ps-3 mb-0" style="line-height: 1.6;">
                                <li>Penyusunan kerangka kata kunci (*keyword mapping*) dan formulasi strategi pencarian data.</li>
                                <li>Kompilasi daftar bibliografi teranotasi yang bersumber dari koleksi fisik dan *e-resources* multimedia.</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="fw-bold text-dark d-block" style="font-size: 0.95rem;">Penyediaan Dokumen Kedinasan Spesifik</span>
                        </td>
                        <td>
                            <p class="text-muted small mb-2"><strong>Tujuan:</strong> Menyediakan dokumen referensi langka atau data statistik sektoral yang krusial untuk menunjang justifikasi dinas.</p>
                            <ul class="text-muted small ps-3 mb-0" style="line-height: 1.6;">
                                <li>Pemenuhan berkas khusus seperti arsip Perda lama, dokumen rencana tata ruang, atau serial data makroekonomi daerah.</li>
                                <li>Fasilitasi peminjaman antar-perpustakaan (*Inter-Library Loan*) memanfaatkan jaringan instansi eksternal Jawa Timur.</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="fw-bold text-dark d-block" style="font-size: 0.95rem;">Penyusunan Ringkasan Eksekutif (*Briefing Information*)</span>
                        </td>
                        <td>
                            <p class="text-muted small mb-2"><strong>Tujuan:</strong> Menyajikan rangkuman cepat berbasis data konkret guna mendukung percepatan pengambilan keputusan oleh jajaran pimpinan.</p>
                            <ul class="text-muted small ps-3 mb-0" style="line-height: 1.6;">
                                <li>Penyusunan *Executive Summary* komparatif (maksimal 2 halaman cetak) berbasis tinjauan literatur pilihan.</li>
                                <li>*Data Spotlight* — visualisasi perbandingan parameter statistik terkini terkait isu sektoral strategis Bakorwil III.</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="fw-bold text-dark d-block" style="font-size: 0.95rem;">Bimbingan Teknis Literasi Informasi</span>
                        </td>
                        <td>
                            <p class="text-muted small mb-2"><strong>Tujuan:</strong> Mengembangkan kapabilitas teknis pegawai dalam menyaring, mengevaluasi, dan mengorganisasi tumpukan informasi digital.</p>
                            <ul class="text-muted small ps-3 mb-0" style="line-height: 1.6;">
                                <li>*Workshop* terjadwal terkait teknik verifikasi akurasi data guna menangkal misinformasi rujukan publik.</li>
                                <li>Pelatihan integrasi manajer referensi (sitasi ilmiah) dan eksplorasi fitur penelusuran tingkat lanjut (*advanced search*) *e-database*.</li>
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    {{-- III. Prosedur Permintaan Konsultasi dan Informasi --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-4">
            <i class="bi bi-diagram-3"></i> III. Prosedur Pengajuan Permintaan Layanan
        </h4>
        
        <div class="row g-3">
            <div class="col-md-3">
                <div class="p-3 border rounded bg-light h-100">
                    <div class="mb-2"><span class="step-badge-number">1</span></div>
                    <div class="fw-bold text-dark mb-1" style="font-size: 0.85rem;">Pengajuan Berkas</div>
                    <p class="text-muted small mb-0" style="font-size: 0.75rem; line-height: 1.4;">Kirim surel resmi ke e-mail internal perpustakaan dengan menyertakan subjek standar: <strong>[Permintaan Konsultasi Informasi]</strong>.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded bg-light h-100">
                    <div class="mb-2"><span class="step-badge-number">2</span></div>
                    <div class="fw-bold text-dark mb-1" style="font-size: 0.85rem;">Rincian Kebutuhan</div>
                    <p class="text-muted small mb-0" style="font-size: 0.75rem; line-height: 1.4;">Lampirkan detail ruang lingkup topik pembahasan, tujuan penggunaan keluaran, serta tenggat waktu pemenuhan target.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border rounded bg-light h-100">
                    <div class="mb-2"><span class="step-badge-number">3</span></div>
                    <div class="fw-bold text-dark mb-1" style="font-size: 0.85rem;">Wawancara Referensi</div>
                    <p class="text-muted small mb-0" style="font-size: 0.75rem; line-height: 1.4;">Pustakawan ahli akan melakukan konfirmasi langsung via temu muka atau telepon untuk memperjelas batas instrumen variabel data.</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="p-3 border border-primary rounded h-100" style="background: rgba(0, 77, 145, 0.01);">
                    <div class="mb-2"><span class="step-badge-number" style="background-color: var(--pustaka-dark);">4</span></div>
                    <div class="fw-bold text-primary mb-1" style="font-size: 0.85rem;">Penyerahan Produk</div>
                    <p class="text-muted small mb-0" style="font-size: 0.75rem; line-height: 1.4; font-weight: 500;">Hasil kajian diserahkan dalam bentuk kluster kompilasi data dokumen, bibliografi terstruktur, atau lembar ringkasan eksekutif resmi.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- IV. Komitmen Kerahasiaan --}}
    <section class="service-section-card">
        <h4 class="section-subtitle-premium mb-3">
            <i class="bi bi-shield-lock"></i> IV. Komitmen Proteksi Data & Kerahasiaan
        </h4>
        <p class="lh-lg text-muted mb-0" style="font-size: 0.95rem;">
            Manajemen Perpustakaan Khusus Bakorwil III Malang memberikan garansi penuh bahwa seluruh topik konsultasi, riwayat dokumen penelusuran, serta draf data yang dikonsultasikan akan dijaga secara ketat aspek kerahasiaannya (*strictly confidential*). Informasi yang dihimpun hanya dialokasikan untuk pemenuhan akselerasi kinerja kedinasan lingkungan internal sesuai dengan koridor hukum yang berlaku.
        </p>
    </section>

    {{-- V. Kontak Layanan & Jadwal Operasional --}}
    <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-clock"></i> V. Jadwal Konsultasi Tatap Muka
                </h4>
                <p class="text-muted small lh-lg mb-4">
                    Guna memastikan ketersediaan waktu luang pustakawan referensi, layanan konsultasi tatap muka secara mendalam disarankan melakukan janji temu (*by appointment*) terlebih dahulu.
                </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-calendar-check me-1 text-primary"></i> WAKTU OPERASIONAL RESMI:</span>
                    <span class="small text-muted d-block fw-bold text-dark mb-1">Senin – Jumat | Pukul 08.00 - 16.00 WIB</span>
                    <span class="small text-muted" style="font-size: 0.75rem;">*Hari libur nasional dan cuti bersama dinas mengikuti regulasi Pemerintah Provinsi Jawa Timur.</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> Sekretariat Layanan Informasi Referensi
                </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;">Hubungan WhatsApp</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 Korespondensi</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;">Website Utama</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;">Alamat Kantor</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-exclamation-circle-fill text-warning me-2"></i> Seluruh dokumen, transkrip wawancara rujukan, serta output kompilasi data bersifat rahasia negara dan terbatas hanya untuk mendukung kelancaran tupoksi kedinasan Bakorwil III Malang.
    </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

