@extends('layouts.app')

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

@section('content')
<div class="bg-gray-100">
    <!-- Pricing header -->
    <div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20">
        <div class="text-center">
            <h1 class="text-3xl font-extrabold text-gray-900 sm:text-4xl lg:text-5xl">Hosting Plans for Every Need</h1>
            <p class="mt-4 text-xl text-gray-600">Choose the perfect hosting solution for your project</p>
        </div>
    </div>

    <!-- Billing toggle -->
    <div class="mt-12 flex justify-center">
        <div class="relative self-center rounded-lg bg-gray-200 p-1" x-data="{ billingPeriod: 'monthly' }">
            <button type="button" @click="billingPeriod = 'monthly'" :class="{'bg-white shadow-sm text-gray-900': billingPeriod === 'monthly', 'text-gray-700': billingPeriod !== 'monthly'}" class="relative w-1/2 rounded-md py-2 text-sm font-medium whitespace-nowrap focus:outline-none focus:z-10 sm:w-auto sm:px-8">
                Monthly billing
            </button>
            <button type="button" @click="billingPeriod = 'annual'" :class="{'bg-white shadow-sm text-gray-900': billingPeriod === 'annual', 'text-gray-700': billingPeriod !== 'annual'}" class="ml-0.5 relative w-1/2 rounded-md py-2 text-sm font-medium whitespace-nowrap focus:outline-none focus:z-10 sm:w-auto sm:px-8">
                Annual billing
            </button>
        </div>
    </div>

    <!-- Shared Hosting Plans -->
    <div class="mt-16 pb-12 lg:mt-20 lg:pb-20">
        <h2 class="text-2xl font-extrabold text-gray-900 text-center mb-8">Shared Hosting</h2>
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="mt-12 space-y-4 sm:mt-16 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-3">
                @foreach($sharedHostingPlans as $plan)
                <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900">{{ $plan->name }}</h3>
                        <p class="mt-4 text-sm text-gray-500">{{ $plan->description }}</p>
                        <p class="mt-8">
                            <span class="text-4xl font-extrabold text-gray-900" x-text="billingPeriod === 'monthly' ? '{{ $plan->monthly_price_formatted }}' : '{{ $plan->yearly_price_formatted }}'"></span>
                            <span class="text-base font-medium text-gray-500" x-text="billingPeriod === 'monthly' ? '/mo' : '/year'"></span>
                        </p>
                        <a href="{{ route('hosting.shared', ['plan' => $plan->slug]) }}" class="mt-8 block w-full rounded-md border border-gray-800 bg-gray-800 py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy {{ $plan->name }}</a>
                    </div>
                    <div class="px-6 pt-6 pb-8">
                        <h4 class="text-sm font-medium text-gray-900">What's included</h4>
                        <ul role="list" class="mt-6 space-y-4">
                            @foreach($plan->features as $feature)
                            <li class="flex space-x-3">
                                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                </svg>
                                <span class="text-sm text-gray-500">{{ $feature }}</span>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- VPS Hosting Plans -->
    <div class="mt-16 pb-12 lg:mt-20 lg:pb-20 bg-gray-50">
        <h2 class="text-2xl font-extrabold text-gray-900 text-center mb-8 pt-12">VPS Hosting</h2>
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="mt-12 space-y-4 sm:mt-16 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-2">
                @foreach($vpsHostingPlans as $plan)
                <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900">{{ $plan->name }}</h3>
                        <p class="mt-4 text-sm text-gray-500">{{ $plan->description }}</p>
                        <p class="mt-8">
                            <span class="text-4xl font-extrabold text-gray-900" x-text="billingPeriod === 'monthly' ? '{{ $plan->monthly_price_formatted }}' : '{{ $plan->yearly_price_formatted }}'"></span>
                            <span class="text-base font-medium text-gray-500" x-text="billingPeriod === 'monthly' ? '/mo' : '/year'"></span>
                        </p>
                        <a href="{{ route('hosting.vps', ['plan' => $plan->slug]) }}" class="mt-8 block w-full rounded-md border border-indigo-600 bg-indigo-600 py-2 text-sm font-semibold text-white text-center hover:bg-indigo-700">Buy {{ $plan->name }}</a>
                    </div>
                    <div class="px-6 pt-6 pb-8">
                        <h4 class="text-sm font-medium text-gray-900">What's included</h4>
                        <ul role="list" class="mt-6 space-y-4">
                            @foreach($plan->features as $feature)
                            <li class="flex space-x-3">
                                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                </svg>
                                <span class="text-sm text-gray-500">{{ $feature }}</span>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- AI Hosting Plans -->
    <div class="mt-16 pb-12 lg:mt-20 lg:pb-20">
        <h2 class="text-2xl font-extrabold text-gray-900 text-center mb-8">AI Hosting</h2>
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="mt-12 space-y-4 sm:mt-16 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-2">
                @foreach($aiHostingPlans as $plan)
                <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900">{{ $plan->name }}</h3>
                        <p class="mt-4 text-sm text-gray-500">{{ $plan->description }}</p>
                        <p class="mt-8">
                            <span class="text-4xl font-extrabold text-gray-900" x-text="billingPeriod === 'monthly' ? '{{ $plan->monthly_price_formatted }}' : '{{ $plan->yearly_price_formatted }}'"></span>
                            <span class="text-base font-medium text-gray-500" x-text="billingPeriod === 'monthly' ? '/mo' : '/year'"></span>
                        </p>
                        <a href="{{ route('hosting.ai', ['plan' => $plan->slug]) }}" class="mt-8 block w-full rounded-md border border-purple-600 bg-purple-600 py-2 text-sm font-semibold text-white text-center hover:bg-purple-700">Buy {{ $plan->name }}</a>
                    </div>
                    <div class="px-6 pt-6 pb-8">
                        <h4 class="text-sm font-medium text-gray-900">What's included</h4>
                        <ul role="list" class="mt-6 space-y-4">
                            @foreach($plan->features as $feature)
                            <li class="flex space-x-3">
                                <svg class="h-5 w-5 flex-shrink-0 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                                </svg>
                                <span class="text-sm text-gray-500">{{ $feature }}</span>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- FAQ -->
    <div class="bg-white">
        <div class="mx-auto max-w-7xl py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
            <h2 class="text-2xl font-extrabold text-gray-900 text-center">Frequently asked questions</h2>
            <div class="mt-12">
                <dl class="space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 md:space-y-0">
                    <div>
                        <dt class="text-lg font-medium text-gray-900">What is included in all hosting plans?</dt>
                        <dd class="mt-2 text-base text-gray-500">All our hosting plans include 24/7 support, free SSL certificates, daily backups, and our intuitive control panel.</dd>
                    </div>
                    <div>
                        <dt class="text-lg font-medium text-gray-900">Can I upgrade my plan later?</dt>
                        <dd class="mt-2 text-base text-gray-500">Yes, you can easily upgrade your hosting plan at any time from your dashboard with just a few clicks.</dd>
                    </div>
                    <div>
                        <dt class="text-lg font-medium text-gray-900">What payment methods do you accept?</dt>
                        <dd class="mt-2 text-base text-gray-500">We accept credit cards, PayPal, and bank transfers for all our hosting plans.</dd>
                    </div>
                    <div>
                        <dt class="text-lg font-medium text-gray-900">Do you offer a money-back guarantee?</dt>
                        <dd class="mt-2 text-base text-gray-500">Yes, we offer a 30-day money-back guarantee for all our hosting plans.</dd>
                    </div>
                    <div>
                        <dt class="text-lg font-medium text-gray-900">What is AI hosting?</dt>
                        <dd class="mt-2 text-base text-gray-500">AI hosting is our specialized hosting solution designed for deploying and running artificial intelligence models and applications.</dd>
                    </div>
                    <div>
                        <dt class="text-lg font-medium text-gray-900">How do I get started?</dt>
                        <dd class="mt-2 text-base text-gray-500">Simply select your preferred hosting plan, complete the checkout process, and you'll receive login details to your control panel immediately.</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>
@endsection