@extends('layouts.pustaka')

@section('content')
<!-- Memastikan font modern dan ikon Bootstrap ter-load dengan baik -->
<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 garis scrollbar di samping kanan browser agar tampilan lebih rapi */
    html, body {
        scrollbar-width: none; 
        -ms-overflow-style: none; 
    }
    ::-webkit-scrollbar {
        display: none; 
    }

    /* Pengaturan Warna Utama - Biru Gelap Profesional & Abu-abu Terang */
    :root {
        --pustaka-blue: #004d91;
        --pustaka-dark: #002d5a;
        --pustaka-accent: #0284c7;
        --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);
    }

    /* Desain Kotak Pembungkus Konten (Card) */
    .service-section-card {
        background: #ffffff;
        padding: 45px 40px;
        margin-bottom: 35px;
        border-radius: 16px;
        border: 1px solid var(--slate-200);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
    }

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

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

    /* Desain Kotak Foto Fasilitas */
    .facility-premium-card {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid var(--slate-200);
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    }
    .facility-premium-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 25px -5px rgba(0, 77, 145, 0.08);
    }
    .facility-img-wrapper {
        position: relative;
        overflow: hidden;
        height: 250px;
    }
    .facility-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .facility-premium-card:hover .facility-img-wrapper img {
        transform: scale(1.06);
    }
    .facility-img-wrapper::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4));
    }

    /* Desain Kotak Grid Peralatan */
    .equipment-premium-item {
        background-color: var(--slate-50);
        border: 1px solid var(--slate-200);
        border-radius: 14px;
        padding: 20px;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .equipment-premium-item:hover {
        transform: translateY(-4px);
        background-color: #ffffff;
        border-color: var(--pustaka-accent);
        box-shadow: 0 12px 20px -8px rgba(2, 132, 199, 0.2);
    }
    .equipment-image-box {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid var(--slate-200);
        margin-bottom: 15px;
    }
    .equipment-badge-id {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--pustaka-accent);
        letter-spacing: 0.5px;
        display: inline-block;
        margin-bottom: 6px;
    }
</style>

