<div id="usage" class="content-usage tab_item">
    <div class="content_heading">
        <h2><?php esc_html_e('Basic Usage', 'image-choices-for-gravity-forms'); ?></h2>
        <p><?php esc_html_e('A Beginner\'s Guide to Efficiently Using the Plugin', 'image-choices-for-gravity-forms'); ?></p>
    </div>

    <section class="section_full background_free">
        <div class="col_description">
            <h2><?php esc_html_e('Basic Usage (Free version)', 'image-choices-for-gravity-forms'); ?></h2>
            <p><?php esc_html_e('After installing the plugin, you’ll see a new Image Picker tab in the Radio and Checkbox fields. Open that tab and check the Enable Image Picker option. Once enabled, you can choose a theme and set the number of columns for responsive layouts. In the field choices, an image icon will appear—click it to upload or select your image. Finally, save the form, and you’re all set!', 'image-choices-for-gravity-forms'); ?></p>
            <p><?php esc_html_e('Image Picker includes both Global and Form-level settings. You can configure your options in either the Form Settings or Global Settings, and those preferences will automatically apply to the Field Settings.', 'image-choices-for-gravity-forms'); ?></p>
        </div>
        <div class="col_image multiple_image">
            <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/form_setting_lite.webp'); ?>">
            <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/field_option_lite.webp'); ?>">
        </div>
    </section>

    <div class="usage_wrap">
        <section class="section_full background_pro">
            <div class="col_description">
                <h2><?php esc_html_e('Basic Usage of Global Settings Pro', 'image-choices-for-gravity-forms'); ?></h2>
                <p><?php esc_html_e('After installing the plugin, navigate to the Gravity Forms Settings menu. In both the Global and Form Settings, you’ll find options for theme, layout, colors, and images.', 'image-choices-for-gravity-forms'); ?></p>

                <ul>
                    <li><?php esc_html_e('Global Settings – Apply defaults across all forms and fields.', 'image-choices-for-gravity-forms'); ?></li>
                    <li><?php esc_html_e('Form Settings – Override the global settings for a specific form.', 'image-choices-for-gravity-forms'); ?></li>
                    <li><?php esc_html_e('Field Settings – Override both global and form settings for complete control.', 'image-choices-for-gravity-forms'); ?></li>
                </ul>
                <p><?php esc_html_e('This layered approach lets you configure Image Picker exactly as you need.', 'image-choices-for-gravity-forms'); ?></p>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/form_setting.webp'); ?>">
            </div>
        </section>
        <section class="section_full background_pro">
            <div class="col_description">
                <h2><?php esc_html_e('Basic Usage Image Picker Pro', 'image-choices-for-gravity-forms'); ?></h2>
                <p><?php esc_html_e('After installing the Pro version, a new Image Picker Pro tab will appear in the following field types: Radio, Checkbox, Dropdown, Custom Post Field, Single Product, Product Options, Shipping, Polls, and Survey.', 'image-choices-for-gravity-forms'); ?></p>
                <ol>
                    <li>
                        <?php esc_html_e('Open the Image Picker Pro tab.', 'image-choices-for-gravity-forms'); ?>
                    </li>
                    <li>
                        <?php esc_html_e('Enable the Image Picker option.', 'image-choices-for-gravity-forms'); ?>
                    </li>
                    <li>
                        <?php esc_html_e('Once enabled, additional settings will appear, allowing you to configure:', 'image-choices-for-gravity-forms'); ?>
                    </li>
                </ol>
                <ul>
                    <li><?php esc_html_e('Theme', 'image-choices-for-gravity-forms'); ?></li>
                    <li><?php esc_html_e('Columns', 'image-choices-for-gravity-forms'); ?></li>
                    <li><?php esc_html_e('Image Size', 'image-choices-for-gravity-forms'); ?></li>
                    <li><?php esc_html_e('Entry Notification', 'image-choices-for-gravity-forms'); ?></li>
                </ul>
            </div>
            <div class="col_image">
                <img src="<?php echo esc_url(GFIMP_ASSET_URL . 'admin/assets/images/field_setting.webp'); ?>">
            </div>
        </section>
    </div>


</div>