@extends('visitor.layout.tamplate')

@section('content')
    {{-- 1. Hero Section: Ultra Modern Dark with Logo --}}
    <section class="pt-48 pb-32 bg-[#020617] relative overflow-hidden">
        {{-- Animated Background Elements --}}
        <div class="absolute top-0 left-1/4 w-96 h-96 bg-sky-600/20 rounded-full blur-[120px] animate-pulse"></div>
        <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-yellow-500/10 rounded-full blur-[120px]"></div>
        
        <div class="max-w-7xl mx-auto px-6 relative z-10">
            <div class="flex flex-col items-center text-center">
                
              

                <span class="inline-flex items-center gap-2 bg-sky-500/10 border border-sky-500/20 text-sky-400 px-5 py-2 rounded-full text-xs font-bold uppercase tracking-[0.2em] mb-8">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-sky-500"></span>
                    </span>
                    Hubungi Kami
                </span>

                <h1 class="text-5xl md:text-7xl font-black text-white mb-8 leading-[1.1] tracking-tight">
                    Mari Berdiskusi <br>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500 italic font-serif">Dengan Kami</span>
                </h1>
                <p class="max-w-2xl text-slate-400 leading-relaxed text-lg md:text-xl font-light">
                    Kami percaya kolaborasi adalah kunci perubahan. Sampaikan ide, pertanyaan, atau dukungan Anda untuk masa depan Papua.
                </p>
            </div>
        </div>
    </section>

    {{-- 2. Content Section --}}
    <section class="py-24 bg-slate-50 relative">
        <div class="max-w-7xl mx-auto px-6">
            
            {{-- Grid Info Cards: Premium Glass Style --}}
            <div class="grid lg:grid-cols-3 gap-8 -mt-40 mb-24 relative z-30">
                {{-- Alamat --}}
                <div class="group bg-white p-10 rounded-[3rem] shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-white hover:border-sky-500/30 transition-all duration-500">
                    <div class="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-sky-600 group-hover:text-white group-hover:rotate-[10deg] transition-all duration-500 shadow-sm">
                        <i class="fas fa-map-marker-alt text-2xl text-sky-600 group-hover:text-white"></i>
                    </div>
                    <h4 class="text-xs font-black uppercase tracking-widest text-sky-600 mb-4">Lokasi Utama</h4>
                    <p class="text-slate-800 text-lg font-bold leading-snug">
                        {{ $setting->address ?? 'Jl. Raya Utama, Nabire, Papua Tengah' }}
                    </p>
                </div>

                {{-- Email --}}
                <div class="group bg-white p-10 rounded-[3rem] shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-white hover:border-sky-500/30 transition-all duration-500">
                    <div class="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-sky-600 group-hover:text-white group-hover:rotate-[10deg] transition-all duration-500 shadow-sm">
                        <i class="fas fa-envelope text-2xl text-sky-600 group-hover:text-white"></i>
                    </div>
                    <h4 class="text-xs font-black uppercase tracking-widest text-sky-600 mb-4">Korespondensi</h4>
                    <p class="text-slate-800 text-lg font-bold leading-snug break-all">
                        {{ $setting->email ?? 'info@yptppapua.or.id' }}
                    </p>
                </div>

                {{-- WhatsApp --}}
                <div class="group bg-white p-10 rounded-[3rem] shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-white hover:border-green-500/30 transition-all duration-500">
                    <div class="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-green-500 group-hover:text-white group-hover:rotate-[10deg] transition-all duration-500 shadow-sm">
                        <i class="fab fa-whatsapp text-2xl text-green-600 group-hover:text-white"></i>
                    </div>
                    <h4 class="text-xs font-black uppercase tracking-widest text-green-600 mb-4">Layanan Cepat</h4>
                    <p class="text-slate-800 text-lg font-bold leading-snug">
                        {{ $setting->phone ?? '+62 812 3456 7890' }}
                    </p>
                </div>
            </div>

            {{-- 3. Social Media Branding Section --}}
            <div class="relative bg-sky-950 rounded-[4rem] overflow-hidden p-12 md:p-20 shadow-2xl">
                {{-- Texture Background --}}
                <div class="absolute inset-0 opacity-20" style="background-image: url('https://www.transparenttextures.com/patterns/cubes.png');"></div>
                
                <div class="relative z-10 flex flex-col items-center text-center">
                    <h2 class="text-3xl md:text-5xl font-extrabold text-white mb-6">
                        Terhubung di <span class="text-yellow-400">Dunia Digital</span>
                    </h2>
                    <p class="text-sky-100/60 max-w-xl mb-12 text-lg">
                        Dapatkan update terbaru mengenai program beasiswa, berita pembangunan, dan cerita inspiratif dari tanah Papua.
                    </p>

                    <div class="flex flex-wrap justify-center gap-6">
                        {{-- LinkedIn --}}
                        @if($setting->linkedin)
                        <a href="{{ $setting->linkedin }}" target="_blank" 
                            class="group relative flex items-center justify-center w-16 h-16 bg-white/5 border border-white/10 rounded-[1.5rem] hover:bg-[#0A66C2] hover:border-sky-500 transition-all duration-500 shadow-xl">
                            <i class="fab fa-linkedin-in text-2xl text-white group-hover:scale-110 transition-transform"></i>
                            <span class="absolute -top-12 scale-0 group-hover:scale-100 transition-all bg-[#0A66C2] text-white text-[10px] py-1 px-3 rounded-lg font-bold">LinkedIn</span>
                        </a>
                        @endif

                        {{-- WhatsApp Channel --}}
                        @if($setting->wa_channel)
                        <a href="{{ $setting->wa_channel }}" target="_blank" 
                            class="group relative flex items-center justify-center w-16 h-16 bg-white/5 border border-white/10 rounded-[1.5rem] hover:bg-[#25D366] hover:border-green-400 transition-all duration-500 shadow-xl">
                            <i class="fab fa-whatsapp text-2xl text-white group-hover:scale-110 transition-transform"></i>
                            <span class="absolute -top-12 scale-0 group-hover:scale-100 transition-all bg-[#25D366] text-white text-[10px] py-1 px-3 rounded-lg font-bold">Channel WA</span>
                        </a>
                        @endif

                        {{-- Instagram --}}
                        @if($setting->instagram)
                        <a href="{{ $setting->instagram }}" target="_blank" 
                            class="group relative flex items-center justify-center w-16 h-16 bg-white/5 border border-white/10 rounded-[1.5rem] hover:bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-500 transition-all duration-500 shadow-xl">
                            <i class="fab fa-instagram text-2xl text-white group-hover:scale-110 transition-transform"></i>
                            <span class="absolute -top-12 scale-0 group-hover:scale-100 transition-all bg-purple-600 text-white text-[10px] py-1 px-3 rounded-lg font-bold">Instagram</span>
                        </a>
                        @endif

                        {{-- YouTube --}}
                        @if($setting->youtube)
                        <a href="{{ $setting->youtube }}" target="_blank" 
                            class="group relative flex items-center justify-center w-16 h-16 bg-white/5 border border-white/10 rounded-[1.5rem] hover:bg-[#FF0000] transition-all duration-500 shadow-xl">
                            <i class="fab fa-youtube text-2xl text-white group-hover:scale-110 transition-transform"></i>
                            <span class="absolute -top-12 scale-0 group-hover:scale-100 transition-all bg-red-600 text-white text-[10px] py-1 px-3 rounded-lg font-bold">YouTube</span>
                        </a>
                        @endif

                        {{-- Facebook --}}
                        @if($setting->facebook)
                        <a href="{{ $setting->facebook }}" target="_blank" 
                            class="group relative flex items-center justify-center w-16 h-16 bg-white/5 border border-white/10 rounded-[1.5rem] hover:bg-[#1877F2] transition-all duration-500 shadow-xl">
                            <i class="fab fa-facebook-f text-2xl text-white group-hover:scale-110 transition-transform"></i>
                            <span class="absolute -top-12 scale-0 group-hover:scale-100 transition-all bg-[#1877F2] text-white text-[10px] py-1 px-3 rounded-lg font-bold">Facebook</span>
                        </a>
                        @endif
                    </div>
                </div>
            </div>
        
        </div>
    </section>
@endsection