<?php
if (!defined('ABSPATH')) exit;
$current_user = wp_get_current_user();
$plan = get_user_meta(get_current_user_id(), 'vmo_subscription_status', true);
?>
<?php // Removed stray closing tags and leaked PHP text that caused output at top of page ?>

<!-- ✅ Your Container with the Required ID -->
<div class="vmo-builder-container" id="vmo-ai-builder-main">
  <div class="vmo-builder-header" style="justify-content: space-between; flex-wrap: wrap;">
    <div style="display:flex; align-items:center; gap:12px; padding-left:16px; padding-top:8px;">
      <img src="<?php echo VMO_AI_BUILDER_URL . 'assets/vmo-icon.svg'; ?>" class="vmo-logo" alt="VMO Logo" style="height:48px; width:auto;" />
      <span class="vmo-plugin-name-short">VMO AI Web Business Builder</span>
    </div>
  
    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-right: 14px;">
      <div class="vmo-balance-plan-container" style="display: flex; align-items: center; gap: 6px;">
        <div class="vmo-plan-display<?php echo ($plan === 'free' ? ' vmo-plan-display--expired' : ''); ?>" style="font-size: 10px; background: rgba(255,255,255,0.1); padding: 2px 4px; border-radius: 4px;">
          <?php
            // Friendly plan name display - updated to match new subscription tiers
            $plan_labels = [
              'tester'     => 'Tester',
              'starter'    => 'Starter',
              'pro'        => 'Pro',
              'elite'      => 'Elite',
              'enterprise' => 'Enterprise',
              // Legacy support
              'starter_pack'   => 'Starter',
              'pro_pack'       => 'Pro',
              'business_pack'  => 'Elite',
              'enterprise_pack'=> 'Enterprise',
            ];
            $plan_display = 'No Plan';
            if (!empty($plan)) {
              if ($plan === 'free') {
                $plan_display = 'No Plan';
              } elseif (isset($plan_labels[$plan])) {
                $plan_display = $plan_labels[$plan];
              } else {
                // Fallback: convert snake_case to Title Case
                $plan_display = ucwords(str_replace('_', ' ', $plan));
              }
            }
            echo esc_html($plan_display);
          ?>
        </div>
      </div>
      <button id="vmo-theme-toggle" class="vmo-btn vmo-btn-metallic" title="Toggle Theme">🌓</button>

      <div class="vmo-upgrade-toggle-group">
        <button class="vmo-btn-metallic" id="vmo_upgrade_plan_btn" title="Upgrade Plan">⚡</button>
        <div class="vmo-upgrade-menu" id="vmo-upgrade-menu">
          <?php
          // Updated subscription plans - matching My Plan page
          $plans = [
            'tester'     => ['label' => 'Tester',     'price' => '$49.99/mo',  'desc' => 'Perfect for testing'],
            'starter'    => ['label' => 'Starter',    'price' => '$99.99/mo',  'desc' => 'Great for solo founders'],
            'pro'        => ['label' => 'Pro',        'price' => '$199.99/mo', 'desc' => 'Ideal for growing teams'],
            'elite'      => ['label' => 'Elite',      'price' => '$499.99/mo', 'desc' => 'Enterprise-grade features'],
            'enterprise' => ['label' => 'Enterprise', 'price' => '$999.99/mo', 'desc' => 'Custom solutions'],
          ];
          foreach ($plans as $key => $info): ?>
            <div class="vmo-plan-row">
              <button class="vmo-plan-btn" data-plan="<?= esc_attr($key); ?>">
                <?= esc_html($info['label']); ?>
              </button>
              <div class="vmo-plan-desc-banner">
                <h3><?= esc_html($info['label']); ?> <span class="vmo-plan-price"><?= esc_html($info['price']); ?></span></h3>
                <?php if (isset($info['desc'])): ?>
                <p><small><?= esc_html($info['desc']); ?></small></p>
                <?php endif; ?>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>

     
      
      <!-- Consultation Status & Business Wizard Trigger -->
      <div id="vmo-consultation-status" style="display:inline-flex;gap:8px;align-items:center;">
        <span class="vmo-chip" data-ready="false"></span>
        <button type="button" class="vmo-btn vmo-btn-business-wizard" id="vmo-business-wizard-btn" title="Complete Business Consultation">
          Business Wizard
        </button>
      </div>
      
     <button class="vmo-btn vmo-btn-undo" id="vmo-undo-btn">Undo</button> 
     <button class="vmo-btn vmo-btn-draft vmo-btn-wide" id="vmo_save_project_btn">Save</button> 

    </div>
  </div>

  <div class="vmo-main-flex">
    <div class="vmo-chat-panel">
        
      <!-- Chat history & input -->
      <div class="vmo-chat-history vmo-chat-log" id="vmo-chat-history"></div>

      <label class="vmo-theme-align-row">
        <input type="checkbox" id="vmo-theme-align" />
        Emphasize layout&nbsp;&amp;&nbsp;responsiveness
      </label>

      <div class="vmo-chat-input-row vmo-chat-input-container">
        <textarea class="vmo-chat-input" id="vmo-prompt-input" placeholder="Describe what you want…"></textarea>
        <div class="vmo-input-controls">
          <!-- Media Integration Button - triggers AI-powered media integration modal -->
          <button class="vmo-input-btn vmo-input-media-btn" id="vmo-media-btn" type="button" title="Add Media (Hero, Gallery, Carousel, etc.)">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
            </svg>
          </button>
          <button class="vmo-input-btn vmo-input-send-btn" id="vmo-send-btn" type="button" title="Send Message">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
            </svg>
          </button>
        </div>
      </div>

      <div class="vmo-action-row">
        
       
      </div>
      
    </div><!-- END .vmo-chat-panel -->

    <div class="vmo-preview-panel">
      <div class="vmo-preview-header">
        <span id="vmo-preview-title">Live Preview</span>
        <div id="vmo-device-toggle" style="display:inline-flex;gap:4px;margin-left:auto;">
          <button class="vmo-device-btn vmo-device-active" data-device="desktop" title="Desktop (100%)" style="background:rgba(102,126,234,0.2);border:1px solid #667eea;color:#667eea;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.2s ease;">🖥 Desktop</button>
          <button class="vmo-device-btn" data-device="tablet" title="Tablet (768px)" style="background:transparent;border:1px solid rgba(255,255,255,0.15);color:#8899aa;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.2s ease;">📱 Tablet</button>
          <button class="vmo-device-btn" data-device="mobile" title="Mobile (375px)" style="background:transparent;border:1px solid rgba(255,255,255,0.15);color:#8899aa;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.2s ease;">📲 Mobile</button>
        </div>
      </div>
               
      <iframe class="vmo-preview-iframe" id="vmo-preview-iframe" 
              sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-presentation"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              loading="eager"></iframe>
      <!-- Changed from <pre> to <textarea> for live, editable code view -->
      <textarea class="vmo-code-view" id="vmo-code-view" style="display:none; width:100%; min-height:1000px; font-family:monospace; background:#181c20; color:#fff; border:1px solid #333; padding:12px; resize:vertical;"></textarea>
      <div id="vmo-iframe-zoom-bar" style="margin: 10px 0 0 0; text-align:right; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;">
        <button class="vmo-btn vmo-btn-publish vmo-btn-wide" id="vmo-publish-btn" data-published="false">✅ Publish</button>
        <button class="vmo-btn vmo-btn-update-live" id="vmo-update-live-btn" style="display: none; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; border: none;">🔄 Update Live</button>
        <button class="vmo-btn" id="vmo-view-browser-btn">
          View In Browser
        </button>
      </div>
    </div><!-- END .vmo-preview-panel -->

  </div><!-- END .vmo-main-flex -->

  <details class="vmo-builder-danger-zone vmo-builder-danger-zone--main">
    <summary>Builder Safety Tools</summary>
    <div class="vmo-builder-danger-zone-body">
      <p class="vmo-builder-danger-copy">Reset Builder removes the active website from the frontend and from VMO, returns the builder to the point before consultation, and requires a full restart of the business setup.</p>
      <p class="vmo-builder-danger-copy vmo-builder-danger-copy-muted">VMO creates a full database backup first, keeps the 3 newest Reset Builder backups, and restores a backup back into the builder as an unpublished draft.</p>
      <div class="vmo-builder-danger-actions">
        <button type="button" id="vmo-open-reset-builder" class="vmo-btn vmo-btn-secondary">Reset Builder</button>
        <button type="button" id="vmo-refresh-reset-backups" class="vmo-btn">View Reset Backups</button>
      </div>
      <div id="vmo-reset-backups-panel" class="vmo-reset-backups-panel" hidden>
        <div id="vmo-reset-backups-list" class="vmo-reset-backups-list"></div>
      </div>
    </div>
  </details>


  <div class="vmo-footer">
    Built with ❤️ by <a href="https://jerremejosephson.com" target="_blank" rel="noopener">Jerreme Josephson LLC</a>
  </div>

