@extends('layouts.app')

@section('title', $seoTitles['Kontak'] ?? 'Kontak')
@section('meta_description', $seoPages['Kontak'] ?? '')

@section('content')
<!-- HEADER -->
<section class="bg-gray-50 border-b border-gray-200 py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <span class="text-brand-red font-bold uppercase text-xs tracking-widest font-display">HUBUNGI KAMI</span>
        <h1 class="text-4xl sm:text-5xl font-extrabold font-display text-gray-900 mt-3">Hubungi PT Benang Merapi Perkasa</h1>
    </div>
</section>

<!-- CONTACT CONTAINER -->
<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
            
            <!-- Contact info & Maps -->
            <div>
                <h2 class="text-3xl font-bold font-display text-gray-900 mb-6">Informasi Kantor & Operational</h2>
                <p class="text-gray-600 leading-relaxed mb-8">
                    Silakan kunjungi kantor kami atau hubungi kami melalui saluran di bawah ini untuk konsultasi produk, permintaan penawaran harga (RFQ), atau kerja sama kemitraan.
                </p>
                <div class="space-y-6 mb-12">
                    <div class="flex items-start">
                        <div class="bg-brand-red/10 p-3 rounded mr-4 text-brand-red">
                            <!-- Location Pin icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 uppercase tracking-wider text-sm">Alamat Kantor</h4>
                            <p class="text-gray-600 text-sm mt-1">{{ $companySettings['address'] }}</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-brand-red/10 p-3 rounded mr-4 text-brand-red">
                            <!-- Email icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/></svg>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 uppercase tracking-wider text-sm">Email Resmi</h4>
                            <a href="mailto:{{ $companySettings['email'] }}" class="text-gray-600 hover:text-brand-red text-sm mt-1 block hover:underline">{{ $companySettings['email'] }}</a>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="bg-brand-red/10 p-3 rounded mr-4 text-brand-red">
                            <!-- Phone/WA icon -->
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 uppercase tracking-wider text-sm">WhatsApp Business</h4>
                            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $companySettings['whatsapp']) }}" class="text-gray-600 hover:text-brand-red text-sm mt-1 block hover:underline">{{ $companySettings['whatsapp'] }}</a>
                        </div>
                    </div>
                </div>

                <!-- Google Maps Cilegon Embed -->
                <div class="border border-gray-200 rounded-2xl overflow-hidden aspect-video shadow-sm">
                    <iframe 
                        src="https://maps.google.com/maps?q={{ urlencode($companySettings['address'] ?? 'Cilegon, Banten') }}&t=&z=13&ie=UTF8&iwloc=&output=embed" 
                        class="w-full h-full border-0" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>

            <!-- Livewire Contact Form -->
            <div class="bg-gray-50 border border-gray-200 p-8 sm:p-10 rounded-2xl shadow-sm text-gray-800">
                <h3 class="text-2xl font-bold font-display text-gray-900 mb-6">Formulir Pesan / RFQ</h3>
                @livewire('contact-form')
            </div>

        </div>
    </div>
</section>
@endsection