@extends('layouts.pustaka')

@section('title', 'Layanan - Pustaka Nawasena Bakorwil III Malang')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<div class="container py-5 page-container-nobar">

  {{-- Header Section --}}
  <div class="section-box text-center mt-4 mx-3 mx-md-5" data-aos="fade-up">
    <h2 class="section-title-custom">Layanan Pustaka Nawasena</h2>
    <p class="text-muted mx-auto" style="max-width: 700px; font-size: 0.95rem; line-height: 1.6;">
      Pilih salah satu layanan berikut untuk mendukung kegiatan literasi, penelitian, dan pengembangan kebijakan di 
      <strong>Pustaka Nawasena Bakorwil III Malang</strong>.
    </p>
    <p class="hero-subtext mt-3">
      Explore our library services — from reference and borrowing to digital access and consultation — designed to help you learn, research, and grow.
    </p>
  </div>

  {{-- Grid Layanan --}}
  <div class="section-box" data-aos="fade-up">
    <h3 class="text-center fw-700 mb-4 text-dark" style="font-size: 1.5rem; letter-spacing: -0.5px;">Pilih Jenis Layanan</h3>

    <div class="row g-4 mt-2 justify-content-center">
      
      {{-- 1. Layanan Referensi --}}
      <div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="100">
        <div class="card-inner">
          <div class="img-wrapper">
            <img src="{{ asset('images/layanan_referensi.jpg') }}" alt="Layanan Referensi" class="content-image">
          </div>
          <div class="card-body-custom">
            <h5 class="fw-bold text-primary-custom">Layanan Referensi</h5>
            <p class="text-muted small-text">
              Panduan menemukan sumber informasi, literatur, dan dokumen penting untuk riset dan kebijakan.
            </p>
            <a href="{{ route('user.layanan.referensi') }}" class="btn btn-custom btn-sm w-100 fw-semibold mt-auto">
              Selengkapnya <i class="bi bi-arrow-right-short"></i>
            </a>
          </div>
        </div>
      </div>

      {{-- 2. Layanan Sirkulasi --}}
      <div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="200">
        <div class="card-inner">
          <div class="img-wrapper">
            <img src="{{ asset('images/layanan_peminjaman.jpg') }}" alt="Layanan Peminjaman" class="content-image">
          </div>
          <div class="card-body-custom">
            <h5 class="fw-bold text-primary-custom">Layanan Peminjaman</h5>
            <p class="text-muted small-text">
              Akses koleksi fisik maupun digital dengan sistem peminjaman terintegrasi untuk anggota terdaftar.
            </p>
            <a href="{{ route('user.layanan.peminjaman') }}" class="btn btn-custom btn-sm w-100 fw-semibold mt-auto">
              Selengkapnya <i class="bi bi-arrow-right-short"></i>
            </a>
          </div>
        </div>
      </div>

      {{-- 3. Layanan Digital --}}
      <div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="300">
        <div class="card-inner">
          <div class="img-wrapper">
            <img src="{{ asset('images/layanan_digital.png') }}" alt="Layanan Digital" class="content-image">
          </div>
          <div class="card-body-custom">
            <h5 class="fw-bold text-primary-custom">Layanan Digital</h5>
            <p class="text-muted small-text">
              Akses e-book, arsip digital, dan laporan kegiatan melalui portal daring Pustaka Nawasena.
            </p>
            <a href="{{ route('user.layanan.digital') }}" class="btn btn-custom btn-sm w-100 fw-semibold mt-auto">
              Selengkapnya <i class="bi bi-arrow-right-short"></i>
            </a>
          </div>
        </div>
      </div>

      {{-- 4. Layanan Informasi --}}
      <div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="400">
        <div class="card-inner">
          <div class="img-wrapper">
            <img src="{{ asset('images/layanan_informasi.jpg') }}" alt="Layanan Informasi" class="content-image">
          </div>
          <div class="card-body-custom">
            <h5 class="fw-bold text-primary-custom">Informasi & Konsultasi</h5>
            <p class="text-muted small-text">
              Layanan konsultasi dan literasi digital untuk mendukung kebutuhan informasi pegawai dan mitra kerja.
            </p>
            <a href="{{ route('user.layanan.informasi') }}" class="btn btn-custom btn-sm w-100 fw-semibold mt-auto">
              Selengkapnya <i class="bi bi-arrow-right-short"></i>
            </a>
          </div>
        </div>
      </div>
      
      {{-- 5. Manual Book --}}
      <div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="500">
        <div class="card-inner highlight-manual">
          <div class="img-wrapper">
            <img src="{{ asset('images/manualbook.jpg') }}" alt="Manual Book" class="content-image">
          </div>
          <div class="card-body-custom">
            <h5 class="fw-bold text-secondary-custom">Manual Book Sistem</h5>
            <p class="text-muted small-text">
              Panduan lengkap tata cara penggunaan fitur Sistem Pustaka Nawasena secara mandiri untuk pengguna.
            </p>
            <a href="{{ asset('pdf/manualbookuser.pdf') }}" target="_blank" class="btn btn-secondary-custom btn-sm w-100 fw-semibold mt-auto">
              <i class="bi bi-file-pdf me-1"></i> Buka Manual Book
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

<style>
/* 1. Menghilangkan Scrollbar di Samping Kanan Browser */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* Base Style */
body {
  background-color: #f8fafc !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1e293b;
}

.fw-700 { font-weight: 700; }

/* Section Container Card */
.section-box {
  background-color: #ffffff;
  padding: 40px 35px;
  margin-bottom: 35px;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  border-top: 4px solid #004d91; /* Aksen warna biru utama */
}

/* Title Header Style */
.section-title-custom {
  font-size: 1.85rem;
  color: #004d91;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}
.section-title-custom::after {
  content: '';
  display: block;
  width: 60px;
  height: 3.5px;
  background-color: #004d91;
  border-radius: 5px;
  margin: 12px auto 0;
}

.hero-subtext {
  color: #475569;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.8;
}

/* Card Wrapper Layout */
.card-inner {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-inner:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px -8px rgba(0, 77, 145, 0.15);
  border-color: #cbd5e1;
}

/* Efek khusus manual book agar kontras */
.highlight-manual {
  border-left: 1px solid #e2e8f0;
}

.img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #f1f5f9;
}

.content-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card-inner:hover .content-image {
  transform: scale(1.04);
}

/* Card Typography */
.card-body-custom {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.text-primary-custom {
  color: #004d91;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.text-secondary-custom {
  color: #475569;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.small-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #64748b;
  margin-bottom: 18px;
}

/* Button UI */
.btn-custom {
  color: #004d91;
  border: 1px solid #004d91;
  background: transparent;
  border-radius: 6px;
  font-size: 0.75rem;
  padding: 7px 12px;
  transition: all 0.2s;
}

.btn-custom:hover {
  background: #004d91;
  color: #ffffff;
}

.btn-secondary-custom {
  color: #475569;
  border: 1px solid #94a3b8;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 0.75rem;
  padding: 7px 12px;
  transition: all 0.2s;
}

.btn-secondary-custom:hover {
  background: #475569;
  color: #ffffff;
  border-color: #475569;
}

/* Responsive Customization */
@media (max-width: 992px) {
  .section-title-custom { font-size: 1.6rem; }
  .section-box { padding: 30px 20px; }
}
@media (max-width: 576px) {
  .section-title-custom { font-size: 1.4rem; }
  .card-body-custom { padding: 15px; }
}
</style>

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