</div><!-- END .vmo-builder-container -->

<!-- ========================================
     🎤 JARVIS-STYLE FLOATING VOICE CHAT PANEL
     (Bottom-Left Corner - As shown in screenshot)
     ======================================== -->
<div id="vmo-ai-voice" class="vmo-ai-voice-panel">
  <div class="vmo-voice-header">
    <span class="vmo-voice-title">VMO AI Voice</span>
    <div class="vmo-voice-header-actions">
      <button class="vmo-voice-settings" id="vmo-voice-settings" title="Voice Settings" style="background:none;border:none;cursor:pointer;margin-right:4px;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M19.14,12.94a7.43,7.43,0,0,0,.05-.94,7.43,7.43,0,0,0-.05-.94l2.11-1.65a.48.48,0,0,0,.11-.61l-2-3.46a.5.5,0,0,0-.6-.22l-2.49,1a7.28,7.28,0,0,0-1.63-.94l-.38-2.65A.49.49,0,0,0,13.69,2H10.31a.49.49,0,0,0-.49.41L9.44,5.06a7.28,7.28,0,0,0-1.63.94l-2.49-1a.5.5,0,0,0-.6.22l-2,3.46a.48.48,0,0,0,.11.61L5,11.06a7.43,7.43,0,0,0-.05.94,7.43,7.43,0,0,0,.05.94L2.89,14.59a.48.48,0,0,0-.11.61l2,3.46a.5.5,0,0,0,.6.22l2.49-1a7.28,7.28,0,0,0,1.63.94l.38,2.65a.49.49,0,0,0,.49.41h3.38a.49.49,0,0,0,.49-.41l.38-2.65a7.28,7.28,0,0,0,1.63-.94l2.49,1a.5.5,0,0,0,.6-.22l2-3.46a.48.48,0,0,0-.11-.61ZM12,15.5A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"></path>
        </svg>
      </button>
      <button class="vmo-voice-collapse" id="vmo-voice-collapse" title="Minimize">−</button>
    </div>
  </div>
  
  <div class="vmo-voice-status" id="vmo-voice-status">
    Voice Consultation Stopped
  </div>
  
  <!-- Chat History -->
  <div class="vmo-voice-chat-history" id="vmo-voice-chat-history">
    <!-- Chat messages will appear here -->
  </div>
  
  <!-- Input Controls -->
  <div class="vmo-voice-input-controls">
    <!-- ✅ NEW: Upload Button for Jarvis AI Chat Panel -->
    <button class="vmo-voice-btn vmo-voice-btn-upload vmo-voice-btn-wide" id="vmo-voice-upload-btn" title="Upload Images/Files">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
      </svg>
    </button>
    
    <button class="vmo-voice-btn vmo-voice-btn-text vmo-voice-btn-wide" id="vmo-voice-text-btn" title="Text Input">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
      </svg>
    </button>
    
    <button class="vmo-voice-btn vmo-voice-btn-voice vmo-voice-btn-wide" id="vmo-voice-mic-btn" title="Voice Input (Speech-to-Text)">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93h2c0 3.31 2.69 6 6 6s6-2.69 6-6h2c0 4.08-3.05 7.44-7 7.93V19h4v2H8v-2h4v-3.07z"/>
      </svg>
    </button>
  </div>
  
  <!-- Start Voice Button (Prominent) -->
  <button class="vmo-voice-start-btn" id="vmo-voice-start-btn">
    <span class="vmo-voice-start-icon">🎤</span>
    <span class="vmo-voice-start-text">Start Voice</span>
  </button>
</div>

<!-- ========================================
     🎯 LISTENING MODAL (For future TTS)
     Displays when AI speaks (VMO TTS HD)
     ======================================== -->
<div id="vmo-listening-modal" class="vmo-listening-modal" style="display: none;">
  <div class="vmo-listening-content">
    <button id="vmo-listening-close" title="End Voice Conversation" style="position:absolute;top:10px;right:10px;background:#222;color:#fff;border:1px solid #444;border-radius:4px;cursor:pointer;padding:4px 8px;">✕ End</button>
    <button id="vmo-listening-mute" title="Mute / Unmute" style="position:absolute;top:10px;right:80px;background:#222;color:#fff;border:1px solid #444;border-radius:4px;cursor:pointer;padding:4px 8px;">Mute</button>
    <button id="vmo-listening-upload" title="Upload" style="position:absolute;top:10px;right:150px;background:#222;color:#fff;border:1px solid #444;border-radius:4px;cursor:pointer;padding:4px 8px;display:none;">Upload</button>
    <div class="vmo-listening-icon">
      <div class="vmo-sound-wave"></div>
    </div>
    <div class="vmo-listening-text">Listening...</div>
    <div class="vmo-listening-transcript" id="vmo-listening-transcript">
      <!-- Real-time transcript will appear here -->
    </div>
  </div>
