@extends('layouts.public')

@section('title', 'Hubungi Kami | KunciLink | Social Unlock & Link in Bio Indonesia')

@section('meta_description')
Hubungi KunciLink - tim support 24/7 siap membantu. Konsultasi gratis, bantuan teknis, atau kerjasama bisnis. Respon cepat untuk semua kebutuhan Anda.
@endsection

@section('content')
<div class="max-w-6xl mx-auto px-4 py-12">
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">Hubungi Kami</h1>
        <p class="text-xl text-gray-600">Tim KunciLink siap membantu Anda 24/7</p>
    </div>

    <div class="grid lg:grid-cols-2 gap-12">
        <!-- Contact Information -->
        <div class="space-y-8">
            <div class="bg-white rounded-lg shadow-sm border p-8">
                <h2 class="text-2xl font-semibold text-gray-900 mb-6">Informasi Kontak</h2>
                
                <div class="space-y-6">
                    <div class="flex items-start space-x-4">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-envelope text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-1">Email</h3>
                            <p class="text-gray-600 mb-2">support@kuncilink.id</p>
                            <p class="text-sm text-gray-500">Respon dalam 24 jam</p>
                        </div>
                    </div>

                    <div class="flex items-start space-x-4">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fab fa-whatsapp text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-1">WhatsApp</h3>
                            <p class="text-gray-600 mb-2">+62 851-5652-5726</p>
                            <p class="text-sm text-gray-500">Respon cepat untuk urgent</p>
                        </div>
                    </div>

                    <div class="flex items-start space-x-4">
                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-clock text-purple-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-1">Jam Operasional</h3>
                            <p class="text-gray-600 mb-2">Senin - Jumat: 09:00 - 18:00 WIB</p>
                            <p class="text-sm text-gray-500">Sabtu: 09:00 - 15:00 WIB</p>
                        </div>
                    </div>

                    <div class="flex items-start space-x-4">
                        <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-map-marker-alt text-orange-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 mb-1">Lokasi</h3>
                            <p class="text-gray-600 mb-2">Jakarta, Indonesia</p>
                            <p class="text-sm text-gray-500">Platform online - tidak ada kantor fisik</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Social Media -->
            <div class="bg-white rounded-lg shadow-sm border p-8">
                <h2 class="text-2xl font-semibold text-gray-900 mb-6">Ikuti Kami</h2>
                <div class="grid grid-cols-2 gap-4">
                    <a href="https://youtube.com/@kuncilinkid" target="_blank" rel="noopener noreferrer" class="flex items-center space-x-3 p-4 bg-red-50 rounded-lg hover:bg-red-100 transition-colors">
                        <i class="fab fa-youtube text-red-600 text-2xl"></i>
                        <div>
                            <p class="font-semibold text-gray-900">YouTube</p>
                            <p class="text-sm text-gray-600">@kuncilinkid</p>
                        </div>
                    </a>
                    <a href="https://www.instagram.com/kuncilinkid" target="_blank" rel="noopener noreferrer" class="flex items-center space-x-3 p-4 bg-pink-50 rounded-lg hover:bg-pink-100 transition-colors">
                        <i class="fab fa-instagram text-pink-600 text-2xl"></i>
                        <div>
                            <p class="font-semibold text-gray-900">Instagram</p>
                            <p class="text-sm text-gray-600">@kuncilinkid</p>
                        </div>
                    </a>
                    <a href="https://t.me/kuncilinkid" target="_blank" rel="noopener noreferrer" class="flex items-center space-x-3 p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                        <i class="fab fa-telegram text-blue-600 text-2xl"></i>
                        <div>
                            <p class="font-semibold text-gray-900">Telegram</p>
                            <p class="text-sm text-gray-600">@kuncilinkid</p>
                        </div>
                    </a>
                    <a href="https://www.facebook.com/kuncilink.id" target="_blank" rel="noopener noreferrer" class="flex items-center space-x-3 p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                        <i class="fab fa-facebook text-blue-600 text-2xl"></i>
                        <div>
                            <p class="font-semibold text-gray-900">Facebook</p>
                            <p class="text-sm text-gray-600">kuncilink.id</p>
                        </div>
                    </a>
                    <a href="https://whatsapp.com/channel/0029VbBMLJRFy72IP3CfAy3o" target="_blank" rel="noopener noreferrer" class="flex items-center space-x-3 p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
                        <i class="fab fa-whatsapp text-green-600 text-2xl"></i>
                        <div>
                            <p class="font-semibold text-gray-900">WhatsApp Channel</p>
                            <p class="text-sm text-gray-600">KunciLink Official</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!-- Contact Form -->
        <div class="bg-white rounded-lg shadow-sm border p-8">
            <h2 class="text-2xl font-semibold text-gray-900 mb-6">Kirim Pesan</h2>
            
            <form action="#" method="POST" class="space-y-6">
                @csrf
                
                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nama Lengkap *</label>
                        <input type="text" id="name" name="name" required 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               placeholder="Masukkan nama lengkap">
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
                        <input type="email" id="email" name="email" required 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                               placeholder="contoh@email.com">
                    </div>
                </div>

                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">Nomor Telepon</label>
                    <input type="tel" id="phone" name="phone" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="+62 851-5652-5726">
                </div>

                <div>
                    <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">Subjek *</label>
                    <select id="subject" name="subject" required 
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">Pilih subjek</option>
                        <option value="support">Bantuan Teknis</option>
                        <option value="billing">Pembayaran & Berlangganan</option>
                        <option value="partnership">Kerjasama & Partnership</option>
                        <option value="feature">Saran Fitur</option>
                        <option value="bug">Laporan Bug</option>
                        <option value="other">Lainnya</option>
                    </select>
                </div>

                <div>
                    <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Pesan *</label>
                    <textarea id="message" name="message" rows="6" required 
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                              placeholder="Tulis pesan Anda di sini..."></textarea>
                </div>

                <div class="flex items-center space-x-4">
                    <button type="submit" 
                            class="flex-1 bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                        <i class="fas fa-paper-plane mr-2"></i>
                        Kirim Pesan
                    </button>
                    <button type="reset" 
                            class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors">
                        Reset
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- FAQ Section -->
    <div class="mt-16">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Pertanyaan Umum</h2>
            <p class="text-gray-600">Temukan jawaban cepat untuk pertanyaan yang sering diajukan</p>
        </div>
        
        <div class="grid md:grid-cols-2 gap-6">
            <div class="bg-white rounded-lg shadow-sm border p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Bagaimana cara memulai dengan KunciLink?</h3>
                <p class="text-gray-600">Daftar akun gratis, pilih platform sosial media, buat link social unlock, dan bagikan ke audiens Anda.</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm border p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Apakah ada biaya untuk menggunakan KunciLink?</h3>
                <p class="text-gray-600">Kami menawarkan paket gratis dengan fitur dasar dan paket berbayar untuk fitur lengkap.</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm border p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Platform apa saja yang didukung?</h3>
                <p class="text-gray-600">YouTube, Instagram, TikTok, Twitter, Facebook, dan platform sosial media populer lainnya.</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm border p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Berapa lama waktu respon support?</h3>
                <p class="text-gray-600">Kami berusaha merespon dalam 24 jam untuk email dan dalam beberapa jam untuk WhatsApp.</p>
            </div>
        </div>
        
    </div>
    
    {{-- Social Sharing Section --}}
    <div class="mt-16">
        @include('components.social-sharing-buttons', [
            'showTitle' => true,
            'shareTitle' => 'Bagikan Halaman Kontak',
            'class' => 'my-4',
            'title' => 'Hubungi KunciLink.id - Social Unlock Platform',
            'description' => 'Hubungi tim KunciLink.id untuk bantuan, konsultasi, atau kerjasama. Support 24/7 untuk semua kebutuhan Anda.'
        ])
    </div>
</div>
@endsection