@extends('layouts.app')

@section('title', 'Subscription Plans - BlueSmokeAI')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Subscription Plans') }}
    </h2>
@endsection

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Plans Header -->
        <div class="text-center mb-12">
            <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                Choose the Right Plan for Your Business
            </h2>
            <p class="mt-4 text-xl text-gray-600">
                All plans include our core features with different resource allocations and capabilities.
            </p>
        </div>

        <!-- Pricing Toggle -->
        <div class="flex justify-center mb-8">
            <div class="relative bg-gray-100 p-1 rounded-lg inline-flex">
                <button type="button" id="monthly-toggle" class="relative px-4 py-2 rounded-md text-sm font-medium text-gray-900 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white shadow-sm" aria-current="page">
                    Monthly billing
                </button>
                <button type="button" id="annual-toggle" class="ml-1 px-4 py-2 rounded-md text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    Annual billing
                </button>
            </div>
        </div>

        <!-- Pricing Plans -->
        <div class="mt-12 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
            <!-- Starter Plan -->
            <div class="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900">Starter</h3>
                    <p class="mt-4 flex items-baseline text-gray-900">
                        <span class="text-5xl font-extrabold tracking-tight" id="starter-price-monthly">$29</span>
                        <span class="text-5xl font-extrabold tracking-tight hidden" id="starter-price-annual">$290</span>
                        <span class="ml-1 text-xl font-semibold">/month</span>
                    </p>
                    <p class="mt-6 text-gray-500">Perfect for small businesses and startups.</p>

                    <!-- Feature List -->
                    <ul role="list" class="mt-6 space-y-6">
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">5 Websites</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">10 Email Accounts</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">3 AI Agents</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">Basic Analytics</span>
                        </li>
                    </ul>
                </div>

                <a href="{{ route('billing.subscribe', ['plan' => 'starter']) }}" class="bg-indigo-50 text-indigo-700 hover:bg-indigo-100 mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium">
                    Get Started
                </a>
            </div>

            <!-- Professional Plan -->
            <div class="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col">
                <div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/4">
                    <span class="inline-flex rounded-full bg-indigo-600 px-4 py-1 text-sm font-semibold text-white">Popular</span>
                </div>
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900">Professional</h3>
                    <p class="mt-4 flex items-baseline text-gray-900">
                        <span class="text-5xl font-extrabold tracking-tight" id="pro-price-monthly">$79</span>
                        <span class="text-5xl font-extrabold tracking-tight hidden" id="pro-price-annual">$790</span>
                        <span class="ml-1 text-xl font-semibold">/month</span>
                    </p>
                    <p class="mt-6 text-gray-500">Ideal for growing businesses and agencies.</p>

                    <!-- Feature List -->
                    <ul role="list" class="mt-6 space-y-6">
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">20 Websites</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">50 Email Accounts</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">10 AI Agents</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">Advanced Analytics</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">Priority Support</span>
                        </li>
                    </ul>
                </div>

                <a href="{{ route('billing.subscribe', ['plan' => 'professional']) }}" class="bg-indigo-600 text-white hover:bg-indigo-700 mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium">
                    Get Started
                </a>
            </div>

            <!-- Enterprise Plan -->
            <div class="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900">Enterprise</h3>
                    <p class="mt-4 flex items-baseline text-gray-900">
                        <span class="text-5xl font-extrabold tracking-tight" id="enterprise-price-monthly">$199</span>
                        <span class="text-5xl font-extrabold tracking-tight hidden" id="enterprise-price-annual">$1990</span>
                        <span class="ml-1 text-xl font-semibold">/month</span>
                    </p>
                    <p class="mt-6 text-gray-500">For large organizations with advanced needs.</p>

                    <!-- Feature List -->
                    <ul role="list" class="mt-6 space-y-6">
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">Unlimited Websites</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">Unlimited Email Accounts</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">Unlimited AI Agents</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">Enterprise Analytics</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span class="ml-3 text-gray-500">Dedicated Support</span>
                        </li>
                        <li class="flex">
                            <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round"