@section('title', 'Kontak - ' . ($settings['nama kampus'] ?? 'Kampus'))

@extends('Frontend.Layouts.app2')
@section('content')
<br><br>
    {{-- Header Section --}}
    <x-header-section-page title="Contact Us" breadcrumb-home="Home" breadcrumb-current="Contact {{ $settings['nama kampus'] ?? '' }}" />

    {{-- Overlay Background Wrapper --}}
    <div class="relative py-16 bg-cover bg-center" style="background-image: url('{{ asset('./images/background/peta-bg.png') }}');">
        
        <div class="container mx-auto px-4 lg:px-20 relative z-10">
            {{-- Lapisan Putih Transparan Utama (Glassmorphism) --}}
            <div class="bg-white/85 backdrop-blur-md p-8 md:p-12 rounded-3xl shadow-2xl border border-white/50">
                
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
                    
                    {{-- Kiri: Informasi Kontak (7 Kolom) --}}
                    <div class="lg:col-span-7 space-y-8">
                        <div data-aos="fade-right" class="border-l-4 border-red-600 pl-4">
                            <h2 class="text-4xl font-bold text-gray-800 font-poppins">Hubungi Kami</h2>
                            <p class="text-gray-600 mt-2 font-medium font-dmsans">
                                Klik pada kartu informasi di bawah untuk terhubung langsung dengan kami.
                            </p>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            
                            {{-- CARD ALAMAT (Dapat diklik menuju Maps) --}}
                            <a href="{{ $settings['link1'] ?? '#' }}" target="_blank" data-aos="zoom-in" data-aos-delay="100" 
                                class="group bg-white p-6 rounded-2xl shadow-lg border border-gray-100 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 hover:border-red-300 relative overflow-hidden">
                                {{-- Efek Dekorasi Hover --}}
                                <div class="absolute top-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                    </svg>
                                </div>
                                
                                <div class="flex items-center gap-4 mb-4">
                                    <div class="p-3 bg-red-50 text-red-600 rounded-xl group-hover:bg-red-600 group-hover:text-white transition-all duration-300 shadow-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                                    </div>
                                    <h3 class="font-bold text-gray-800 font-poppins">Alamat Pusat</h3>
                                </div>
                                <p class="text-gray-600 text-sm leading-relaxed font-semibold font-dmsans group-hover:text-gray-900 transition-colors">
                                    {{ $settings['alamat kampus'] ?? 'Alamat tidak tersedia' }}
                                </p>
                                <span class="text-[10px] text-red-500 font-bold uppercase mt-4 block tracking-widest opacity-70 group-hover:opacity-100">Klik untuk navigasi</span>
                            </a>

                            {{-- CARD WHATSAPP --}}
                            @php
                                $waMessage = "Halo Admin, saya mau bertanya mengenai informasi kampus " . ($settings['nama kampus'] ?? 'ini') . " lebih lengkap ya, terimakasih!";
                            @endphp
                            <a href="https://wa.me/6287890198284?text={{ urlencode($waMessage) }}" target="_blank" data-aos="zoom-in" data-aos-delay="200" 
                                class="group bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-2xl hover:-translate-y-2 hover:border-green-300 transition-all duration-300">
                                <div class="flex items-center gap-4 mb-4">
                                    <div class="p-3 bg-green-50 text-green-600 rounded-xl group-hover:bg-green-600 group-hover:text-white transition-all duration-300 shadow-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 1 1-7.6-10.6 8.38 8.38 0 0 1 3.8.9L21 3.5Z"></path></svg>
                                    </div>
                                    <h3 class="font-bold text-gray-800 font-poppins">WhatsApp</h3>
                                </div>
                                <p class="text-green-600 font-bold font-dmsans text-lg">+62 878-9019-8284</p>
                                <span class="text-[10px] text-green-500 font-bold uppercase mt-4 block tracking-widest">Chat Sekarang</span>
                            </a>

                            {{-- CARD TELEPON --}}
                            <a href="tel:+6287890198284" data-aos="zoom-in" data-aos-delay="300" 
                                class="group bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-2xl hover:-translate-y-2 hover:border-blue-300 transition-all duration-300">
                                <div class="flex items-center gap-4 mb-4">
                                    <div class="p-3 bg-blue-50 text-blue-600 rounded-xl group-hover:bg-blue-600 group-hover:text-white transition-all duration-300 shadow-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                                    </div>
                                    <h3 class="font-bold text-gray-800 font-poppins">Call Center</h3>
                                </div>
                                <p class="text-gray-700 font-bold font-dmsans text-lg group-hover:text-blue-600 transition-colors">0878-9019-8284</p>
                                <span class="text-[10px] text-blue-500 font-bold uppercase mt-4 block tracking-widest">Telepon Langsung</span>
                            </a>

                            {{-- CARD EMAIL --}}
                            <a href="mailto:info@kuliahkaryawan.net" data-aos="zoom-in" data-aos-delay="400" 
                                class="group bg-white p-6 rounded-2xl shadow-lg border border-gray-100 hover:shadow-2xl hover:-translate-y-2 hover:border-orange-300 transition-all duration-300">
                                <div class="flex items-center gap-4 mb-4">
                                    <div class="p-3 bg-orange-50 text-orange-600 rounded-xl group-hover:bg-orange-600 group-hover:text-white transition-all duration-300 shadow-sm">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                                    </div>
                                    <h3 class="font-bold text-gray-800 font-poppins">Email Support</h3>
                                </div>
                                <p class="text-gray-700 font-bold font-dmsans text-sm break-all">info@kuliahkaryawan.net</p>
                                <span class="text-[10px] text-orange-500 font-bold uppercase mt-4 block tracking-widest">Kirim Surel</span>
                            </a>
                        </div>
                    </div>

                    {{-- Kanan: Google Maps (5 Kolom - Lebih Simpel) --}}
                    <div data-aos="fade-left" class="lg:col-span-5">
                        <div class="p-2 bg-white rounded-3xl shadow-2xl border border-gray-200">
                            <div class="overflow-hidden rounded-2xl h-[450px]">
                                <iframe
                                    src="{{ $settings['maps'] ?? '' }}"
                                    width="100%" 
                                    height="100%" 
                                    style="border:0;" 
                                    allowfullscreen="" 
                                    loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"
                                    class="grayscale hover:grayscale-0 transition-all duration-1000">
                                </iframe>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection