@extends('layouts.app')

@section('title', 'Hubungi Kami')
@section('meta_description', 'Hubungi Instrudigi untuk informasi buku, pelatihan TIK, dan produk elektronik. Kami siap melayani Anda.')

@section('content')

{{-- HERO --}}
<section class="relative py-28 overflow-hidden -mt-20 pt-28">
    <div class="absolute inset-0 hero-gradient"></div>
    <div class="hero-mesh"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 relative z-10 text-center">
        <span class="text-overline text-accent/80 block mb-4">Kontak</span>
        <h1 class="text-display text-4xl md:text-5xl text-white mb-4" style="animation: textReveal 1s ease forwards;">Ada yang Bisa <span class="text-gradient-accent">Kami Bantu?</span></h1>
        <p class="text-white/50 max-w-xl mx-auto">Jangan ragu untuk menghubungi kami. Tim kami siap merespons pertanyaan dan kebutuhan Anda.</p>
    </div>
    <div class="wave-divider"><svg viewBox="0 0 1200 120" preserveAspectRatio="none" fill="#fafbfd"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C57.1,118.92,156.63,69.08,321.39,56.44Z"/></svg></div>
</section>

{{-- Contact Info Cards --}}
<section class="relative z-20 -mt-8">
    <div class="max-w-5xl mx-auto px-4 sm:px-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @php
            $contacts = [
                ['icon' => 'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z', 'icon2' => 'M15 11a3 3 0 11-6 0 3 3 0 016 0z', 'title' => 'Alamat', 'value' => \App\Models\Setting::get('company_address', '-'), 'color' => 'blue'],
                ['icon' => 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z', 'icon2' => null, 'title' => 'Telepon', 'value' => \App\Models\Setting::get('company_phone', '-'), 'color' => 'accent'],
                ['icon' => 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z', 'icon2' => null, 'title' => 'Email', 'value' => \App\Models\Setting::get('email', '-'), 'color' => 'green'],
            ];
            @endphp
            @foreach($contacts as $index => $contact)
            <div class="animate-on-scroll delay-{{ $index * 100 }}">
                <div class="card-elevated p-6 text-center group hover:bg-primary-900 hover:text-white transition-all duration-500 h-full">
                    <div class="w-14 h-14 mx-auto mb-4 bg-{{ $contact['color'] === 'accent' ? 'accent' : ($contact['color'] . '-500') }}/10 rounded-2xl flex items-center justify-center group-hover:bg-white/10 transition-colors">
                        <svg class="w-6 h-6 text-{{ $contact['color'] === 'accent' ? 'accent' : ($contact['color'] . '-500') }} group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $contact['icon'] }}"/>
                            @if($contact['icon2'])<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $contact['icon2'] }}"/>@endif
                        </svg>
                    </div>
                    <h3 class="font-heading font-bold mb-1">{{ $contact['title'] }}</h3>
                    <p class="text-surface-500 text-sm group-hover:text-white/60">{{ $contact['value'] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Contact Form & Map --}}
<section class="py-24 max-w-7xl mx-auto px-4 sm:px-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
        {{-- Form --}}
        <div class="animate-on-scroll">
            <span class="text-overline text-accent mb-3 block">Kirim Pesan</span>
            <h2 class="text-headline text-2xl text-gray-900 mb-8">Formulir Kontak</h2>

            <form action="{{ route('contact.store') }}" method="POST" class="space-y-5">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Nama Lengkap</label>
                        <input type="text" name="name" value="{{ old('name') }}" required placeholder="Nama Anda"
                               class="input-premium">
                        @error('name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Email</label>
                        <input type="email" name="email" value="{{ old('email') }}" required placeholder="email@anda.com"
                               class="input-premium">
                        @error('email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Subjek</label>
                    <input type="text" name="subject" value="{{ old('subject') }}" required placeholder="Subjek pesan"
                           class="input-premium">
                    @error('subject')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Pesan</label>
                    <textarea name="message" rows="5" required placeholder="Tulis pesan Anda..."
                              class="input-premium resize-none">{{ old('message') }}</textarea>
                    @error('message')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <button type="submit" class="btn-accent w-full py-3.5 rounded-xl font-bold text-sm btn-shine inline-flex items-center justify-center gap-2 shadow-lg shadow-accent/20">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                    Kirim Pesan
                </button>
            </form>
        </div>

        {{-- Map --}}
        <div class="animate-slide-left">
            <span class="text-overline text-accent mb-3 block">Lokasi Kami</span>
            <h2 class="text-headline text-2xl text-gray-900 mb-8">Peta Lokasi</h2>
            <div class="card-elevated overflow-hidden aspect-[4/3]">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3973.5209!2d119.4207!3d-5.1778!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dbee37a5f11467d%3A0x3e9a3b1bffab6a!2sJl.%20Karunrung%20Raya%202%2C%20Karunrung%2C%20Kec.%20Rappocini%2C%20Kota%20Makassar%2C%20Sulawesi%20Selatan%2090222!5e0!3m2!1sid!2sid!4v1709000000000!5m2!1sid!2sid"
                    class="w-full h-full border-0"
                    allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>
    </div>
</section>

{{-- WhatsApp CTA --}}
<section class="py-16 bg-surface-100">
    <div class="max-w-4xl mx-auto px-4 sm:px-6">
        <div class="bg-gradient-to-r from-green-500 to-emerald-600 rounded-3xl p-8 md:p-12 text-center text-white relative overflow-hidden animate-on-scroll">
            <div class="absolute inset-0 grid-pattern pointer-events-none opacity-10"></div>
            <div class="relative z-10">
                <h2 class="text-display text-2xl md:text-3xl mb-3">Butuh Respon Cepat?</h2>
                <p class="text-white/80 mb-6 max-w-md mx-auto">Hubungi kami langsung via WhatsApp untuk mendapatkan respon lebih cepat.</p>
                <a href="https://wa.me/{{ \App\Models\Setting::get('whatsapp_number', '6282342801057') }}?text=Halo, saya ingin bertanya tentang layanan Instrudigi." target="_blank"
                   class="inline-flex items-center gap-2 bg-white text-green-600 px-8 py-4 rounded-xl font-bold btn-shine shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/></svg>
                    Chat via WhatsApp
                </a>
            </div>
        </div>
    </div>
</section>

@endsection