<?php
/**
 * Tutorial page for AI Translator for Polylang plugin
 */
?>

<div class="tw-font-sans tw-max-w-4xl tw-mx-auto tw-p-6 tw-bg-gray-50 tw-rounded-lg tw-shadow-md">
  <p class="tw-text-center tw-mt-8">
    <img src="<?php echo esc_url(plugins_url('../img/logo.png', __FILE__)); ?>"
      alt="<?php _e('Logo', 'ai-translator-for-polylang'); ?>"
      class="tw-inline-block tw-max-w-full tw-rounded-lg tw-shadow-lg" style="width: 80px">
  </p>

  <h1 class="tw-text-3xl tw-font-extrabold tw-text-gray-800 tw-mb-6"><?php _e('How to Use AI Translator for Polylang', 'ai-translator-for-polylang'); ?></h1>

  <p class="tw-text-lg tw-text-gray-700 tw-leading-relaxed">
    <?php _e('This plugin offers two powerful modes for translating your content efficiently and effectively:', 'ai-translator-for-polylang'); ?>
  </p>

  <h2 class="tw-text-2xl tw-font-semibold tw-text-green-600 tw-mt-8"><?php _e('1. PolylAI Cloud (Recommended)', 'ai-translator-for-polylang'); ?></h2>
  <p class="tw-text-base tw-text-gray-800 tw-leading-relaxed">
    <?php _e('The easiest and most seamless way to translate your posts and pages. Simply purchase credits, and you gain access to all premium features without any complex setup.', 'ai-translator-for-polylang'); ?>
  </p>

  <h2 class="tw-text-2xl tw-font-semibold tw-text-blue-600 tw-mt-8"><?php _e('2. Local Mode', 'ai-translator-for-polylang'); ?></h2>
  <p class="tw-text-base tw-text-gray-800 tw-leading-relaxed">
    <?php _e('Use the plugin locally with your own API keys. This mode gives you full control but requires you to manage your API keys and translation settings.', 'ai-translator-for-polylang'); ?>
  </p>

  <h2 class="tw-text-2xl tw-font-semibold tw-text-purple-600 tw-mt-8"><?php _e('Using the Translate Link', 'ai-translator-for-polylang'); ?></h2>
  <p class="tw-text-base tw-text-gray-700 tw-leading-relaxed">
    <?php _e('Once the plugin is active, you will see a prominent "Translate" link below each post, page, or custom post type (if you have a premium license). Click "Translate" to select your target languages and start translating your content effortlessly.', 'ai-translator-for-polylang'); ?>
  </p>

  <p class="tw-text-center tw-mt-8">
    <img src="<?php echo esc_url( plugins_url( '../img/screenshot-1.png', __FILE__ ) ); ?>" alt="<?php _e('Translate Link Example', 'ai-translator-for-polylang'); ?>" class="tw-inline-block tw-max-w-full tw-rounded-lg tw-shadow-lg">
  </p>
</div>
