@extends('layouts.app')

@section('title', 'Pricing Plans')

@section('content')
<!-- Hero Section -->
<section class="gradient-bg text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-6xl font-heading font-bold mb-6">
            Simple, Transparent Pricing
        </h1>
        <p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto">
            Choose the plan that works best for your business. No hidden fees, no surprises.
        </p>
    </div>
</section>

<!-- Pricing Plans -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Plan Selector -->
        <div class="flex justify-center mb-12">
            <div class="bg-white rounded-full p-1 shadow-lg">
                <div class="flex">
                    <button class="plan-toggle-btn active" data-plan="trial">
                        <span class="px-6 py-3 rounded-full text-sm font-medium transition-all duration-300">Free Trial</span>
                    </button>
                    <button class="plan-toggle-btn" data-plan="monthly">
                        <span class="px-6 py-3 rounded-full text-sm font-medium transition-all duration-300">Monthly</span>
                    </button>
                    <button class="plan-toggle-btn" data-plan="lifetime">
                        <span class="px-6 py-3 rounded-full text-sm font-medium transition-all duration-300">One-Time</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
            
            <!-- Free Trial Plan -->
            <div class="pricing-card trial-plan bg-white rounded-2xl shadow-xl p-8 relative border-2 border-transparent">
                <div class="text-center mb-8">
                    <h3 class="text-2xl font-heading font-bold text-gray-900 mb-2">Free Trial</h3>
                    <p class="text-gray-600 mb-6">Perfect for testing our platform</p>
                    
                    <div class="mb-6">
                        <span class="text-5xl font-bold text-gray-900">$0</span>
                        <span class="text-lg text-gray-600">/30 days</span>
                    </div>
                    
                    <a href="{{ route('templates.index') }}" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-4 px-8 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 inline-block">
                        Start Free Trial
                    </a>
                </div>
                
                <div class="space-y-4">
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Create 1 website</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Access to all templates</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">WordPress setup included</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">SSL certificate</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Basic email support</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-times text-red-400 mt-1 mr-3"></i>
                        <span class="text-gray-500">Custom domain hosting</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-times text-red-400 mt-1 mr-3"></i>
                        <span class="text-gray-500">Source files access</span>
                    </div>
                </div>
                
                <div class="mt-8 p-4 bg-blue-50 rounded-lg">
                    <p class="text-sm text-blue-800">
                        <i class="fas fa-info-circle mr-2"></i>
                        Perfect for testing our platform. No credit card required.
                    </p>
                </div>
            </div>

            <!-- Monthly Plan -->
            <div class="pricing-card monthly-plan bg-white rounded-2xl shadow-xl p-8 relative border-2 border-blue-500 transform scale-105">
                <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-semibold">Most Popular</span>
                </div>
                
                <div class="text-center mb-8">
                    <h3 class="text-2xl font-heading font-bold text-gray-900 mb-2">Monthly Plan</h3>
                    <p class="text-gray-600 mb-6">For ongoing website management</p>
                    
                    <div class="mb-6">
                        <span class="text-5xl font-bold text-gray-900">$30</span>
                        <span class="text-lg text-gray-600">/month</span>
                    </div>
                    
                    <a href="{{ route('templates.index') }}" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-4 px-8 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 inline-block">
                        Get Started
                    </a>
                </div>
                
                <div class="space-y-4">
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Unlimited websites</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">All premium templates</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">WordPress setup & hosting</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">SSL certificate included</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Custom domain hosting</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Priority email & chat support</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Automatic backups</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">SEO optimization</span>
                    </div>
                </div>
                
                <div class="mt-8 p-4 bg-green-50 rounded-lg">
                    <p class="text-sm text-green-800">
                        <i class="fas fa-star mr-2"></i>
                        Includes 30-day free trial. Cancel anytime.
                    </p>
                </div>
            </div>

            <!-- One-Time Payment Plan -->
            <div class="pricing-card lifetime-plan bg-white rounded-2xl shadow-xl p-8 relative border-2 border-transparent">
                <div class="absolute -top-4 right-4">
                    <span class="bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-semibold">Best Value</span>
                </div>
                
                <div class="text-center mb-8">
                    <h3 class="text-2xl font-heading font-bold text-gray-900 mb-2">One-Time Payment</h3>
                    <p class="text-gray-600 mb-6">Complete ownership & all files</p>
                    
                    <div class="mb-2">
                        <span class="text-5xl font-bold text-gray-900">$400</span>
                    </div>
                    <div class="text-sm text-gray-600 mb-6">One-time payment</div>
                    
                    <a href="{{ route('templates.index') }}" class="w-full bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-semibold py-4 px-8 rounded-lg hover:from-yellow-600 hover:to-orange-600 transition-all duration-300 transform hover:scale-105 inline-block">
                        Buy Lifetime Access
                    </a>
                </div>
                
                <div class="space-y-4">
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Everything in Monthly plan</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700"><strong>Full website ownership</strong></span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700"><strong>All source files included</strong></span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">WordPress theme files</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Database export</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Migration assistance</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Lifetime updates</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
                        <span class="text-gray-700">Commercial license</span>
                    </div>
                </div>
                
                <div class="mt-8 p-4 bg-yellow-50 rounded-lg">
                    <p class="text-sm text-yellow-800">
                        <i class="fas fa-crown mr-2"></i>
                        Complete ownership - take your website anywhere!
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Comparison Table -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
                Compare All Features
            </h2>
            <p class="text-xl text-gray-600">
                See exactly what's included in each plan
            </p>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full bg-white rounded-2xl shadow-xl overflow-hidden">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Features</th>
                        <th class="px-6 py-4 text-center text-sm font-semibold text-gray-900">Free Trial</th>
                        <th class="px-6 py-4 text-center text-sm font-semibold text-gray-900">Monthly ($30)</th>
                        <th class="px-6 py-4 text-center text-sm font-semibold text-gray-900">One-Time ($400)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Number of Websites</td>
                        <td class="px-6 py-4 text-center text-sm text-gray-600">1</td>
                        <td class="px-6 py-4 text-center text-sm text-gray-600">Unlimited</td>
                        <td class="px-6 py-4 text-center text-sm text-gray-600">Unlimited</td>
                    </tr>
                    <tr class="bg-gray-50">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Template Access</td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">WordPress Setup</td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                    </tr>
                    <tr class="bg-gray-50">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">SSL Certificate</td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Custom Domain Hosting</td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-times text-red-400"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                    </tr>
                    <tr class="bg-gray-50">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Priority Support</td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-times text-red-400"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Automatic Backups</td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-times text-red-400"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                    </tr>
                    <tr class="bg-gray-50">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Source Files Access</td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-times text-red-400"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-times text-red-400"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                    </tr>
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Full Ownership</td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-times text-red-400"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-times text-red-400"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                    </tr>
                    <tr class="bg-gray-50">
                        <td class="px-6 py-4 text-sm font-medium text-gray-900">Commercial License</td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-times text-red-400"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-times text-red-400"></i></td>
                        <td class="px-6 py-4 text-center"><i class="fas fa-check text-green-500"></i></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
                Pricing FAQ
            </h2>
            <p class="text-xl text-gray-600">
                Common questions about our pricing plans
            </p>
        </div>
        
        <div class="space-y-6">
            <div class="bg-white rounded-lg p-6 shadow-md">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">What happens after the 30-day free trial?</h3>
                <p class="text-gray-600">After your free trial ends, your website will remain active for 7 additional days. You can upgrade to a paid plan during this grace period to continue using our services.</p>
            </div>
            
            <div class="bg-white rounded-lg p-6 shadow-md">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Can I cancel my monthly subscription anytime?</h3>
                <p class="text-gray-600">Yes, you can cancel your monthly subscription at any time. Your service will continue until the end of your current billing cycle, and you won't be charged again.</p>
            </div>
            
            <div class="bg-white rounded-lg p-6 shadow-md">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">What exactly do I get with the one-time payment?</h3>
                <p class="text-gray-600">The $400 one-time payment gives you complete ownership of your website, including all source files, WordPress theme files, database export, and the right to use it commercially. You can host it anywhere and modify it as needed.</p>
            </div>
            
            <div class="bg-white rounded-lg p-6 shadow-md">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Do you offer refunds?</h3>
                <p class="text-gray-600">We offer a 30-day money-back guarantee for all paid plans. If you're not satisfied with your website, contact us within 30 days for a full refund.</p>
            </div>
            
            <div class="bg-white rounded-lg p-6 shadow-md">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Can I upgrade or downgrade my plan?</h3>
                <p class="text-gray-600">Yes, you can upgrade from free trial to monthly or one-time payment at any time. You can also upgrade from monthly to one-time payment. We'll prorate any existing payments.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="gradient-bg text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">
            Ready to Build Your Website?
        </h2>
        <p class="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
            Start with our free trial and see why thousands of businesses choose our platform.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a href="{{ route('templates.index') }}" class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors shadow-lg hover-lift">
                <i class="fas fa-rocket mr-2"></i>Start Free Trial
            </a>
            <a href="{{ route('contact') }}" class="bg-white bg-opacity-20 text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-opacity-30 transition-colors backdrop-blur-sm border border-white border-opacity-30">
                <i class="fas fa-comments mr-2"></i>Contact Sales
            </a>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const planButtons = document.querySelectorAll('.plan-toggle-btn');
    const pricingCards = document.querySelectorAll('.pricing-card');
    
    planButtons.forEach(button => {
        button.addEventListener('click', function() {
            const selectedPlan = this.getAttribute('data-plan');
            
            // Update active button
            planButtons.forEach(btn => {
                btn.classList.remove('active');
                btn.querySelector('span').classList.remove('bg-blue-600', 'text-white');
                btn.querySelector('span').classList.add('text-gray-600');
            });
            
            this.classList.add('active');
            this.querySelector('span').classList.add('bg-blue-600', 'text-white');
            this.querySelector('span').classList.remove('text-gray-600');
            
            // Show/hide pricing cards
            pricingCards.forEach(card => {
                card.style.display = 'none';
            });
            
            if (selectedPlan === 'trial') {
                document.querySelector('.trial-plan').style.display = 'block';
            } else if (selectedPlan === 'monthly') {
                document.querySelector('.monthly-plan').style.display = 'block';
            } else if (selectedPlan === 'lifetime') {
                document.querySelector('.lifetime-plan').style.display = 'block';
            }
        });
    });
    
    // Initialize active state
    document.querySelector('.plan-toggle-btn.active span').classList.add('bg-blue-600', 'text-white');
    
    // Show all cards by default
    pricingCards.forEach(card => {
        card.style.display = 'block';
    });
});
</script>

<style>
.plan-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.plan-toggle-btn span {
    @apply text-gray-600;
}

.plan-toggle-btn.active span {
    @apply bg-blue-600 text-white;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .pricing-card {
        transform: none !important;
        border: 2px solid transparent !important;
    }
    
    .monthly-plan {
        border-color: #3b82f6 !important;
    }
}
</style>
@endpush