<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template files receive local context variables from their controller.
namespace SPAATG;
use SPAATG\ShortPixelLogger\ShortPixelLogger as Log;
use SPAATG\Helper\UiHelper as UiHelper;

if ( ! defined( 'ABSPATH' ) ) {
 exit; // Exit if accessed directly.
}
?>


<div class='quick-tour'>
  <div class='ufo'>
  <?php
  echo wp_kses( UiHelper::getIcon( 'res/images/illustration/quicktour-ufo.svg' ), [ 'img' => [ 'src' => true, 'height' => true, 'width' => true, 'alt' => true ] ] );
   ?>
 </div>

   <div class='content-wrapper'>
      <div class='close'><i class='shortpixel-icon close'></i></div>
      <div class='steps'>
        <div class='step step-0 active' data-screen='account'>
							<h4><?php esc_html_e( 'Welcome aboard', 'shortpixel-ai-alt-text-generator' ); ?></h4>
            <p>
								<?php esc_html_e( 'Welcome to the ShortPixel AI Alt Text Generator settings page. Start the tour to review the core setup areas.', 'shortpixel-ai-alt-text-generator' ); ?>
            </p>
        </div>
        <div class='step step-1' data-screen='account'>
							<p><?php esc_html_e( 'Use Account & Settings to manage your API key, quota status and general plugin behavior.', 'shortpixel-ai-alt-text-generator' ); ?>
          </p>
        </div>
        <div class='step step-2' data-screen='ai'>
							<p><?php esc_html_e( 'Use AI Image SEO to choose which metadata fields are generated and how much context the AI should use.', 'shortpixel-ai-alt-text-generator' ); ?></p>
        </div>
        <div class='step step-3' data-screen='preview'>
							<p><?php esc_html_e( 'Use Preview/Testing to test generation on a selected image before running it broadly.', 'shortpixel-ai-alt-text-generator' ); ?></p>
        </div>
      <!--  <div class='step step-4'>
            switch to the upper right part and display a bubble with the text "This is where you will see most of the notifications from now on. You can also toggle between a simple and advanced mode of the settings, which will just hide or show some of the more advanced settings
        </div> -->
        <div class='step step-4' data-screen='help'>
							<p><?php esc_html_e( 'Here you get access to our knowledge base and our 24/7 support team. Feel free to suggest new features or leave a review - it helps us to improve our products!', 'shortpixel-ai-alt-text-generator' ); ?>
            </p>
        </div>
      </div>

      <div class='navigation'>
          <span class='step_count'>0</span>
        <!--  <button type='button' class='previous button-setting hide'>Previous</button> -->
          <?php for($i = 1; $i < 5; $i++)
          {
	              printf('<a class="stepdot hide" data-step="%d">&nbsp;</a>', absint( $i ));
          }
          ?>

          <button type='button' class='next show-start button-setting'>
									<span class='start'><i class='shortpixel-icon rocket'></i><?php esc_html_e( 'Start Tour', 'shortpixel-ai-alt-text-generator' ); ?></span>
									<span class='next'><?php esc_html_e( 'Next', 'shortpixel-ai-alt-text-generator' ); ?> <i class='shortpixel-icon arrow-right'></i></span>
          </button>
          <button type="button" class='close hide'>
							<i class='shortpixel-icon robo'></i> <?php esc_html_e( 'Start generating AI SEO data', 'shortpixel-ai-alt-text-generator' ); ?>
          </button>
      </div>
   </div>

</div>
