<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
echo render_partial( 'header' );
?>

<main class="dashboard-container">
    <div class="dashboard-header">
        <h1 data-i18n="dashboard_title">
            <?php echo $i18n->get('dashboard_title'); ?>
            <span class="company-name"></span>
        </h1>
        <p data-i18n="dashboard_welcome"><?php echo $i18n->get('dashboard_welcome'); ?></p>
    </div>
    
    <div class="demo-banner">
        <h3>🔒 Demo Mode</h3>
        <p>Complete the free levels below, then unlock the full dashboard to access all premium features!</p>
        <a href="/payment" class="btn btn-premium" data-i18n="level_3_unlock"><?php echo $i18n->get('level_3_unlock'); ?> - <?php echo $i18n->get_price('dashboard'); ?></a>
    </div>
    
    <div class="email-widget">
        <input type="email" data-i18n-placeholder="email_widget_guest" placeholder="<?php echo $i18n->get('email_widget_guest'); ?>">
        <button class="btn btn-primary" style="padding: 10px 20px;" data-i18n="email_widget_save"><?php echo $i18n->get('email_widget_save'); ?></button>
        <span class="status" style="display: none;"></span>
    </div>
    
    <div class="score-section">
        <div class="score-circle"></div>
        
        <div class="score-details">
            <div class="score-status critical" data-i18n="dashboard_status_critical">
                <?php echo $i18n->get('dashboard_status_critical'); ?>
            </div>
            
            <div class="kpi-grid">
                <div class="kpi-card">
                    <div class="value">7th</div>
                    <div class="label" data-i18n="kpi_position"><?php echo $i18n->get('kpi_position'); ?></div>
                </div>
                <div class="kpi-card">
                    <div class="value">1st</div>
                    <div class="label" data-i18n="kpi_leader"><?php echo $i18n->get('kpi_leader'); ?></div>
                </div>
                <div class="kpi-card growth">
                    <div class="value" data-i18n="kpi_growth_quotes"><?php echo $i18n->get('kpi_growth_quotes'); ?></div>
                    <div class="label">Potential</div>
                </div>
                <div class="kpi-card growth">
                    <div class="value" data-i18n="kpi_growth_calls"><?php echo $i18n->get('kpi_growth_calls'); ?></div>
                    <div class="label">Potential</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="level-progress-bar">
        <div class="progress-step active">
            <div class="step-circle">1</div>
            <span class="step-label">Category</span>
        </div>
        <div class="progress-step">
            <div class="step-circle">2</div>
            <span class="step-label">Description</span>
        </div>
        <div class="progress-step premium">
            <div class="step-circle">3</div>
            <span class="step-label">Premium</span>
        </div>
        <div class="progress-step">
            <div class="step-circle">4</div>
            <span class="step-label">Bonus</span>
        </div>
    </div>
    
    <div class="levels-container">
        <div class="level-card active" data-level="1">
            <div class="level-header">
                <div class="level-number">
                    <div class="level-badge">1</div>
                    <span class="level-title" data-i18n="level_1_title"><?php echo $i18n->get('level_1_title'); ?></span>
                </div>
                <span class="level-status active">In Progress</span>
            </div>
            <div class="level-content">
                <p class="level-description" data-i18n="level_1_desc"><?php echo $i18n->get('level_1_desc'); ?></p>
                
                <div class="alert-box warning">
                    <span class="icon">⚠️</span>
                    <div>
                        <strong data-i18n="alert_ai_analysis"><?php echo $i18n->get('alert_ai_analysis'); ?></strong>
                        <p>Your category "General Business" should be "Restaurant" based on your business type.</p>
                    </div>
                </div>
                
                <div class="level-actions">
                    <a href="https://business.google.com" target="_blank" class="btn btn-outline" data-i18n="level_1_action">
                        <?php echo $i18n->get('level_1_action'); ?>
                    </a>
                    <button class="btn btn-primary" data-action="verify-level" data-i18n="level_1_verify">
                        <?php echo $i18n->get('level_1_verify'); ?>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="level-card locked" data-level="2">
            <div class="level-header">
                <div class="level-number">
                    <div class="level-badge">2</div>
                    <span class="level-title" data-i18n="level_2_title"><?php echo $i18n->get('level_2_title'); ?></span>
                </div>
                <span class="level-status locked" data-i18n="level_2_locked"><?php echo $i18n->get('level_2_locked'); ?></span>
            </div>
            <div class="level-content">
                <p class="level-description" data-i18n="level_2_desc"><?php echo $i18n->get('level_2_desc'); ?></p>
                
                <div class="countdown-container" style="display: none;">
                    <div class="countdown-timer">72h 00m 00s</div>
                    <div class="countdown-label" data-i18n="level_2_countdown"><?php echo $i18n->get('level_2_countdown'); ?></div>
                </div>
                
                <div class="alert-box warning" style="margin-bottom: 20px;">
                    <span class="icon">⏰</span>
                    <div>
                        <strong data-i18n="alert_algorithm"><?php echo $i18n->get('alert_algorithm'); ?></strong>
                        <p data-i18n="alert_algorithm_msg"><?php echo $i18n->get('alert_algorithm_msg'); ?></p>
                    </div>
                </div>
                
                <div class="level-actions">
                    <a href="https://business.google.com" target="_blank" class="btn btn-outline" data-i18n="level_2_action" disabled>
                        <?php echo $i18n->get('level_2_action'); ?>
                    </a>
                    <button class="btn btn-primary" data-action="verify-level" data-i18n="level_2_verify" disabled>
                        <?php echo $i18n->get('level_2_verify'); ?>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="level-card premium-locked" data-level="3">
            <div class="level-header">
                <div class="level-number">
                    <div class="level-badge">3</div>
                    <span class="level-title" data-i18n="level_3_title"><?php echo $i18n->get('level_3_title'); ?></span>
                </div>
                <span class="level-status premium" data-i18n="level_3_premium"><?php echo $i18n->get('level_3_premium'); ?></span>
            </div>
            <div class="level-content">
                <p class="level-description" data-i18n="level_3_desc"><?php echo $i18n->get('level_3_desc'); ?></p>
                
                <div class="automation-toggles">
                    <div class="toggle-item disabled">
                        <span class="toggle-label" data-i18n="level_3_auto_reviews"><?php echo $i18n->get('level_3_auto_reviews'); ?></span>
                        <div class="toggle-switch"></div>
                    </div>
                    <div class="toggle-item disabled">
                        <span class="toggle-label" data-i18n="level_3_auto_posts"><?php echo $i18n->get('level_3_auto_posts'); ?></span>
                        <div class="toggle-switch"></div>
                    </div>
                </div>
                
                <div class="level-actions">
                    <button class="btn btn-premium" data-action="unlock-premium" data-i18n="level_3_unlock">
                        <?php echo $i18n->get('level_3_unlock'); ?> - <?php echo $i18n->get_price('dashboard'); ?>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="bonus-section">
            <div class="bonus-header">
                <h3>
                    <span>🎁</span>
                    <span data-i18n="level_4_title"><?php echo $i18n->get('level_4_title'); ?></span>
                    <span class="badge" style="margin-left: 10px; font-size: 12px;" data-i18n="level_4_bonus"><?php echo $i18n->get('level_4_bonus'); ?></span>
                </h3>
                <span class="bonus-toggle-icon">▼</span>
            </div>
            <div class="bonus-content">
                <div class="bonus-inner">
                    <p class="level-description" data-i18n="level_4_desc"><?php echo $i18n->get('level_4_desc'); ?></p>
                    
                    <label style="display: block; margin-bottom: 10px; font-weight: 500;" data-i18n="level_4_email_template">
                        <?php echo $i18n->get('level_4_email_template'); ?>
                    </label>
                    <textarea id="validation-post-textarea" class="email-template" data-i18n="email_template" placeholder=""></textarea>
                    
                    <div class="bonus-actions">
                        <button class="btn btn-outline" data-action="copy-email" data-i18n="level_4_copy">
                            <?php echo $i18n->get('level_4_copy'); ?>
                        </button>
                        <button class="btn btn-primary" data-action="email-sent" data-i18n="level_4_sent">
                            <?php echo $i18n->get('level_4_sent'); ?>
                        </button>
                        <button class="btn btn-outline" data-action="skip-level4" data-i18n="level_4_later">
                            <?php echo $i18n->get('level_4_later'); ?>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="premium-upgrade">
        <h2>Unlock Your Full Potential</h2>
        <p>Get access to all premium features including automated workflows, review management, and advanced analytics.</p>
        <div class="premium-price"><?php echo $i18n->get_price('dashboard'); ?></div>
        <div class="premium-features">
            <div class="premium-feature">
                <span class="check">✓</span>
                <span>Unlimited Audits</span>
            </div>
            <div class="premium-feature">
                <span class="check">✓</span>
                <span>Automated Review Responses</span>
            </div>
            <div class="premium-feature">
                <span class="check">✓</span>
                <span>Automated Posts</span>
            </div>
            <div class="premium-feature">
                <span class="check">✓</span>
                <span>Priority Support</span>
            </div>
        </div>
        <a href="/payment" class="btn btn-primary" style="background: white; color: var(--primary-color);">
            Upgrade Now
        </a>
    </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
    window.avisionScore = new AvisionScore('.score-circle');
    window.avisionScore.init(42);
});
</script>

<?php echo render_partial('footer'); ?>
