<?php
if (!defined('ABSPATH')) {
    exit;
}
?>
<div class="wrap iapc-guide-page">

    <h1><?php esc_html_e('Idesoftbcn AI Product Customizer - User Guide', 'idesoftbcn-ai-product-customizer'); ?></h1>

    <p class="iapc-guide-intro">
        <?php esc_html_e('In this guide you will learn how to configure the product customizer, define print areas with the visual editor, understand the desktop and mobile storefront layouts, set surcharges, and review designs created by customers.', 'idesoftbcn-ai-product-customizer'); ?>
    </p>

    <p class="description">
        <?php
        echo wp_kses_post(
            __('Open this guide anytime from <strong>WooCommerce → Idesoftbcn AI Product Customizer</strong>.', 'idesoftbcn-ai-product-customizer')
        );
        ?>
    </p>

    <div class="iapc-guide-section">
        <h2><?php esc_html_e('1. Enable the customizer', 'idesoftbcn-ai-product-customizer'); ?></h2>
        <p>
            <?php
            echo wp_kses_post(
                __('Open a WooCommerce product and enable the <strong>Customizer</strong> option. If this option is disabled, customers will see the standard product without design tools.', 'idesoftbcn-ai-product-customizer')
            );
            ?>
        </p>
        <p>
            <?php esc_html_e('Then choose how the customizer appears on the storefront:', 'idesoftbcn-ai-product-customizer'); ?>
        </p>
        <ul>
            <li>
                <strong><?php esc_html_e('Shortcode', 'idesoftbcn-ai-product-customizer'); ?></strong> —
                <?php
                echo wp_kses_post(
                    __('Place <code>[iapc_designer]</code> on the product page, a tab, Elementor, or any page. On other pages use <code>[iapc_designer product_id="123"]</code>. Optional: <code>lang="en"</code> or <code>lang="es"</code>.', 'idesoftbcn-ai-product-customizer')
                );
                ?>
            </li>
            <li>
                <strong><?php esc_html_e('Product page', 'idesoftbcn-ai-product-customizer'); ?></strong> —
                <?php
                echo wp_kses_post(
                    __('The customizer replaces the default WooCommerce product layout automatically (gallery, tabs, and default add-to-cart are hidden). Do <strong>not</strong> also place <code>[iapc_designer]</code> on that product page.', 'idesoftbcn-ai-product-customizer')
                );
                ?>
            </li>
        </ul>

        <h3><?php esc_html_e('Required before customers can design', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <p>
            <?php esc_html_e('Enabling Customizer is not enough. The product must also have:', 'idesoftbcn-ai-product-customizer'); ?>
        </p>
        <ul>
            <li><?php esc_html_e('A WooCommerce regular (or sale) price.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('At least Image view 1 / Side A uploaded.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>
        <p>
            <?php esc_html_e('If those items are missing, the storefront shows a short “not ready” message instead of the full designer. Shop managers also see the checklist of missing setup items.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-activate.png')); ?>"
             alt="<?php esc_attr_e('Enable customizer', 'idesoftbcn-ai-product-customizer'); ?>">
    </div>

    <div class="iapc-guide-section">
        <h2><?php esc_html_e('2. Configure surcharges', 'idesoftbcn-ai-product-customizer'); ?></h2>
        <p>
            <?php esc_html_e('You can add extra costs for each type of customization: text, uploaded image, sticker, graphic element, or AI-generated image.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-fees.png')); ?>"
             alt="<?php esc_attr_e('Configure surcharges', 'idesoftbcn-ai-product-customizer'); ?>">
    </div>

    <div class="iapc-guide-section">
        <h2><?php esc_html_e('3. Add product images', 'idesoftbcn-ai-product-customizer'); ?></h2>
        <p>
            <?php esc_html_e('Add images for each product view—for example front, back, left, right, or top. These images are the base canvas customers will design on.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-images.png')); ?>"
             alt="<?php esc_attr_e('Add product images', 'idesoftbcn-ai-product-customizer'); ?>">
        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-images2.png')); ?>"
             alt="<?php esc_attr_e('Add additional product images', 'idesoftbcn-ai-product-customizer'); ?>">
    </div>

    <div class="iapc-guide-section">
        <h2><?php esc_html_e('4. Configure the print area (visual UI)', 'idesoftbcn-ai-product-customizer'); ?></h2>

        <p>
            <?php esc_html_e('After adding product images, define where customers can place text, images, stickers, and other elements.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <h3><?php esc_html_e('Visual editor (recommended)', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <p>
            <?php
            echo wp_kses_post(
                __('In <strong>Main print areas</strong>, each view shows the product image with a dashed rectangle and corner handles:', 'idesoftbcn-ai-product-customizer')
            );
            ?>
        </p>
        <ul>
            <li><?php esc_html_e('Drag the rectangle to move the printable zone.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Drag the corner handles to resize it.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('A default area is applied automatically; adjust it if your mockup needs a different zone.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Repeat for View 1 / Side A, View 2 / Side B, and any additional views.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <h3><?php esc_html_e('Advanced values', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <p>
            <?php
            echo wp_kses_post(
                __('Open <strong>Advanced values</strong> under each view if you need precise numeric control. Values are proportional (0–1) so the area scales with the image:', 'idesoftbcn-ai-product-customizer')
            );
            ?>
        </p>
        <ul>
            <li><?php echo wp_kses_post(__('<strong>X / Y:</strong> where the area starts.', 'idesoftbcn-ai-product-customizer')); ?></li>
            <li><?php echo wp_kses_post(__('<strong>Width / Height:</strong> size of the printable zone.', 'idesoftbcn-ai-product-customizer')); ?></li>
            <li><?php echo wp_kses_post(__('<strong>Rotation:</strong> when the printable surface is not flat.', 'idesoftbcn-ai-product-customizer')); ?></li>
        </ul>
        <p>
            <?php esc_html_e('Changes in the visual rectangle and in Advanced values stay in sync.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-area1.png')); ?>"
             alt="<?php esc_attr_e('Visual print area editor with drag handles', 'idesoftbcn-ai-product-customizer'); ?>">
    </div>

    <div class="iapc-guide-section">
        <h2><?php esc_html_e('5. AI configuration and usage', 'idesoftbcn-ai-product-customizer'); ?></h2>

        <p>
            <?php esc_html_e('Idesoftbcn AI Product Customizer includes an AI image generator that lets customers create custom illustrations from the product designer by typing a description.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <h3><?php esc_html_e('Enable AI Premium', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php
            echo wp_kses_post(
                __('To use this feature you need an active Premium license. At the bottom of the product editor you will find the <strong>AI Premium</strong> section.', 'idesoftbcn-ai-product-customizer')
            );
            ?>
        </p>

        <p>
            <?php
            echo wp_kses_post(
                __('Enter your license, click <strong>Save license</strong>, and the plugin will validate it automatically. If everything is correct, you will see the activation status and license expiry date.', 'idesoftbcn-ai-product-customizer')
            );
            ?>
        </p>

        <p>
            <?php esc_html_e('An active license enables AI image generation for all products where the customizer is enabled.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-license.png')); ?>"
             alt="<?php esc_attr_e('AI Premium license', 'idesoftbcn-ai-product-customizer'); ?>">

        <h3><?php esc_html_e('Custom instructions per product', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php esc_html_e('Below the license you will find an additional instructions field. Any text you enter there is automatically appended to the prompt sent to the AI.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <p>
            <?php esc_html_e('This lets you adapt the image style to each product. Some examples:', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <ul>
            <li><?php esc_html_e('Do not use the color green.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Use only a transparent background.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Create child-friendly drawings.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Watercolor style.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Vector illustrations only.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Do not add text inside the image.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <p>
            <?php esc_html_e('Customers will not see these instructions; they are applied automatically to every image generated for that product.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <h3><?php esc_html_e('Customer experience', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php
            echo wp_kses_post(
                sprintf(
                    /* translators: %s: AI tab label */
                    __('In the store, customers will find the <strong>%s</strong> tab inside the customizer.', 'idesoftbcn-ai-product-customizer'),
                    esc_html__('AI Images', 'idesoftbcn-ai-product-customizer')
                )
            );
            ?>
        </p>

        <p>
            <?php
            echo wp_kses_post(
                sprintf(
                    /* translators: %s: generate button label */
                    __('They only need to type a description and click <strong>%s</strong>. After a few seconds the image appears on the product and can be moved, resized, or combined with text, stickers, and graphic elements.', 'idesoftbcn-ai-product-customizer'),
                    esc_html__('Generate image', 'idesoftbcn-ai-product-customizer')
                )
            );
            ?>
        </p>

        <p>
            <?php esc_html_e('They can also remove the generated image and create another one as many times as allowed by the license generation limit.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-editor.png')); ?>"
             alt="<?php esc_attr_e('AI image generation', 'idesoftbcn-ai-product-customizer'); ?>">

        <h3><?php esc_html_e('AI usage surcharge', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php
            echo wp_kses_post(
                sprintf(
                    /* translators: %s: customization surcharges section label */
                    __('If you want, you can charge an extra fee whenever a customer uses AI image generation. Configure it under <strong>%s</strong>; it is added automatically when the customer generates an image.', 'idesoftbcn-ai-product-customizer'),
                    esc_html__('Customization surcharges', 'idesoftbcn-ai-product-customizer')
                )
            );
            ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-fees.png')); ?>"
             alt="<?php esc_attr_e('AI usage surcharges', 'idesoftbcn-ai-product-customizer'); ?>">
    </div>

    <div class="iapc-guide-section">
        <h2><?php esc_html_e('6. Desktop and mobile storefront layout', 'idesoftbcn-ai-product-customizer'); ?></h2>

        <p>
            <?php esc_html_e('The same designer adapts to screen size. Tools and actions stay available; only the layout changes.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <h3><?php esc_html_e('Desktop', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <ul>
            <li><?php esc_html_e('Left: tool tabs (AI Images, Text, Paint, Image, Sticker, Elements) and the active panel.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Center: product preview, canvas, and view switchers (Side A / Side B / extra views).', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Right: quick clear/reset actions, price, quantity, and Add to cart.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-editor.png')); ?>"
             alt="<?php esc_attr_e('Desktop customizer layout', 'idesoftbcn-ai-product-customizer'); ?>">

        <h3><?php esc_html_e('Tablet and mobile', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <p>
            <?php esc_html_e('On narrower screens the three columns stack into a single vertical flow so customers can scroll and use touch controls comfortably:', 'idesoftbcn-ai-product-customizer'); ?>
        </p>
        <ul>
            <li><?php esc_html_e('1) Product title and live preview (canvas) first.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('2) Tool tabs in a horizontal wrap (larger tap targets), then the selected tool panel.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('3) Quick actions, price, and Add to cart at the bottom.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Panels grow with their content (no fixed cramped heights). Primary buttons stay full-width and easy to tap.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Paint works with touch; customers can draw with a finger after enabling the brush.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>
        <p class="description">
            <?php esc_html_e('Tip: always test your product on a phone after configuring images and print areas. If the product is not ready (missing price or Side A image), mobile also shows the short “not ready” card instead of the full UI.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>
    </div>

    <div class="iapc-guide-section">
        <h2><?php esc_html_e('7. How the customizer tools work', 'idesoftbcn-ai-product-customizer'); ?></h2>

        <p>
            <?php esc_html_e('Once a customer opens a product that is ready for customization, they can create a design with the tools below. Changes appear in real time on the product.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <h3><?php esc_html_e('AI Image Generator', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php
            echo wp_kses_post(
                sprintf(
                    /* translators: %s: generate button label */
                    __('The <strong>AI Image Generator</strong> panel creates images with artificial intelligence from a custom prompt. After clicking <strong>%s</strong>, the image is added to the product and can be moved, resized, rotated, or combined with text, images, and stickers.', 'idesoftbcn-ai-product-customizer'),
                    esc_html__('Generate image', 'idesoftbcn-ai-product-customizer')
                )
            );
            ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-generate.png')); ?>"
             alt="<?php esc_attr_e('AI generate', 'idesoftbcn-ai-product-customizer'); ?>"
             class="iapc-guide-small-image">

        <h3><?php esc_html_e('Guided AI', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php
            echo wp_kses_post(
                __('<strong>Guided AI</strong> generates designs without writing a complex prompt. Select the options that best describe the desired result and the AI creates an image matching those preferences.', 'idesoftbcn-ai-product-customizer')
            );
            ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-plus.png')); ?>"
             alt="<?php esc_attr_e('Guided AI', 'idesoftbcn-ai-product-customizer'); ?>"
             class="iapc-guide-small-image">

        <ul>
            <li><?php echo wp_kses_post(sprintf(/* translators: %1$s: Sticker, %2$s: Logo, %3$s: Illustration, %4$s: Pattern */ __('<strong>Format:</strong> choose the design type (%1$s, %2$s, %3$s, or %4$s).', 'idesoftbcn-ai-product-customizer'), esc_html__('Sticker', 'idesoftbcn-ai-product-customizer'), esc_html__('Logo', 'idesoftbcn-ai-product-customizer'), esc_html__('Illustration', 'idesoftbcn-ai-product-customizer'), esc_html__('Pattern', 'idesoftbcn-ai-product-customizer'))); ?></li>
            <li><?php echo wp_kses_post(sprintf(/* translators: %1$s: Sporty, %2$s: Elegant, %3$s: Anime, %4$s: Minimalist, %5$s: Vintage */ __('<strong>Style:</strong> set the visual style, such as %1$s, %2$s, %3$s, %4$s, or %5$s.', 'idesoftbcn-ai-product-customizer'), esc_html__('Sporty', 'idesoftbcn-ai-product-customizer'), esc_html__('Elegant', 'idesoftbcn-ai-product-customizer'), esc_html__('Anime', 'idesoftbcn-ai-product-customizer'), esc_html__('Minimalist', 'idesoftbcn-ai-product-customizer'), esc_html__('Vintage', 'idesoftbcn-ai-product-customizer'))); ?></li>
            <li><?php echo wp_kses_post(sprintf(/* translators: %1$s: Modern, %2$s: Dark, %3$s: Colorful, %4$s: Premium, %5$s: Kids, %6$s: Retro */ __('<strong>Mood:</strong> set the mood (%1$s, %2$s, %3$s, %4$s, %5$s, %6$s…).', 'idesoftbcn-ai-product-customizer'), esc_html__('Modern', 'idesoftbcn-ai-product-customizer'), esc_html__('Dark', 'idesoftbcn-ai-product-customizer'), esc_html__('Colorful', 'idesoftbcn-ai-product-customizer'), esc_html__('Premium', 'idesoftbcn-ai-product-customizer'), esc_html__('Kids', 'idesoftbcn-ai-product-customizer'), esc_html__('Retro', 'idesoftbcn-ai-product-customizer'))); ?></li>
            <li><?php echo wp_kses_post(__('<strong>Main colors:</strong> enter the main colors you want to use.', 'idesoftbcn-ai-product-customizer')); ?></li>
            <li><?php echo wp_kses_post(__('<strong>Elements you want to include:</strong> add objects or elements that must appear in the image.', 'idesoftbcn-ai-product-customizer')); ?></li>
        </ul>

        <p>
            <?php
            echo wp_kses_post(
                sprintf(
                    /* translators: %s: guided design button label */
                    __('Click <strong>%s</strong> to generate the image. Once created, it is added to the product and can be edited like any other image.', 'idesoftbcn-ai-product-customizer'),
                    esc_html__('Create guided design', 'idesoftbcn-ai-product-customizer')
                )
            );
            ?>
        </p>

        <h3><?php esc_html_e('Text', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <p>
            <?php esc_html_e('Customers can add one or more text layers and customize them with different options:', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <ul>
            <li><?php esc_html_e('Change the text content.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Select the font.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Change the size and color.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Apply bold or italic (if the font supports it).', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Alignment, letter spacing, and curve text.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Move text freely inside the print area (Move X / Move Y).', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-text.png')); ?>"
             alt="<?php esc_attr_e('Text', 'idesoftbcn-ai-product-customizer'); ?>">

        <h3><?php esc_html_e('Paint', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php
            echo wp_kses_post(
                sprintf(
                    /* translators: %s: enable brush button label */
                    __('The Paint tool lets customers draw directly on the product with a mouse or touchscreen. Click <strong>%s</strong> to start drawing.', 'idesoftbcn-ai-product-customizer'),
                    esc_html__('Enable brush', 'idesoftbcn-ai-product-customizer')
                )
            );
            ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('admin-guide-paint.png')); ?>"
             alt="<?php esc_attr_e('Paint', 'idesoftbcn-ai-product-customizer'); ?>"
             class="iapc-guide-small-image">

        <ul>
            <li><?php esc_html_e('Freehand drawing.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Brush color, size, and opacity.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Eraser and undo last stroke.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Clear the drawing when needed.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <h3><?php esc_html_e('Image', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php esc_html_e('Customers can upload images from their device and add them to the product design.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <ul>
            <li><?php esc_html_e('Upload photos, logos, or illustrations (JPG, PNG, or WEBP).', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Move, scale, rotate, and choose layer (behind or in front of text).', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-image.png')); ?>"
             alt="<?php esc_attr_e('Image', 'idesoftbcn-ai-product-customizer'); ?>">

        <h3><?php esc_html_e('Sticker', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php esc_html_e('Customers can use stickers included by the store or upload their own (with a rights confirmation).', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <ul>
            <li><?php esc_html_e('Add stickers included by the store.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Upload a custom sticker and confirm ownership or license.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Resize, rotate, and move them freely.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-sticker.png')); ?>"
             alt="<?php esc_attr_e('Sticker', 'idesoftbcn-ai-product-customizer'); ?>">

        <h3><?php esc_html_e('Elements', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php esc_html_e('Graphic elements work like stickers but are intended for decorative resources such as shapes, icons, or vector graphics.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <ul>
            <li><?php esc_html_e('Insert graphic elements.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Change their size.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Rotate them.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Place them anywhere in the print area.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-elements.png')); ?>"
             alt="<?php esc_attr_e('Elements', 'idesoftbcn-ai-product-customizer'); ?>">

        <h3><?php esc_html_e('Product views', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php esc_html_e('If the product has multiple views (for example front and back), customers can switch between them using the buttons below the image. Each view keeps its own design independently.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-view.png')); ?>"
             alt="<?php esc_attr_e('Product views', 'idesoftbcn-ai-product-customizer'); ?>">

        <h3><?php esc_html_e('Quick action buttons', 'idesoftbcn-ai-product-customizer'); ?></h3>

        <p>
            <?php esc_html_e('Customers have quick actions to modify their design (on the right on desktop; below the tools on mobile):', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <ul>
            <li><?php echo wp_kses_post(sprintf(/* translators: %s: clear text button label */ __('<strong>%s:</strong> removes all text.', 'idesoftbcn-ai-product-customizer'), esc_html__('Clear text', 'idesoftbcn-ai-product-customizer'))); ?></li>
            <li><?php echo wp_kses_post(sprintf(/* translators: %s: clear image button label */ __('<strong>%s:</strong> removes uploaded or generated images.', 'idesoftbcn-ai-product-customizer'), esc_html__('Clear image', 'idesoftbcn-ai-product-customizer'))); ?></li>
            <li><?php echo wp_kses_post(sprintf(/* translators: %s: clear stickers button label */ __('<strong>%s:</strong> removes stickers and graphic elements.', 'idesoftbcn-ai-product-customizer'), esc_html__('Clear stickers/elements', 'idesoftbcn-ai-product-customizer'))); ?></li>
            <li><?php echo wp_kses_post(sprintf(/* translators: %s: reset design button label */ __('<strong>%s:</strong> fully resets the design.', 'idesoftbcn-ai-product-customizer'), esc_html__('Reset design', 'idesoftbcn-ai-product-customizer'))); ?></li>
        </ul>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-action.png')); ?>"
             alt="<?php esc_attr_e('Quick actions', 'idesoftbcn-ai-product-customizer'); ?>"
             class="iapc-guide-small-image">
    </div>

    <div class="iapc-guide-section">
        <h2><?php esc_html_e('8. Add to cart', 'idesoftbcn-ai-product-customizer'); ?></h2>

        <p>
            <?php
            echo wp_kses_post(
                sprintf(
                    /* translators: %s: add to cart button label */
                    __('When the customer finishes their design, they select the quantity and click <strong>%s</strong>. The design is saved automatically and stays with the product through checkout, the cart, the order, and the admin panel.', 'idesoftbcn-ai-product-customizer'),
                    esc_html__('Add to cart', 'idesoftbcn-ai-product-customizer')
                )
            );
            ?>
        </p>

        <img src="<?php echo esc_url(iapc_get_admin_guide_image_url('guide-ai-add.png')); ?>"
             alt="<?php esc_attr_e('Add to cart', 'idesoftbcn-ai-product-customizer'); ?>"
             class="iapc-guide-small-image">
    </div>

    <div class="iapc-guide-section">
        <h2><?php esc_html_e('9. Data, privacy, and external services', 'idesoftbcn-ai-product-customizer'); ?></h2>

        <p>
            <?php esc_html_e('This plugin stores customer designs on your WordPress site and may connect to external services when AI Premium is used.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <h3><?php esc_html_e('Data stored on your site', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <ul>
            <li><?php esc_html_e('Final design PNG files are saved in wp-content/uploads/iapc-designs/.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Product customizer settings are stored as product meta fields.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('License status and a unique installation UUID are stored in the WordPress options table.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Customization details are saved with WooCommerce cart items and orders.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <h3><?php esc_html_e('AI Premium and aiproductcustomizer.com', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <p>
            <?php esc_html_e('When you activate a license or a customer generates an AI image, the plugin sends a request to aiproductcustomizer.com.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>
        <ul>
            <li><?php esc_html_e('License activation sends: license key, domain, installation UUID, plugin version, WordPress version, PHP version, site URL, home URL, and locale.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('AI image generation sends: the customer prompt, optional per-product AI rules, license key, domain, installation UUID, and the same technical metadata.', 'idesoftbcn-ai-product-customizer'); ?></li>
            <li><?php esc_html_e('Prompts are used only to generate the requested image. They are not used to train public AI models.', 'idesoftbcn-ai-product-customizer'); ?></li>
        </ul>

        <h3><?php esc_html_e('Legal documents (AI Premium service)', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <p>
            <?php esc_html_e('The AI Premium service is governed by the legal documents published on aiproductcustomizer.com.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>
        <ul>
            <?php foreach (iapc_get_plugin_legal_links() as $iapc_legal_link) : ?>
                <li>
                    <a href="<?php echo esc_url($iapc_legal_link['url']); ?>" target="_blank" rel="noopener noreferrer">
                        <?php echo esc_html($iapc_legal_link['label']); ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>

        <h3><?php esc_html_e('Third-party scripts', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <p>
            <?php esc_html_e('Products with a 3D GLB preview load a bundled copy of Three.js (r185) from the plugin. This happens only on product pages that use the 3D car preview.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>

        <h3><?php esc_html_e('Telemetry', 'idesoftbcn-ai-product-customizer'); ?></h3>
        <p>
            <?php esc_html_e('This plugin does not collect automatic usage statistics or telemetry.', 'idesoftbcn-ai-product-customizer'); ?>
        </p>
    </div>
</div>
