@extends('layouts.app')

@section('title', 'All-in-One Hosting Platform for Websites & AI Agents')

@section('content')
<div class="relative bg-indigo-900 overflow-hidden">
    <!-- Hero section -->
    <div class="relative pt-6 pb-16 sm:pb-24">
        <main class="mt-16 sm:mt-24">
            <div class="mx-auto max-w-7xl">
                <div class="lg:grid lg:grid-cols-12 lg:gap-8">
                    <div class="px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
                        <div>
                            <h1 class="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
                                <span>The future of web</span>
                                <span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-200 to-indigo-400">and AI hosting</span>
                            </h1>
                            <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
                                BlueSmokeAI offers an all-in-one solution for hosting websites, applications, and AI agents with advanced features, unparalleled performance, and intelligent assistance.
                            </p>
                            <div class="mt-10 sm:flex sm:justify-center lg:justify-start">
                                <div class="rounded-md shadow">
                                    <a href="{{ route('hosting.shared') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
                                        Get started
                                    </a>
                                </div>
                                <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
                                    <a href="{{ route('pricing') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
                                        View pricing
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-16 sm:mt-24 lg:mt-0 lg:col-span-6">
                        <div class="bg-white sm:max-w-md sm:w-full sm:mx-auto sm:rounded-lg sm:overflow-hidden">
                            <div class="px-4 py-8 sm:px-10">
                                <div>
                                    <p class="text-sm font-medium text-gray-700">
                                        Check domain availability
                                    </p>
                                    <div class="mt-3">
                                        <form action="{{ route('domains.check') }}" method="POST" class="space-y-4">
                                            @csrf
                                            <div>
                                                <label for="domain" class="sr-only">Domain name</label>
                                                <input type="text" name="domain" id="domain" class="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" placeholder="example.com">
                                            </div>
                                            <div>
                                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                                    Search Domain
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="px-4 py-6 bg-gray-50 border-t-2 border-gray-200 sm:px-10">
                                <p class="text-xs leading-5 text-gray-500">
                                    Find your perfect domain name and start building your online presence today.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<!-- Features section -->
<div class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="lg:text-center">
            <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Complete Hosting Solutions</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                Everything you need to succeed online
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                From domain registration to AI agent deployment, we've got you covered with our comprehensive suite of hosting services.
            </p>
        </div>

        <div class="mt-10">
            <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Domain Management</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        Register, transfer, and manage domains with ease. Our platform offers DNS management, domain forwarding, and privacy protection.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Website Hosting</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        From shared hosting to dedicated servers, we provide reliable and high-performance hosting solutions with 99.9% uptime guarantee.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">AI Agent Hosting</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        Deploy and scale AI models with our specialized hosting infrastructure designed for machine learning applications.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">High Performance</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        All our hosting plans are powered by cutting-edge hardware with SSD storage and optimized server configurations to deliver lightning-fast performance.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Advanced Security</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        We employ enterprise-grade security measures including DDoS protection, firewall, malware scanning, and free SSL certificates to keep your websites and applications safe.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">24/7 Expert Support</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        Our team of hosting experts is available round the clock to assist you with any issues or questions you may have.
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>

<!-- AI Hosting Section -->
<div class="bg-indigo-800 py-16 sm:py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
            <div>
                <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
                    Specialized AI Hosting Solutions
                </h2>
                <p class="mt-4 text-lg text-indigo-200">
                    Deploy, scale, and manage your AI models with our advanced infrastructure designed specifically for machine learning and artificial intelligence workloads.
                </p>
                <div class="mt-8">
                    <div class="space-y-5">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-lg font-medium text-white">GPU-accelerated instances</h3>
                                <p class="mt-2 text-base text-indigo-200">Access powerful GPUs to train and run your AI models faster and more efficiently.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-lg font-medium text-white">Pre-installed ML frameworks</h3>
                                <p class="mt-2 text-base text-indigo-200">Get started quickly with pre-installed frameworks like TensorFlow, PyTorch, and more.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-lg font-medium text-white">API gateway</h3>
                                <p class="mt-2 text-base text-indigo-200">Expose your AI services through our secure API gateway with monitoring and rate limiting.</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-10">
                        <a href="{{ route('hosting.ai') }}" class="text-base font-medium text-white hover:text-indigo-200">
                            Learn more about AI hosting <span aria-hidden="true">&rarr;</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mt-12 lg:mt-0">
                <div class="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
                    <img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" src="{{ asset('images/ai-dashboard.png') }}" alt="AI Hosting Dashboard">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Testimonials -->
<div class="bg-white py-16 sm:py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="lg:grid lg:grid-cols-3 lg:gap-8">
            <div>
                <h2 class="text-3xl font-extrabold text-gray-900">
                    Trusted by developers worldwide
                </h2>
                <p class="mt-4 text-lg text-gray-500">
                    Our customers love the performance, reliability, and support we provide for their websites and AI applications.
                </p>
            </div>
            <div class="mt-12 lg:mt-0 lg:col-span-2">
                <div class="space-y-8 sm:space-y-12">
                    <div class="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:gap-8">
                        <div class="bg-white shadow overflow-hidden rounded-lg p-6">
                            <div class="h-full flex flex-col justify-between">
                                <div>
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0">
                                            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User">
                                        </div>
                                        <div class="ml-4">
                                            <h3 class="text-lg font-medium text-gray-900">Michael Johnson</h3>
                                            <p class="text-sm text-gray-500">CTO, TechStart</p>
                                        </div>
                                    </div>
                                    <div class="mt-4 text-gray-600">
                                        <p>"BlueSmokeAI's hosting infrastructure has been a game-changer for our AI applications. The performance is stellar, and their support team is always ready to help."</p>
                                    </div>
                                </div>
                                <div class="mt-6 flex items-center">
                                    <div class="flex text-yellow-500">
                                        <svg class="h-5 w-5" 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-