<?php
// If this file is called directly, abort.
if (!defined('ABSPATH')) {
    exit;
}

// Check if user has required capabilities
if (!current_user_can('manage_options')) {
    wp_die(esc_html__('You do not have sufficient permissions to access this page.', 'text-to-speech-tts'));
}

// Check if API key is set
$has_api_key = !empty(get_option('mementor_tts_api_key'));

// Check if user has a paid plan via SaaS
$is_pro_active = ttswp_has_paid_plan();

// Get custom voice ID if set (for paid plan users)
$custom_voice_id = '';
if ($is_pro_active) {
    $custom_voice_id = get_option('mementor_tts_custom_voice_id', '');
}

// Force default values for free users to ensure they can't select PRO options
if (!$is_pro_active) {
    // Make sure model is always set to free option
    update_option('mementor_tts_model', 'eleven_flash_v2_5');
    // Make sure quality is always set to free option
    update_option('mementor_tts_quality', '128');
}

// Define CSS styles based on PRO status
?>
<style>
    <?php if (!$is_pro_active): ?>
    /* Styling for disabled PRO options within active selects */
    select option[disabled],
    optgroup[disabled] option {
        opacity: 0.6;
        color: #999;
    }

    .mementor-tts-voice-filters {
        padding: 0 !important;
    }

    .mementor-tts-voice-table-container {
        border-radius: 12px;
        padding: 0 !important;
    }

    .tts-audio-label .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }
    <?php endif; ?>

    /* Voice list — compact card items (shared by free and PRO) */
    #mementor-tts-voice-list {
        margin-top: 16px;
    }
    .tts-voice-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: var(--tts-border);
    }
    .tts-voice-item:last-child { border-bottom: none; }
    .tts-voice-item.is-selected { background: var(--tts-purple-bg); border-radius: var(--tts-radius-md); padding: 10px 12px; margin: 0 -12px; }
    .tts-voice-avatar {
        width: 36px;
        height: 36px;
        max-width: 36px;
        max-height: 36px;
        border-radius: 50%;
        flex-shrink: 0;
        object-fit: cover;
    }
    .tts-voice-info { flex: 1; min-width: 0; }
    .tts-voice-name {
        font-size: 13px;
        font-weight: 500;
        color: var(--tts-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 30px;
    }
    .tts-voice-name[data-tooltip] { cursor: help; }
    .tts-voice-tooltip {
        position: absolute;
        max-width: 500px;
        padding: 8px 12px;
        background: #333;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.4;
        border-radius: var(--tts-radius-md);
        white-space: normal;
        word-wrap: break-word;
        z-index: 99999;
        pointer-events: none;
    }
    .tts-voice-meta {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 3px;
        flex-wrap: wrap;
    }
    .tts-tag {
        font-size: 11px;
        padding: 1px 6px;
        border-radius: var(--tts-radius-sm, 4px);
        background: var(--tts-bg-secondary);
        color: var(--tts-text-secondary);
    }
    .tts-voice-id {
        font-size: 11px;
        color: var(--tts-text-hint);
        font-family: monospace;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .tts-copy-btn {
        font-size: 10px;
        padding: 1px 6px;
        border-radius: var(--tts-radius-sm, 4px);
        border: var(--tts-border);
        background: transparent;
        color: var(--tts-purple);
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s;
    }
    .tts-voice-item:hover .tts-copy-btn { opacity: 1; }
    .tts-voice-badges {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
    .tts-gender-badge, .tts-age-badge {
        font-size: 11px;
        padding: 2px 8px;
        border-radius: var(--tts-radius-sm, 4px);
        font-weight: 500;
        white-space: nowrap;
    }
    .tts-gender-badge.male   { background: #E6F1FB; color: #185FA5; }
    .tts-gender-badge.female { background: #FBEAF0; color: #993556; }
    .tts-gender-badge.non-binary { background: #F0EBFD; color: #5435B0; }
    .tts-age-badge.young       { background: #E8F5E9; color: #2E7D32; }
    .tts-age-badge.middle-aged, .tts-age-badge.middle_aged { background: #FFF8E1; color: #F57F17; }
    .tts-age-badge.old         { background: var(--tts-bg-secondary); color: var(--tts-text-secondary); }
    .tts-voice-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    .tts-play-btn {
        width: 30px;
        height: 30px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--tts-border);
        border-radius: 50%;
        background: transparent;
        color: var(--tts-text-secondary);
        cursor: pointer;
        font-size: 14px;
        transition: all 0.15s;
    }
    .tts-play-btn:hover { background: var(--tts-bg-secondary); color: var(--tts-text-primary); }
    .tts-play-btn.playing { background: var(--tts-purple-bg); color: var(--tts-purple); border-color: var(--tts-purple-border); }
    .tts-use-voice-btn {
        font-size: 12px;
        padding: 4px 12px;
        border-radius: var(--tts-radius-md);
        border: var(--tts-border);
        background: transparent;
        color: var(--tts-text-secondary);
        cursor: pointer;
        font-weight: 500;
        transition: all 0.15s;
        white-space: nowrap;
    }
    .tts-use-voice-btn:hover { border-color: var(--tts-purple); color: var(--tts-purple); }
    .tts-use-voice-btn.selected {
        background: var(--tts-purple);
        color: #fff;
        border-color: var(--tts-purple);
    }
    .tts-use-voice-btn.pro-upgrade-button {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: var(--tts-purple);
        color: #fff;
        border: 1px solid var(--tts-purple);
        font-weight: 600;
        text-decoration: none;
        transition: background 0.15s, border-color 0.15s;
    }
    .tts-use-voice-btn.pro-upgrade-button:hover {
        background: #5e3fc4;
        border-color: #5e3fc4;
        color: #fff;
    }
    .tts-use-voice-btn.pro-upgrade-button .dashicons {
        width: 14px;
        height: 14px;
        font-size: 14px;
    }
    .tts-voice-loading {
        padding: 20px;
        text-align: center;
        color: var(--tts-text-hint);
        font-size: 13px;
    }
    .tts-voice-loading .dashicons { margin-right: 6px; }
    .tts-voice-load-more {
        padding: 12px 0;
        text-align: center;
    }
    .tts-voice-pro-badge {
        position: absolute;
        bottom: -4px;
        right: -6px;
        background: var(--tts-purple);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.4px;
        padding: 2px 6px;
        border-radius: 4px;
        line-height: 1.2;
        box-shadow: 0 0 0 2px #fff;
    }
    .tts-voice-avatar-wrap {
        position: relative;
        flex-shrink: 0;
    }
    .tts-voice-item.pro-voice {
        border-left: 3px solid var(--tts-purple);
        padding-left: 9px;
    }
    .tts-voice-item.pro-voice .tts-voice-name {
        color: var(--tts-purple-text, var(--tts-text-primary));
    }
    @media screen and (max-width: 782px) {
        .tts-audio-grid {
            grid-template-columns: 1fr;
        }
        .tts-voice-item { flex-wrap: wrap; }
        .tts-voice-badges { order: 3; width: 100%; margin-top: 4px; }
    }
    
    /* Toggle field box — matches select/input field height */
    .tts-toggle-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        border: 1px solid var(--tts-border-color);
        border-radius: var(--tts-radius-md);
        padding: 0 12px;
        min-height: 34px;
    }

    .tts-toggle-field-label {
        font-size: 13px;
        color: var(--tts-text-secondary);
    }

    /* Force select dropdown to respect disabled property */
    <?php if (!$is_pro_active): ?>
    select.pro-feature-disabled {
        pointer-events: none !important;
    }
    <?php else: ?>
    /* When user has PRO, ensure voice buttons are not disabled visually */
    .mementor-tts-voice-use-button.button-primary:not(.pro-upgrade-button),
    .pro-voice .mementor-tts-voice-use-button:not(.selected),
    .pro-voice .tts-use-voice-btn:not(.selected) {
        opacity: 1 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    .mementor-tts-voice-use-button.button-primary:not(.pro-upgrade-button):hover {
        background-color: #135e96 !important;
        color: #fff !important;
    }

    .mementor-tts-voice-use-button.button-primary.selected {
        background-color: #00a32a !important;
        border-color: #00a32a !important;
    }
    <?php endif; ?>
    
    /* Full width layout for voices page */
    .mementor-tts-wrap {
        display: block !important;
        background: transparent;
        padding: 0;
    }
    
    .mementor-tts-main {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure cards are properly separated */
    .mementor-tts-settings-card {
        margin-bottom: 20px !important;
        display: block !important;
        clear: both !important;
    }
    
    /* Position the PRO badge nicer */
    .mementor-tts-pro-label {
        background-color: #7854E4;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 11px;
        margin-left: 8px;
        display: inline-block;
        vertical-align: middle;
    }

</style>

<?php
$tts_page_title = __('Audio Settings & Voices', 'text-to-speech-tts');
$tts_topbar_actions = '<button type="button" id="clear-voice-cache" class="tts-btn">' . esc_html__('Refresh voices', 'text-to-speech-tts') . '</button>'
    . '<button type="submit" form="voices-settings-form" class="tts-btn tts-btn-primary">' . esc_html__('Save settings', 'text-to-speech-tts') . '</button>';
$tts_requires_connection = true; // gate page behind SaaS connection

include MEMENTOR_TTS_PLUGIN_DIR . 'admin/partials/layout-open.php';
?>
<?php include(MEMENTOR_TTS_PLUGIN_DIR . 'admin/partials/navigation.php'); ?>
            <form method="post" action="options.php" id="voices-settings-form" spellcheck="false">
            <?php
            settings_fields('mementor_tts_voices_settings');
            do_settings_sections('mementor_tts_voices_settings');
            wp_nonce_field('mementor_tts_nonce', 'mementor_tts_nonce');
            
            // Get current settings
            $voice_id = get_option('mementor_tts_voice', '');
            $voice_name = get_option('mementor_tts_voice_name', '');
            ?>
            
            <!-- Voice saved via AJAX only — not included in form submit to prevent options.php from overwriting -->
            <input type="hidden" id="mementor_tts_voice" value="<?php echo esc_attr($voice_id); ?>" disabled>
            <input type="hidden" id="mementor_tts_voice_name" value="<?php echo esc_attr($voice_name); ?>" disabled>
            
            <!-- Audio Settings Section -->
            <div class="tts-card tts-card-inset">
                <div class="tts-card-header tts-card-header-inline">
                    <h3 class="tts-card-title"><?php esc_html_e('Audio Settings', 'text-to-speech-tts'); ?></h3>
                    <p class="tts-card-desc"><?php esc_html_e('Configure audio quality, model, and voice settings.', 'text-to-speech-tts'); ?></p>
                </div>
                    <div class="tts-audio-grid">
                        <div class="tts-audio-field">
                            <label class="tts-audio-label">
                                <?php esc_html_e('Model ID', 'text-to-speech-tts'); ?>
                                <span class="dashicons dashicons-info tooltip-icon"></span>
                                <span class="tooltip-text"><?php esc_html_e('Eleven Flash v2.5 is a fast speech synthesis model, designed for real-time applications and conversational AI. It delivers high-quality speech with ultra-low latency (~75ms†) across 80+ languages.', 'text-to-speech-tts'); ?></span>
                            </label>
                            <?php $current_model = get_option('mementor_tts_model', 'eleven_flash_v2_5'); ?>
                            <select name="mementor_tts_model" id="mementor_tts_model">
                                <option value="eleven_flash_v2_5" <?php selected($current_model, 'eleven_flash_v2_5'); ?>><?php esc_html_e('Eleven Flash v2.5', 'text-to-speech-tts'); ?></option>
                                <?php if ($is_pro_active): ?>
                                <option value="eleven_multilingual_v2" <?php selected($current_model, 'eleven_multilingual_v2'); ?>><?php esc_html_e('Multilingual v2 (PRO)', 'text-to-speech-tts'); ?></option>
                                <option value="eleven_v3" <?php selected($current_model, 'eleven_v3'); ?>><?php esc_html_e('Eleven v3 - 70+ Languages (PRO)', 'text-to-speech-tts'); ?></option>
                                <?php else: ?>
                                <option class="pro-option" disabled="disabled"><?php esc_html_e('Multilingual v2 (PRO)', 'text-to-speech-tts'); ?></option>
                                <option class="pro-option" disabled="disabled"><?php esc_html_e('Eleven v3 - 70+ Languages (PRO)', 'text-to-speech-tts'); ?></option>
                                <?php endif; ?>
                            </select>
                        </div>

                        <div class="tts-audio-field">
                            <label class="tts-audio-label">
                                <?php esc_html_e('Language', 'text-to-speech-tts'); ?>
                                <span class="dashicons dashicons-info tooltip-icon"></span>
                                <span class="tooltip-text"><?php esc_html_e('Generate high-quality, human-like speech in 80+ languages.', 'text-to-speech-tts'); ?></span>
                            </label>
                            <select name="mementor_tts_language" id="mementor_tts_language">
                                <?php $current_language = get_option('mementor_tts_language', 'en'); ?>
                                <option value="ar" <?php selected($current_language, 'ar'); ?>><?php esc_html_e('Arabic', 'text-to-speech-tts'); ?></option>
                                <option value="bg" <?php selected($current_language, 'bg'); ?>><?php esc_html_e('Bulgarian', 'text-to-speech-tts'); ?></option>
                                <option value="zh" <?php selected($current_language, 'zh'); ?>><?php esc_html_e('Chinese', 'text-to-speech-tts'); ?></option>
                                <option value="hr" <?php selected($current_language, 'hr'); ?>><?php esc_html_e('Croatian', 'text-to-speech-tts'); ?></option>
                                <option value="cs" <?php selected($current_language, 'cs'); ?>><?php esc_html_e('Czech', 'text-to-speech-tts'); ?></option>
                                <option value="da" <?php selected($current_language, 'da'); ?>><?php esc_html_e('Danish', 'text-to-speech-tts'); ?></option>
                                <option value="nl" <?php selected($current_language, 'nl'); ?>><?php esc_html_e('Dutch', 'text-to-speech-tts'); ?></option>
                                <option value="en" <?php selected($current_language, 'en'); ?>><?php esc_html_e('English', 'text-to-speech-tts'); ?></option>
                                <option value="fil" <?php selected($current_language, 'fil'); ?>><?php esc_html_e('Filipino', 'text-to-speech-tts'); ?></option>
                                <option value="fi" <?php selected($current_language, 'fi'); ?>><?php esc_html_e('Finnish', 'text-to-speech-tts'); ?></option>
                                <option value="fr" <?php selected($current_language, 'fr'); ?>><?php esc_html_e('French', 'text-to-speech-tts'); ?></option>
                                <option value="de" <?php selected($current_language, 'de'); ?>><?php esc_html_e('German', 'text-to-speech-tts'); ?></option>
                                <option value="el" <?php selected($current_language, 'el'); ?>><?php esc_html_e('Greek', 'text-to-speech-tts'); ?></option>
                                <option value="hi" <?php selected($current_language, 'hi'); ?>><?php esc_html_e('Hindi', 'text-to-speech-tts'); ?></option>
                                <option value="hu" <?php selected($current_language, 'hu'); ?>><?php esc_html_e('Hungarian', 'text-to-speech-tts'); ?></option>
                                <option value="is" <?php selected($current_language, 'is'); ?>><?php esc_html_e('Icelandic', 'text-to-speech-tts'); ?></option>
                                <option value="id" <?php selected($current_language, 'id'); ?>><?php esc_html_e('Indonesian', 'text-to-speech-tts'); ?></option>
                                <option value="ga" <?php selected($current_language, 'ga'); ?>><?php esc_html_e('Irish', 'text-to-speech-tts'); ?></option>
                                <option value="it" <?php selected($current_language, 'it'); ?>><?php esc_html_e('Italian', 'text-to-speech-tts'); ?></option>
                                <option value="ja" <?php selected($current_language, 'ja'); ?>><?php esc_html_e('Japanese', 'text-to-speech-tts'); ?></option>
                                <option value="ko" <?php selected($current_language, 'ko'); ?>><?php esc_html_e('Korean', 'text-to-speech-tts'); ?></option>
                                <option value="ms" <?php selected($current_language, 'ms'); ?>><?php esc_html_e('Malay', 'text-to-speech-tts'); ?></option>
                                <option value="no" <?php selected($current_language, 'no'); ?>><?php esc_html_e('Norwegian', 'text-to-speech-tts'); ?></option>
                                <option value="pl" <?php selected($current_language, 'pl'); ?>><?php esc_html_e('Polish', 'text-to-speech-tts'); ?></option>
                                <option value="pt" <?php selected($current_language, 'pt'); ?>><?php esc_html_e('Portuguese', 'text-to-speech-tts'); ?></option>
                                <option value="ro" <?php selected($current_language, 'ro'); ?>><?php esc_html_e('Romanian', 'text-to-speech-tts'); ?></option>
                                <option value="ru" <?php selected($current_language, 'ru'); ?>><?php esc_html_e('Russian', 'text-to-speech-tts'); ?></option>
                                <option value="sk" <?php selected($current_language, 'sk'); ?>><?php esc_html_e('Slovak', 'text-to-speech-tts'); ?></option>
                                <option value="es" <?php selected($current_language, 'es'); ?>><?php esc_html_e('Spanish', 'text-to-speech-tts'); ?></option>
                                <option value="sv" <?php selected($current_language, 'sv'); ?>><?php esc_html_e('Swedish', 'text-to-speech-tts'); ?></option>
                                <option value="ta" <?php selected($current_language, 'ta'); ?>><?php esc_html_e('Tamil', 'text-to-speech-tts'); ?></option>
                                <option value="tr" <?php selected($current_language, 'tr'); ?>><?php esc_html_e('Turkish', 'text-to-speech-tts'); ?></option>
                                <option value="uk" <?php selected($current_language, 'uk'); ?>><?php esc_html_e('Ukrainian', 'text-to-speech-tts'); ?></option>
                                <option value="vi" <?php selected($current_language, 'vi'); ?>><?php esc_html_e('Vietnamese', 'text-to-speech-tts'); ?></option>
                            </select>
                            <?php if (!$is_pro_active): ?>
                            <div id="pro-language-notice-legacy" class="mementor-tts-pro-notice" style="display: none;">
                                <div class="mementor-tts-pro-notice-content">
                                    <span class="dashicons dashicons-lock"></span>
                                    <p><?php esc_html_e('This language is only available in the PRO version', 'text-to-speech-tts'); ?>
                                    <a href="<?php echo esc_url(admin_url('admin.php?page=text-to-speech-tts-account')); ?>" class="page-title-action mementor-tts-upgrade-button">
                                        <?php esc_html_e('Upgrade to PRO', 'text-to-speech-tts'); ?> <span class="dashicons dashicons-star-filled"></span>
                                    </a></p>
                                </div>
                            </div>
                            <?php endif; ?>
                            <div id="mementor-tts-pro-language-notice" class="mementor-tts-pro-notice" style="display: none;">
                                <div class="mementor-tts-pro-notice-content">
                                    <span class="dashicons dashicons-lock"></span>
                                    <p><?php esc_html_e('This language is only available in the PRO version.', 'text-to-speech-tts'); ?></p>
                                    <a href="<?php echo esc_url(admin_url('admin.php?page=text-to-speech-tts-account')); ?>" class="page-title-action mementor-tts-upgrade-button">
                                        <?php esc_html_e('Upgrade to PRO', 'text-to-speech-tts'); ?> <span class="dashicons dashicons-star-filled"></span>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="tts-audio-field">
                            <label class="tts-audio-label">
                                <?php esc_html_e('Audio quality (MP3)', 'text-to-speech-tts'); ?>
                                <span class="dashicons dashicons-info tooltip-icon"></span>
                                <span class="tooltip-text"><?php echo wp_kses(__('- Medium (96 kbps) – Good quality, smaller files<br>- High (128 kbps) – Clear voice, balanced size<br>- Very High (192 kbps) – Best clarity, larger files', 'text-to-speech-tts'), array('br' => array())); ?></span>
                            </label>
                            <?php $current_quality = get_option('mementor_tts_quality', 'mp3_44100_96'); ?>
                            <select name="mementor_tts_quality" id="mementor_tts_quality">
                                <option value="mp3_44100_96" <?php selected($current_quality, 'mp3_44100_96'); ?>><?php esc_html_e('Medium (96 kbps)', 'text-to-speech-tts'); ?></option>
                                <?php if ($is_pro_active): ?>
                                <option value="mp3_44100_128" <?php selected($current_quality, 'mp3_44100_128'); ?>><?php esc_html_e('High (128 kbps) (PRO)', 'text-to-speech-tts'); ?></option>
                                <option value="mp3_44100_192" <?php selected($current_quality, 'mp3_44100_192'); ?>><?php esc_html_e('Very High (192 kbps) (PRO)', 'text-to-speech-tts'); ?></option>
                                <?php else: ?>
                                <option class="pro-option" disabled="disabled"><?php esc_html_e('High (128 kbps) (PRO)', 'text-to-speech-tts'); ?></option>
                                <option class="pro-option" disabled="disabled"><?php esc_html_e('Very High (192 kbps) (PRO)', 'text-to-speech-tts'); ?></option>
                                <?php endif; ?>
                            </select>
                        </div>

                        <div class="tts-audio-field">
                            <label class="tts-audio-label"><?php esc_html_e('Speed', 'text-to-speech-tts'); ?></label>
                            <select name="mementor_tts_speed_preset" id="mementor_tts_speed_preset">
                                <?php $current_speed = get_option('mementor_tts_speed_preset', '1.0'); ?>
                                <option value="0.7" <?php selected($current_speed, '0.7'); ?>>0.7x</option>
                                <option value="0.8" <?php selected($current_speed, '0.8'); ?>>0.8x</option>
                                <option value="0.9" <?php selected($current_speed, '0.9'); ?>>0.9x</option>
                                <option value="0.93" <?php selected($current_speed, '0.93'); ?>>0.93x</option>
                                <option value="1.0" <?php selected($current_speed, '1.0'); ?>>1.0x (Default)</option>
                                <option value="1.1" <?php selected($current_speed, '1.1'); ?>>1.1x</option>
                                <option value="1.2" <?php selected($current_speed, '1.2'); ?>>1.2x</option>
                            </select>
                        </div>

                        <div class="tts-audio-field">
                            <label class="tts-audio-label"><?php esc_html_e('Stability', 'text-to-speech-tts'); ?></label>
                            <select name="mementor_tts_stability_preset" id="mementor_tts_stability_preset">
                                <?php $current_stability = get_option('mementor_tts_stability_preset', 50); ?>
                                <option value="0" <?php selected($current_stability, 0); ?>>0%</option>
                                <option value="10" <?php selected($current_stability, 10); ?>>10%</option>
                                <option value="20" <?php selected($current_stability, 20); ?>>20%</option>
                                <option value="30" <?php selected($current_stability, 30); ?>>30%</option>
                                <option value="40" <?php selected($current_stability, 40); ?>>40%</option>
                                <option value="50" <?php selected($current_stability, 50); ?>>50% (Default)</option>
                                <option value="60" <?php selected($current_stability, 60); ?>>60%</option>
                                <option value="70" <?php selected($current_stability, 70); ?>>70%</option>
                                <option value="80" <?php selected($current_stability, 80); ?>>80%</option>
                                <option value="90" <?php selected($current_stability, 90); ?>>90%</option>
                                <option value="100" <?php selected($current_stability, 100); ?>>100%</option>
                            </select>
                        </div>

                        <div class="tts-audio-field">
                            <label class="tts-audio-label"><?php esc_html_e('Speaker Boost', 'text-to-speech-tts'); ?></label>
                            <div class="tts-toggle-field">
                                <span class="tts-toggle-field-label" id="speaker-boost-label"><?php echo get_option('mementor_tts_speaker_boost', true) ? esc_html__('Enabled', 'text-to-speech-tts') : esc_html__('Disabled', 'text-to-speech-tts'); ?></span>
                                <div class="mementor-tts-toggle">
                                    <input type="hidden" name="mementor_tts_speaker_boost" value="0">
                                    <?php $speaker_boost = get_option('mementor_tts_speaker_boost', true); ?>
                                    <input type="checkbox" id="mementor_tts_speaker_boost" name="mementor_tts_speaker_boost" value="1" <?php checked($speaker_boost); ?>>
                                    <label for="mementor_tts_speaker_boost">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                    <?php if (!$is_pro_active): ?>
                        <div class="tts-audio-field is-pro">
                            <label class="tts-audio-label"><?php esc_html_e('Similarity', 'text-to-speech-tts'); ?> <span class="tts-pro-badge">PRO</span></label>
                            <span class="tts-audio-locked-value">75% (Default)</span>
                        </div>
                        <div class="tts-audio-field is-pro">
                            <label class="tts-audio-label"><?php esc_html_e('Style Exaggeration', 'text-to-speech-tts'); ?> <span class="tts-pro-badge">PRO</span></label>
                            <span class="tts-audio-locked-value">0% (Default)</span>
                        </div>
                        <div class="tts-audio-field is-pro">
                            <label class="tts-audio-label"><?php esc_html_e('Privacy Mode', 'text-to-speech-tts'); ?> <span class="tts-pro-badge">PRO</span></label>
                            <span class="tts-audio-locked-value"><?php esc_html_e('Off', 'text-to-speech-tts'); ?></span>
                        </div>
                    <?php else: ?>
                        <div class="tts-audio-field">
                            <label class="tts-audio-label"><?php esc_html_e('Similarity', 'text-to-speech-tts'); ?></label>
                            <?php $current_similarity = get_option('mementor_tts_similarity_preset', '75'); ?>
                            <select name="mementor_tts_similarity_preset" id="mementor_tts_similarity_preset">
                                <option value="0" <?php selected($current_similarity, '0'); ?>>0%</option>
                                <option value="10" <?php selected($current_similarity, '10'); ?>>10%</option>
                                <option value="20" <?php selected($current_similarity, '20'); ?>>20%</option>
                                <option value="30" <?php selected($current_similarity, '30'); ?>>30%</option>
                                <option value="40" <?php selected($current_similarity, '40'); ?>>40%</option>
                                <option value="50" <?php selected($current_similarity, '50'); ?>>50%</option>
                                <option value="60" <?php selected($current_similarity, '60'); ?>>60%</option>
                                <option value="70" <?php selected($current_similarity, '70'); ?>>70%</option>
                                <option value="75" <?php selected($current_similarity, '75'); ?>>75% (Default)</option>
                                <option value="80" <?php selected($current_similarity, '80'); ?>>80%</option>
                                <option value="90" <?php selected($current_similarity, '90'); ?>>90%</option>
                                <option value="100" <?php selected($current_similarity, '100'); ?>>100%</option>
                            </select>
                        </div>
                        <div class="tts-audio-field">
                            <label class="tts-audio-label"><?php esc_html_e('Style Exaggeration', 'text-to-speech-tts'); ?></label>
                            <?php $current_style = get_option('mementor_tts_style_preset', '0'); ?>
                            <select name="mementor_tts_style_preset" id="mementor_tts_style_preset">
                                <option value="0" <?php selected($current_style, '0'); ?>>0% (Default)</option>
                                <option value="10" <?php selected($current_style, '10'); ?>>10%</option>
                                <option value="20" <?php selected($current_style, '20'); ?>>20%</option>
                                <option value="30" <?php selected($current_style, '30'); ?>>30%</option>
                                <option value="40" <?php selected($current_style, '40'); ?>>40%</option>
                                <option value="50" <?php selected($current_style, '50'); ?>>50%</option>
                                <option value="60" <?php selected($current_style, '60'); ?>>60%</option>
                                <option value="70" <?php selected($current_style, '70'); ?>>70%</option>
                                <option value="80" <?php selected($current_style, '80'); ?>>80%</option>
                                <option value="90" <?php selected($current_style, '90'); ?>>90%</option>
                                <option value="100" <?php selected($current_style, '100'); ?>>100%</option>
                            </select>
                        </div>
                        <div class="tts-audio-field">
                            <label class="tts-audio-label"><?php esc_html_e('Privacy Mode', 'text-to-speech-tts'); ?></label>
                            <div class="tts-toggle-field">
                                <span class="tts-toggle-field-label" id="privacy-mode-label"><?php echo get_option('mementor_tts_privacy_mode', false) ? esc_html__('Enabled', 'text-to-speech-tts') : esc_html__('Disabled', 'text-to-speech-tts'); ?></span>
                                <div class="mementor-tts-toggle">
                                    <input type="hidden" name="mementor_tts_privacy_mode" value="0">
                                    <?php $privacy_mode = get_option('mementor_tts_privacy_mode', false); ?>
                                    <input type="checkbox" id="mementor_tts_privacy_mode" name="mementor_tts_privacy_mode" value="1" <?php checked($privacy_mode, '1'); ?>>
                                    <label for="mementor_tts_privacy_mode">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                    </div>

            </div>

            <?php
            /**
             * Hook for PRO plugin to add language-voice mapping section
             */
            do_action('mementor_tts_voices_page_after_settings');

            if ($is_pro_active):
            ?>
            <!-- Custom Voice ID (PRO active) -->
            <div class="tts-card" style="background: #f7f7f6;">
                <div class="tts-setting-row" style="flex-wrap: wrap;">
                    <div>
                        <div class="tts-setting-label"><?php esc_html_e('Custom Voice ID', 'text-to-speech-tts'); ?></div>
                        <div class="tts-setting-hint"><?php esc_html_e('Use your own ElevenLabs voice ID. Leave empty to use the selected voice below.', 'text-to-speech-tts'); ?></div>
                    </div>
                    <input type="text"
                           id="mementor_tts_custom_voice_id"
                           name="mementor_tts_custom_voice_id"
                           value="<?php echo esc_attr(get_option('mementor_tts_custom_voice_id', '')); ?>"
                           class="regular-text"
                           style="max-width: 280px; background: #fff;"
                           placeholder="<?php esc_attr_e('e.g., 21m00Tcm4TlvDq8ikWAM', 'text-to-speech-tts'); ?>" />
                    <div style="width: 100%; margin-top: 6px;">
                        <p class="description" style="margin: 0; color: #d63638; font-size: 12px;">
                            <span class="dashicons dashicons-warning" style="font-size: 14px; vertical-align: middle;"></span>
                            <?php
                            printf(
                                /* translators: 1: Email address to share the voice with, wrapped in <strong>. 2: Opening <a> tag linking to ElevenLabs help article. 3: Closing </a> tag. */
                                esc_html__('You must share your custom voice with %1$s for it to work with PRO credits. %2$sLearn how%3$s.', 'text-to-speech-tts'),
                                '<strong>mementoras@gmail.com</strong>',
                                '<a href="https://help.elevenlabs.io/hc/en-us/articles/18644643807889-How-do-I-share-a-voice" target="_blank" rel="noopener">',
                                '</a>'
                            );
                            ?>
                        </p>
                        <?php if (get_option('mementor_tts_custom_voice_id', '')): ?>
                        <p class="description" style="margin-top: 6px; color: var(--tts-purple); font-size: 12px;">
                            <span class="dashicons dashicons-info" style="font-size: 14px; vertical-align: middle;"></span>
                            <?php esc_html_e('Using custom voice ID. The voice selection below will be ignored.', 'text-to-speech-tts'); ?>
                        </p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php // Language-Voice Mapping (PRO) ?>
            <?php include MEMENTOR_TTS_PLUGIN_DIR . 'admin/partials/pages/language-voice-mapping.php'; ?>

            <?php else: ?>
            <!-- PRO features — 2-column grid -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                <div class="tts-card" style="margin-bottom: 0;">
                    <div class="tts-setting-row tts-setting-row-locked">
                        <div>
                            <div class="tts-setting-label">
                                <?php esc_html_e('Custom Voice ID', 'text-to-speech-tts'); ?>
                                <span class="tts-pro-badge">PRO</span>
                            </div>
                            <div class="tts-setting-hint"><?php esc_html_e('Use your own ElevenLabs voice ID for personalized speech synthesis.', 'text-to-speech-tts'); ?></div>
                        </div>
                        <span class="tts-lock-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
                    </div>
                </div>
                <div class="tts-card" style="margin-bottom: 0;">
                    <div class="tts-setting-row tts-setting-row-locked">
                        <div>
                            <div class="tts-setting-label">
                                <?php esc_html_e('Multi-Language Voice Mapping', 'text-to-speech-tts'); ?>
                                <span class="tts-pro-badge">PRO</span>
                            </div>
                            <div class="tts-setting-hint"><?php esc_html_e('Assign different voices per language (Weglot, WPML).', 'text-to-speech-tts'); ?></div>
                        </div>
                        <span class="tts-lock-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <!-- Voice Selection Section -->
            <div class="tts-card">
                <div class="tts-card-header tts-card-header-inline">
                    <h3 class="tts-card-title"><?php echo esc_html__('Voice Selection & Filter', 'text-to-speech-tts'); ?></h3>
                    <p class="tts-card-desc"><?php echo esc_html__('Choose from a variety of voices or use your custom voice ID.', 'text-to-speech-tts'); ?></p>
                </div>
                    <!-- Voice Filters -->
                    <div class="tts-audio-grid" style="grid-template-columns: repeat(5, 1fr);">
                        <div class="tts-audio-field">
                            <label class="tts-audio-label" for="voice-search"><?php esc_html_e('Search Voices', 'text-to-speech-tts'); ?></label>
                            <input type="text" id="voice-search" placeholder="<?php esc_html_e('Search...', 'text-to-speech-tts'); ?>">
                        </div>
                        <div class="tts-audio-field">
                            <label class="tts-audio-label" for="mementor-tts-filter-gender"><?php esc_html_e('Gender', 'text-to-speech-tts'); ?></label>
                            <select id="mementor-tts-filter-gender" class="mementor-tts-filter">
                                <option value=""><?php esc_html_e('All Genders', 'text-to-speech-tts'); ?></option>
                            </select>
                        </div>
                        <div class="tts-audio-field">
                            <label class="tts-audio-label" for="mementor-tts-filter-age"><?php esc_html_e('Age', 'text-to-speech-tts'); ?></label>
                            <select id="mementor-tts-filter-age" class="mementor-tts-filter">
                                <option value=""><?php esc_html_e('All Ages', 'text-to-speech-tts'); ?></option>
                            </select>
                        </div>
                        <div class="tts-audio-field">
                            <label class="tts-audio-label" for="mementor-tts-filter-accent"><?php esc_html_e('Accent', 'text-to-speech-tts'); ?></label>
                            <select id="mementor-tts-filter-accent" class="mementor-tts-filter">
                                <option value=""><?php esc_html_e('All Accents', 'text-to-speech-tts'); ?></option>
                            </select>
                        </div>
                        <div class="tts-audio-field">
                            <label class="tts-audio-label" for="mementor-tts-filter-use-case"><?php esc_html_e('Use Case', 'text-to-speech-tts'); ?></label>
                            <select id="mementor-tts-filter-use-case" class="mementor-tts-filter">
                                <option value=""><?php esc_html_e('All Use Cases', 'text-to-speech-tts'); ?></option>
                            </select>
                        </div>
                    </div>

                    <!-- Voice List -->
                    <div id="mementor-tts-voice-list">
                        <?php if (!empty($custom_voice_id)): ?>
                        <div class="tts-voice-item" style="background: var(--tts-green-bg, #e8f5e9); border-radius: var(--tts-radius-md); padding: 10px 12px; margin-bottom: 8px;">
                            <img class="tts-voice-avatar" src="<?php echo esc_url(MEMENTOR_TTS_PLUGIN_URL . 'admin/images/avatar/custom_voice.svg'); ?>" alt="<?php esc_attr_e('Custom Voice', 'text-to-speech-tts'); ?>" width="36" height="36">
                            <div class="tts-voice-info">
                                <div class="tts-voice-name"><?php esc_html_e('Custom Voice', 'text-to-speech-tts'); ?></div>
                                <div class="tts-voice-meta">
                                    <span class="tts-tag"><?php echo esc_html(get_option('mementor_tts_language', 'en')); ?></span>
                                    <span class="tts-voice-id"><?php echo esc_html($custom_voice_id); ?></span>
                                </div>
                            </div>
                            <div class="tts-voice-actions">
                                <span style="color: var(--tts-green, #4caf50); font-weight: 500; font-size: 13px;"><?php esc_html_e('Active', 'text-to-speech-tts'); ?></span>
                            </div>
                        </div>
                        <?php endif; ?>
                        <div class="tts-voice-loading">
                            <span class="dashicons dashicons-update-alt spinning"></span>
                            <?php esc_html_e('Loading voices...', 'text-to-speech-tts'); ?>
                        </div>
                    </div>
            </div>

            </form>
<?php include MEMENTOR_TTS_PLUGIN_DIR . 'admin/partials/layout-close.php'; ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var modelSelect = document.getElementById('mementor_tts_model');
    var modelField = modelSelect ? modelSelect.closest('.tts-audio-field') : null;
    var tooltip = modelField ? modelField.querySelector('.tooltip-text') : null;
    var flashTooltip = '<?php echo esc_js(__('Eleven Flash v2.5 is a fast speech synthesis model, designed for real-time applications and conversational AI. It delivers high-quality speech with ultra-low latency (~75ms†) across 80+ languages.', 'text-to-speech-tts')); ?>';
    var multilingualTooltip = '<?php echo esc_js(__('Eleven Multilingual v2 is our most advanced, emotionally-aware speech synthesis model. It produces natural, lifelike speech with high emotional range and contextual understanding across multiple languages.', 'text-to-speech-tts')); ?>';
    function updateTooltip() {
        if (!tooltip) return;
        if (modelSelect.value === 'eleven_multilingual_v2') {
            tooltip.textContent = multilingualTooltip;
        } else {
            tooltip.textContent = flashTooltip;
        }
    }
    if (modelSelect) {
        modelSelect.addEventListener('change', updateTooltip);
        updateTooltip();
    }

    // Voice name tooltip (JS-based to escape overflow:hidden)
    var tipEl = null;
    document.addEventListener('mouseenter', function(e) {
        if (!e.target.closest) return;
        var name = e.target.closest('.tts-voice-name[data-tooltip]');
        if (!name) return;
        if (tipEl) tipEl.remove();
        tipEl = document.createElement('div');
        tipEl.className = 'tts-voice-tooltip';
        tipEl.textContent = name.getAttribute('data-tooltip');
        document.body.appendChild(tipEl);
        var rect = name.getBoundingClientRect();
        tipEl.style.left = rect.left + 'px';
        tipEl.style.top = (rect.top + window.scrollY - tipEl.offsetHeight - 8) + 'px';
    }, true);
    document.addEventListener('mouseleave', function(e) {
        if (!e.target.closest) return;
        var name = e.target.closest('.tts-voice-name[data-tooltip]');
        if (!name) return;
        if (tipEl) { tipEl.remove(); tipEl = null; }
    }, true);

    // Copy Voice ID handler (event delegation for dynamic items)
    document.addEventListener('click', function(e) {
        if (!e.target.closest) return;
        var btn = e.target.closest('.tts-copy-btn');
        if (!btn) return;
        e.preventDefault();
        e.stopPropagation();
        var id = btn.getAttribute('data-id');
        navigator.clipboard.writeText(id).then(function() {
            var orig = btn.textContent;
            btn.textContent = 'Copied!';
            btn.style.color = 'var(--tts-green, #2E7D32)';
            btn.style.opacity = '1';
            setTimeout(function() {
                btn.textContent = orig;
                btn.style.color = '';
                btn.style.opacity = '';
            }, 1500);
        });
    });
});
</script>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        // Toggle field label updates
        $('#mementor_tts_speaker_boost').on('change', function() {
            $('#speaker-boost-label').text(this.checked ? '<?php echo esc_js(__('Enabled', 'text-to-speech-tts')); ?>' : '<?php echo esc_js(__('Disabled', 'text-to-speech-tts')); ?>');
        });
        $('#mementor_tts_privacy_mode').on('change', function() {
            $('#privacy-mode-label').text(this.checked ? '<?php echo esc_js(__('Enabled', 'text-to-speech-tts')); ?>' : '<?php echo esc_js(__('Disabled', 'text-to-speech-tts')); ?>');
        });

        // Check if PRO is active
        var isPro = <?php echo $is_pro_active ? 'true' : 'false'; ?>;

        if (!isPro) {
            // Completely disable all PRO features
            // For select elements with disabled options
            $('.mementor-tts-select option[disabled]').each(function() {
                // Store the original HTML for these options
                var originalText = $(this).html();
                
                // Replace the option with a completely non-interactive version
                $(this).prop({
                    'disabled': true,
                    'selected': false
                }).css({
                    'color': '#999',
                    'background-color': '#f0f0f0',
                    'text-decoration': 'line-through',
                    'font-style': 'italic'
                });
                
                // Ensure this option can't be selected via keyboard either
                // $(this).attr('aria-hidden', 'true');
            });
            
            // Apply similar treatment to optgroups
            $('optgroup[disabled]').prop('disabled', true).css('color', '#999');
            
            // FIXED: Allow interaction with free options in all dropdowns
            // Remove the pro-feature-disabled class from all dropdowns so users can select the free options
            $('#mementor_tts_language, #mementor_tts_model').removeClass('pro-feature-disabled');
            
            // Enable all disabled options
            $('.mementor-tts-select option[disabled]').prop('disabled', false).css({
                'color': '',
                'background-color': '',
                'text-decoration': '',
                'font-style': ''
            }).removeAttr('aria-hidden');
            
            // Enable all optgroups
            $('optgroup[disabled]').prop('disabled', false).css('color', '');
            
            // Remove any pro-feature-disabled classes
            $('.pro-feature-disabled').removeClass('pro-feature-disabled');
            
            // Make multilingual v2 option fully available
            $('option[value="eleven_multilingual_v2"]').prop({
                'disabled': false
            }).css({
                'pointer-events': '',
                'user-select': '',
                'color': '',
                'background-color': ''
            });
            
            // Ensure privacy mode checkbox can't be interacted with
            $('#mementor_tts_privacy_mode').prop('disabled', true);
            $('#mementor_tts_privacy_mode').parent().css({
                'opacity': '0.6',
                'cursor': 'not-allowed',
                'pointer-events': 'none'
            });
            
            // Add event listeners to prevent interaction with disabled elements ONLY
            // Modified to be more targeted and not block legitimate free options
            $('select:has(option[disabled]), select[disabled], input[disabled]').on('mousedown mouseup touchstart touchend keydown keyup click focus', function(e) {
                // Only prevent if the element itself is disabled or if a disabled option is being interacted with
                if (($(this).is(':disabled')) || 
                    ($(e.target).is('option') && $(e.target).is(':disabled'))) {
                    e.preventDefault();
                    e.stopPropagation();
                    alert('This feature is only available in the PRO version.');
                    return false;
                }
            });
            
            // Event delegation for document to catch all attempts to interact with disabled elements
            $(document).on('mousedown mouseup touchstart touchend keydown keyup click focus', 'select[disabled], input[disabled], option[disabled]', function(e) {
                if ($(this).is(':disabled') || 
                    ($(e.target).is('option') && $(e.target).is(':disabled'))) {
                    e.preventDefault();
                    e.stopPropagation();
                    alert('This feature is only available in the PRO version.');
                    return false;
                }
            });
            
            // More aggressive prevention of PRO option selection
            $('.pro-option').prop('disabled', true).attr('data-pro-only', 'true');
            
            // Force all disabled options to have no value to prevent form submission with PRO values
            $('option[disabled]').removeAttr('value');
            
            // Mark all PRO options with a class
            $('.mementor-tts-select option:disabled').addClass('pro-option');
            
            // Prevent selection of disabled options
            $('.mementor-tts-select').on('mousedown focus click change keydown', function(e) {
                var $selected = $(this).find('option:selected');
                if ($selected.is(':disabled') || $selected.hasClass('pro-option')) {
                    $(this).val($(this).find('option:not(:disabled):first').val());
                    alert('This feature is only available in the PRO version.');
                    e.preventDefault();
                    return false;
                }
            });
            
            // Check on page load if any selected options are disabled (PRO), reset to first available if so
            $('.mementor-tts-select').each(function() {
                var $select = $(this);
                var $selected = $select.find('option:selected');
                if ($selected.is(':disabled') || $selected.hasClass('pro-option')) {
                    $select.val($select.find('option:not(:disabled):first').val());
                }
            });
            
            // Enforce PRO restrictions on form submission
            $('.mementor-tts-voices-form').on('submit', function(e) {
                var hasDisabledSelection = false;
                
                // Check each select element
                $(this).find('.mementor-tts-select').each(function() {
                    var $select = $(this);
                    var $selected = $select.find('option:selected');
                    
                    // If a disabled/PRO option is selected, prevent submission
                    if ($selected.is(':disabled') || $selected.hasClass('pro-option')) {
                        // Reset to first non-disabled option
                        $select.val($select.find('option:not(:disabled):first').val());
                        hasDisabledSelection = true;
                    }
                });
                
                // If any PRO options were selected, prevent form submission
                if (hasDisabledSelection) {
                    alert('Some features you selected are only available in the PRO version. The form has been adjusted to use free options.');
                    e.preventDefault();
                    return false;
                }
            });
            
            // Add visual styling to disabled options for better UX
            $('.mementor-tts-select option:disabled, .mementor-tts-select option.pro-option').css({
                'color': '#999',
                'font-style': 'italic'
            });
            
            // Enforce select restrictions on any DOM changes
            $('body').on('DOMSubtreeModified', '.mementor-tts-select', function() {
                var $selected = $(this).find('option:selected');
                if ($selected.is(':disabled') || $selected.hasClass('pro-option')) {
                    // Reset to the first non-disabled option
                    $(this).val($(this).find('option:not(:disabled):first').val());
                }
            });
            
            // No longer show PRO notice - we now allow 1 voice per language for free users
            $('#mementor-tts-pro-language-notice').hide();
            $('#pro-language-notice-legacy').hide();
            
            $('#mementor_tts_language').on('change', function() {
                $('#mementor-tts-pro-language-notice').hide();
                $('#pro-language-notice-legacy').hide();
            });
        } else {
            // PRO is active, so enable all features
            // Enable all disabled options
            $('.mementor-tts-select option[disabled]').prop('disabled', false).css({
                'color': '',
                'background-color': '',
                'text-decoration': '',
                'font-style': ''
            }).removeAttr('aria-hidden');
            
            // Enable all optgroups
            $('optgroup[disabled]').prop('disabled', false).css('color', '');
            
            // Remove any pro-feature-disabled classes
            $('.pro-feature-disabled').removeClass('pro-feature-disabled');
            
            // Make multilingual v2 option fully available
            $('option[value="eleven_multilingual_v2"]').prop({
                'disabled': false
            }).css({
                'pointer-events': '',
                'user-select': '',
                'color': '',
                'background-color': ''
            });
        }
    });
</script>

<script>
    var isPro = <?php echo $is_pro_active ? 'true' : 'false'; ?>;
    window.mementorTTS = window.mementorTTS || {};
    window.mementorTTS.pro_status = window.mementorTTS.pro_status || {};
    window.mementorTTS.pro_status.is_pro = <?php echo $is_pro_active ? 'true' : 'false'; ?>;
</script>

<style>
.mementor-tts-pro-notice {
    margin-top: 10px;
    padding: 15px;
    background-color: #fcf8e3;
    border-left: 4px solid #f0ad4e;
    border-radius: 3px;
    margin-bottom: 15px;
}

.mementor-tts-pro-notice-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mementor-tts-pro-notice .dashicons {
    color: #f0ad4e;
    font-size: 40px;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.mementor-tts-pro-notice p {
    margin: 0 0 15px 0;
    color: #8a6d3b;
    font-size: 14px;
}

.mementor-tts-pro-notice .mementor-tts-upgrade-button {
    display: inline-block;
    background-color: #f0ad4e;
    color: #fff !important;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 3px;
    text-decoration: none;
    border: none;
    text-transform: uppercase;
}

.mementor-tts-pro-notice .mementor-tts-upgrade-button:hover {
    background-color: #ec971f;
    color: #fff !important;
}

.mementor-tts-pro-notice .mementor-tts-upgrade-button .dashicons {
    color: #fff;
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0 0 0 5px;
    vertical-align: middle;
}

.mementor-tts-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border-radius: 6px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
}

.mementor-tts-info-box .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.mementor-tts-pro-preview-section {
    overflow: hidden;
}

.mementor-tts-pro-preview-section .mementor-tts-card-header,
.mementor-tts-pro-preview-section .mementor-tts-card-content {
    filter: blur(0);
}

.mementor-tts-custom-voice-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
}

.mementor-tts-info-notice {
    background: #e7f3ff;
    border-left: 4px solid #2196F3;
    padding: 10px 15px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mementor-tts-info-notice .dashicons {
    color: #2196F3;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.custom-voice-selected {
    border: 2px solid #4caf50 !important;
    position: relative;
}

.custom-voice-selected::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #4caf50, #81c784);
    opacity: 0.1;
    pointer-events: none;
}

.mementor-tts-voice-avatar {
    max-width: 60px;
    height: auto;
}
</style>
<?php
// The CSS and JavaScript will be properly enqueued in admin/class-mementor-tts-admin.php
?>