@extends('layouts.app')

@section('title', 'Kontak Kami - ' . ($siteName ?? 'Bursa Kerja'))
@section('description', 'Hubungi kami melalui email atau WhatsApp untuk pertanyaan seputar lowongan kerja dan layanan ' . ($siteName ?? 'Bursa Kerja'))

@section('content')
<div class="max-w-4xl mx-auto px-4 py-12">
    {{-- Header --}}
    <div class="mb-10 animate-fade-in-up">
        <a href="{{ route('home') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-indigo-600 mb-4">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
            Kembali ke Beranda
        </a>
        <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-3">Hubungi Kami</h1>
        <p class="text-gray-500 text-sm sm:text-base max-w-2xl">Punya pertanyaan atau membutuhkan bantuan? Jangan ragu untuk menghubungi kami melalui salah satu saluran di bawah ini.</p>
    </div>

    {{-- Contact Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-10 animate-fade-in-up" style="animation-delay: 0.1s">
        {{-- Email --}}
        <a href="mailto:{{ config('mail.from.address', 'admin@bursakerja.online') }}" class="group bg-white rounded-2xl border border-gray-100 shadow-sm p-6 hover:shadow-md hover:border-indigo-200 transition-all duration-200">
            <div class="flex items-start space-x-4">
                <div class="flex-shrink-0 w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center group-hover:bg-indigo-100 transition-colors">
                    <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
                </div>
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500 mb-1">Email</p>
                    <p class="text-base font-semibold text-slate-900 group-hover:text-indigo-600 transition-colors break-all">{{ config('mail.from.address', 'admin@bursakerja.online') }}</p>
                    <p class="text-xs text-gray-400 mt-1">Kami akan merespons dalam 1–2 hari kerja</p>
                </div>
            </div>
        </a>

        {{-- WhatsApp --}}
        @php
            $waNumber = \App\Models\Setting::get('admin_whatsapp', '6285781565256');
            $waDisplay = preg_replace('/^62/', '0', $waNumber);
            $waDisplay = preg_replace('/(\d{4})(\d{4})(\d+)/', '$1-$2-$3', $waDisplay);
        @endphp
        <a href="https://wa.me/{{ $waNumber }}" target="_blank" rel="noopener noreferrer" class="group bg-white rounded-2xl border border-gray-100 shadow-sm p-6 hover:shadow-md hover:border-green-200 transition-all duration-200">
            <div class="flex items-start space-x-4">
                <div class="flex-shrink-0 w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center group-hover:bg-green-100 transition-colors">
                    <svg class="w-6 h-6 text-green-600" 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-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                </div>
                <div class="min-w-0">
                    <p class="text-sm font-medium text-gray-500 mb-1">WhatsApp</p>
                    <p class="text-base font-semibold text-slate-900 group-hover:text-green-600 transition-colors">{{ $waDisplay }}</p>
                    <p class="text-xs text-gray-400 mt-1">Chat langsung dengan admin kami</p>
                </div>
            </div>
        </a>
    </div>

    {{-- Website Info --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 md:p-8 mb-10">
        <h2 class="text-lg font-semibold text-indigo-800 mb-4">Tentang {{ $siteName ?? 'Bursa Kerja' }}</h2>
        <div class="space-y-4 text-gray-600 text-sm leading-relaxed">
            <p>{{ $siteDescription ?? 'Temukan lowongan pekerjaan terbaru dan terpercaya' }}. Kami membantu menghubungkan pencari kerja dengan perusahaan yang tepat.</p>

            <div class="flex items-center space-x-3 pt-2">
                <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"/></svg>
                <a href="{{ config('app.url', 'https://bursakerja.online') }}" class="text-indigo-600 hover:underline font-medium">{{ str_replace(['https://', 'http://'], '', config('app.url', 'bursakerja.online')) }}</a>
            </div>
        </div>
    </div>

    {{-- FAQ Quick --}}
    <div class="bg-slate-50 rounded-2xl border border-gray-100 p-6 md:p-8">
        <h2 class="text-lg font-semibold text-indigo-800 mb-5">Pertanyaan Umum</h2>
        <div class="space-y-4">
            <div>
                <h3 class="text-sm font-semibold text-slate-800 mb-1">Bagaimana cara melamar pekerjaan?</h3>
                <p class="text-sm text-gray-600">Buat akun terlebih dahulu, lalu cari lowongan yang sesuai dan klik tombol "Lamar Sekarang" pada halaman detail lowongan.</p>
            </div>
            <div>
                <h3 class="text-sm font-semibold text-slate-800 mb-1">Apakah layanan ini gratis?</h3>
                <p class="text-sm text-gray-600">Ya, layanan pencarian dan pendaftaran lowongan kerja sepenuhnya gratis untuk pencari kerja.</p>
            </div>
            <div>
                <h3 class="text-sm font-semibold text-slate-800 mb-1">Bagaimana cara mengetahui status lamaran saya?</h3>
                <p class="text-sm text-gray-600">Anda dapat melihat status lamaran melalui halaman Dashboard setelah login ke akun Anda.</p>
            </div>
        </div>
    </div>
</div>
@endsection