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

<div id="levels-container">
    
    <div class="strategy-box-pro">
        <h2 data-i18n="phase1_title" style="color: #b91c1c; font-weight: 900; text-transform: uppercase; margin:0;">PHASE 1 : L'ERREUR CRITIQUE DEVOILEE</h2>
        <p data-i18n="phase1_desc" style="font-size: 1.1rem; color: #475569; margin-top:10px;">C'est ce qui bloquait 80% de votre visibilite.</p>
    </div>

    <div class="level-card active" id="level1">
        <div class="level-header" onclick="window.AvisionDashboard.toggleLevel('level1')">
            <div style="display:flex; align-items:center;">
                <span class="level-badge" id="lvl1StatusBadge">LVL 1</span>
                <span class="level-title" data-i18n="lvl1_title">Category Correction</span>
            </div>
            <span id="chevron-level1" class="level-chevron">▼</span>
        </div>
        
        <div id="level1-content" class="accordion-wrapper">
            <div class="level-actions">
                <p data-i18n="lvl1_body" style="margin-bottom: 20px;">Definissez "Agence Marketing" comme votre categorie principale.</p>
                
                <div class="ai-box">
                    <strong data-i18n="ai_analysis_label">🤖 IA Analysis:</strong>
                    <p data-i18n="ai_analysis_text" style="font-size:0.9rem; margin:5px 0 0 0;">J'ai filtre les fiches. Voici les categories strategiques :</p>
                </div>

                <div class="btn-group">
                    <button class="btn-outline" onclick="window.AvisionDashboard.toggleHowTo('level1')" data-i18n="lvl1_howto_btn">💡 How to?</button>
                    <a href="https://business.google.com" target="_blank" class="btn-primary" data-i18n="lvl1_start">📍 Ouvrir ma fiche</a>
                    <button class="btn-verify" id="btnVerify1" onclick="window.AvisionDashboard.verifyLevel1(event)" data-i18n="lvl1_verify_btn">Verify Action</button>
                </div>
                
                <div id="verifyFeedback" class="feedback-box" style="display:none;"></div>
                
                <div id="howToBox-level1" class="howto-box" style="display:none;">
                    <p data-i18n="lvl1_steps">1. Ouvrez... 2. Editez...</p>
                </div>
            </div>
        </div>
    </div>

    <div class="level-card locked" id="level2" onclick="window.AvisionDashboard.handleLockedClick(event)">
        <div class="level-header" onclick="window.AvisionDashboard.toggleLevel('level2')">
            <div style="display:flex; align-items:center;">
                <span class="level-badge gray">LVL 2</span>
                <span class="level-title" data-i18n="lvl2_title">Description Optimization</span>
            </div>
            <div style="text-align:right;">
                <span data-i18n="timer_label" style="font-size:0.75rem; color:#64748b; display:block; text-transform:uppercase; font-weight:700;">Unlocks in:</span>
                <span id="unlockTimer" style="font-weight:800; color:#3b82f6; font-family:monospace; font-size:1.1rem;">72:00:00</span>
            </div>
        </div>
        <div id="level2-content" class="accordion-wrapper">
             <div class="level-actions">
                <p data-i18n="timer_note">🔒 Le timer demarre apres le niveau 1.</p>
             </div>
        </div>
    </div>

    <div class="level-card premium-locked" id="level3" onclick="window.AvisionDashboard.handleLockedClick(event)">
        <div class="level-header" onclick="window.AvisionDashboard.toggleLevel('level3')">
            <div style="display:flex; align-items:center;">
                <span class="level-badge">LVL 3</span>
                <span class="level-title" data-i18n="lvl3_title">Photos (Pack 1)</span>
            </div>
            <div style="display:flex; align-items:center; gap:10px;">
                <span class="premium-tag">🔒 PREMIUM</span>
                <span id="chevron-level3" class="level-chevron">▼</span>
            </div>
        </div>
        <div id="level3-content" class="accordion-wrapper">
            <div class="level-actions">
                <div class="automation-settings">
                    <h4 data-i18n="auto_settings_title" style="margin-bottom:15px;">Configuration Autopilote :</h4>
                    <div class="setting-row">
                        <span class="setting-label" data-i18n="setting_reviews">✍️ Reponses aux Avis</span>
                        <div class="toggle-container" onclick="window.AvisionDashboard.toggleSwitch(this)">
                            <div class="toggle-option active" data-val="auto">Auto</div>
                            <div class="toggle-option" data-val="manual">Manual</div>
                        </div>
                    </div>
                </div>
                <button class="btn-primary btn-gold" data-i18n="lvl3_btn">Unlock Autopilot</button>
            </div>
        </div>
    </div>

    <div class="level-card bonus" id="level4">
        <div class="level-header" onclick="window.AvisionDashboard.toggleLevel('level4')">
            <div style="display:flex; align-items:center;">
                <span class="level-badge purple">BONUS</span>
                <span class="level-title purple-text" data-i18n="lvl4_title">Website Boost</span>
            </div>
            <span id="chevron-level4" class="level-chevron purple-text">▼</span>
        </div>
        <div id="level4-content" class="accordion-wrapper">
            <div class="level-actions">
                <p data-i18n="bonus_desc" style="margin-bottom:15px;">Integrez la carte pour le SEO local.</p>
                <textarea id="emailTemplate" class="email-area" readonly data-i18n="email_template"></textarea>
                <button class="btn-primary btn-purple" onclick="window.AvisionDashboard.copyWebmasterEmail()" data-i18n="btn_copy">📋 Copy Email</button>
            </div>
        </div>
    </div>

</div>
