@extends('layouts.app')

@section('title', 'Professional Website Builder - Create Your Business Website in 5 Minutes')
@section('description', 'Create professional business websites in just 5 minutes. Choose from dozens of templates designed for local businesses. No coding required.')

@section('content')
<!-- Hero Section -->
<section class="gradient-bg text-white py-20 overflow-hidden relative">
    <div class="absolute inset-0 bg-black opacity-10"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center animate-fade-in">
            <h1 class="text-4xl md:text-6xl font-heading font-bold mb-6 leading-tight">
                Create Your Professional<br>
                <span class="text-yellow-300">Business Website</span><br>
                in Just 5 Minutes
            </h1>
            <p class="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto">
                Choose from professional templates designed specifically for local businesses. 
                No coding required. Get online today and attract more customers.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <a href="{{ route('builder.create') }}" class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-yellow-300 transition-colors shadow-lg hover-lift">
                    <i class="fas fa-rocket mr-2"></i>Start Building Now
                </a>
                <a href="{{ route('templates.index') }}" 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-eye mr-2"></i>View Templates
                </a>
            </div>
            <div class="mt-8 flex items-center justify-center space-x-8 text-blue-100">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-400 mr-2"></i>
                    <span>No Credit Card Required</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-clock text-green-400 mr-2"></i>
                    <span>5-Minute Setup</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-mobile-alt text-green-400 mr-2"></i>
                    <span>Mobile Responsive</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Floating Elements -->
    <div class="absolute top-10 left-10 w-20 h-20 bg-white bg-opacity-10 rounded-full animate-pulse"></div>
    <div class="absolute bottom-10 right-10 w-16 h-16 bg-yellow-300 bg-opacity-20 rounded-full animate-pulse delay-1000"></div>
    <div class="absolute top-1/2 right-20 w-12 h-12 bg-blue-300 bg-opacity-15 rounded-full animate-pulse delay-500"></div>
</section>