</div>

<!-- 🧙‍♂️ BUSINESS WIZARD - Full Page Modal [STANDARDIZED] -->
<div id="vmo-business-wizard-modal" class="vmo-fs-modal" aria-hidden="true" role="dialog" aria-modal="true">
  <div class="vmo-modal-overlay" data-vmo-close="vmo-business-wizard-modal"></div>
  <div class="vmo-modal-panel vmo-wizard-container">
    <div class="vmo-wizard-header">
      <!-- Progress bar fill (lime green) that grows from left to right -->
      <div class="vmo-wizard-header-progress-fill" id="vmo-wizard-progress"></div>
      
      <!-- Content overlay on top of progress bar -->
      <div class="vmo-wizard-header-content">
        <div class="vmo-wizard-progress">
          <span class="vmo-progress-text" id="vmo-wizard-progress-text">Business Consultation</span>
        </div>
        <button class="vmo-wizard-close" id="vmo-close-business-wizard" title="Close Wizard" data-vmo-close="vmo-business-wizard-modal">✕</button>
      </div>
    </div>
    
    <div class="vmo-wizard-content">
      <!-- Provisioning panel removed as per new Hybrid Email Architecture -->

      <div class="vmo-wizard-conversation" id="vmo-wizard-conversation">
        <div class="vmo-ai-message vmo-wizard-intro">
          <div class="vmo-message-content vmo-wizard-intro-large">
            <div class="vmo-wizard-main-text" style="text-align: center;">
              <h3 style="font-size: 28px; margin-bottom: 16px;">🏢 Enhanced Business Consultation Wizard (v8.0)</h3>
              <p style="font-size: 18px; line-height: 1.4; margin-bottom: 20px;">I'm your enhanced AI business consultant with voice, media, and database integration. I'll conduct a comprehensive consultation, then create your complete business package:</p>
              <ol class="vmo-wizard-services-list" style="font-size: 16px; text-align: left; display: inline-block; line-height: 1.6; margin-bottom: 20px;">
                <li><strong>🎙️ Voice Conversation Support</strong> - Talk to me naturally using advanced voice integration</li>
                <li><strong>📎 Media Upload Integration</strong> - Upload logos, documents, images during consultation</li>
                <li><strong>� Complete Business Analysis</strong> - 7 specialized AI agents create comprehensive reports</li>
                <li><strong>🌐 Multi-Page Website Generation</strong> - Professional, SEO-optimized websites with media integration</li>
                <li><strong>� Business Intelligence Package</strong> - Complete business plan, legal docs, marketing strategy</li>
                <li><strong>📞 Phone Service Integration</strong> - Professional business phone setup with AI receptionist</li>
                <li><strong>💾 Database Storage</strong> - All consultation data saved with monthly progress reports</li>
              </ol>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="vmo-wizard-input-area">
        <div class="vmo-wizard-suggestions" id="vmo-wizard-suggestions">
          <!-- Dynamic suggestion buttons will appear here -->
        </div>
        
        <div class="vmo-wizard-input-container">
          <textarea id="vmo-wizard-response" placeholder="Type your answer here, use 💬 for voice-to-text, 📎 for uploads, or 🎤 for voice conversation..." rows="3"></textarea>
          
          <div class="vmo-wizard-input-controls">
            <!-- ENHANCED BUSINESS CONSULTATION CONTROLS v8.0 -->
            
            <!-- File Upload Button -->
            <button class="vmo-wizard-input-btn vmo-wizard-input-upload-btn" id="vmo-wizard-upload" type="button" title="Click + icon to upload files (logos, images, documents)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
              </svg>
            </button>
            
            <!-- Camera Capture Button (opens device camera when available) -->
            <button class="vmo-wizard-input-btn vmo-wizard-input-video-btn" id="vmo-wizard-video" type="button" title="Open camera (show your product, service, or workspace)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M20 5h-3.59l-1.7-1.71A.996.996 0 0 0 13 3h-2c-.28 0-.53.11-.71.29L8.59 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-7.5 12c-2.49 0-4.5-2.01-4.5-4.5S9.01 8 11.5 8 16 10.01 16 12.5 13.99 17 11.5 17z"/>
              </svg>
            </button>
            
            <!-- Speech-to-Text Button (match Jarvis mic icon) -->
            <button class="vmo-wizard-input-btn vmo-wizard-input-transcribe-btn" id="vmo-wizard-transcribe" type="button" title="Voice-to-Text (transcribe and edit before sending)">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1 1.93c-3.94-.49-7-3.85-7-7.93h2c0 3.31 2.69 6 6 6s6-2.69 6-6h2c0 4.08-3.05 7.44-7 7.93V19h4v2H8v-2h4v-3.07z"/>
              </svg>
            </button>
            
            <!-- Extended Voice Conversation Button -->
            <button class="vmo-wizard-input-btn vmo-wizard-input-voice-btn" id="vmo-wizard-voice" type="button" title="Extended Voice Conversation (talk naturally with AI)">
              <span aria-hidden="true" style="font-size:18px;line-height:1">🎤</span>
            </button>

            <!-- Mute Mic Button (Hidden by default, shown when voice is active) -->
            <button class="vmo-wizard-input-btn vmo-wizard-input-mute-btn" id="vmo-wizard-mute" type="button" title="Mute Microphone" style="display: none;">
              <span aria-hidden="true" style="font-size:18px;line-height:1">🔇</span>
            </button>
            
            <!-- Send Button -->
            <button class="vmo-wizard-input-btn vmo-wizard-input-send-btn" id="vmo-wizard-send" type="button" title="Send Answer">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
              </svg>
            </button>
            
            <!-- Live voice status for Business Consultation -->
            <div id="vmo-wizard-voice-status" style="display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:#9bd;">
              <span id="vmo-wizard-voice-status-dot" style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#2e7d32;"></span>
              <span id="vmo-wizard-voice-status-text">Ready</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Final Review & Generation Phase -->
    <div class="vmo-wizard-review" id="vmo-wizard-review" style="display: none;">
      <div class="vmo-review-header">
        <h3>📋 Business Development Plan</h3>
        <p>Review your responses and approve the plan for AI generation</p>
      </div>
      
      <div class="vmo-review-content" id="vmo-review-content">
        <!-- Generated business plan summary -->
      </div>
      
      <div class="vmo-review-actions">
        <button id="vmo-wizard-edit-plan" class="vmo-wizard-btn vmo-wizard-btn-secondary">
          ✏️ Edit Plan
        </button>
        <button id="vmo-wizard-approve-plan" class="vmo-wizard-btn vmo-wizard-btn-success">
          ✅ Approve & Generate Everything
        </button>
      </div>
    </div>
    
    <!-- AI Generation Progress -->
    <div class="vmo-wizard-generation" id="vmo-wizard-generation" style="display: none;">
      <div class="vmo-generation-header">
        <h3>🤖 AI Agents Working on Your Business</h3>
        <p>Multiple AI specialists are creating your complete business package...</p>
      </div>
      
      <div class="vmo-generation-agents">
        <div class="vmo-agent-status" id="vmo-agent-designer">
          <div class="vmo-agent-icon">🎨</div>
          <div class="vmo-agent-info">
            <h4>Web Designer Agent</h4>
            <p class="vmo-agent-progress">Creating multi-page website...</p>
          </div>
          <div class="vmo-agent-indicator">⏳</div>
        </div>
        
        <div class="vmo-agent-status" id="vmo-agent-analyst">
          <div class="vmo-agent-icon">📊</div>
          <div class="vmo-agent-info">
            <h4>Business Analyst Agent</h4>
            <p class="vmo-agent-progress">Conducting market research...</p>
          </div>
          <div class="vmo-agent-indicator">⏳</div>
        </div>
        
        <div class="vmo-agent-status" id="vmo-agent-legal">
          <div class="vmo-agent-icon">⚖️</div>
          <div class="vmo-agent-info">
            <h4>Legal Document Agent</h4>
            <p class="vmo-agent-progress">Drafting legal documents...</p>
          </div>
          <div class="vmo-agent-indicator">⏳</div>
        </div>
        
        <div class="vmo-agent-status" id="vmo-agent-content">
          <div class="vmo-agent-icon">📝</div>
          <div class="vmo-agent-info">
            <h4>Content Creator Agent</h4>
            <p class="vmo-agent-progress">Writing business content...</p>
          </div>
          <div class="vmo-agent-indicator">⏳</div>
        </div>
        
        <div class="vmo-agent-status" id="vmo-agent-seo">
          <div class="vmo-agent-icon">🚀</div>
          <div class="vmo-agent-info">
            <h4>SEO Marketing Agent</h4>
            <p class="vmo-agent-progress">Optimizing for search engines...</p>
          </div>
          <div class="vmo-agent-indicator">⏳</div>
        </div>
      </div>
      
      <div class="vmo-generation-progress">
        <div class="vmo-overall-progress">
          <div class="vmo-progress-bar-large">
            <div class="vmo-progress-fill-large" id="vmo-generation-progress"></div>
          </div>
          <p class="vmo-generation-status" id="vmo-generation-status">Initializing AI agents...</p>
        </div>
      </div>
    </div>
    
    <!-- Results Display -->
    <div class="vmo-wizard-results" id="vmo-wizard-results" style="display: none;">
      <div class="vmo-results-header">
        <h3>🎉 Your Complete Business Package is Ready!</h3>
        <p>All AI agents have completed their work. Your business is ready to launch!</p>
      </div>
      
      <div class="vmo-results-summary">
        <div class="vmo-result-item">
          <div class="vmo-result-icon">🌐</div>
          <div class="vmo-result-info">
            <h4>Multi-Page Website</h4>
            <p>Complete website with navigation, all pages linked</p>
          </div>
          <div class="vmo-result-actions">
            <button class="vmo-wizard-btn vmo-wizard-btn-view">👁️ Preview</button>
            <button class="vmo-wizard-btn vmo-wizard-btn-edit">✏️ Edit</button>
          </div>
        </div>
        
        <div class="vmo-result-item">
          <div class="vmo-result-icon">📊</div>
          <div class="vmo-result-info">
            <h4>Market Analysis Report</h4>
            <p>Competitor research and market opportunities</p>
          </div>
          <div class="vmo-result-actions">
            <button class="vmo-wizard-btn vmo-wizard-btn-download">📥 Download</button>
          </div>
        </div>
        
        <div class="vmo-result-item">
          <div class="vmo-result-icon">⚖️</div>
          <div class="vmo-result-info">
            <h4>Legal Documents</h4>
            <p>Privacy Policy, Terms of Service, Disclaimers</p>
          </div>
          <div class="vmo-result-actions">
            <button class="vmo-wizard-btn vmo-wizard-btn-download">📥 Download</button>
          </div>
        </div>
        
        <div class="vmo-result-item">
          <div class="vmo-result-icon">📋</div>
          <div class="vmo-result-info">
            <h4>Business Plan</h4>
            <p>Complete strategic plan and financial projections</p>
          </div>
          <div class="vmo-result-actions">
            <button class="vmo-wizard-btn vmo-wizard-btn-download">📥 Download</button>
          </div>
        </div>
      </div>
      
      <div class="vmo-results-actions">
        <button id="vmo-wizard-publish-all" class="vmo-wizard-btn vmo-wizard-btn-publish">
          🚀 Publish Website & Download Everything
        </button>
      </div>
    </div>
  </div>
