<?php
/**
 * Setup Wizard - Welcome Step
 *
 * @package AI_Image_SEO
 * @since 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>
<div class="infyp-wizard-step-content infyp-step-welcome">
    <h1 class="infyp-welcome-title"><?php esc_html_e( 'Welcome to AI Image SEO Optimizer', 'infy-ai-image-seo-optimizer' ); ?></h1>

    <p class="infyp-welcome-subtitle">
        <?php esc_html_e( 'Let\'s get your site ready for better image SEO in just a few minutes.', 'infy-ai-image-seo-optimizer' ); ?>
    </p>

    <div class="infyp-welcome-features">
        <div class="infyp-feature-item">
            <div class="infyp-feature-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="infyp-feature-text">
                <strong><?php esc_html_e( 'AI-Powered Optimization', 'infy-ai-image-seo-optimizer' ); ?></strong>
                <span><?php esc_html_e( 'Generate SEO-friendly filenames, alt texts, and titles automatically', 'infy-ai-image-seo-optimizer' ); ?></span>
            </div>
        </div>

        <div class="infyp-feature-item">
            <div class="infyp-feature-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="infyp-feature-text">
                <strong><?php esc_html_e( 'Multiple AI Providers', 'infy-ai-image-seo-optimizer' ); ?></strong>
                <span><?php esc_html_e( 'Choose from OpenAI, Google Gemini, or Anthropic Claude', 'infy-ai-image-seo-optimizer' ); ?></span>
            </div>
        </div>

        <div class="infyp-feature-item">
            <div class="infyp-feature-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="infyp-feature-text">
                <strong><?php esc_html_e( 'Bulk Processing', 'infy-ai-image-seo-optimizer' ); ?></strong>
                <span><?php esc_html_e( 'Optimize your entire media library with batch processing', 'infy-ai-image-seo-optimizer' ); ?></span>
            </div>
        </div>

        <div class="infyp-feature-item">
            <div class="infyp-feature-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="infyp-feature-text">
                <strong><?php esc_html_e( 'Better Rankings', 'infy-ai-image-seo-optimizer' ); ?></strong>
                <span><?php esc_html_e( 'Improve search visibility and accessibility compliance', 'infy-ai-image-seo-optimizer' ); ?></span>
            </div>
        </div>
    </div>

    <div class="infyp-welcome-note">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z" stroke="currentColor" stroke-width="1.5"/>
            <path d="M10 6V10M10 14H10.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        <span><?php esc_html_e( 'This wizard will help you configure API keys and basic preferences. It only takes 2-3 minutes.', 'infy-ai-image-seo-optimizer' ); ?></span>
    </div>

    <div class="infyp-welcome-thanks">
        <div class="infyp-thanks-content">
            <svg class="infyp-thanks-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="currentColor"/>
            </svg>
            <p class="infyp-thanks-message"><?php esc_html_e( 'Thank you for choosing AI Image SEO Optimizer!', 'infy-ai-image-seo-optimizer' ); ?></p>
        </div>
    </div>
</div>
