@extends('layouts.app')

@section('title', 'Buy RMB - Currency Exchange Platform')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
    @include('components.navbar')
    
    <!-- Hero Section -->
    <section class="container mx-auto px-4 py-16 md:py-24">
        <div class="max-w-6xl mx-auto">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="space-y-6">
                    <div class="inline-block px-4 py-2 bg-primary/10 rounded-full text-primary text-sm font-semibold mb-4">
                        🚀 Trusted by 10,000+ customers
                    </div>
                    <h1 class="text-5xl md:text-6xl font-bold text-gray-900 leading-tight">
                        Exchange <span class="text-primary">GHS to CNY</span> in Minutes
                    </h1>
                    <p class="text-xl text-gray-600 leading-relaxed">
                        Fast, secure, and reliable currency exchange service. Get the best rates with instant transfers to China.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 pt-4">
                        <a href="{{ route('exchange') }}" class="px-8 py-4 bg-primary text-white rounded-xl font-semibold hover:bg-primary/90 transition shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 text-center">
                            Start Exchange Now →
                        </a>
                        <a href="{{ route('login') }}" class="px-8 py-4 border-2 border-gray-300 rounded-xl font-semibold hover:bg-gray-50 transition text-center">
                            Sign In
                        </a>
                    </div>
                    <div class="flex items-center gap-8 pt-6">
                        <div>
                            <div class="text-3xl font-bold text-gray-900">₵50M+</div>
                            <div class="text-sm text-gray-600">Exchanged</div>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-gray-900">5-30min</div>
                            <div class="text-sm text-gray-600">Delivery</div>
                        </div>
                        <div>
                            <div class="text-3xl font-bold text-gray-900">24/7</div>
                            <div class="text-sm text-gray-600">Support</div>
                        </div>
                    </div>
                </div>
                <div class="relative">
                    <div class="bg-white rounded-2xl shadow-2xl p-8 border border-gray-100">
                        <div class="space-y-6">
                            <div class="flex items-center justify-between pb-4 border-b">
                                <span class="text-sm font-medium text-gray-600">Today's Rate</span>
                                <div class="text-sm">
                                    <span class="font-bold text-emerald-600">1 GHS</span>
                                    <span class="text-gray-400 mx-2">=</span>
                                    <span class="font-bold text-gray-900">0.57 CNY</span>
                                </div>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-700 mb-2 block">You send</label>
                                <div class="relative">
                                    <span class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-semibold text-gray-400">₵</span>
                                    <input type="text" value="1,000.00" readonly class="w-full pl-10 pr-16 py-4 text-xl font-semibold bg-gray-50 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-primary">
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-sm font-medium text-gray-500">GHS</span>
                                </div>
                            </div>
                            <div class="flex justify-center">
                                <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
                                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
                                    </svg>
                                </div>
                            </div>
                            <div>
                                <label class="text-sm font-medium text-gray-700 mb-2 block">They receive</label>
                                <div class="relative">
                                    <span class="absolute left-4 top-1/2 -translate-y-1/2 text-xl font-semibold text-gray-400">¥</span>
                                    <input type="text" value="570.00" readonly class="w-full pl-10 pr-16 py-4 text-xl font-semibold bg-primary/5 border-2 border-primary/20 rounded-xl">
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-sm font-medium text-gray-500">CNY</span>
                                </div>
                            </div>
                            <div class="text-center text-sm text-gray-600 bg-emerald-50 py-3 rounded-lg">
                                ⚡ Arrives in <span class="font-semibold text-emerald-600">5–30 minutes</span>
                            </div>
                        </div>
                    </div>
                    <div class="absolute -z-10 top-8 -right-8 w-72 h-72 bg-primary/20 rounded-full blur-3xl"></div>
                    <div class="absolute -z-10 -bottom-8 -left-8 w-72 h-72 bg-indigo-200/40 rounded-full blur-3xl"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="bg-white py-20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-900 mb-4">Why Choose Us?</h2>
                <p class="text-xl text-gray-600">The fastest and most reliable way to send money to China</p>
            </div>
            <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-2xl border border-blue-100 hover:shadow-xl transition">
                    <div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mb-6">
                        <svg class="w-7 h-7 text-white" 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>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Lightning Fast</h3>
                    <p class="text-gray-600">Money arrives in 5-30 minutes. No waiting days for your transfer to complete.</p>
                </div>
                <div class="bg-gradient-to-br from-emerald-50 to-green-50 p-8 rounded-2xl border border-emerald-100 hover:shadow-xl transition">
                    <div class="w-14 h-14 bg-emerald-600 rounded-xl flex items-center justify-center mb-6">
                        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">100% Secure</h3>
                    <p class="text-gray-600">Bank-level encryption and security. Your money and data are always protected.</p>
                </div>
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-2xl border border-purple-100 hover:shadow-xl transition">
                    <div class="w-14 h-14 bg-purple-600 rounded-xl flex items-center justify-center mb-6">
                        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Best Rates</h3>
                    <p class="text-gray-600">Competitive exchange rates with transparent pricing. No hidden fees.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Payment Methods -->
    <section class="container mx-auto px-4 py-20">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4">Supported Payment Methods</h2>
            <p class="text-xl text-gray-600">Choose your preferred way to pay</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-5xl mx-auto">
            <div class="bg-white p-8 border-2 border-gray-200 rounded-2xl text-center hover:border-primary hover:shadow-lg transition group">
                <div class="text-5xl mb-4 group-hover:scale-110 transition">💳</div>
                <p class="font-semibold text-gray-900">Mobile Money</p>
                <p class="text-sm text-gray-500 mt-2">MTN, Vodafone, AirtelTigo</p>
            </div>
            <div class="bg-white p-8 border-2 border-gray-200 rounded-2xl text-center hover:border-primary hover:shadow-lg transition group">
                <div class="text-5xl mb-4 group-hover:scale-110 transition">🏦</div>
                <p class="font-semibold text-gray-900">Bank Transfer</p>
                <p class="text-sm text-gray-500 mt-2">All major banks</p>
            </div>
            <div class="bg-white p-8 border-2 border-gray-200 rounded-2xl text-center hover:border-primary hover:shadow-lg transition group">
                <div class="text-5xl mb-4 group-hover:scale-110 transition">💰</div>
                <p class="font-semibold text-gray-900">Cash Pickup</p>
                <p class="text-sm text-gray-500 mt-2">Multiple locations</p>
            </div>
            <div class="bg-white p-8 border-2 border-gray-200 rounded-2xl text-center hover:border-primary hover:shadow-lg transition group">
                <div class="text-5xl mb-4 group-hover:scale-110 transition">📱</div>
                <p class="font-semibold text-gray-900">E-Wallet</p>
                <p class="text-sm text-gray-500 mt-2">WeChat, Alipay</p>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="bg-gradient-to-r from-primary to-indigo-600 py-20">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-5xl mx-auto text-center">
                <div class="text-white">
                    <div class="text-5xl font-bold mb-2">10K+</div>
                    <p class="text-blue-100 text-lg">Happy Customers</p>
                </div>
                <div class="text-white">
                    <div class="text-5xl font-bold mb-2">₵50M+</div>
                    <p class="text-blue-100 text-lg">Total Exchanged</p>
                </div>
                <div class="text-white">
                    <div class="text-5xl font-bold mb-2">5-30min</div>
                    <p class="text-blue-100 text-lg">Average Delivery</p>
                </div>
                <div class="text-white">
                    <div class="text-5xl font-bold mb-2">24/7</div>
                    <p class="text-blue-100 text-lg">Customer Support</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section class="container mx-auto px-4 py-20">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4">How It Works</h2>
            <p class="text-xl text-gray-600">Simple, fast, and secure in 3 easy steps</p>
        </div>
        <div class="grid md:grid-cols-3 gap-12 max-w-5xl mx-auto">
            <div class="relative">
                <div class="text-center">
                    <div class="w-20 h-20 bg-gradient-to-br from-primary to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                        <span class="text-3xl font-bold text-white">1</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Enter Amount</h3>
                    <p class="text-gray-600">Enter the GHS amount you want to exchange and see the CNY equivalent instantly</p>
                </div>
                <div class="hidden md:block absolute top-10 -right-6 text-4xl text-gray-300">→</div>
            </div>
            <div class="relative">
                <div class="text-center">
                    <div class="w-20 h-20 bg-gradient-to-br from-emerald-500 to-green-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                        <span class="text-3xl font-bold text-white">2</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Make Payment</h3>
                    <p class="text-gray-600">Pay securely using Mobile Money, Bank Transfer, or your preferred method</p>
                </div>
                <div class="hidden md:block absolute top-10 -right-6 text-4xl text-gray-300">→</div>
            </div>
            <div class="text-center">
                <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                    <span class="text-3xl font-bold text-white">3</span>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Receive CNY</h3>
                <p class="text-gray-600">Recipient gets CNY in their account within 5-30 minutes. That's it!</p>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="bg-gradient-to-br from-blue-600 via-primary to-indigo-700 py-20">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">Ready to Send Money to China?</h2>
            <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">Join thousands of satisfied customers who trust us for their currency exchange needs</p>
            <a href="{{ route('exchange') }}" class="inline-block px-10 py-5 bg-white text-primary rounded-xl font-bold text-lg hover:bg-gray-100 transition shadow-2xl hover:shadow-3xl transform hover:-translate-y-1">
                Start Your Exchange Now →
            </a>
        </div>
    </section>

    @include('components.footer')
</div>
@endsection