@extends('layouts.app')

@section('title', 'Kontak - PUSYANGATRA Kanigoro')

@section('content')

    <section class="py-20 bg-gray-50 min-h-screen">
        <div class="container mx-auto px-4">
            
            {{-- HEADER SECTION --}}
            <div class="text-center mb-16">
                <span class="text-blue-600 font-bold tracking-widest uppercase text-sm">Hubungi Kami</span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">Layanan Pengaduan & Informasi</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                    Punya pertanyaan atau butuh bantuan seputar layanan Keluarga Berencana? Jangan ragu untuk menghubungi kami melalui saluran di bawah ini.
                </p>
            </div>

            <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-5 gap-12">
                
                <div class="lg:col-span-2 space-y-6">
                    
                    <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-start gap-5 hover:shadow-md transition-all duration-300">
                        <div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center shrink-0">
                            <i class="fas fa-clock text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800 mb-1">Jam Operasional Layanan</h3>
                            <p class="text-gray-600 text-sm leading-relaxed">
                                Senin - Jumat: 08.00 - 15.00 WIB<br>
                                <span class="text-red-500">Sabtu, Minggu & Tanggal Merah: Tutup</span>
                            </p>
                        </div>
                    </div>

                    <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-start gap-5 hover:shadow-md transition-all duration-300">
                        <div class="w-12 h-12 bg-green-50 text-green-600 rounded-xl flex items-center justify-center shrink-0">
                            <i class="fab fa-whatsapp text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800 mb-1">WhatsApp (Konsultasi)</h3>
                            <a href="https://wa.me/6281234567890" target="_blank" class="text-blue-600 text-sm hover:underline font-medium">
                                +62 813-3252-7180
                            </a>
                        </div>
                    </div>

                    <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-start gap-5 hover:shadow-md transition-all duration-300">
                        <div class="w-12 h-12 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center shrink-0">
                            <i class="fas fa-envelope text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800 mb-1">Email Resmi</h3>
                            <a href="mailto:info@kbkanigoro.go.id" class="text-blue-600 text-sm hover:underline font-medium">
                                info@kbkanigoro.go.id
                            </a>
                        </div>
                    </div>

                    <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-start gap-5 hover:shadow-md transition-all duration-300">
                        <div class="w-12 h-12 bg-purple-50 text-purple-600 rounded-xl flex items-center justify-center shrink-0">
                            <i class="fas fa-hashtag text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800 mb-1">Media Sosial</h3>
                            <p class="text-sm text-gray-600">
                                IG: <a href="https://www.instagram.com/balaipenyuluhkbkanigoro/" class="text-blue-600 hover:underline">@balaipenyuluhkbkanigoro</a><br>
                                FB: <a href="https://www.facebook.com/balaikb.kanigoro/?checkpoint_src=any" class="text-blue-600 hover:underline">Balai Penyuluhan KB Kanigoro</a>
                            </p>
                        </div>
                    </div>

                </div>

                <div class="lg:col-span-3">
                    <div class="bg-white p-8 md:p-10 rounded-2xl shadow-sm border border-gray-100">
                        <h3 class="text-2xl font-bold text-gray-800 mb-6">Tinggalkan Pesan</h3>

                        @if(session('success'))
                            <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl mb-6 flex items-center">
                                <i class="fas fa-check-circle mr-2"></i>
                                {{ session('success') }}
                            </div>
                        @endif

                        <form action="{{ route('kontak.store') }}" method="POST" class="space-y-6">
                            @csrf
                            <div>
                                <label for="nama" class="block text-gray-700 font-semibold mb-2 text-sm">Nama Lengkap</label>
                                <input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda" required 
                                    class="w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all duration-200">
                            </div>

                            <div>
                                <label for="email" class="block text-gray-700 font-semibold mb-2 text-sm">Alamat Email</label>
                                <input type="email" id="email" name="email" placeholder="contoh@email.com" required 
                                    class="w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all duration-200">
                            </div>

                            <div>
                                <label for="pesan" class="block text-gray-700 font-semibold mb-2 text-sm">Pesan atau Pertanyaan</label>
                                <textarea id="pesan" name="pesan" rows="5" placeholder="Tulis pesan Anda di sini..." required 
                                    class="w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all duration-200 resize-none"></textarea>
                            </div>

                            <button type="submit" 
                                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-xl transition duration-300 shadow-lg transform hover:-translate-y-1 flex justify-center items-center">
                                <i class="fas fa-paper-plane mr-2"></i> Kirim Pesan Sekarang
                            </button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </section>

@endsection