@extends('layouts.app')

@section('title', 'Hubungi Kami - FIN-ANALYSIS PRO')

@push('styles')
<style>
/* Dark mode for pages - Background and text */
.dark {
    color: #f1f5f9 !important;
}

.dark .min-h-screen.bg-gradient-to-br {
    background: linear-gradient(to bottom right, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

.dark .text-gray-600,
.dark [style*="color:rgb(75, 85, 99)"] {
    color: #cbd5e1 !important;
}

.dark .text-gray-700 {
    color: #cbd5e1 !important;
}

.dark .bg-white {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark .bg-gray-50,
.dark .bg-gray-100 {
    background: #334155 !important;
    border-color: #475569 !important;
}

.dark .bg-blue-100,
.dark .bg-purple-100,
.dark .bg-emerald-100 {
    background: #334155 !important;
}

.dark .text-blue-600,
.dark .text-purple-600,
.dark .text-emerald-600,
.dark .text-orange-600 {
    color: #60a5fa !important;
}

.dark .border-l-4 {
    border-color: #60a5fa !important;
}

.dark .border-2.border-gray-200 {
    border-color: #475569 !important;
}

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="tel"],
.dark textarea,
.dark select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="tel"]:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #60a5fa !important;
    outline: none !important;
}

.dark .rounded-full {
    border-color: #475569 !important;
}

.dark .text-sm.text-gray-700 {
    color: #cbd5e1 !important;
}

.dark .text-red-500 {
    color: #ef4444 !important;
}

.dark .text-red-600 {
    color: #dc2626 !important;
}

.dark .text-green-600 {
    color: #16a34a !important;
}

.dark .hover\:text-blue-600:hover {
    color: #60a5fa !important;
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5) !important;
}

.dark .hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.5) !important;
}

/* Light mode colors */
.light .text-gray-900 {
    color: #0f172a !important;
}

.light .text-gray-600 {
    color: #475569 !important;
}

