
<div class="bg-gray-100 wpil-setup-wizard wrap wpil_styles wizard-license wpil-wizard-page wpil-wizard-page-hidden">
    <div>
        <style>
            /* Brand Gradient (matches other templates) */
            .lw-gradient-bg {
            background: linear-gradient(90deg, #7F5AF0 0%, #2C6BFF 100%);
            }
            .lw-text-purple { color: #7F5AF0; }
            .lw-text-gradient {
            background: linear-gradient(90deg, #7F5AF0 0%, #2C6BFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            }

            /* Subtle pulse for the key badge */
            @keyframes softpulse {
            0% { transform: scale(1); opacity: 0.95; }
            50% { transform: scale(1.02); opacity: 1; }
            100% { transform: scale(1); opacity: 0.95; }
            }
            .animate-softpulse { animation: softpulse 2.4s ease-in-out infinite; }
        </style>
    </div>

    <div class="min-h-screen flex items-center justify-center p-6 antialiased font-sans">
        <div class="bg-white w-full max-w-5xl rounded-2xl shadow-xl overflow-hidden">

            <!-- Top stepper (same pattern as other pages) -->
            <div class="bg-gray-50 border-b border-gray-100 px-8 py-5 flex flex-col md:flex-row justify-between items-center text-sm font-medium text-gray-500">

            <div class="flex items-center space-x-2 lw-text-purple">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                    <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
                </svg>
                <span>License</span>
            </div>
            <div class="hidden md:block h-px w-12 bg-gray-300 mx-4"></div>

            <div class="flex items-center space-x-2 mt-3 md:mt-0 text-gray-400">
                <div class="w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center text-xs">2</div>
                <span>Money Pages</span>
            </div>

            <div class="hidden md:block h-px w-12 bg-gray-200 mx-4"></div>

            <div class="flex items-center space-x-2 mt-3 md:mt-0 text-gray-400">
                <div class="w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center text-xs">3</div>
                <span>Connect Search Console</span>
            </div>

            <div class="hidden md:block h-px w-12 bg-gray-200 mx-4"></div>

            <div class="flex items-center space-x-2 mt-3 md:mt-0 text-gray-400">
                <div class="w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center text-xs">4</div>
                <span>Scan & Link Site</span>
            </div>
            </div>

            <div class="p-8 md:p-12">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">

                <!-- Left: content -->
                <div>
                <div class="mb-6">
                    <h1 class="text-3xl font-bold text-gray-900 mb-4">Activate your license</h1>
                    <p class="text-gray-600 leading-relaxed text-lg">
                    Enter your Link Whisper license key to enable updates and unlock premium features.
                    </p>
                </div>

                <ul class="space-y-4 mb-8">
                    <li class="flex items-start">
                    <div class="bg-purple-100 p-1 rounded-full mr-3 mt-1">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-purple-600">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                        </svg>
                    </div>
                    <span class="text-gray-700 font-medium">Enable automatic plugin updates</span>
                    </li>

                    <li class="flex items-start">
                    <div class="bg-purple-100 p-1 rounded-full mr-3 mt-1">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-purple-600">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                        </svg>
                    </div>
                    <span class="text-gray-700 font-medium">Access premium features and support</span>
                    </li>

                    <li class="flex items-start">
                    <div class="bg-purple-100 p-1 rounded-full mr-3 mt-1">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-purple-600">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                        </svg>
                    </div>
                    <span class="text-gray-700 font-medium">Keep your site secure and compatible</span>
                    </li>
                </ul>

                <!-- License input -->
                <div class="bg-gray-50 border border-gray-100 rounded-2xl p-6">
                    <label class="text-sm font-bold text-gray-500 uppercase tracking-wider block mb-3">
                    License Key
                    </label>
                    <form id="wpil-setup-wizard-license-activate" method="post">
                        <?php settings_fields('wpil_license'); ?>
                        <input type="hidden" name="hidden_action" value="activate_license">
                        
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-gray-400">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 0h10.5A2.25 2.25 0 0119.5 12.75v6A2.25 2.25 0 0117.25 21H6.75A2.25 2.25 0 014.5 18.75v-6A2.25 2.25 0 016.75 10.5z" />
                                </svg>
                            </div>

                            <input type="text" id="wpil_license_key" name="wpil_license_key" 
                                class="w-full pl-11 pr-4 py-3.5 bg-white border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all outline-none text-gray-800 placeholder-gray-400"
                                placeholder="Paste your license key here..." autocomplete="off"/>
                        </div>
                        <?php wp_nonce_field( 'wpil_activate_license_nonce', 'wpil_activate_license_nonce' ); ?>
                    </form>

                    <!-- Inline status placeholders (wire these up in WP as needed) -->
                    <div class="mt-4 flex items-start gap-3">
                    <div class="w-9 h-9 rounded-full bg-white border border-gray-200 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-gray-400">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0 3.75h.007M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-gray-800">Where do I find my key?</div>
                        <div class="text-sm text-gray-500">You can copy it from your purchase receipt or your Link Whisper account dashboard.</div>
                    </div>
                    </div>
                </div>

                <!-- Optional small links -->
                <div class="mt-5 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
                    <a href="#" class="text-gray-400 hover:text-gray-600 font-medium transition-colors" style="display:none">I don’t have a license yet</a>
                    <a href="https://linkwhisper.tawk.help/" target="_blank" class="text-gray-400 hover:text-gray-600 font-medium transition-colors">Having trouble? Contact support</a>
                </div>
                </div>

                <!-- Right: visual -->
                <div class="flex justify-center items-center">
                <div class="relative bg-gray-50 rounded-2xl p-10 w-full border border-gray-100 shadow-inner overflow-hidden">

                    <div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 rounded-full bg-gradient-to-br from-purple-100 to-blue-50 opacity-60 blur-3xl"></div>

                    <div class="relative z-10 flex flex-col items-center text-center">
                    <div class="animate-softpulse w-20 h-20 bg-white rounded-2xl shadow-md flex items-center justify-center border border-gray-200">
                        <!-- Key icon -->
                        <img class="license-key-icon" style="height:40px" src="<?php echo esc_url($license_key_icon); ?>" alt="Link Whisper License Key" />
                    </div>

                    <div class="mt-5">
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</div>
                        <div class="wpil-wizard-license-status-title mt-2 text-xl font-bold text-gray-900"><?php echo esc_html($status_titles[$licensing_state]); ?></div>
                        <div class="wpil-wizard-license-status-message mt-2 text-sm text-gray-500 max-w-sm">
                            <?php echo esc_html($status_messages[$licensing_state]); ?>
                        </div>
                    </div>

                    <div class="mt-8 w-full bg-white rounded-2xl border border-gray-100 p-6 text-left">
                        <div class="text-sm font-bold text-gray-700 mb-3">What activation unlocks</div>

                        <div class="space-y-3">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-purple-50 border border-purple-100 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#7F5AF0" class="w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 0h10.5A2.25 2.25 0 0119.5 12.75v6A2.25 2.25 0 0117.25 21H6.75A2.25 2.25 0 014.5 18.75v-6A2.25 2.25 0 016.75 10.5z" />
                            </svg>
                            </div>
                            <div class="text-sm text-gray-700 font-medium">Premium features</div>
                        </div>

                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-blue-50 border border-blue-100 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#2C6BFF" class="w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l9.932-9.931z" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 7.125L16.862 4.487" />
                            </svg>
                            </div>
                            <div class="text-sm text-gray-700 font-medium">Automatic updates</div>
                        </div>

                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-green-50 border border-green-100 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
                                <path d="M20 7l-8-4-8 4"></path>
                                <path d="M4 7v10l8 4 8-4V7"></path>
                                <path d="M12 22V12"></path>
                                <path d="M20 7l-8 5-8-5"></path>
                            </svg>
                            </div>
                            <div class="text-sm text-gray-700 font-medium">Support access</div>
                        </div>
                        </div>
                    </div>

                    </div>
                </div>
                </div>

            </div>

            <!-- Footer actions (same pattern as Connect GSC) -->
            <div class="flex items-center justify-end pt-8 mt-8 border-t border-gray-100">
                <div class="flex items-center gap-3">
                <button class="linkwhisper-wizard-activate-license lw-gradient-bg text-white font-bold text-lg px-8 py-3.5 rounded-xl shadow-lg hover:shadow-xl hover:opacity-95 transition-all focus:ring-4 focus:ring-purple-200 outline-none flex items-center">
                    <span class="wpil-setup-wizard-loading flex items-center gap-2" style="margin-right: 10px; display:none;">
                        <svg class="w-5 h-5 animate-spin" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity="0.25"></circle>
                            <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path>
                        </svg>
                    </span>
                    <span>Activate License</span>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 ml-2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                    </svg>
                </button>
                </div>
            </div>

            </div>
        </div>
    </div>
</div>
