@extends('page.layouts.app')

@section('title', 'Acente Pro Max - Hayallerinizdeki Tatil Bir Tık Uzağınızda')

@section('content')

    {{-- Hero Section with Modern Search Engine --}}
    <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
        {{-- Animated Background --}}
        <div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
            <div class="absolute inset-0 opacity-30">
                <div
                    class="absolute top-0 -left-4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
                <div
                    class="absolute top-0 -right-4 w-72 h-72 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
                <div
                    class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
            </div>
        </div>

        <div
            class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djRoLTR2NGgtNHYtNGgtNHYtNGg0di00aDR2NGg0em0wLTMwVjBoLTR2NGgtNHY0aDR2NGg0VjhoNFY0aC00ek02IDM0di00SDR2NGgzeiIvPjwvZz48L2c+PC9zdmc+')] opacity-20"></div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 w-full">
            <div class="text-center mb-16">
                <div
                    class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-6 py-3 mb-8">
                <span class="relative flex h-3 w-3">
                    <span
                        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
                </span>
                    <span class="text-white font-semibold">Türkiye'nin Yeni Acente Yazılımı</span>
                </div>

                <h1 class="text-5xl md:text-7xl lg:text-8xl font-black text-white mb-8 leading-tight">
                    Acentenizin Bütün İhtiyaçları
                    <br>
                    <span
                        class="bg-gradient-to-r from-yellow-400 via-orange-400 to-pink-400 bg-clip-text text-transparent">
                    Bir Tık Uzağınızda
                </span>
                </h1>
                <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto font-light">
                    Acente Pro Max şu anda turizm acentelerinin, daha sonrasında ise farklı sektörlerdeki acentelerin
                    ihtiyaçlarını karşılamak için tasarlanmış yeni nesil bir operasyon yönetim yazılımıdır!
                </p>
            </div>
        </div>
    </section>

    {{-- Popular Agencies Section --}}
    <section class="py-24 bg-white relative" id="agencies">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <div
                    class="inline-flex items-center gap-2 bg-blue-100 text-blue-700 px-6 py-3 rounded-full font-bold mb-6">
                    <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                    Onaylı ve Güvenilir
                </div>
                <h2 class="text-5xl font-black text-gray-900 mb-6">Acente Ortaklarımız</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Deneyimli ve güvenilir acentelerimizle tanışın</p>
            </div>

            @if($agencies->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-8">
                    @foreach($agencies as $agency)
                        <a href="{{ route('customer.agency.show', $agency->slug) }}"
                           class="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-200 rounded-3xl p-8 hover:border-purple-500 hover:shadow-2xl transition-all duration-300 group">
                            <div class="flex items-center gap-4 mb-6">
                                @if($agency->logo)
                                    <img src="{{ asset('storage/' . $agency->logo) }}" alt="{{ $agency->name }}"
                                         class="w-20 h-20 rounded-2xl object-cover border-2 border-gray-200">
                                @else
                                    <div
                                        class="w-20 h-20 bg-gradient-to-br from-purple-600 to-pink-600 rounded-2xl flex items-center justify-center text-white font-black text-3xl shadow-lg">
                                        {{ strtoupper(substr($agency->name, 0, 1)) }}
                                    </div>
                                @endif
                                <div class="flex-1">
                                    <h3 class="font-bold text-lg text-gray-900 group-hover:text-purple-600 transition-colors line-clamp-1">
                                        {{ $agency->name }}
                                    </h3>
                                    <div class="flex items-center gap-1 text-sm text-gray-600">
                                        <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                        </svg>
                                        <span class="font-semibold">4.{{ rand(6,9) }}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-3 text-sm text-gray-600 mb-6">
                                <div class="flex items-center gap-2">
                                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor"
                                         viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <span class="font-medium">{{ $agency->tours_count }} Aktif Tur</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <svg class="w-5 h-5 text-purple-600" 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"/>
                                    </svg>
                                    <span>{{ $agency->city ?? 'Türkiye' }}</span>
                                </div>
                            </div>

                            <div
                                class="block w-full text-center px-6 py-4 bg-gradient-to-r from-purple-50 to-pink-50 text-purple-700 rounded-2xl font-bold hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all">
                                Turları İncele
                            </div>
                        </a>
                    @endforeach
                </div>

                <div class="text-center mt-16">
                    <a href="#agencies"
                       class="inline-flex items-center gap-3 px-10 py-5 border-2 border-gray-900 text-gray-900 rounded-2xl font-bold text-lg hover:bg-gray-900 hover:text-white hover:shadow-xl transition-all">
                        <span>Tüm Acenteleri Gör</span>
                        <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="M17 8l4 4m0 0l-4 4m4-4H3"/>
                        </svg>
                    </a>
                </div>
            @else
                <div class="text-center py-20">
                    <div class="inline-flex items-center justify-center w-24 h-24 bg-gray-100 rounded-full mb-6">
                        <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-2">Henüz Acente Eklenmemiş</h3>
                    <p class="text-gray-600">İlk acente olmak için hemen kaydolun!</p>
                </div>
            @endif
        </div>
    </section>

    {{-- Testimonials --}}
    <section class="py-24 bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <div class="inline-flex items-center gap-2 bg-white px-6 py-3 rounded-full font-bold mb-6 shadow-lg">
                    <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    Müşteri Yorumları
                </div>
                <h2 class="text-5xl font-black text-gray-900 mb-6">Mutlu Müşterilerimiz</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Binlerce memnun müşterimizden bazıları ne diyor?</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @for($i = 1; $i <= 3; $i++)
                    <div
                        class="bg-white rounded-3xl p-10 shadow-xl hover:shadow-2xl transition-all border-2 border-gray-100 hover:border-purple-200">
                        <div class="flex items-center gap-1 mb-6">
                            @for($j = 1; $j <= 5; $j++)
                                <svg class="w-6 h-6 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                </svg>
                            @endfor
                        </div>

                        <p class="text-gray-700 text-lg mb-8 leading-relaxed font-medium">
                            "Harika bir deneyimdi! Tur organizasyonu mükemmeldi, rehberimiz çok bilgiliydi. Acente Pro
                            Max'i kullanmak güven vericiydi. Kesinlikle tekrar tercih edeceğim."
                        </p>

                        <div class="flex items-center gap-4 pt-6 border-t border-gray-100">
                            <div
                                class="w-16 h-16 bg-gradient-to-br from-purple-600 to-pink-600 rounded-2xl flex items-center justify-center text-white font-black text-2xl shadow-lg">
                                M{{ $i }}
                            </div>
                            <div>
                                <div class="font-bold text-gray-900 text-lg">Ahmet Yılmaz</div>
                                <div class="text-sm text-gray-600">Kapadokya Turu • {{ rand(1,6) }} ay önce</div>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </section>

    {{-- Contact Form --}}
    <section class="py-24 bg-white" id="contact">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <div
                    class="inline-flex items-center gap-2 bg-purple-100 text-purple-700 px-6 py-3 rounded-full font-bold mb-6">
                    <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="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>
                    İletişime Geçin
                </div>
                <h2 class="text-5xl font-black text-gray-900 mb-6">Bize Ulaşın</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Sorularınız mı var? Size yardımcı olmaktan mutluluk
                    duyarız!</p>
            </div>

            <form action="{{ route('customer.contact.submit') }}" method="POST"
                  class="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-200 rounded-3xl p-10 shadow-xl">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-3">Adınız Soyadınız</label>
                        <input type="text" name="name" required
                               class="w-full px-5 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 transition-all bg-white text-base">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-3">E-posta Adresiniz</label>
                        <input type="email" name="email" required
                               class="w-full px-5 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 transition-all bg-white text-base">
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-700 mb-3">Konu</label>
                    <input type="text" name="subject" required
                           class="w-full px-5 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 transition-all bg-white text-base">
                </div>

                <div class="mb-8">
                    <label class="block text-sm font-bold text-gray-700 mb-3">Mesajınız</label>
                    <textarea name="message" rows="6" required
                              class="w-full px-5 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:ring-4 focus:ring-purple-100 transition-all bg-white text-base resize-none"></textarea>
                </div>

                <button type="submit"
                        class="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-orange-500 text-white py-5 rounded-2xl font-bold text-lg hover:shadow-2xl hover:scale-[1.02] transition-all">
                    Mesajı Gönder
                </button>
            </form>
        </div>
    </section>

    {{-- About Section --}}
    <section
        class="py-24 bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 text-white relative overflow-hidden"
        id="about">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-0 left-0 w-96 h-96 bg-purple-500 rounded-full filter blur-3xl"></div>
            <div class="absolute bottom-0 right-0 w-96 h-96 bg-pink-500 rounded-full filter blur-3xl"></div>
        </div>

        <div class="relative 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 items-center">
                <div>
                    <div
                        class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 px-6 py-3 rounded-full font-bold mb-8">
                        <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="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                        Hakkımızda
                    </div>
                    <h2 class="text-5xl font-black mb-8">Türkiye'nin En Büyük Turizm Platformu</h2>
                    <p class="text-lg text-gray-300 mb-6 leading-relaxed">
                        Acente Pro Max, 2024 yılında kurulan ve Türkiye'nin en büyük online turizm platformu olma
                        yolunda ilerleyen bir teknoloji şirketidir. Müşterilerimize en iyi tur deneyimini sunmak için
                        yüzlerce güvenilir acente ile çalışmaktayız.
                    </p>
                    <p class="text-lg text-gray-300 mb-10 leading-relaxed">
                        Misyonumuz, herkesin hayalindeki tatili kolayca bulabilmesini, güvenle rezervasyon yapabilmesini
                        ve unutulmaz anılar biriktirmesini sağlamaktır.
                    </p>

                    <div class="grid grid-cols-2 gap-6">
                        <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8">
                            <div
                                class="text-5xl font-black bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-3">
                                500+
                            </div>
                            <div class="text-gray-300 font-semibold">Güvenilir Acente</div>
                        </div>
                        <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8">
                            <div
                                class="text-5xl font-black bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent mb-3">
                                50K+
                            </div>
                            <div class="text-gray-300 font-semibold">Mutlu Müşteri</div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-6">
                    <div class="space-y-6">
                        <img src="https://picsum.photos/400/500?random=10" alt="About"
                             class="rounded-3xl shadow-2xl border-4 border-white/10">
                        <img src="https://picsum.photos/400/300?random=11" alt="About"
                             class="rounded-3xl shadow-2xl border-4 border-white/10">
                    </div>
                    <div class="space-y-6 mt-12">
                        <img src="https://picsum.photos/400/300?random=12" alt="About"
                             class="rounded-3xl shadow-2xl border-4 border-white/10">
                        <img src="https://picsum.photos/400/500?random=13" alt="About"
                             class="rounded-3xl shadow-2xl border-4 border-white/10">
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <script>
            // Search tabs
            const searchTabs = document.querySelectorAll('.search-tab');
            const searchContents = document.querySelectorAll('.search-content');

            searchTabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    searchTabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');

                    const targetTab = tab.dataset.tab;
                    searchContents.forEach(content => content.classList.add('hidden'));
                    document.getElementById(`${targetTab}-search`).classList.remove('hidden');
                });
            });

            // Advanced filters toggle
            document.getElementById('advanced-filters-toggle').addEventListener('click', function () {
                const filters = document.getElementById('advanced-filters');
                const icon = this.querySelector('svg');
                filters.classList.toggle('hidden');
                icon.style.transform = filters.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
            });

            // Toast notification
            @if(session('success'))
            showToast('{{ session('success') }}', 'success');
            @endif

            @if(session('error'))
            showToast('{{ session('error') }}', 'error');
            @endif

            function showToast(message, type = 'success') {
                const toast = document.createElement('div');
                toast.className = `fixed bottom-4 right-4 px-6 py-4 rounded-xl shadow-2xl z-50 transform transition-all duration-300 ${
                    type === 'success' ? 'bg-green-500' : 'bg-red-500'
                } text-white font-semibold`;
                toast.textContent = message;
                toast.style.transform = 'translateY(100px)';

                document.body.appendChild(toast);

                setTimeout(() => {
                    toast.style.transform = 'translateY(0)';
                }, 100);

                setTimeout(() => {
                    toast.style.transform = 'translateY(100px)';
                    setTimeout(() => toast.remove(), 300);
                }, 3000);
            }

            // Intersection Observer for animations
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, observerOptions);

            document.querySelectorAll('.grid > div, .grid > a').forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(30px)';
                card.style.transition = `all 0.6s ease ${index * 0.1}s`;
                observer.observe(card);
            });

            // Number counter animation for stats
            function animateValue(element, start, end, duration) {
                let startTimestamp = null;
                const step = (timestamp) => {
                    if (!startTimestamp) startTimestamp = timestamp;
                    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                    const value = Math.floor(progress * (end - start) + start);
                    element.textContent = value.toLocaleString('tr-TR');
                    if (progress < 1) {
                        window.requestAnimationFrame(step);
                    }
                };
                window.requestAnimationFrame(step);
            }

            const statsObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const statElements = entry.target.querySelectorAll('.text-3xl, .text-4xl, .text-5xl');
                        statElements.forEach(el => {
                            const text = el.textContent;
                            const num = parseInt(text.replace(/\D/g, ''));
                            if (num) {
                                animateValue(el, 0, num, 2000);
                            }
                        });
                        statsObserver.unobserve(entry.target);
                    }
                });
            }, {threshold: 0.5});

            document.querySelectorAll('.grid.grid-cols-2').forEach(el => {
                statsObserver.observe(el);
            });

            // Form validation
            const contactForm = document.querySelector('form[action*="contact"]');
            if (contactForm) {
                contactForm.addEventListener('submit', function (e) {
                    const inputs = this.querySelectorAll('input[required], textarea[required]');
                    let isValid = true;

                    inputs.forEach(input => {
                        if (!input.value.trim()) {
                            isValid = false;
                            input.classList.add('border-red-500');
                            input.classList.remove('border-gray-200');
                        } else {
                            input.classList.remove('border-red-500');
                            input.classList.add('border-gray-200');
                        }
                    });

                    if (!isValid) {
                        e.preventDefault();
                        showToast('Lütfen tüm zorunlu alanları doldurun.', 'error');
                    }
                });
            }
        </script>
    @endpush

@endsection