@extends('layouts.app')

@section('content')
<div class="w-full">
    
    {{-- Section Header --}}
    <section class="relative h-[250px] md:h-[300px] flex items-center justify-center bg-gray-900 text-white overflow-hidden">
        <img src="{{ asset('images/malem.jpeg') }}" 
             class="absolute inset-0 w-full h-full object-cover opacity-60" 
             alt="Banner Kontak">
        <div class="absolute inset-0 bg-black/40"></div>
        <div class="relative z-10 text-center px-4">
            <h1 class="text-4xl md:text-6xl font-black italic uppercase tracking-tight" data-aos="fade-down">
                HUBUNGI KAMI
            </h1>
            <div class="w-20 h-2 bg-orange-500 mx-auto mt-2" data-aos="zoom-in"></div>
            <p class="mt-3 text-sm font-bold uppercase tracking-widest text-white/90" data-aos="fade-up">CV. Amelia Langgeng Jaya</p>
        </div>
    </section>

    {{-- Section Social Media - 4 KOLOM --}}
    <section class="py-12 bg-white">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center font-bold">
                {{-- Instagram --}}
                <a href="https://instagram.com/cv.amelialanggengjaya" target="_blank" class="flex flex-col items-center group" data-aos="fade-up">
                    <div class="w-16 h-16 bg-pink-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-pink-100 transition duration-300">
                        <i class="fab fa-instagram text-3xl text-pink-600 group-hover:scale-110 transition duration-300"></i>
                    </div>
                    <h3 class="text-blue-900 uppercase text-[11px] mb-1 font-black tracking-wider">Instagram</h3>
                    <p class="text-slate-600 text-[10px] break-all">cv.amelialanggengjaya</p>
                </a>

                {{-- TikTok --}}
                <a href="https://tiktok.com/@cv.amelialanggengjaya" target="_blank" class="flex flex-col items-center group" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-slate-200 transition duration-300">
                        <i class="fab fa-tiktok text-3xl text-black group-hover:scale-110 transition duration-300"></i>
                    </div>
                    <h3 class="text-blue-900 uppercase text-[11px] mb-1 font-black tracking-wider">TikTok</h3>
                    <p class="text-slate-600 text-[10px] break-all">cv.amelialanggengjaya</p>
                </a>

                {{-- Facebook --}}
                <a href="https://facebook.com/cvamelialanggengjaya" target="_blank" class="flex flex-col items-center group" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-blue-100 transition duration-300">
                        <i class="fab fa-facebook text-3xl text-blue-600 group-hover:scale-110 transition duration-300"></i>
                    </div>
                    <h3 class="text-blue-900 uppercase text-[11px] mb-1 font-black tracking-wider">Facebook</h3>
                    <p class="text-slate-600 text-[10px] break-all">Cvamelia Langgeng Jaya</p>
                </a>

                {{-- WhatsApp - DYNAMIC LINK --}}
                <a href="https://wa.me/{{ $kontak->whatsapp ?? '6281238020701' }}" target="_blank" class="flex flex-col items-center group" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mb-4 group-hover:bg-green-100 transition duration-300">
                        <i class="fab fa-whatsapp text-3xl text-green-500 group-hover:scale-110 transition duration-300"></i>
                    </div>
                    <h3 class="text-blue-900 uppercase text-[11px] mb-1 font-black tracking-wider">WhatsApp</h3>
                    <p class="text-slate-600 text-[10px] italic">+{{ $kontak->whatsapp ?? '6281238020701' }}</p>
                </a>
            </div>
        </div>
    </section>

    {{-- Section Lokasi --}}
    <section class="py-16 bg-slate-100">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                
                {{-- 1. Kantor Manajemen --}}
                <div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col border-b-4 border-slate-300" data-aos="fade-right">
                    <img src="{{ $kontak->foto_manajemen ? asset('images/kontak/'.$kontak->foto_manajemen) : asset('images/kantor.jpeg') }}" 
                         class="w-full h-52 object-cover" alt="Kantor Manajemen">
                    <div class="p-8 flex flex-col flex-grow">
                        <h4 class="text-xl font-black text-blue-900 mb-4 uppercase text-left">Kantor Manajemen</h4>
                        <p class="text-sm text-slate-600 mb-8 flex-grow leading-relaxed text-left">
                            {{ $kontak->deskripsi_manajemen ?? 'Pusat administrasi dan manajemen internal perusahaan untuk mendukung kelancaran operasional setiap proyek.' }}
                        </p>
                        <div class="pt-6 border-t border-slate-100 mt-auto">
                            <div class="flex items-start gap-3 mb-6 min-h-[50px]">
                                <i class="fas fa-map-marker-alt text-orange-500 mt-1"></i>
                                <p class="text-[11px] font-bold text-slate-800 uppercase leading-snug text-left">
                                    Prapas RT02/RW08, Gumiwang, Banjarnegara, Jawa Tengah
                                </p>
                            </div>
                            <a href="https://maps.google.com" target="_blank" 
                               class="block text-center bg-slate-800 text-white py-3 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-orange-500 transition shadow-md">
                                Petunjuk Arah
                            </a>
                        </div>
                    </div>
                </div>

                {{-- 2. Kantor Utama --}}
                <div class="bg-white rounded-xl shadow-2xl overflow-hidden flex flex-col border-t-8 border-orange-500 lg:-translate-y-4" data-aos="zoom-in">
                    <img src="{{ $kontak->foto_utama ? asset('images/kontak/'.$kontak->foto_utama) : asset('images/kantor.jpeg') }}" 
                         class="w-full h-52 object-cover" alt="Kantor Utama">
                    <div class="p-8 flex flex-col flex-grow">
                        <h4 class="text-xl font-black text-orange-600 mb-4 uppercase italic text-left">Kantor Utama</h4>
                        <p class="text-sm text-slate-600 mb-8 flex-grow leading-relaxed text-left font-medium">
                            {{ $kontak->deskripsi_utama ?? 'Pusat koordinasi teknis, supplier, dan layanan kontraktor umum yang melayani wilayah Kalimantan dan sekitarnya.' }}
                        </p>
                        <div class="pt-6 border-t border-slate-100 mt-auto">
                            <div class="flex items-start gap-3 mb-6 min-h-[50px]">
                                <i class="fas fa-building text-orange-500 mt-1"></i>
                                <p class="text-[11px] font-bold text-slate-800 uppercase leading-snug text-left">
                                    Jln. Denkav No. RT 4, Ambarawang Darat, Kec. Samboja, Kutai Kartanegara
                                </p>
                            </div>
                            <a href="https://maps.google.com" target="_blank" 
                               class="block text-center bg-orange-600 text-white py-3 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-blue-900 transition shadow-lg">
                                Navigasi Lokasi
                            </a>
                        </div>
                    </div>
                </div>

                {{-- 3. Workshop & Pool Alat --}}
                <div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col border-b-4 border-slate-300" data-aos="fade-left">
                    <img src="{{ $kontak->foto_workshop ? asset('images/kontak/'.$kontak->foto_workshop) : asset('images/workshop.jpeg') }}" 
                         class="w-full h-52 object-cover" alt="Workshop">
                    <div class="p-8 flex flex-col flex-grow">
                        <h4 class="text-xl font-black text-blue-900 mb-4 uppercase text-left">Workshop & Pool</h4>
                        <p class="text-sm text-slate-600 mb-8 flex-grow leading-relaxed text-left">
                            {{ $kontak->deskripsi_workshop ?? 'Fasilitas penyimpanan armada dan perawatan alat berat guna memastikan kualitas layanan teknis di lapangan.' }}
                        </p>
                        <div class="pt-6 border-t border-slate-100 mt-auto">
                            <div class="flex items-start gap-3 mb-6 min-h-[50px]">
                                <i class="fas fa-warehouse text-orange-500 mt-1"></i>
                                <p class="text-[11px] font-bold text-slate-800 uppercase leading-snug text-left">
                                    Jln. Denkav No. RT 4, Ambarawang Darat, Samboja, Kalimantan Timur
                                </p>
                            </div>
                            <a href="https://maps.google.com" target="_blank" 
                               class="block text-center bg-slate-800 text-white py-3 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-orange-500 transition shadow-md">
                                Cek Workshop
                            </a>
                        </div>
                    </div>
                </div>

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