</div>

<div id="vmo-toast-overlay" style="display:none;"></div>
<div id="vmo-toast" class="vmo-toast vmo-toast-info" style="left: 50%; transform: translateX(-50%);">
  <!-- Dynamic toast content -->
</div>

<!-- 🎨 TEMPLATE BROWSER MODAL -->
<div id="vmo-template-modal" class="vmo-template-modal" style="display: none;">
  <div class="vmo-template-container">
    <div class="vmo-template-header">
      <h2>🎨 Choose Your Website Template</h2>
      <div class="vmo-template-search">
        <input type="text" id="vmo-template-search" placeholder="Search templates...">
      </div>
      <button class="vmo-template-close" id="vmo-close-template-modal">&times;</button>
    </div>
    
    <div class="vmo-template-body">
      <div class="vmo-template-sidebar">
        <div class="vmo-template-categories">
          <button class="vmo-template-category-btn active" data-category="all">📋 All Templates</button>
          <button class="vmo-template-category-btn" data-category="restaurant">🍽️ Restaurant & Food</button>
          <button class="vmo-template-category-btn" data-category="business">💼 Business & Corporate</button>
          <button class="vmo-template-category-btn" data-category="creative">🎨 Creative & Agency</button>
          <button class="vmo-template-category-btn" data-category="ecommerce">🛍️ E-commerce & Retail</button>
          <button class="vmo-template-category-btn" data-category="personal">👤 Personal & Portfolio</button>
          <button class="vmo-template-category-btn" data-category="health">🏥 Health & Wellness</button>
        </div>
      </div>
      
      <div class="vmo-template-main">
        <div class="vmo-template-content">
          <div class="vmo-template-grid">
            <!-- Templates will be loaded here dynamically -->
          </div>
          <div class="vmo-template-preview">
            <!-- Template preview will be shown here -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 🔄 RESET BUILDER MODAL -->