<div class="container py-5" data-aos="fade-up">

    {{-- Bagian Pembuka / Ucapan Selamat Datang --}}
    <div class="service-section-card text-center mb-4">
        <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;">
            Sarana & Prasarana
        </span>
        <h2 class="hero-title-custom display-6 mb-3">Selamat Datang di Fasilitas &amp; Peralatan Kami</h2>
        <p class="text-muted mx-auto fs-6 mb-0" style="max-width: 800px; line-height: 1.7;">
            Silakan lihat berbagai fasilitas ruangan dan perlengkapan modern yang kami sediakan. Semua ini disiapkan khusus untuk mendukung kenyamanan, kelancaran diskusi, serta kemudahan Anda saat belajar atau mencari data di <strong>Pustaka Nawasena Bakorwil III Malang</strong>.
        </p>
        <div style="width: 50px; height: 3px; background: var(--pustaka-blue);" class="mx-auto mt-4 rounded-pill"></div>
    </div>

    {{-- Bagian I: Fasilitas Ruangan Utama --}}
    <div class="service-section-card" data-aos="fade-up" data-aos-delay="100">
        <div class="text-center mb-5">
            <h3 class="section-subtitle-premium justify-content-center mb-2">
                <i class="bi bi-building"></i> Fasilitas Ruangan Utama
            </h3>
            <p class="text-muted small">Pilihan tempat membaca yang tenang atau ruang berkumpul yang nyaman</p>
        </div>

        <div class="row justify-content-center g-4">
            <!-- Fasilitas 1: Pojok Baca -->
            <div class="col-md-6 col-lg-5">
                <div class="facility-premium-card h-100">
                    <div class="facility-img-wrapper">
                        <img src="{{ asset('images/pojokbaca.jpeg') }}" alt="Pojok Baca Pustaka Nawasena">
                    </div>
                    <div class="card-body p-4 text-center">
                        <h5 class="fw-bold text-dark mb-2" style="font-size: 1.15rem;">Pojok Baca Mandiri</h5>
                        <p class="text-muted small lh-lg mb-0">
                            Tempat membaca yang nyaman dengan penataan meja kursi yang pas, cahaya yang sejuk di mata, serta suasana yang tenang agar Anda bisa lebih fokus membaca.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Fasilitas 2: Ruang Diskusi -->
            <div class="col-md-6 col-lg-5">
                <div class="facility-premium-card h-100">
                    <div class="facility-img-wrapper">
                        <img src="{{ asset('images/RUANGDISKUSI.jpeg') }}" alt="Ruang Diskusi Pustaka Nawasena">
                    </div>
                    <div class="card-body p-4 text-center">
                        <h5 class="fw-bold text-dark mb-2" style="font-size: 1.15rem;">Ruang Kerja &amp; Diskusi Bersama</h5>
                        <p class="text-muted small lh-lg mb-0">
                            Ruangan khusus untuk berkumpul kelompok yang dilengkapi meja kursi rapat. Sangat cocok digunakan untuk kerja kelompok, menyusun rencana kegiatan, atau bertukar pikiran.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Bagian II: Peralatan & Teknologi --}}
    <div class="service-section-card" data-aos="fade-up" data-aos-delay="200">
        <div class="text-center mb-5">
            <h3 class="section-subtitle-premium justify-content-center mb-2">
                <i class="bi bi-cpu"></i> Perlengkapan &amp; Alat Pendukung
            </h3>
            <p class="text-muted small">Perangkat teknologi gratis yang siap digunakan untuk mempercepat urusan tugas Anda</p>
        </div>

        <div class="row g-4">
            <!-- Alat 1: Printer & Scanner -->
            <div class="col-sm-6 col-md-3">
                <div class="equipment-premium-item text-center h-100">
                    <span class="equipment-badge-id"><i class="bi bi-printer me-1"></i> Cetak &amp; Pindai</span>
                    <img src="{{ asset('images/printer.jpg') }}" alt="Fasilitas Printer & Scanner" class="equipment-image-box">
                    <h6 class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">Mesin Cetak &amp; Scanner</h6>
                    <p class="text-muted x-small mb-0" style="font-size: 0.8rem; line-height: 1.4;">Disediakan untuk memudahkan Anda mencetak dokumen penting atau mengubah berkas fisik kertas menjadi file digital.</p>
                </div>
            </div>

            <!-- Alat 2: Proyektor -->
            <div class="col-sm-6 col-md-3">
                <div class="equipment-premium-item text-center h-100">
                    <span class="equipment-badge-id"><i class="bi bi-projector me-1"></i> Layar Presentasi</span>
                    <img src="{{ asset('images/proyektor.jpg') }}" alt="Fasilitas Proyektor" class="equipment-image-box">
                    <h6 class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">Proyektor Layar</h6>
                    <p class="text-muted x-small mb-0" style="font-size: 0.8rem; line-height: 1.4;">Alat bantu di ruang diskusi untuk menampilkan bahan presentasi, video panduan, atau saat mengadakan acara pelatihan kecil.</p>
                </div>
            </div>

            <!-- Alat 3: Wi-Fi -->
            <div class="col-sm-6 col-md-3">
                <div class="equipment-premium-item text-center h-100">
                    <span class="equipment-badge-id"><i class="bi bi-wifi me-1"></i> Internet Cepat</span>
                    <img src="{{ asset('images/wifi.jpg') }}" alt="Fasilitas Wi-Fi Gratis" class="equipment-image-box">
                    <h6 class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">Koneksi Wi-Fi Gratis</h6>
                    <p class="text-muted x-small mb-0" style="font-size: 0.8rem; line-height: 1.4;">Akses internet tanpa kabel yang cepat dan tanpa biaya di seluruh area perpustakaan untuk mempermudah browsing informasi.</p>
                </div>
            </div>

            <!-- Alat 4: CCTV -->
            <div class="col-sm-6 col-md-3">
                <div class="equipment-premium-item text-center h-100">
                    <span class="equipment-badge-id"><i class="bi bi-shield-check me-1"></i> Pengawasan Keamanan</span>
                    <img src="{{ asset('images/cctv.jpg') }}" alt="Sistem Keamanan CCTV" class="equipment-image-box">
                    <h6 class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">Kamera Keamanan (CCTV)</h6>
                    <p class="text-muted x-small mb-0" style="font-size: 0.8rem; line-height: 1.4;">Kamera pemantau tersembunyi yang aktif selama 24 jam demi menjamin keselamatan barang bawaan dan kenyamanan Anda.</p>
                </div>
            </div>
        </div>
    </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