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

<div class="awxct-quickstart">

  <h2><?php esc_html_e('Quick Start Guide', 'anywarex-clone-translate'); ?></h2>

  <!-- Lead -->
  <div class="awxct-qs-info">
    ⚡ <?php esc_html_e(
      'Follow these simple steps to get your first multilingual pages live in just a few minutes.',
      'anywarex-clone-translate'
    ); ?>
  </div>

  <div class="awxct-columns">

    <!-- LEFT COLUMN – Steps -->
    <div class="awxct-column">

      <!-- Step 1 -->
      <div class="awxct-qs-step">
        <span class="awxct-qs-step-number">1</span>
        <strong><?php esc_html_e('Install and activate the plugin', 'anywarex-clone-translate'); ?></strong><br>
        <?php esc_html_e(
          'Install AnyWareX Clone Translate like any other plugin and activate it in the WordPress admin.',
          'anywarex-clone-translate'
        ); ?>
      </div>

      <!-- Step 2 -->
      <div class="awxct-qs-step">
        <span class="awxct-qs-step-number">2</span>
        <strong><?php esc_html_e('Configure the frontend language switcher', 'anywarex-clone-translate'); ?></strong><br>
        <?php esc_html_e(
          'Go to “AnyWareX Clone Translate → Language Switcher” and choose how the language switcher should appear on your site. Select your preferred display style (e.g., EN, EN-US, flags) and choose the placement (floating or inside the main menu).',
          'anywarex-clone-translate'
        ); ?>
        <br><br>

        <img
          class="awxct-qs-screenshot"
          src="<?php echo esc_url(AWXCT_URL . 'assets/images/welcome/quickstart/language-switcher-settings.png'); ?>"
          alt="<?php esc_attr_e('Language Switcher settings screenshot', 'anywarex-clone-translate'); ?>"
        />

        <br><br>
        <?php esc_html_e(
          'Your chosen placement (for example “At end of main menu”) determines where the switcher appears on the frontend.',
          'anywarex-clone-translate'
        ); ?>
      </div>

      <!-- Step 3 -->
      <div class="awxct-qs-step">
        <span class="awxct-qs-step-number">3</span>
        <strong><?php esc_html_e('Select your target languages', 'anywarex-clone-translate'); ?></strong><br>
        <?php esc_html_e(
          'Go to “AnyWareX Clone Translate → Languages” and choose the languages you want to add to your site.',
          'anywarex-clone-translate'
        ); ?>
      </div>

      <!-- Step 4 -->
      <div class="awxct-qs-step">
        <span class="awxct-qs-step-number">4</span>
        <strong><?php esc_html_e('Create your first translation page', 'anywarex-clone-translate'); ?></strong><br>
        <?php esc_html_e(
          'Open an existing page or post and use the “Clone or Translate” action to generate a translated version.',
          'anywarex-clone-translate'
        ); ?>
        <br>
        <img
          class="awxct-qs-screenshot"
          src="<?php echo esc_url(AWXCT_URL . 'assets/images/welcome/quickstart/clone-or-translate.png'); ?>"
          alt="<?php esc_attr_e('Clone or Translate screenshot', 'anywarex-clone-translate'); ?>"
        />
      </div>

      <!-- Step 5 -->
      <div class="awxct-qs-step">
        <span class="awxct-qs-step-number">5</span>
        <strong><?php esc_html_e('Select the language of the cloned page', 'anywarex-clone-translate'); ?></strong><br>

        <?php esc_html_e(
          'After cloning, WordPress names the page like the original and adds “(Clone)” to the title. This is only a naming suggestion and does not affect how AnyWareX Clone Translate works.',
          'anywarex-clone-translate'
        ); ?>
        <br><br>

        <?php esc_html_e(
          'Now choose the correct language for the cloned page using the “AnyWareX Clone Translate → Language” dropdown. When you select a language (e.g. “Deutsch”), the suggested title updates to “Home (de-DE)”. This is only a visual helper — the actual functionality depends solely on the selected language.',
          'anywarex-clone-translate'
        ); ?>
        <br><br>

        <img
          class="awxct-qs-screenshot"
          src="<?php echo esc_url(AWXCT_URL . 'assets/images/welcome/quickstart/language-dropdown.png'); ?>"
          alt="<?php esc_attr_e('Language dropdown and page title suggestion', 'anywarex-clone-translate'); ?>"
        />

        <!-- Remove from translations explanation -->
        <div class="awxct-warning-box">
          <strong><?php esc_html_e('Optional:', 'anywarex-clone-translate'); ?></strong>
          <?php esc_html_e(
            'If you only need a cloned page — without keeping it linked as a translation — you can click “Remove from translations”. This detaches the page completely from the translation system.',
            'anywarex-clone-translate'
          ); ?>
          <br><br>

          <img
            class="awxct-qs-screenshot"
            src="<?php echo esc_url(AWXCT_URL . 'assets/images/welcome/quickstart/remove-from-translations.png'); ?>"
            alt="<?php esc_attr_e('Remove from translations screenshot', 'anywarex-clone-translate'); ?>"
          />
          <br>

          <strong><?php esc_html_e('Warning:', 'anywarex-clone-translate'); ?></strong>
          <?php esc_html_e(
            'This action cannot be undone. Once removed, the page is no longer linked to any original or translated page.',
            'anywarex-clone-translate'
          ); ?>
        </div>
      </div>

      <!-- Step 6 -->
      <div class="awxct-qs-step">
        <span class="awxct-qs-step-number">6</span>
        <strong><?php esc_html_e('Check the mapping overview', 'anywarex-clone-translate'); ?></strong><br>
        <?php esc_html_e(
          'Under “AnyWareX Clone Translate → Mapping” you can review and adjust the links between originals and translated pages.',
          'anywarex-clone-translate'
        ); ?>
      </div>

      <!-- Step 7 -->
      <div class="awxct-qs-step">
        <span class="awxct-qs-step-number">7</span>
        <strong><?php esc_html_e('Test your language URLs in the frontend', 'anywarex-clone-translate'); ?></strong><br>
        <?php esc_html_e(
          'Visit the language-specific URLs (for example /de-de/ or /it-it/). Your translated pages should load automatically.',
          'anywarex-clone-translate'
        ); ?>
      </div>

    </div>

    <!-- RIGHT COLUMN – Optional info -->
    <div class="awxct-column awxct-qs-optional">

      <h3><?php esc_html_e('Optional: JSON-based translations (Plus & Pro)', 'anywarex-clone-translate'); ?></h3>
      <ul>
        <li>🟦 <?php esc_html_e('Plus: JS-based JSON translations in the i18n/js folder.', 'anywarex-clone-translate'); ?></li>
        <li>🟪 <?php esc_html_e('Pro: PHP-based JSON translations in the i18n/php folder.', 'anywarex-clone-translate'); ?></li>
      </ul>

      <p>
        <?php esc_html_e(
          'Use JSON files to translate custom UI elements, labels, forms, navigation text, and more.',
          'anywarex-clone-translate'
        ); ?>
      </p>

      <h3><?php esc_html_e('Optional: Upgrade to Plus or Pro', 'anywarex-clone-translate'); ?></h3>
      <p>
        <?php esc_html_e(
          'Need JSON translations, the dictionary, or developer features? Upgrade anytime via “AnyWareX Clone Translate → Upgrade”.',
          'anywarex-clone-translate'
        ); ?>
      </p>
    </div>

  </div>

</div>
