<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>

<div class="spawnster-admin-page">
<div class="bg-stone-100">
    <div class="relative z-10 max-w-4xl mx-auto px-6 py-8">
        <!-- Header -->
            <div class="text-center mb-12">
            <div class="flex items-center justify-center gap-3 mb-2">
                <img src="<?php echo esc_url(\RistrettoApps\Spawnster\Base\Constants::logo()); ?>" alt="Spawnster Logo" class="w-24 h-24">
                <span class="block text-2xl font-medium tracking-widest text-center uppercase text-green-500 py-5">SPAWNSTER SETTINGS</span>
            </div>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
                Your comprehensive AI content ecosystem for WordPress. Transform your content strategy with intelligent automation and lightning-fast generation.
            </p>
            
            <!-- Quick Navigation Menu -->
            <div class="flex justify-center mt-8">
                <nav class="spawnster-nav-menu">
                    <a href="#get-started" class="spawnster-nav-item">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                        Get Started
                    </a>
                    <a href="#features" class="spawnster-nav-item">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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>
                        Features
                    </a>
                    <a href="#why-spawnster" class="spawnster-nav-item">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                        Why Spawnster
                    </a>
                </nav>
            </div>
        </div>

        <!-- Main Feature Cards - 2 Panel Grid -->
        <div class="spawnster-grid-2 mb-16">
            <!-- Instant Site Content Card -->
            <div class="spawnster-card spawnster-card-gradient-1 relative overflow-hidden text-white cursor-pointer">
                <div class="relative z-10 p-8">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="p-3 bg-white bg-opacity-20 rounded-full">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold">Generate Instant Site Content</h3>
                    </div>
                    <p class="text-lg mb-6 opacity-90">
                        Launch your website with lightning-fast content creation. Populate entire sites with SEO-optimized content in minutes, not months.
                    </p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span>Complete website population</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span>SEO-optimized from the start</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span>Multiple content formats</span>
                        </li>
                    </ul>
                    <a href="<?php echo esc_url(\RistrettoApps\Spawnster\Base\Constants::SPAWNSTER_ADMIN_SETUP_WEBSITE . '&_wpnonce=' . wp_create_nonce('spawnster-nonce')); ?>" 
                       class="w-full inline-flex items-center justify-center bg-white text-purple-600 hover:bg-gray-100 font-semibold py-3 text-lg rounded-md transition-colors duration-300">
                        Start Building Your Site
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Automation Writer Card -->
            <div class="spawnster-card spawnster-card-gradient-2 relative overflow-hidden text-white cursor-pointer">
                <div class="relative z-10 p-8">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="p-3 bg-white bg-opacity-20 rounded-full">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <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>
                        <h3 class="text-2xl font-bold">AI Writing Agent</h3>
                    </div>
                    <p class="text-lg mb-6 opacity-90">
                        Automate your content strategy with intelligent AI that learns your voice. Set it and forget it content creation that works 24/7.
                    </p>
                    <ul class="space-y-2 mb-6">
                        <li class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span>Automated scheduling</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span>Personalized AI writing</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span>Bulk content generation</span>
                        </li>
                    </ul>
                    <a href="<?php echo esc_url(admin_url('edit.php?post_type=spawnster_job')); ?>" 
                       class="w-full inline-flex items-center justify-center bg-white text-teal-600 hover:bg-gray-100 font-semibold py-3 text-lg rounded-md transition-colors duration-300">
                        Setup Auto-Writing Jobs
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>

        <!-- Features Grid -->
        <div id="features" class="mb-16">
            <h2 class="text-3xl font-bold text-center mb-8 spawnster-gradient-text">
                Powerful Features at Your Fingertips
            </h2>
            <div class="spawnster-grid-3">
                <div class="spawnster-card bg-white">
                    <div class="p-6 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-4">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <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>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">AI Writing Agent</h3>
                        <p class="text-gray-600">Automated content creation that learns your voice</p>
                    </div>
                </div>
                <div class="spawnster-card bg-white">
                    <div class="p-6 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-4">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">Lightning-Fast Generation</h3>
                        <p class="text-gray-600">Populate entire websites in minutes</p>
                    </div>
                </div>
                <div class="spawnster-card bg-white">
                    <div class="p-6 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-4">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">SEO Optimized</h3>
                        <p class="text-gray-600">Built-in optimization for better rankings</p>
                    </div>
                </div>
                <div class="spawnster-card bg-white">
                    <div class="p-6 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-4">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">AI Image Generation</h3>
                        <p class="text-gray-600">Custom visuals that complement your content <b>(coming soon!)</b></p>
                    </div>
                </div>
                <div class="spawnster-card bg-white">
                    <div class="p-6 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-4">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">Multilingual Support</h3>
                        <p class="text-gray-600">Create content in multiple languages</p>
                    </div>
                </div>
                <div class="spawnster-card bg-white">
                    <div class="p-6 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-4">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-gray-800">Smart Scheduling</h3>
                        <p class="text-gray-600">Set it and forget it automation</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="spawnster-bg-blur p-8 mb-16" style="border-radius: 24px;">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold mb-4 spawnster-gradient-text">
                    Quick Actions
                </h2>
                <p class="text-lg text-gray-600">
                    Jump straight into the action with these commonly used features
                </p>
            </div>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="<?php echo esc_url(\RistrettoApps\Spawnster\Base\Constants::SPAWNSTER_ADMIN_SETUP_WEBSITE . '&_wpnonce=' . wp_create_nonce('spawnster-nonce')); ?>" 
                   class="inline-flex items-center px-6 py-3 spawnster-btn-gradient text-white font-semibold rounded-lg shadow-lg">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                    Create New Site
                </a>
                <a href="<?php echo esc_url(admin_url('edit.php?post_type=spawnster_job&post_status=all')); ?>" 
                   class="inline-flex items-center px-6 py-3 spawnster-btn-gradient-2 text-white font-semibold rounded-lg shadow-lg">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                    View All Jobs
                </a>
                <a href="<?php echo esc_url(admin_url('admin.php?page=spawnster&view=settings&_wpnonce=' . wp_create_nonce('spawnster-nonce'))); ?>" 
                   class="inline-flex items-center px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white font-semibold rounded-lg shadow-lg transition-colors duration-300">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    Settings
                </a>
            </div>
        </div>

        <!-- Benefits Section -->
        <div id="why-spawnster" class="spawnster-bg-blur p-8 mb-16" style="border-radius: 24px;">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold mb-4 spawnster-gradient-text">
                    Why Choose Spawnster?
                </h2>
                <p class="text-lg text-gray-600">
                    Join thousands of WordPress users who have transformed their content strategy
                </p>
            </div>
            <div class="spawnster-grid-2">
                <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-50 transition-colors duration-200">
                    <svg class="w-5 h-5 text-yellow-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                        <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-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    <span class="text-gray-700 font-medium">Save 90% of your content creation time</span>
                </div>
                <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-50 transition-colors duration-200">
                    <svg class="w-5 h-5 text-yellow-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                        <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-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    <span class="text-gray-700 font-medium">Generate SEO-optimized content automatically</span>
                </div>
                <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-50 transition-colors duration-200">
                    <svg class="w-5 h-5 text-yellow-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                        <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-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    <span class="text-gray-700 font-medium">Create stunning AI-powered images</span>
                </div>
                <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-50 transition-colors duration-200">
                    <svg class="w-5 h-5 text-yellow-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                        <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-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    <span class="text-gray-700 font-medium">Scale your content strategy effortlessly</span>
                </div>
                <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-50 transition-colors duration-200">
                    <svg class="w-5 h-5 text-yellow-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                        <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-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    <span class="text-gray-700 font-medium">Launch websites faster than ever</span>
                </div>
                <div class="flex items-center gap-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-50 transition-colors duration-200">
                    <svg class="w-5 h-5 text-yellow-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                        <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-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    <span class="text-gray-700 font-medium">Maintain consistent brand voice</span>
                </div>
            </div>
        </div>

        <!-- Stats Section -->
        <div class="spawnster-grid-4 mb-16">
            <div class="spawnster-card bg-white">
                <div class="p-6 text-center">
                    <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="text-3xl font-bold text-gray-800 mb-1">90%</div>
                    <div class="text-gray-600 font-medium">Time Saved</div>
                </div>
            </div>
            <div class="spawnster-card bg-white">
                <div class="p-6 text-center">
                    <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                    </div>
                    <div class="text-3xl font-bold text-gray-800 mb-1">10x</div>
                    <div class="text-gray-600 font-medium">Faster Launch</div>
                </div>
            </div>
            <div class="spawnster-card bg-white">
                <div class="p-6 text-center">
                    <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="text-3xl font-bold text-gray-800 mb-1">50+</div>
                    <div class="text-gray-600 font-medium">Languages</div>
                </div>
            </div>
            <div class="spawnster-card bg-white">
                <div class="p-6 text-center">
                    <div class="inline-flex items-center justify-center w-12 h-12 spawnster-btn-gradient rounded-full text-white mb-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
                        </svg>
                    </div>
                    <div class="text-3xl font-bold text-gray-800 mb-1">∞</div>
                    <div class="text-gray-600 font-medium">Possibilities</div>
                </div>
            </div>
        </div>

        <!-- Getting Started -->
        <div class="spawnster-getting-started-bg p-8 mb-16" style="border-radius: 24px;">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold mb-4 spawnster-gradient-text" id="get-started">
                    Getting Started
                </h2>
                <p class="text-lg text-gray-700">
                    Follow these simple steps to unlock the full power of Spawnster
                </p>
            </div>
            <div class="spawnster-grid-2">
                <div class="space-y-4">
                    <a href="<?php echo esc_url(admin_url('admin.php?page=spawnster&view=settings&_wpnonce=' . wp_create_nonce('spawnster-nonce'))); ?>">
                        <div class="flex items-start gap-4 p-4 bg-white bg-opacity-70 rounded-lg hover:bg-white hover:bg-opacity-90 transition-colors duration-200">
                            <div class="flex-shrink-0 w-8 h-8 spawnster-number-badge text-white rounded-full flex items-center justify-center font-bold">1</div>
                            <div>
                                <span class="text-gray-700">Make sure you've set up your </span>
                                <span class="text-blue-600 hover:text-blue-800 underline font-semibold">OpenAI API key </span>
                            </div>
                        </div>
                    </a>
                    <a href="<?php echo esc_url(admin_url('admin.php?page=spawnster&view=setup-your-website&_wpnonce=' . wp_create_nonce('spawnster-nonce'))); ?>">
                        <div class="flex items-start gap-4 p-4 bg-white bg-opacity-70 rounded-lg hover:bg-white hover:bg-opacity-90 transition-colors duration-200">
                            <div class="flex-shrink-0 w-8 h-8 spawnster-number-badge text-white rounded-full flex items-center justify-center font-bold">2</div>
                            <div>
                                <span class="text-gray-700">Use the </span>
                                <strong class="text-blue-600">Instant Site Builder</strong>
                                <span class="text-gray-700"> to create your first AI-generated website</span>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="space-y-4">
                    <a href="<?php echo esc_url(admin_url('edit.php?post_type=spawnster_job&_wpnonce=' . wp_create_nonce('spawnster-nonce'))); ?>">
                        <div class="flex items-start gap-4 p-4 bg-white bg-opacity-70 rounded-lg hover:bg-white hover:bg-opacity-90 transition-colors duration-200">
                            <div class="flex-shrink-0 w-8 h-8 spawnster-number-badge text-white rounded-full flex items-center justify-center font-bold">3</div>
                            <div>
                                <span class="text-gray-700">Set up </span>
                                <strong class="text-purple-600">Auto-Writing Jobs</strong>
                                <span class="text-gray-700"> for ongoing content creation</span>
                            </div>
                        </div>
                    </a>
                    <div class="flex items-start gap-4 p-4 bg-white bg-opacity-70 rounded-lg hover:bg-white hover:bg-opacity-90 transition-colors duration-200">
                        <div class="flex-shrink-0 w-8 h-8 spawnster-number-badge text-white rounded-full flex items-center justify-center font-bold">4</div>
                        <div>
                            <span class="text-gray-700">Sit back and enjoy an espresso </span>
                            <span class="text-gray-700"> while Spawnster does the work</span>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>