<div id="vmo-reset-modal" class="vmo-reset-modal" style="display: none;">
  <div class="vmo-reset-modal-overlay"></div>
  <div class="vmo-reset-modal-content">
    <div class="vmo-reset-modal-header">
      <span class="vmo-reset-icon">⚠️</span>
      <h2>Reset Builder?</h2>
      <button type="button" class="vmo-reset-modal-close" id="vmo-reset-close">&times;</button>
    </div>
    <div class="vmo-reset-modal-body">
      <p class="vmo-reset-warning"><strong>This will remove your current website from both the frontend and the plugin and take you back to the point before consultation.</strong></p>
      <ul class="vmo-reset-list">
        <li>🧹 The active website preview, consultation outputs, KPIs, and tool status inside VMO will be removed from the current builder instance</li>
        <li>🌐 Any live frontend page connected to this builder state will be unpublished</li>
        <li>🔄 You will need to begin the consultation and business setup all over again</li>
        <li>🗄️ A full backup is created first and VMO keeps the 3 newest Reset Builder backups</li>
      </ul>
      <p class="vmo-reset-note">Provisioned phone numbers, email addresses, and other third-party resources are not hard-destroyed automatically. Restoring a backup brings the business back into the builder as an unpublished draft, and you will need to publish again to make it live.</p>
      <div id="vmo-reset-progress" class="vmo-reset-progress" hidden aria-live="polite">
        <div class="vmo-reset-progress-head">
          <div class="vmo-reset-progress-spinner" aria-hidden="true"></div>
          <div class="vmo-reset-progress-copy">
            <strong id="vmo-reset-progress-status">Creating a protected backup...</strong>
            <span id="vmo-reset-progress-stage">Preparing Reset Builder</span>
          </div>
          <span id="vmo-reset-progress-value" class="vmo-reset-progress-value">0%</span>
        </div>
        <div class="vmo-reset-progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <span id="vmo-reset-progress-fill"></span>
        </div>
      </div>
    </div>
    <div class="vmo-reset-modal-actions">
      <button type="button" id="vmo-reset-cancel" class="vmo-reset-btn vmo-reset-btn-cancel">❌ Cancel</button>
      <button type="button" id="vmo-reset-confirm" class="vmo-reset-btn vmo-reset-btn-confirm">🗑️ Yes, Reset Builder</button>
    </div>
  </div>
</div>