<?php
$admin_url = admin_url('admin.php?page=soft-multimedia-player');
?>

<div id="basic-usage" class="getting-started-content basic-usage">

    <!-- Add New Player Section -->
    <section class="section-basic-usage">
        <div class="col-description">
            <h2><?php _e("Add New Player", 'soft-multimedia-player'); ?></h2>
            <p><?php _e("Want to add a modern audio, video, or podcast player to your site? Follow these quick steps:", 'soft-multimedia-player'); ?></p>
            <ul>
                <li>
                    <?php
                    echo wp_kses_post(sprintf(
                        __('<b>Go to</b> your <b>WordPress Dashboard ></b> <a href="%s">Multimedia Player</a>.', 'soft-multimedia-player'),
                        esc_url($admin_url)
                    ));
                    ?>
                </li>
                <li>
                    <b><?php _e("Click the “Add New Player” button", 'soft-multimedia-player'); ?></b>
                </li>
                <li>
                    <?php _e("Choose a Player Type:", 'soft-multimedia-player'); ?>
                    <ul>
                        <li><?php _e("🎵 Audio Player for music or sound clips", 'soft-multimedia-player'); ?></li>
                        <li><?php _e("🎥 Video Player for clips, trailers, or tutorials", 'soft-multimedia-player'); ?></li>
                        <li><?php _e("🎙️ Podcast Player for episodes or series", 'soft-multimedia-player'); ?></li>
                    </ul>
                </li>
                <li>
                    <b><?php _e("Add Tracks or Media Files:", 'soft-multimedia-player'); ?></b>
                    <ul>
                        <li><?php _e("Upload or link to your media files", 'soft-multimedia-player'); ?></li>
                        <li><?php _e("Add titles, descriptions, and optional thumbnails", 'soft-multimedia-player'); ?></li>
                        <li><?php _e("Use high-quality formats (MP3, MP4, etc.)", 'soft-multimedia-player'); ?></li>
                    </ul>
                </li>
                <li>
                    <b><?php _e("Select a Player Skin", 'soft-multimedia-player'); ?></b>
                    <ul>
                        <li><?php _e("Choose from modern, minimal, classic, or dark/light themes", 'soft-multimedia-player'); ?></li>
                        <li><?php _e("Match your site’s design for a seamless look", 'soft-multimedia-player'); ?></li>
                    </ul>
                </li>
                <li>
                    <b><?php _e("Configure Player Controls:", 'soft-multimedia-player'); ?></b>
                    <ul>
                        <li><?php _e("Enable play/pause, skip, volume, and download buttons", 'soft-multimedia-player'); ?></li>
                        <li><?php _e("Add autoplay, loop, or playlist options", 'soft-multimedia-player'); ?></li>
                    </ul>
                </li>
                <li>
                    <b><?php _e("Customize Appearance:", 'soft-multimedia-player'); ?></b>
                    <ul>
                        <li><?php _e("Adjust colors, sizes, font styles, and layout", 'soft-multimedia-player'); ?></li>
                        <li><?php _e("Preview changes in real time", 'soft-multimedia-player'); ?></li>
                    </ul>
                </li>
                <li>
                    <b><?php _e("Click “Save”", 'soft-multimedia-player'); ?></b>
                    <?php _e("and embed the player using a shortcode or block", 'soft-multimedia-player'); ?>
                </li>
            </ul>
        </div>

        <div class="col-image">

        </div>
    </section>

    <!-- Display Player Section -->
    <section class="section-basic-usage">
        <div class="col-description">
            <h2><?php _e("Display Multimedia Player", 'soft-multimedia-player'); ?></h2>
            <p><?php _e("Once your player is set up, it’s time to show it off!", 'soft-multimedia-player'); ?></p>
            <ul>
                <li><?php _e('After saving, copy the shortcode generated (e.g. [multimedia_player id="1"])', 'soft-multimedia-player'); ?></li>
                <li>
                    <?php _e("Paste the shortcode anywhere you want the player to appear:", 'soft-multimedia-player'); ?>
                    <ul>
                        <li><?php _e("In a post or page using the WordPress editor", 'soft-multimedia-player'); ?></li>
                        <li><?php _e("Inside a widget area, like your sidebar or footer", 'soft-multimedia-player'); ?></li>
                        <li><?php _e("In a custom HTML block, if needed", 'soft-multimedia-player'); ?></li>
                    </ul>
                </li>
            </ul>
            <p>
                <b><?php _e("Your player will now appear on the front end, ready for visitors to play!", 'soft-multimedia-player'); ?></b>
                <?php _e("You can add the same shortcode to multiple places to reuse the player.", 'soft-multimedia-player'); ?>
            </p>
        </div>

        <div class="col-image">

        </div>
    </section>

</div>