<!-- Stats Section -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div class="animate-fade-in">
                <div class="text-3xl md:text-4xl font-bold text-primary-600 mb-2">5,000+</div>
                <div class="text-gray-600">Websites Created</div>
            </div>
            <div class="animate-fade-in">
                <div class="text-3xl md:text-4xl font-bold text-primary-600 mb-2">50+</div>
                <div class="text-gray-600">Professional Templates</div>
            </div>
            <div class="animate-fade-in">
                <div class="text-3xl md:text-4xl font-bold text-primary-600 mb-2">5 Min</div>
                <div class="text-gray-600">Average Setup Time</div>
            </div>
            <div class="animate-fade-in">
                <div class="text-3xl md:text-4xl font-bold text-primary-600 mb-2">99.9%</div>
                <div class="text-gray-600">Uptime Guarantee</div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<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">
            <h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
                Everything You Need to Succeed Online
            </h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Our platform includes all the tools and features you need to create a professional website that drives results for your business.
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Feature 1 -->
            <div class="bg-white p-8 rounded-xl shadow-lg hover-lift animate-fade-in">
                <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
                    <i class="fas fa-palette text-white text-xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">Professional Templates</h3>
                <p class="text-gray-600">Choose from dozens of professionally designed templates crafted specifically for local businesses across various industries.</p>
            </div>
            
            <!-- Feature 2 -->
            <div class="bg-white p-8 rounded-xl shadow-lg hover-lift animate-fade-in">
                <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
                    <i class="fas fa-mobile-alt text-white text-xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">Mobile Responsive</h3>
                <p class="text-gray-600">All websites are automatically optimized for mobile devices, ensuring your customers have a great experience on any screen size.</p>
            </div>
            
            <!-- Feature 3 -->
            <div class="bg-white p-8 rounded-xl shadow-lg hover-lift animate-fade-in">
                <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
                    <i class="fas fa-search text-white text-xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">SEO Optimized</h3>
                <p class="text-gray-600">Built-in SEO features help your website rank higher in search results, bringing more customers to your business.</p>
            </div>
            
            <!-- Feature 4 -->
            <div class="bg-white p-8 rounded-xl shadow-lg hover-lift animate-fade-in">
                <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
                    <i class="fas fa-tachometer-alt text-white text-xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">Lightning Fast</h3>
                <p class="text-gray-600">Our optimized hosting infrastructure ensures your website loads quickly, keeping visitors engaged and improving conversions.</p>
            </div>
            
            <!-- Feature 5 -->
            <div class="bg-white p-8 rounded-xl shadow-lg hover-lift animate-fade-in">
                <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
                    <i class="fas fa-shield-alt text-white text-xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">Secure & Reliable</h3>
                <p class="text-gray-600">SSL certificates, daily backups, and enterprise-grade security keep your website and customer data safe and secure.</p>
            </div>
            
            <!-- Feature 6 -->
            <div class="bg-white p-8 rounded-xl shadow-lg hover-lift animate-fade-in">
                <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center mb-4">
                    <i class="fas fa-headset text-white text-xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">24/7 Support</h3>
                <p class="text-gray-600">Our expert support team is available around the clock to help you with any questions or issues you might have.</p>
            </div>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<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">
            <h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
                Get Online in 3 Simple Steps
            </h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Creating your professional website has never been easier. Follow these simple steps and you'll be online in minutes.
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Step 1 -->
            <div class="text-center animate-fade-in">
                <div class="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">1</div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">Choose a Template</h3>
                <p class="text-gray-600">Browse our collection of professional templates and select the one that best fits your business type and style preferences.</p>
            </div>
            
            <!-- Step 2 -->
            <div class="text-center animate-fade-in">
                <div class="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">2</div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">Add Your Information</h3>
                <p class="text-gray-600">Fill out our simple form with your business details. We'll automatically populate your website with your information.</p>
            </div>
            
            <!-- Step 3 -->
            <div class="text-center animate-fade-in">
                <div class="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">3</div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">Go Live!</h3>
                <p class="text-gray-600">Your website is automatically published with a custom domain. Share it with customers and start growing your online presence.</p>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<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">
            <h2 class="text-3xl md:text-4xl font-heading font-bold text-gray-900 mb-4">
                What Our Customers Say
            </h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Thousands of businesses trust us to power their online presence. Here's what they have to say.
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Testimonial 1 -->
            <div class="bg-white p-8 rounded-xl shadow-lg animate-fade-in">
                <div class="flex items-center mb-4">
                    <div class="flex text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <p class="text-gray-600 mb-6">"I had my contracting business website up and running in under 10 minutes. The template was perfect and my customers love the professional look!"</p>
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
                    <div>
                        <div class="font-semibold text-gray-900">Mike Johnson</div>
                        <div class="text-gray-600">Johnson Construction</div>
                    </div>
                </div>
            </div>
            
            <!-- Testimonial 2 -->
            <div class="bg-white p-8 rounded-xl shadow-lg animate-fade-in">
                <div class="flex items-center mb-4">
                    <div class="flex text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <p class="text-gray-600 mb-6">"As a small business owner, I needed something quick and affordable. This platform delivered exactly what I needed without breaking the bank."</p>
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
                    <div>
                        <div class="font-semibold text-gray-900">Sarah Williams</div>
                        <div class="text-gray-600">Sparkle Cleaning Services</div>
                    </div>
                </div>
            </div>
            
            <!-- Testimonial 3 -->
            <div class="bg-white p-8 rounded-xl shadow-lg animate-fade-in">
                <div class="flex items-center mb-4">
                    <div class="flex text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <p class="text-gray-600 mb-6">"The dental practice template was perfect for our clinic. We've seen a 40% increase in online appointment bookings since launching our new website."</p>
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
                    <div>
                        <div class="font-semibold text-gray-900">Dr. Amanda Chen</div>
                        <div class="text-gray-600">Bright Smile Dental</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA 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">
        <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">
            Ready to Create Your Professional Website?
        </h2>
        <p class="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
            Join thousands of successful businesses who trust us with their online presence. 
            Get started today and see the difference a professional website can make.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a href="{{ route('builder.create') }}" class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-yellow-300 transition-colors shadow-lg hover-lift">
                <i class="fas fa-rocket mr-2"></i>Create Your Website Now
            </a>
            <a href="{{ route('templates.index') }}" 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-eye mr-2"></i>Browse Templates
            </a>
        </div>
        <div class="mt-8 text-blue-100">
            <i class="fas fa-shield-alt mr-2"></i>
            <span>No credit card required • 30-day money-back guarantee</span>
        </div>
    </div>
</section>
@endsection