@extends('layout')

@section('title', 'Cek Coverage - TrimNet ISP')
@section('description', 'Cek ketersediaan jaringan TrimNet di wilayah Anda. Masukkan alamat untuk mengetahui coverage internet fiber optik kami.')

@section('content')    <!-- Hero Section -->
    <section class="pt-16 bg-gradient-to-br from-blue-600 to-blue-800 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="text-center animate-fade-in-up">
                <h1 class="text-4xl md:text-6xl font-bold mb-6">
                    Cek <span class="text-yellow-400">Coverage</span>
                </h1>
                <p class="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto">
                    Pastikan alamat Anda sudah terjangkau jaringan fiber optik TrimNet
                </p>
            </div>
        </div>
    </section>    <!-- Coverage Checker -->
    <section class="py-20 bg-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white rounded-lg shadow-lg p-8 animate-on-scroll">
                <h2 class="text-3xl font-bold text-gray-900 mb-6 text-center">Cek Ketersediaan Jaringan</h2>
                <form class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-gray-700 text-sm font-medium mb-2">Provinsi</label>
                            <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Pilih Provinsi</option>
                                <option value="jakarta">DKI Jakarta</option>
                                <option value="jawa-barat">Jawa Barat</option>
                                <option value="jawa-tengah">Jawa Tengah</option>
                                <option value="jawa-timur">Jawa Timur</option>
                                <option value="banten">Banten</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-700 text-sm font-medium mb-2">Kota/Kabupaten</label>
                            <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">Pilih Kota/Kabupaten</option>
                                <option value="jakarta-selatan">Jakarta Selatan</option>
                                <option value="jakarta-pusat">Jakarta Pusat</option>
                                <option value="jakarta-utara">Jakarta Utara</option>
                                <option value="bandung">Bandung</option>
                                <option value="surabaya">Surabaya</option>
                            </select>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-2">Alamat Lengkap</label>
                        <textarea rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Masukkan alamat lengkap untuk pengecekan yang lebih akurat"></textarea>
                    </div>
                    
                    <button type="submit" class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition">
                        Cek Coverage
                    </button>
                </form>
            </div>
        </div>
    </section>    <!-- Coverage Map -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-on-scroll">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Area Layanan TrimNet
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Jaringan fiber optik kami telah menjangkau kota-kota besar di Indonesia
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($cities as $city)
                    <div class="bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition animate-on-scroll">
                        <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ $city }}</h3>
                        <p class="text-green-600 font-medium">Tersedia</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>    <!-- Coming Soon Areas -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-on-scroll">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                    Segera Hadir
                </h2>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                    Kami terus memperluas jangkauan jaringan ke kota-kota lainnya
                </p>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="bg-yellow-50 rounded-lg p-4 text-center">
                    <h4 class="font-semibold text-gray-900">Medan</h4>
                    <p class="text-sm text-yellow-600">Q3 2025</p>
                </div>
                <div class="bg-yellow-50 rounded-lg p-4 text-center">
                    <h4 class="font-semibold text-gray-900">Balikpapan</h4>
                    <p class="text-sm text-yellow-600">Q4 2025</p>
                </div>
                <div class="bg-yellow-50 rounded-lg p-4 text-center">
                    <h4 class="font-semibold text-gray-900">Manado</h4>
                    <p class="text-sm text-yellow-600">Q1 2026</p>
                </div>
                <div class="bg-yellow-50 rounded-lg p-4 text-center">
                    <h4 class="font-semibold text-gray-900">Pekanbaru</h4>
                    <p class="text-sm text-yellow-600">Q2 2026</p>
                </div>
            </div>
        </div>
    </section>    <!-- CTA Section -->
    <section class="py-20 bg-blue-600">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center animate-on-scroll">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                Area Anda Belum Terjangkau?
            </h2>
            <p class="text-blue-100 text-lg mb-8 max-w-2xl mx-auto">
                Daftarkan permintaan layanan dan kami akan memberitahu Anda segera setelah jaringan tersedia di area Anda.
            </p>
            <a href="{{ route('contact') }}" class="inline-block bg-yellow-400 text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition">
                Daftar Permintaan Layanan
            </a>
        </div>
    </section>
@endsection