@{
    Layout = "~/Views/Website/Shared/_Layout.cshtml";
    ViewData["Title"] = "Usaha/Kegiatan Pesapakawan";
}

<div class="mx-auto">
     <div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
        
        <div class="max-w-6xl mx-auto px-6 hidden md:block relative z-10">
            <nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
                <a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
                <i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
                <span class="font-semibold">Kontak Kami</span>
            </nav>
        </div>
        
        <div class="max-w-6xl mx-auto justify-between flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
            <div class="flex-1 text-center max-w-xl md:text-left">
                <h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Kontak Kami</h1>
                <p class="text-lg text-white mb-4">Hubungi kami untuk konsultasi, pertanyaan, atau bantuan terkait pengelolaan sampah kawasan/perusahaan Anda.</p>
                <div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
            </div>
            <div class="flex-shrink-0 hidden md:block">
                <img src="@Url.Content("~/website/images/bg-header.webp")" alt="Usaha Pesapakawan" class="w-75 h-auto">
            </div>
        </div>
    </div>

    <div class="max-w-6xl mx-auto px-4">
        <div class="bg-white rounded-xl border border-gray-200 p-8 mb-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="space-y-6">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Informasi Kontak</h2>
                    
                    <div class="flex items-start space-x-4">
                        <div class="flex-shrink-0">
                            <i class="w-5 h-5 text-cyan-500" data-lucide="map-pin"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-700 mb-1">Alamat</h3>
                            <p class="text-gray-600 leading-relaxed">
                                Jl. Mandala V No.67, RT.1/RW.2, Cililitan,<br>
                                Kec. Kramat Jati, Kota Jakarta Timur,<br>
                                DKI Jakarta 13640
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-4">
                        <div class="flex-shrink-0">
                            <i class="w-5 h-5 text-cyan-500" data-lucide="phone"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-700 mb-1">Telepon</h3>
                            <p class="text-gray-600">
                                <a href="tel:02180927744" class="hover:text-cyan-600 transition-colors">
                                    (021) 8092-7744
                                </a>
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-4">
                        <div class="flex-shrink-0">
                            <i class="w-5 h-5 text-cyan-500" data-lucide="mail"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-700 mb-1">Email</h3>
                            <p class="text-gray-600">
                                <a href="mailto:dinaslh@jakarta.go.id" 
                                   class="text-cyan-600 hover:text-cyan-700 transition-colors hover:underline">
                                    dinaslh@jakarta.go.id
                                </a>
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start space-x-4">
                        <div class="flex-shrink-0">
                            <i class="w-5 h-5 text-cyan-500" data-lucide="phone"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-700 mb-1">Helpdesk Sistem Pesapakawan</h3>
                            <p class="text-gray-600">
                                <a href="https://wa.me/6285212436339?text=Halo%20Pesapakawan%2C%20saya%20ingin%20bertanya%20mengenai%20layanan%20pengelolaan%20sampah" class="hover:text-cyan-600 transition-colors">
                                    0852-1243-6339
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-4">
                        <div class="flex-shrink-0">
                            <i class="w-5 h-5 text-cyan-500" data-lucide="phone"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-700 mb-1">Helpdesk BLUD UPST</h3>
                            <p class="text-gray-600">
                                <a href="https://wa.me/6282211001180?text=Halo%20Pesapakawan%2C%20saya%20ingin%20bertanya%20mengenai%20layanan%20pengelolaan%20sampah" class="hover:text-cyan-600 transition-colors">
                                    0822-1100-1180
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Lokasi Kami</h2>
                    <div class="w-full h-80 rounded-lg overflow-hidden shadow-md">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.7234567890123!2d106.87654321!3d-6.234567890!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e123456789%3A0x123456789abcdef0!2sJl.%20Mandala%20V%20No.67%2C%20RT.1%2FRW.2%2C%20Cililitan%2C%20Kec.%20Kramat%20jati%2C%20Kota%20Jakarta%20Timur%2C%20Daerah%20Khusus%20Ibukota%20Jakarta%2013640!5e0!3m2!1sid!2sid!4v1234567890123!5m2!1sid!2sid"
                            width="100%" 
                            height="100%" 
                            style="border:0;" 
                            allowfullscreen="" 
                            loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"
                            title="Lokasi Kantor Pesapakawan">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>