@extends('layouts.app')

@section('title', 'Home')

@section('content')
<!-- Hero -->
<section class="gradient-bg py-20">
    <div class="max-w-5xl mx-auto px-4 text-center">
        <h1 class="text-5xl font-extrabold text-white mb-6">Earn Real Money <span class="text-yellow-300">Completing Surveys</span></h1>
        <p class="text-xl text-purple-100 mb-8 max-w-2xl mx-auto">Join thousands of members earning daily by sharing their opinions. Get paid instantly to your preferred payment method.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('register') }}" class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-xl font-bold text-lg hover:bg-yellow-300 transition shadow-lg">Start Earning Free</a>
            <a href="{{ route('login') }}" class="bg-white bg-opacity-20 text-white border-2 border-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-opacity-30 transition">Login</a>
        </div>
        <div class="mt-10 grid grid-cols-3 gap-6 max-w-lg mx-auto">
            <div class="text-center">
                <div class="text-3xl font-bold text-yellow-300">12K+</div>
                <div class="text-purple-200 text-sm">Active Members</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-yellow-300">$85K+</div>
                <div class="text-purple-200 text-sm">Total Paid Out</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-yellow-300">500+</div>
                <div class="text-purple-200 text-sm">Surveys Done</div>
            </div>
        </div>
    </div>
</section>

<!-- How It Works -->
<section class="py-16 bg-white">
    <div class="max-w-6xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">How It Works</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center p-6">
                <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-user-plus text-purple-600 text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl mb-2">1. Create Account</h3>
                <p class="text-gray-500">Sign up for free in seconds. No credit card required.</p>
            </div>
            <div class="text-center p-6">
                <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-clipboard-list text-yellow-600 text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl mb-2">2. Complete Surveys</h3>
                <p class="text-gray-500">Browse available surveys and earn cash for each completion.</p>
            </div>
            <div class="text-center p-6">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-dollar-sign text-green-600 text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl mb-2">3. Get Paid</h3>
                <p class="text-gray-500">Withdraw earnings via PayPal, bank transfer, or crypto.</p>
            </div>
        </div>
    </div>
</section>

<!-- Plans -->
<section class="py-16 bg-gray-50">
    <div class="max-w-5xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Choose Your Plan</h2>
        <p class="text-center text-gray-500 mb-12">Upgrade to unlock more surveys and higher earnings.</p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white rounded-2xl shadow p-8 card-hover">
                <h3 class="text-xl font-bold mb-2">Free</h3>
                <div class="text-3xl font-extrabold text-gray-800 mb-4">$0<span class="text-sm font-normal text-gray-500">/mo</span></div>
                <ul class="space-y-2 text-gray-600 text-sm mb-6">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>3 surveys per day</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Basic surveys only</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Referral earnings</li>
                </ul>
                <a href="{{ route('register') }}" class="block text-center bg-gray-100 text-gray-800 py-2 rounded-lg font-semibold hover:bg-gray-200 transition">Get Started</a>
            </div>
            <div class="bg-gradient-to-br from-purple-600 to-indigo-600 rounded-2xl shadow-xl p-8 card-hover text-white relative">
                <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-yellow-400 text-gray-900 text-xs font-bold px-4 py-1 rounded-full">POPULAR</div>
                <h3 class="text-xl font-bold mb-2">Basic</h3>
                <div class="text-3xl font-extrabold mb-4">$9.99<span class="text-sm font-normal opacity-75">/mo</span></div>
                <ul class="space-y-2 text-purple-100 text-sm mb-6">
                    <li><i class="fas fa-check text-yellow-300 mr-2"></i>10 surveys per day</li>
                    <li><i class="fas fa-check text-yellow-300 mr-2"></i>Premium surveys</li>
                    <li><i class="fas fa-check text-yellow-300 mr-2"></i>Higher rewards</li>
                </ul>
                <a href="{{ route('register') }}" class="block text-center bg-yellow-400 text-gray-900 py-2 rounded-lg font-bold hover:bg-yellow-300 transition">Get Basic</a>
            </div>
            <div class="bg-white rounded-2xl shadow p-8 card-hover border-2 border-yellow-400">
                <h3 class="text-xl font-bold mb-2 flex items-center"><i class="fas fa-crown text-yellow-500 mr-2"></i>VIP</h3>
                <div class="text-3xl font-extrabold text-gray-800 mb-4">$24.99<span class="text-sm font-normal text-gray-500">/mo</span></div>
                <ul class="space-y-2 text-gray-600 text-sm mb-6">
                    <li><i class="fas fa-check text-green-500 mr-2"></i>30 surveys per day</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>All survey types</li>
                    <li><i class="fas fa-check text-green-500 mr-2"></i>Priority support</li>
                </ul>
                <a href="{{ route('register') }}" class="block text-center bg-yellow-400 text-gray-900 py-2 rounded-lg font-bold hover:bg-yellow-300 transition">Get VIP</a>
            </div>
        </div>
    </div>
</section>

<!-- Referral Banner -->
<section class="gradient-bg py-12">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-white mb-4">Earn More with Referrals</h2>
        <p class="text-purple-100 text-lg mb-6">Invite friends and earn commissions on their survey completions and plan purchases — 2 levels deep.</p>
        <a href="{{ route('register') }}" class="bg-yellow-400 text-gray-900 px-8 py-3 rounded-xl font-bold hover:bg-yellow-300 transition">Get Your Referral Link</a>
    </div>
</section>
@endsection