@extends('layouts.kontak')

@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 bersih */
    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 Bagian Atas / Header Banner */
    .contact-header-premium {
        background: linear-gradient(135deg, var(--pustaka-dark), var(--pustaka-blue));
        border-radius: 16px;
        padding: 40px 20px;
        box-shadow: 0 4px 15px rgba(0, 77, 145, 0.15);
    }

    /* Desain Kotak Konten (Card) */
    .contact-card-premium {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid var(--slate-200);
        padding: 35px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .contact-card-premium:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 25px -5px rgba(0, 77, 145, 0.08);
    }

    .contact-title {
        color: var(--pustaka-blue);
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: -0.5px;
    }

    /* Desain Baris Informasi Kontak */
    .contact-item-row {
        display: flex;
        align-items: start;
        gap: 15px;
        padding: 12px 0;
        border-bottom: 1px solid var(--slate-100);
    }
    .contact-item-row:last-child {
        border-bottom: none;
    }

    .contact-icon-box {
        width: 38px;
        height: 38px;
        background: rgba(0, 77, 145, 0.06);
        color: var(--pustaka-blue);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    .contact-text-label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--slate-600);
        margin-bottom: 2px;
        letter-spacing: 0.5px;
    }

    .contact-text-value {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--slate-900);
    }

    .contact-link-action {
        color: var(--pustaka-blue);
        text-decoration: none;
        transition: color 0.2s;
    }
    .contact-link-action:hover {
        color: var(--pustaka-accent);
        text-decoration: underline;
    }

    /* Desain Pembungkus Peta Google Maps */
    .map-wrapper-premium {
        border-radius: 14px;
        overflow: hidden;
        height: 340px;
        width: 100%;
        border: 1px solid var(--slate-200);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    }
    .map-wrapper-premium iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
</style>

<div class="container py-5" data-aos="fade-up">
    
    {{-- Bagian Atas / Judul Halaman --}}
    <div class="contact-header-premium text-center text-white mb-5">
        <span class="badge px-3 py-2 mb-2 text-uppercase" style="background: rgba(255, 255, 255, 0.15); color: #ffffff; font-size: 0.65rem; letter-spacing: 1px;">
            Hubungi Kami
        </span>
        <h1 class="fw-800 mb-2" style="letter-spacing: -1px;">Kontak &amp; Lokasi Bakorwil III Malang</h1>
        <p class="mb-0 opacity-85 jumbotron-subtext" style="font-size: 0.95rem;">Informasi alamat, nomor telepon resmi, dan peta petunjuk lokasi kantor</p>
    </div>

    <div class="row justify-content-center g-4">
        {{-- Kolom Kiri: Informasi Kontak --}}
        <div class="col-lg-6">
            <div class="contact-card-premium h-100">
                <h3 class="contact-title mb-4">
                    <i class="bi bi-telephone-fill me-2"></i> Informasi Kontak
                </h3>
                
                <!-- Baris No Telepon -->
                <div class="contact-item-row">
                    <div class="contact-icon-box"><i class="bi bi-whatsapp"></i></div>
                    <div>
                        <div class="contact-text-label">Telepon / WhatsApp</div>
                        <div class="contact-text-value">0851-3479-1603</div>
                    </div>
                </div>

                <!-- Baris Email -->
                <div class="contact-item-row">
                    <div class="contact-icon-box"><i class="bi bi-envelope-fill"></i></div>
                    <div>
                        <div class="contact-text-label">Alamat E-Mail</div>
                        <div class="contact-text-value">
                            <a href="mailto:arsiptubakorwil@gmail.com" class="contact-link-action">
                                arsiptubakorwil@gmail.com
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Baris Website -->
                <div class="contact-item-row">
                    <div class="contact-icon-box"><i class="bi bi-globe"></i></div>
                    <div>
                        <div class="contact-text-label">Situs Web Resmi</div>
                        <div class="contact-text-value">
                            <a href="https://bakorwilmalang.jatimprov.go.id" target="_blank" class="contact-link-action">
                                bakorwilmalang.jatimprov.go.id
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Baris Alamat -->
                <div class="contact-item-row">
                    <div class="contact-icon-box"><i class="bi bi-geo-alt-fill"></i></div>
                    <div>
                        <div class="contact-text-label">Alamat Kantor</div>
                        <div class="contact-text-value" style="line-height: 1.5;">
                            Jl. Simpang Ijen No. 2, Kota Malang, Jawa Timur
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Kolom Kanan: Peta Lokasi --}}
        <div class="col-lg-6">
            <div class="contact-card-premium h-100">
                <h3 class="contact-title mb-4">
                    <i class="bi bi-map-fill me-2"></i> Peta Lokasi Resmi
                </h3>
                
                {{-- Pembungkus Peta Google Maps --}}
                <div class="map-wrapper-premium">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3951.3496328766115!2d112.63001927453488!3d-7.980644292023594!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd629e924a3502b%3A0xc023c023d6a911a!2sBakorwil%20III%20Malang!5e0!3m2!1sen!2sid!4v1708567789572!5m2!1sen!2sid" 
                        allowfullscreen="" 
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </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