.light .text-gray-700 {
    color: #334155 !important;
}
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
    <!-- Hero Section -->
    <div class="pt-20 pb-16 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto text-center">
            <div class="inline-block mb-6 px-4 py-2 bg-blue-100 rounded-full">
                <span class="text-blue-600 font-semibold text-sm">HUBUNGI KAMI</span>
            </div>
            <h1 class="text-5xl sm:text-6xl font-bold text-gray-900 mb-6">
                Kami Siap <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Membantu</span>
            </h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
                Tim support kami tersedia 24/7 untuk menjawab setiap pertanyaan dan memberikan solusi terbaik
            </p>
        </div>
    </div>

    <!-- Main Content -->
    <div class="py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-6xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
                <div class="bg-white rounded-2xl shadow-lg p-8 border-l-4 border-blue-600 hover:shadow-xl transition">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-map-marker-alt text-2xl text-blue-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Alamat</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Jl. Contoh No. 123<br>
                        <span class="text-sm">Jakarta Selatan, 12345</span>
                    </p>
                </div>

                <div class="bg-white rounded-2xl shadow-lg p-8 border-l-4 border-purple-600 hover:shadow-xl transition">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-phone-alt text-2xl text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Telepon</h3>
                    <p class="text-gray-600 leading-relaxed">
                        <a href="tel:+622112345678" class="hover:text-blue-600">+62 21 1234 5678</a><br>
                        <a href="tel:+6281234567890" class="hover:text-blue-600 text-sm">+62 812 3456 7890</a>
                    </p>
                </div>

                <div class="bg-white rounded-2xl shadow-lg p-8 border-l-4 border-emerald-600 hover:shadow-xl transition">
                    <div class="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-envelope text-2xl text-emerald-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Email</h3>
                    <p class="text-gray-600 leading-relaxed">
                        <a href="mailto:info@finanalysis.pro" class="hover:text-blue-600">info@finanalysis.pro</a><br>
                        <a href="mailto:support@finanalysis.pro" class="hover:text-blue-600 text-sm">support@finanalysis.pro</a>
                    </p>
                </div>
            </div>

            <!-- Contact Form & Map -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Contact Form -->
                <div class="bg-white rounded-2xl shadow-lg p-8">
                    <h2 class="text-3xl font-bold text-gray-900 mb-8">Kirim Pesan Langsung</h2>
                    
                    <form action="{{ route('public.contact.send') }}" method="POST" class="space-y-6">
                        @csrf
                        
                        <div>
                            <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
                                Nama Lengkap <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="name" id="name"
                                   class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-blue-600 @error('name') border-red-500 @enderror"
                                   value="{{ old('name') }}" placeholder="Nama Anda" required>
                            @error('name')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
                                Email <span class="text-red-500">*</span>
                            </label>
                            <input type="email" name="email" id="email"
                                   class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-blue-600 @error('email') border-red-500 @enderror"
                                   value="{{ old('email') }}" placeholder="email@contoh.com" required>
                            @error('email')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="phone" class="block text-sm font-semibold text-gray-700 mb-2">
                                Nomor Telepon
                            </label>
                            <input type="tel" name="phone" id="phone"
                                   class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-blue-600"
                                   placeholder="+62 812 3456 7890" value="{{ old('phone') }}">
                        </div>

                        <div>
                            <label for="subject" class="block text-sm font-semibold text-gray-700 mb-2">
                                Subjek <span class="text-red-500">*</span>
                            </label>
                            <select name="subject" id="subject"
                                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-blue-600"
                                    required>
                                <option value="">Pilih Topik</option>
                                <option value="general">Pertanyaan Umum</option>
                                <option value="support">Technical Support</option>
                                <option value="billing">Billing & Payment</option>
                                <option value="enterprise">Enterprise Solution</option>
                                <option value="feedback">Feedback & Suggestion</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
                                Pesan <span class="text-red-500">*</span>
                            </label>
                            <textarea name="message" id="message" rows="6"
                                      class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-blue-600 @error('message') border-red-500 @enderror resize-none"
                                      placeholder="Tuliskan pesan Anda di sini..." required>{{ old('message') }}</textarea>
                            @error('message')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <button type="submit" class="w-full py-3 px-6 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold rounded-lg hover:shadow-lg transition flex items-center justify-center">
                            <i class="fas fa-paper-plane mr-2"></i>
                            Kirim Pesan
                        </button>
                    </form>
                </div>

                <!-- Info -->
                <div class="bg-white rounded-2xl shadow-lg p-8 h-full">
                    <h3 class="text-2xl font-bold text-gray-900 mb-6">Jam Operasional</h3>
                    
                    <div class="space-y-4 mb-8">
                        <div class="flex justify-between items-center pb-4 border-b">
                            <span class="text-gray-700">Senin - Jumat</span>
                            <span class="font-semibold text-gray-900">09:00 - 18:00 WIB</span>
                        </div>
                        <div class="flex justify-between items-center pb-4 border-b">
                            <span class="text-gray-700">Sabtu</span>
                            <span class="font-semibold text-gray-900">10:00 - 16:00 WIB</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-700">Minggu</span>
                            <span class="font-semibold text-gray-900">Tutup</span>
                        </div>
                    </div>

                    <div class="border-t pt-8">
                        <h4 class="font-bold text-gray-900 mb-4">Response Time</h4>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-600 mt-1 mr-3 flex-shrink-0"></i>
                                <span class="text-gray-700"><strong>Email:</strong> Dalam 24 jam</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-600 mt-1 mr-3 flex-shrink-0"></i>
                                <span class="text-gray-700"><strong>Chat:</strong> Realtime</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-600 mt-1 mr-3 flex-shrink-0"></i>
                                <span class="text-gray-700"><strong>Telepon:</strong> Instant</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Map -->
                    <div class="mt-8 rounded-xl overflow-hidden">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126748.56347862248!2d106.716666!3d-6.216666!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf0fdad786a2!2sJakarta!5e0!3m2!1sen!2sid!4v1620000000000!5m2!1sen!2sid"
                                width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Social Media Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl font-bold text-gray-900 mb-8">Ikuti Kami</h2>
            <p class="text-gray-600 mb-8">Dapatkan update terbaru dan tips keuangan di media sosial kami</p>
            
            <div class="flex justify-center gap-6">
                <a href="#" class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-blue-600 text-white hover:bg-blue-700 transition">
                    <i class="fab fa-facebook-f text-xl"></i>
                </a>
                <a href="#" class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-blue-400 text-white hover:bg-blue-500 transition">
                    <i class="fab fa-twitter text-xl"></i>
                </a>
                <a href="#" class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-pink-600 text-white hover:bg-pink-700 transition">
                    <i class="fab fa-instagram text-xl"></i>
                </a>
                <a href="#" class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-red-600 text-white hover:bg-red-700 transition">
                    <i class="fab fa-youtube text-xl"></i>
                </a>
                <a href="#" class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-blue-700 text-white hover:bg-blue-800 transition">
                    <i class="fab fa-linkedin-in text-xl"></i>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection