<section dir="rtl" class="taamito-wizard-section">
    <div class="wizard-wrapper">
        <div class="wizard-container">
            <div class="wizard-header">
                <h2><?php echo __('Taamito Data Transfer Wizard','taamito'); ?></h2>
                <p><?php echo __('This wizard will help you transfer your WordPress data to Taamito for the first time','taamito'); ?></p>
            </div>

            <div class="wizard-tabs">
                <div class="wizard-tab active" data-tab="1" data-step="categories">
                    <span class="tab-number">1</span>
                    <span class="tab-title"><?php echo __('Categories','taamito'); ?></span>
                </div>
                <div class="wizard-tab" data-tab="2" data-step="category-tree">
                    <span class="tab-number">2</span>
                    <span class="tab-title"><?php echo __('Category Tree','taamito'); ?></span>
                </div>
                <div class="wizard-tab" data-tab="3" data-step="features">
                    <span class="tab-number">3</span>
                    <span class="tab-title"><?php echo __('Features','taamito'); ?></span>
                </div>
                <div class="wizard-tab" data-tab="4" data-step="feature-values">
                    <span class="tab-number">4</span>
                    <span class="tab-title"><?php echo __('Feature Values','taamito'); ?></span>
                </div>
                <div class="wizard-tab" data-tab="5" data-step="products">
                    <span class="tab-number">5</span>
                    <span class="tab-title"><?php echo __('Products','taamito'); ?></span>
                </div>
            </div>

            <div class="wizard-steps">
                <div class="step active" data-step="categories" data-tab="1">
                    <div class="step-header">
                        <span class="step-number">1</span>
                        <span class="step-title"><?php echo __('Sync Categories','taamito'); ?></span>
                        <span class="step-status"></span>
                    </div>
                    <div class="step-content">
                        <div class="step-items" id="categories-list"></div>
                        <div class="step-actions">
                            <button class="btn-start-step" data-step="categories"><?php echo __('Start Sync','taamito'); ?></button>
                            <button class="btn-skip-step" data-step="categories"><?php echo __('Skip','taamito'); ?></button>
                        </div>
                    </div>
                </div>

                <div class="step" data-step="category-tree" data-tab="2">
                    <div class="step-header">
                        <span class="step-number">2</span>
                        <span class="step-title"><?php echo __('Sync Category Tree','taamito'); ?></span>
                        <span class="step-status"></span>
                    </div>
                    <div class="step-content">
                        <div class="step-items" id="category-tree-list"></div>
                        <div class="step-actions">
                            <button class="btn-start-step" data-step="category-tree"><?php echo __('Start Sync','taamito'); ?></button>
                            <button class="btn-skip-step" data-step="category-tree"><?php echo __('Skip','taamito'); ?></button>
                        </div>
                    </div>
                </div>

                <div class="step" data-step="features" data-tab="3">
                    <div class="step-header">
                        <span class="step-number">3</span>
                        <span class="step-title"><?php echo __('Sync Features (Variants)','taamito'); ?></span>
                        <span class="step-status"></span>
                    </div>
                    <div class="step-content">
                        <div class="step-items" id="features-list"></div>
                        <div class="step-actions">
                            <button class="btn-start-step" data-step="features"><?php echo __('Start Sync','taamito'); ?></button>
                            <button class="btn-skip-step" data-step="features"><?php echo __('Skip','taamito'); ?></button>
                        </div>
                    </div>
                </div>

                <div class="step" data-step="feature-values" data-tab="4">
                    <div class="step-header">
                        <span class="step-number">4</span>
                        <span class="step-title"><?php echo __('Sync Feature Values','taamito'); ?></span>
                        <span class="step-status"></span>
                    </div>
                    <div class="step-content">
                        <div class="step-items" id="feature-values-list"></div>
                        <div class="step-actions">
                            <button class="btn-start-step" data-step="feature-values"><?php echo __('Start Sync','taamito'); ?></button>
                            <button class="btn-skip-step" data-step="feature-values"><?php echo __('Skip','taamito'); ?></button>
                        </div>
                    </div>
                </div>

                <div class="step" data-step="products" data-tab="5">
                    <div class="step-header">
                        <span class="step-number">5</span>
                        <span class="step-title"><?php echo __('Sync Products','taamito'); ?></span>
                        <span class="step-status"></span>
                    </div>
                    <div class="step-content">
                        <div class="step-items" id="products-list"></div>
                        <div class="step-actions">
                            <button class="btn-start-step" data-step="products"><?php echo __('Start Sync','taamito'); ?></button>
                            <button class="btn-skip-step" data-step="products"><?php echo __('Skip','taamito'); ?></button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wizard-errors" id="wizard-errors"></div>
        </div>
    </div>
</section>

