<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

if ( ! current_user_can( 'manage_options' ) ) {
    wp_die( esc_html__( 'You do not have permission to access this page.', 'stepraengine-lite' ) );
}



$stepra_active_tab = filter_input( INPUT_GET, 'tab', FILTER_SANITIZE_FULL_SPECIAL_CHARS );
$stepra_active_tab = $stepra_active_tab ? sanitize_key( $stepra_active_tab ) : 'overview';

$stepra_allowed_tabs = array( 'overview', 'settings', 'how-to', 'support', 'diagnostics', 'upgrade' );
if ( ! in_array( $stepra_active_tab, $stepra_allowed_tabs, true ) ) {
    $stepra_active_tab = 'overview';
}

$stepra_edition_name = __( 'Lite', 'stepraengine-lite' );
$stepra_badge_class  = 'is-lite';
$stepra_upgrade_url  = '';
if ( function_exists( 'stepra_lite_fs' ) ) {
    $stepra_upgrade_url = stepra_lite_fs()->get_upgrade_url();
}
$stepra_upgrade_url  = apply_filters( 'stepra_upgrade_url', $stepra_upgrade_url );
$stepra_support_url  = apply_filters( 'stepra_support_url', 'https://wordpress.org/support/plugin/stepraengine-lite/' );
$stepra_version      = defined( 'STEPRA_ENGINE_VERSION' ) ? STEPRA_ENGINE_VERSION : '1.1.0';

if ( ! function_exists( 'stepra_admin_tab_url' ) ) {
    function stepra_admin_tab_url( $tab ) {
        return add_query_arg(
            array(
                'page' => 'stepra-settings',
                'tab'  => sanitize_key( $tab ),
            ),
            admin_url( 'admin.php' )
        );
    }
}

if ( ! function_exists( 'stepra_get_diagnostics_report' ) ) {
    function stepra_get_diagnostics_report() {
        $active_plugins = function_exists( 'get_option' ) ? (array) get_option( 'active_plugins', array() ) : array();

        if ( is_multisite() && function_exists( 'get_site_option' ) ) {
            $network_plugins = (array) get_site_option( 'active_sitewide_plugins', array() );
            $active_plugins  = array_merge( $active_plugins, array_keys( $network_plugins ) );
        }

        return array(
            'edition'              => 'Lite',
            'version'              => defined( 'STEPRA_ENGINE_VERSION' ) ? STEPRA_ENGINE_VERSION : 'unknown',
            'enabled'              => (string) get_option( 'stepra_enable_wrapper', '1' ),
            'strict_heading'       => (string) get_option( 'stepra_strict_heading', '0' ),
            'progress_style'       => (string) get_option( 'stepra_progress_style', 'bar' ),
            'validation_language'  => (string) get_option( 'stepra_validation_lang', 'en' ),
            'active_plugin_count'  => count( $active_plugins ),
            'builders_detected'    => array(
                'contact_form_7' => defined( 'WPCF7_VERSION' ) || class_exists( 'WPCF7_ContactForm' ),
                'wpforms'        => defined( 'WPFORMS_VERSION' ) || function_exists( 'wpforms' ),
                'forminator'     => defined( 'FORMINATOR_VERSION' ) || class_exists( 'Forminator' ),
                'elementor'      => defined( 'ELEMENTOR_VERSION' ) || did_action( 'elementor/loaded' ),
            ),
        );
    }
}



if ( ! function_exists( 'stepra_render_diagnostics_card' ) ) {
    function stepra_render_diagnostics_card() {
        $report      = stepra_get_diagnostics_report();
        $report_json = wp_json_encode( $report, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES );

        $frontend_snippet = <<<'STEPRA_DIAGNOSTIC_JS'
(function () {
  function qsa(root, selector) {
    return Array.prototype.slice.call((root || document).querySelectorAll(selector));
  }

  function count(selector) {
    return qsa(document, selector).length;
  }

  function isVisible(el) {
    if (!el) return false;
    var style = window.getComputedStyle(el);
    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') return false;
    var box = el.getBoundingClientRect();
    return box.width > 0 && box.height > 0;
  }

  function isSupportedForm(form) {
    return !!(form && form.matches('form.wpcf7-form, form.wpforms-form, form.forminator-ui, form.forminator-custom-form, form.elementor-form'));
  }

  function isIgnoredControl(el) {
    if (!el) return true;
    if (el.type === 'hidden') return true;
    if (el.disabled) return true;
    if (el.closest('.stepra-nav, .stepra-navigation, .stepra-buttons, .stepra-progress, .stepra-progress-bar, .stepra-numbered-progress')) return true;
    if (el.closest('.wpcf7-response-output, .forminator-response-message, .wpforms-confirmation-container-full, .elementor-message')) return true;
    if (el.matches('button.stepra-next, button.stepra-prev, .stepra-next, .stepra-prev')) return true;
    return false;
  }

  function formStats(selector) {
    var forms = qsa(document, selector);
    return {
      forms: forms.length,
      initialized: forms.filter(function (form) { return form.getAttribute('data-stepra-initialized') === '1'; }).length,
      visualReady: forms.filter(function (form) { return form.classList.contains('stepra-visual-ready'); }).length,
      aborted: forms.filter(function (form) { return form.classList.contains('stepra-aborted'); }).length,
      failed: forms.filter(function (form) { return form.classList.contains('stepra-failed'); }).length
    };
  }

  var supportedForms = qsa(document, 'form.wpcf7-form, form.wpforms-form, form.forminator-ui, form.forminator-custom-form, form.elementor-form');
  var visibleUnassignedControls = 0;

  supportedForms.forEach(function (form) {
    if (form.getAttribute('data-stepra-initialized') !== '1') return;

    qsa(form, 'input:not([type="hidden"]), select, textarea, button').forEach(function (el) {
      if (!isVisible(el) || isIgnoredControl(el)) return;
      if (el.closest('.stepra-step-el[data-step]')) return;

      /* Native submit controls may be intentionally held outside the step rows. */
      if (el.matches('button[type="submit"], input[type="submit"]')) return;

      visibleUnassignedControls++;
    });
  });

  console.log('[STEPRA FRONTEND DIAGNOSTICS]', {
    cf7: formStats('form.wpcf7-form'),
    wpforms: formStats('form.wpforms-form'),
    forminator: formStats('form.forminator-ui, form.forminator-custom-form'),
    elementor: formStats('form.elementor-form'),
    progressBars: count('.stepra-progress'),
    navBlocks: count('.stepra-nav, .stepra-navigation, .stepra-buttons'),
    stepRows: count('.stepra-step-el[data-step]'),
    visibleUnassignedControls: visibleUnassignedControls
  });
})();
STEPRA_DIAGNOSTIC_JS;
        ?>
        <section class="stepra-card stepra-wide-card stepra-diagnostics-card">
            <span class="stepra-kicker"><?php esc_html_e( 'Diagnostics', 'stepraengine-lite' ); ?></span>
            <h2><?php esc_html_e( 'Local Stepra report', 'stepraengine-lite' ); ?></h2>
            <p><?php esc_html_e( 'Use this local report when checking cache, builder compatibility, or support issues. It does not collect form field values.', 'stepraengine-lite' ); ?></p>

            <div class="stepra-diagnostics-grid">
                <div>
                    <h3><?php esc_html_e( 'Admin report', 'stepraengine-lite' ); ?></h3>
                    <textarea class="stepra-diagnostics-output" readonly rows="14"><?php echo esc_textarea( $report_json ); ?></textarea>
                </div>
                <div>
                    <h3><?php esc_html_e( 'Frontend console check', 'stepraengine-lite' ); ?></h3>
                    <p class="description"><?php esc_html_e( 'Copy this into the browser console on the page where a form appears. It reports structure and counts only.', 'stepraengine-lite' ); ?></p>
                    <textarea class="stepra-diagnostics-output" readonly rows="14"><?php echo esc_textarea( $frontend_snippet ); ?></textarea>
                </div>
            </div>

            <ul class="stepra-check-list stepra-diagnostics-notes">
                <li><?php esc_html_e( 'No user-entered form values are included.', 'stepraengine-lite' ); ?></li>
                <li><?php esc_html_e( 'Run the frontend check in a private window after purging cache for guest-load issues.', 'stepraengine-lite' ); ?></li>
                <li><?php esc_html_e( 'If a form does not split, compare initialized, visualReady, progressBars, navBlocks, and stepRows.', 'stepraengine-lite' ); ?></li>
            </ul>
        </section>
        <?php
    }
}


if ( ! function_exists( 'stepra_lite_render_admin_sidebar' ) ) {
    function stepra_lite_render_admin_sidebar() {
        $stepra_sidebar_report = function_exists( 'stepra_get_diagnostics_report' ) ? stepra_get_diagnostics_report() : array();
        $stepra_sidebar_builders = array(
                array( 'label' => __( 'Contact Form 7', 'stepraengine-lite' ), 'option' => 'stepra_target_cf7' ),
                array( 'label' => __( 'WPForms', 'stepraengine-lite' ), 'option' => 'stepra_target_wpforms' ),
                array( 'label' => __( 'Forminator', 'stepraengine-lite' ), 'option' => 'stepra_target_forminator' ),
                array( 'label' => __( 'Elementor Forms', 'stepraengine-lite' ), 'option' => 'stepra_target_elementor' ),
        );

        $stepra_enabled_builders = 0;
        foreach ( $stepra_sidebar_builders as $stepra_sidebar_builder ) {
            if ( '1' === (string) get_option( $stepra_sidebar_builder['option'], '1' ) ) {
                $stepra_enabled_builders++;
            }
        }

        $stepra_total_builders = count( $stepra_sidebar_builders );
        $stepra_diagnostics_url = function_exists( 'stepra_admin_tab_url' ) ? stepra_admin_tab_url( 'diagnostics' ) : admin_url( 'admin.php?page=stepra-settings&tab=diagnostics' );
        $stepra_support_url = apply_filters( 'stepra_support_url', 'https://wordpress.org/support/plugin/stepraengine-lite/' );
        $stepra_version = defined( 'STEPRA_ENGINE_VERSION' ) ? STEPRA_ENGINE_VERSION : '1.1.0';
        ?>
        <aside class="stepra-admin-sidebar" aria-label="<?php esc_attr_e( 'Stepra information', 'stepraengine-lite' ); ?>">
            <section class="stepra-card stepra-sidebar-card">
                <h2><?php esc_html_e( 'Plugin Status', 'stepraengine-lite' ); ?></h2>
                <dl class="stepra-sidebar-list">
                    <div><dt><?php esc_html_e( 'Edition', 'stepraengine-lite' ); ?></dt><dd><?php echo esc_html( isset( $stepra_sidebar_report['edition'] ) ? $stepra_sidebar_report['edition'] : 'Lite' ); ?></dd></div>
                    <div><dt><?php esc_html_e( 'Version', 'stepraengine-lite' ); ?></dt><dd><?php echo esc_html( $stepra_version ); ?></dd></div>
                    <div><dt><?php esc_html_e( 'Stepra Enabled', 'stepraengine-lite' ); ?></dt><dd><?php echo '1' === (string) get_option( 'stepra_enable_wrapper', '1' ) ? esc_html__( 'Yes', 'stepraengine-lite' ) : esc_html__( 'No', 'stepraengine-lite' ); ?></dd></div>
                    <div><dt><?php esc_html_e( 'Active Builders', 'stepraengine-lite' ); ?></dt><dd><?php echo esc_html( $stepra_enabled_builders . ' / ' . $stepra_total_builders ); ?></dd></div>
                </dl>
            </section>

            <section class="stepra-card stepra-sidebar-card">
                <h2><?php esc_html_e( 'Diagnostics Quick Check', 'stepraengine-lite' ); ?></h2>
                <dl class="stepra-sidebar-list">
                    <div><dt><?php esc_html_e( 'Active Plugins', 'stepraengine-lite' ); ?></dt><dd><?php echo esc_html( isset( $stepra_sidebar_report['active_plugin_count'] ) ? absint( $stepra_sidebar_report['active_plugin_count'] ) : 0 ); ?></dd></div>
                    <div><dt><?php esc_html_e( 'Visitor Input', 'stepraengine-lite' ); ?></dt><dd><?php esc_html_e( 'Never collected', 'stepraengine-lite' ); ?></dd></div>
                    <div><dt><?php esc_html_e( 'Privacy', 'stepraengine-lite' ); ?></dt><dd><?php esc_html_e( 'Structure only', 'stepraengine-lite' ); ?></dd></div>
                </dl>
            </section>

            <section class="stepra-card stepra-sidebar-card">
                <h2><?php esc_html_e( 'Supported Builders', 'stepraengine-lite' ); ?></h2>
                <ul class="stepra-sidebar-builders">
                    <?php foreach ( $stepra_sidebar_builders as $stepra_sidebar_builder ) : ?>
                        <?php $stepra_builder_enabled = '1' === (string) get_option( $stepra_sidebar_builder['option'], '1' ); ?>
                        <li>
                            <span><?php echo esc_html( $stepra_sidebar_builder['label'] ); ?></span>
                            <em class="<?php echo esc_attr( $stepra_builder_enabled ? 'is-enabled' : 'is-disabled' ); ?>"><?php echo $stepra_builder_enabled ? esc_html__( 'On', 'stepraengine-lite' ) : esc_html__( 'Off', 'stepraengine-lite' ); ?></em>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </section>

            <section class="stepra-card stepra-sidebar-card">
                <h2><?php esc_html_e( 'Help & Support', 'stepraengine-lite' ); ?></h2>
                <div class="stepra-sidebar-actions">
                    <a href="<?php echo esc_url( $stepra_diagnostics_url ); ?>"><?php esc_html_e( 'Open Diagnostics', 'stepraengine-lite' ); ?></a>
                    <a href="<?php echo esc_url( $stepra_support_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Support Forum', 'stepraengine-lite' ); ?></a>
                </div>
            </section>
        </aside>
        <?php
    }
}

?>
<div class="wrap stepra-admin-wrap">
    <header class="stepra-hero stepra-hero-refined">
        <div class="stepra-hero-copy">
            <span class="stepra-kicker"><?php esc_html_e( 'StepraEngine', 'stepraengine-lite' ); ?></span>
            <h1><?php esc_html_e( 'Turn long forms into focused step-by-step experiences.', 'stepraengine-lite' ); ?></h1>
            <p><?php esc_html_e( 'Stepra keeps your original form plugin in control, then improves the frontend with steps, progress, validation, and cleaner navigation.', 'stepraengine-lite' ); ?></p>
        </div>
        <div class="stepra-hero-meta" aria-label="<?php esc_attr_e( 'Current edition', 'stepraengine-lite' ); ?>">
            <span class="stepra-edition-badge <?php echo esc_attr( $stepra_badge_class ); ?>"><?php echo esc_html( $stepra_edition_name ); ?> v<?php echo esc_html( $stepra_version ); ?></span>
        </div>
    </header>

    <nav class="stepra-tabs" aria-label="<?php esc_attr_e( 'Stepra admin tabs', 'stepraengine-lite' ); ?>">
        <a href="<?php echo esc_url( stepra_admin_tab_url( 'overview' ) ); ?>" class="<?php echo esc_attr( 'overview' === $stepra_active_tab ? 'active' : '' ); ?>"><?php esc_html_e( 'Overview', 'stepraengine-lite' ); ?></a>
        <a href="<?php echo esc_url( stepra_admin_tab_url( 'settings' ) ); ?>" class="<?php echo esc_attr( 'settings' === $stepra_active_tab ? 'active' : '' ); ?>"><?php esc_html_e( 'Settings', 'stepraengine-lite' ); ?></a>
        <a href="<?php echo esc_url( stepra_admin_tab_url( 'how-to' ) ); ?>" class="<?php echo esc_attr( 'how-to' === $stepra_active_tab ? 'active' : '' ); ?>"><?php esc_html_e( 'How to Use', 'stepraengine-lite' ); ?></a>
        <a href="<?php echo esc_url( stepra_admin_tab_url( 'support' ) ); ?>" class="<?php echo esc_attr( 'support' === $stepra_active_tab ? 'active' : '' ); ?>"><?php esc_html_e( 'Support', 'stepraengine-lite' ); ?></a>
        <a href="<?php echo esc_url( stepra_admin_tab_url( 'diagnostics' ) ); ?>" class="<?php echo esc_attr( 'diagnostics' === $stepra_active_tab ? 'active' : '' ); ?>"><?php esc_html_e( 'Diagnostics', 'stepraengine-lite' ); ?></a>
        <a href="<?php echo esc_url( stepra_admin_tab_url( 'upgrade' ) ); ?>" class="<?php echo esc_attr( 'upgrade' === $stepra_active_tab ? 'active' : '' ); ?>"><?php esc_html_e( 'Upgrade', 'stepraengine-lite' ); ?></a>
    </nav>

    <main class="stepra-admin-panel">
        <div class="stepra-admin-layout">
            <div class="stepra-admin-main">
        <?php if ( 'overview' === $stepra_active_tab ) : ?>
            <section class="stepra-card stepra-wide-card stepra-overview-card">
                <div class="stepra-section-title">
                    <span class="stepra-icon">&#9889;</span>
                    <div>
                        <h2><?php esc_html_e( 'One long form becomes a focused form flow', 'stepraengine-lite' ); ?></h2>
                        <p><?php esc_html_e( 'The preview shows the full concept in one container: a long standard form becomes a focused Stepra flow, the progress bar advances through three steps, completed sections appear, and each step shows fewer fields.', 'stepraengine-lite' ); ?></p>
                    </div>
                </div>

                <div class="stepra-flow-demo" aria-hidden="true">
                    <div class="stepra-flow-labels">
                        <span><?php esc_html_e( 'Long standard form', 'stepraengine-lite' ); ?></span>
                        <span><?php esc_html_e( 'Stepra Engine form', 'stepraengine-lite' ); ?></span>
                    </div>

                    <div class="stepra-flow-frame">
                        <div class="stepra-flow-long">
                            <div class="stepra-browser-bar"><i></i><i></i><i></i><strong><?php esc_html_e( 'Original form', 'stepraengine-lite' ); ?></strong></div>
                            <div class="stepra-long-list">
                                <?php
for ( $stepra_i = 1; $stepra_i <= 18; $stepra_i++ ) :
    $stepra_field_size_class = '';

    if ( 0 === $stepra_i % 5 ) {
        $stepra_field_size_class = 'short';
    } elseif ( 0 === $stepra_i % 3 ) {
        $stepra_field_size_class = 'medium';
    }
    ?>
    <div class="stepra-long-field <?php echo esc_attr( $stepra_field_size_class ); ?>"><span></span><em></em></div>
<?php endfor; ?>
                            </div>
                        </div>

                        <div class="stepra-flow-stepra">
                            <div class="stepra-browser-bar"><i></i><i></i><i></i><strong><?php esc_html_e( 'Stepra form', 'stepraengine-lite' ); ?></strong></div>
                            <div class="stepra-demo-progress-wrap">
                                <div class="stepra-demo-progress"><span></span></div>
                                <div class="stepra-demo-step-text"><span class="s1"><?php esc_html_e( 'Step 1 of 3', 'stepraengine-lite' ); ?></span><span class="s2"><?php esc_html_e( 'Step 2 of 3', 'stepraengine-lite' ); ?></span><span class="s3"><?php esc_html_e( 'Step 3 of 3', 'stepraengine-lite' ); ?></span></div>
                            </div>

                            <div class="stepra-lite-preview-note">
    <strong><?php esc_html_e( 'Clean 3-step form flow', 'stepraengine-lite' ); ?></strong>
    <p><?php esc_html_e( 'StepraEngine Lite shows one focused section at a time with progress, navigation, and validation.', 'stepraengine-lite' ); ?></p>
</div>

                            <div class="stepra-active-fields">
    <div class="active-field a"><span></span><em></em></div>
    <div class="active-field b"><span></span><em></em></div>
    <div class="active-field c"><span></span><em></em></div>
</div>

<div class="stepra-demo-buttons">
    <button type="button" class="stepra-demo-prev"><?php esc_html_e( 'Previous', 'stepraengine-lite' ); ?></button>
    <button type="button" class="stepra-demo-next"><?php esc_html_e( 'Next step', 'stepraengine-lite' ); ?></button>
</div>
                        </div>
                    </div>
                </div>
            </section>

            <div class="stepra-grid overview-grid">
                <section class="stepra-card">
                    <h2><?php esc_html_e( 'Supported builders', 'stepraengine-lite' ); ?></h2>
                    <ul class="stepra-pill-list">
                        <li><?php esc_html_e( 'Contact Form 7', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'Elementor Forms', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'Forminator', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'WPForms', 'stepraengine-lite' ); ?></li>
                    </ul>
                </section>
                <section class="stepra-card">
                    <h2><?php esc_html_e( 'Current edition', 'stepraengine-lite' ); ?></h2>
                    <div class="stepra-status-grid compact-status">
                                                <div><strong><?php esc_html_e( 'Step limit', 'stepraengine-lite' ); ?></strong><span><?php esc_html_e( '3 steps', 'stepraengine-lite' ); ?></span></div>
                        <div><strong><?php esc_html_e( 'Summaries', 'stepraengine-lite' ); ?></strong><span><?php esc_html_e( 'Available in Pro', 'stepraengine-lite' ); ?></span></div>
                        <div><strong><?php esc_html_e( 'WooCommerce', 'stepraengine-lite' ); ?></strong><span><?php esc_html_e( 'Available in Pro', 'stepraengine-lite' ); ?></span></div>
                    </div>
                </section>
            </div>

        <?php elseif ( 'settings' === $stepra_active_tab ) : ?>
            <form method="post" action="options.php">
                <?php settings_fields( 'stepra_settings_group' ); ?>

                <div class="stepra-grid settings-grid">
                    <section class="stepra-card">
                        <div class="stepra-section-title small">
                            <span class="stepra-icon">&#9881;</span>
                            <div>
                                <h2><?php esc_html_e( 'Engine', 'stepraengine-lite' ); ?></h2>
                                <p><?php esc_html_e( 'Enable the wrapper and choose how headings create steps.', 'stepraengine-lite' ); ?></p>
                            </div>
                        </div>
                        <table class="form-table stepra-settings-table" role="presentation">
                            <tr>
                                <th scope="row"><?php esc_html_e( 'Enable Stepra', 'stepraengine-lite' ); ?></th>
                                <td>
                                    <input type="hidden" name="stepra_enable_wrapper" value="0" />
                                    <label class="stepra-switch">
                                        <input type="checkbox" name="stepra_enable_wrapper" value="1" <?php checked( 1, get_option( 'stepra_enable_wrapper', '1' ) ); ?> />
                                        <span></span>
                                    </label>
                                    <p class="description"><?php esc_html_e( 'Turn the frontend multi-step engine on or off globally.', 'stepraengine-lite' ); ?></p>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row"><?php esc_html_e( 'Strict H3 mode', 'stepraengine-lite' ); ?></th>
                                <td>
                                    <input type="hidden" name="stepra_strict_heading" value="0" />
                                    <label class="stepra-switch">
                                        <input type="checkbox" name="stepra_strict_heading" value="1" <?php checked( '1', get_option( 'stepra_strict_heading', '0' ) ); ?> />
                                        <span></span>
                                    </label>
                                    <p class="description"><?php echo wp_kses_post( __( '<strong>Off:</strong> H3 and H4 create steps. <strong>On:</strong> only H3 creates steps and H4 stays inside the current step.', 'stepraengine-lite' ) ); ?></p>
                                </td>
                            </tr>
                        </table>
                    </section>

                    <section class="stepra-card">
                        <div class="stepra-section-title small">
                            <span class="stepra-icon">&#127912;</span>
                            <div>
                                <h2><?php esc_html_e( 'Style', 'stepraengine-lite' ); ?></h2>
                                <p><?php esc_html_e( 'Match the progress bar and buttons to your brand.', 'stepraengine-lite' ); ?></p>
                            </div>
                        </div>
                        <div class="stepra-progress-style-choices" role="radiogroup" aria-label="<?php esc_attr_e( 'Progress style', 'stepraengine-lite' ); ?>">
                            <?php $stepra_progress_style = get_option( 'stepra_progress_style', 'bar' ); ?>
                            <label class="stepra-progress-choice <?php echo 'bar' === $stepra_progress_style ? 'is-selected' : ''; ?>">
                                <input type="radio" name="stepra_progress_style" value="bar" <?php checked( 'bar', $stepra_progress_style ); ?> />
                                <span class="stepra-progress-choice-head">
                                    <strong><?php esc_html_e( 'Bar', 'stepraengine-lite' ); ?></strong>
                                    <em><?php esc_html_e( 'Classic progress bar', 'stepraengine-lite' ); ?></em>
                                </span>
                                <span class="stepra-progress-choice-preview stepra-choice-bar" aria-hidden="true"><i></i></span>
                            </label>
                            <label class="stepra-progress-choice <?php echo 'numbered' === $stepra_progress_style ? 'is-selected' : ''; ?>">
                                <input type="radio" name="stepra_progress_style" value="numbered" <?php checked( 'numbered', $stepra_progress_style ); ?> />
                                <span class="stepra-progress-choice-head">
                                    <strong><?php esc_html_e( 'Numbered', 'stepraengine-lite' ); ?></strong>
                                    <em><?php esc_html_e( 'Clickable 1 2 3 steps', 'stepraengine-lite' ); ?></em>
                                </span>
                                <span class="stepra-progress-choice-preview stepra-choice-numbered" aria-hidden="true"><i>1</i><span></span><i>2</i><span></span><i>3</i></span>
                            </label>
                        </div>

                        <div class="stepra-color-grid">
                            <label><span><?php esc_html_e( 'Primary color', 'stepraengine-lite' ); ?></span><input type="color" name="stepra_primary_color" value="<?php echo esc_attr( get_option( 'stepra_primary_color', '#0061e0' ) ); ?>" /></label>
                            <label><span><?php esc_html_e( 'Button text', 'stepraengine-lite' ); ?></span><input type="color" name="stepra_btn_text_color" value="<?php echo esc_attr( get_option( 'stepra_btn_text_color', '#ffffff' ) ); ?>" /></label>
                            <label><span><?php esc_html_e( 'Progress text', 'stepraengine-lite' ); ?></span><input type="color" name="stepra_progress_text_color" value="<?php echo esc_attr( get_option( 'stepra_progress_text_color', '#ffffff' ) ); ?>" /></label>
                        </div>
                    </section>

                    <section class="stepra-card">
                        <div class="stepra-section-title small">
                            <span class="stepra-icon">&#9997;</span>
                            <div>
                                <h2><?php esc_html_e( 'Labels', 'stepraengine-lite' ); ?></h2>
                                <p><?php esc_html_e( 'Set the text visitors see on navigation buttons.', 'stepraengine-lite' ); ?></p>
                            </div>
                        </div>
                        <div class="stepra-field-row"><label for="stepra_next_text"><?php esc_html_e( 'Next button', 'stepraengine-lite' ); ?></label><input id="stepra_next_text" type="text" name="stepra_next_text" value="<?php echo esc_attr( get_option( 'stepra_next_text', __( 'Next step', 'stepraengine-lite' ) ) ); ?>" /></div>
                        <div class="stepra-field-row"><label for="stepra_prev_text"><?php esc_html_e( 'Previous button', 'stepraengine-lite' ); ?></label><input id="stepra_prev_text" type="text" name="stepra_prev_text" value="<?php echo esc_attr( get_option( 'stepra_prev_text', __( 'Previous', 'stepraengine-lite' ) ) ); ?>" /></div>
                    </section>

                    <section class="stepra-card">
                        <div class="stepra-section-title small">
                            <span class="stepra-icon">&#128274;</span>
                            <div>
                                <h2><?php esc_html_e( 'Validation', 'stepraengine-lite' ); ?></h2>
                                <p><?php esc_html_e( 'Choose the language used for Stepra validation messages.', 'stepraengine-lite' ); ?></p>
                            </div>
                        </div>
                        <div class="stepra-field-row">
                            <label for="stepra_validation_lang"><?php esc_html_e( 'Validation language', 'stepraengine-lite' ); ?></label>
                            <select id="stepra_validation_lang" name="stepra_validation_lang">
                                <option value="en" <?php selected( get_option( 'stepra_validation_lang', 'en' ), 'en' ); ?>><?php esc_html_e( 'English', 'stepraengine-lite' ); ?></option>
                                <option value="fr" <?php selected( get_option( 'stepra_validation_lang', 'en' ), 'fr' ); ?>><?php esc_html_e( 'French', 'stepraengine-lite' ); ?></option>
                                <option value="es" <?php selected( get_option( 'stepra_validation_lang', 'en' ), 'es' ); ?>><?php esc_html_e( 'Spanish', 'stepraengine-lite' ); ?></option>
                            </select>
                        </div>
                        <p class="stepra-note"><?php esc_html_e( 'Checks required fields, email, URL, phone, date, and postal-code formats before moving to the next step.', 'stepraengine-lite' ); ?></p>
                    </section>
                </div>


                <section class="stepra-card stepra-settings-card stepra-targeting-card">
                    <div class="stepra-section-title small">
                        <span class="stepra-icon">&#127919;</span>
                        <div>
                            <h2><?php esc_html_e( 'Form Builder Targeting', 'stepraengine-lite' ); ?></h2>
                            <p><?php esc_html_e( 'Choose which supported builders Stepra is allowed to initialize. Disabled builders are not hidden, split, or modified.', 'stepraengine-lite' ); ?></p>
                        </div>
                    </div>
                    <div class="stepra-targeting-grid">
                            <label class="stepra-targeting-option">
                                <input type="hidden" name="stepra_target_cf7" value="0" />
                                <span class="stepra-switch">
                                    <input type="checkbox" name="stepra_target_cf7" value="1" <?php checked( '1', get_option( 'stepra_target_cf7', '1' ) ); ?> />
                                    <span></span>
                                </span>
                                <strong><?php esc_html_e( 'Contact Form 7', 'stepraengine-lite' ); ?></strong>
                            </label>
                            <label class="stepra-targeting-option">
                                <input type="hidden" name="stepra_target_wpforms" value="0" />
                                <span class="stepra-switch">
                                    <input type="checkbox" name="stepra_target_wpforms" value="1" <?php checked( '1', get_option( 'stepra_target_wpforms', '1' ) ); ?> />
                                    <span></span>
                                </span>
                                <strong><?php esc_html_e( 'WPForms', 'stepraengine-lite' ); ?></strong>
                            </label>
                            <label class="stepra-targeting-option">
                                <input type="hidden" name="stepra_target_forminator" value="0" />
                                <span class="stepra-switch">
                                    <input type="checkbox" name="stepra_target_forminator" value="1" <?php checked( '1', get_option( 'stepra_target_forminator', '1' ) ); ?> />
                                    <span></span>
                                </span>
                                <strong><?php esc_html_e( 'Forminator', 'stepraengine-lite' ); ?></strong>
                            </label>
                            <label class="stepra-targeting-option">
                                <input type="hidden" name="stepra_target_elementor" value="0" />
                                <span class="stepra-switch">
                                    <input type="checkbox" name="stepra_target_elementor" value="1" <?php checked( '1', get_option( 'stepra_target_elementor', '1' ) ); ?> />
                                    <span></span>
                                </span>
                                <strong><?php esc_html_e( 'Elementor Forms', 'stepraengine-lite' ); ?></strong>
                            </label>
                    </div>
                    <p class="description stepra-targeting-note"><?php esc_html_e( 'Default is all enabled. Use this only when you want Stepra to ignore a supported builder on the frontend.', 'stepraengine-lite' ); ?></p>
                </section>

                <div class="stepra-save-row"><?php submit_button( __( 'Save Settings', 'stepraengine-lite' ), 'primary', 'submit', false ); ?></div>
            </form>
            <script>
            (function() {
                var wrap = document.querySelector('.stepra-progress-style-choices');
                if (!wrap) { return; }
                wrap.addEventListener('change', function(event) {
                    if (!event.target || event.target.name !== 'stepra_progress_style') { return; }
                    wrap.querySelectorAll('.stepra-progress-choice').forEach(function(choice) {
                        choice.classList.remove('is-selected');
                    });
                    var selected = event.target.closest('.stepra-progress-choice');
                    if (selected) {
                        selected.classList.add('is-selected');
                    }
                });
            })();
            </script>


        <?php elseif ( 'how-to' === $stepra_active_tab ) : ?>
            <div class="stepra-grid how-grid">
                <section class="stepra-card stepra-wide-card">
                    <h2><?php esc_html_e( 'Quick start', 'stepraengine-lite' ); ?></h2>
                    <div class="stepra-workflow">
                        <div><strong>1</strong><span><?php esc_html_e( 'Build your form in Contact Form 7, Elementor Forms, Forminator, or WPForms.', 'stepraengine-lite' ); ?></span></div>
                        <div><strong>2</strong><span><?php esc_html_e( 'Publish it normally. Stepra auto-splits long forms based on visible field groups.', 'stepraengine-lite' ); ?></span></div>
                        <div><strong>3</strong><span><?php esc_html_e( 'For manual control, add H3 or H4 headings where each step should start.', 'stepraengine-lite' ); ?></span></div>
                    </div>
                </section>
                <section class="stepra-card">
                    <h2><?php esc_html_e( 'Heading split example', 'stepraengine-lite' ); ?></h2>
                    <div class="stepra-code-card"><code>&lt;h3&gt;Personal Information&lt;/h3&gt;</code><code>&lt;h4&gt;Address Details&lt;/h4&gt;</code><code>&lt;h3&gt;Project Details&lt;/h3&gt;</code></div>
                    <p class="stepra-note"><?php esc_html_e( 'Strict H3 mode lets H4 headings act as subtitles instead of new steps.', 'stepraengine-lite' ); ?></p>
                </section>
                <section class="stepra-card">
                    <h2><?php esc_html_e( 'Troubleshooting', 'stepraengine-lite' ); ?></h2>
                    <ul class="stepra-check-list">
                        <li><?php esc_html_e( 'Use one form per test page while debugging.', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'Disable native multi-step features in your form builder.', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'Clear cache after updating Stepra or changing settings.', 'stepraengine-lite' ); ?></li>
                    </ul>
                </section>
            </div>

        <?php elseif ( 'support' === $stepra_active_tab ) : ?>
            <div class="stepra-grid two-col">
                <section class="stepra-card stepra-wide-card">
                    <span class="stepra-kicker"><?php esc_html_e( 'Support', 'stepraengine-lite' ); ?></span>
                    <h2><?php esc_html_e( 'Need help with Stepra?', 'stepraengine-lite' ); ?></h2>
                    <p><?php esc_html_e( 'Use the official WordPress.org support forum for questions, compatibility reports, and help requests after the plugin is published.', 'stepraengine-lite' ); ?></p>
                    <a class="button button-primary" href="<?php echo esc_url( $stepra_support_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Open Support Forum', 'stepraengine-lite' ); ?></a>
                </section>
                <section class="stepra-card">
                    <h2><?php esc_html_e( 'Before opening a support request', 'stepraengine-lite' ); ?></h2>
                    <ul class="stepra-check-list">
                        <li><?php esc_html_e( 'Confirm which form builder is used.', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'Mention whether the form uses automatic split or H3/H4 heading split.', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'Clear cache and retest before reporting a frontend issue.', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'Include a screenshot of the step where the issue happens.', 'stepraengine-lite' ); ?></li>
                    </ul>
                </section>
            </div>


        <?php elseif ( 'diagnostics' === $stepra_active_tab ) : ?>
            <?php stepra_render_diagnostics_card(); ?>

        <?php elseif ( 'upgrade' === $stepra_active_tab ) : ?>
            <div class="stepra-grid two-col">
                <section class="stepra-card stepra-upgrade-card">
                    <span class="stepra-kicker"><?php esc_html_e( 'Upgrade Path', 'stepraengine-lite' ); ?></span>
                    <h2><?php esc_html_e( 'Upgrade to StepraEngine Pro', 'stepraengine-lite' ); ?></h2>
                    <p><?php esc_html_e( 'Unlock unlimited steps, WooCommerce classic checkout flows, review summaries, advanced customization, and priority support without rebuilding your existing forms.', 'stepraengine-lite' ); ?></p>
                    <ul class="stepra-check-list">
                        <li><?php esc_html_e( 'Unlimited steps for longer forms and funnels', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'WooCommerce classic checkout step flow', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'Review summary before final submission or purchase', 'stepraengine-lite' ); ?></li>
                        <li><?php esc_html_e( 'Advanced styling, labels, validation, and targeting controls', 'stepraengine-lite' ); ?></li>
                    </ul>
                    <?php if ( ! empty( $stepra_upgrade_url ) ) : ?>
                        <a class="button button-primary button-hero" href="<?php echo esc_url( $stepra_upgrade_url ); ?>"><?php esc_html_e( 'View Pro Plans', 'stepraengine-lite' ); ?></a>
                    <?php else : ?>
                        <p class="stepra-note"><?php esc_html_e( 'Pro plans are not connected yet. Please check the official StepraEngine website for availability.', 'stepraengine-lite' ); ?></p>
                    <?php endif; ?>
                </section>
                <section class="stepra-card">
                    <h2><?php esc_html_e( 'Lite vs Pro', 'stepraengine-lite' ); ?></h2>
                    <div class="stepra-feature-table-wrap">
                        <table class="stepra-feature-table">
                            <thead>
                                <tr>
                                    <th><?php esc_html_e( 'Feature', 'stepraengine-lite' ); ?></th>
                                    <th><?php esc_html_e( 'Lite', 'stepraengine-lite' ); ?></th>
                                    <th><?php esc_html_e( 'Pro', 'stepraengine-lite' ); ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td><?php esc_html_e( 'Supported form builders', 'stepraengine-lite' ); ?></td><td>&#10003;</td><td>&#10003;</td></tr>
                                <tr><td><?php esc_html_e( 'Basic customization', 'stepraengine-lite' ); ?></td><td>&#10003;</td><td>&#10003;</td></tr>
                                <tr><td><?php esc_html_e( 'Advanced customization', 'stepraengine-lite' ); ?></td><td>&mdash;</td><td>&#10003;</td></tr>
                                <tr><td><?php esc_html_e( 'Maximum steps', 'stepraengine-lite' ); ?></td><td><?php esc_html_e( '3', 'stepraengine-lite' ); ?></td><td><?php esc_html_e( 'Unlimited', 'stepraengine-lite' ); ?></td></tr>
                                <tr><td><?php esc_html_e( 'Review summary', 'stepraengine-lite' ); ?></td><td>&mdash;</td><td>&#10003;</td></tr>
                                <tr><td><?php esc_html_e( 'WooCommerce classic checkout', 'stepraengine-lite' ); ?></td><td>&mdash;</td><td>&#10003;</td></tr>
                                <tr><td><?php esc_html_e( 'Priority email support', 'stepraengine-lite' ); ?></td><td>&mdash;</td><td>&#10003;</td></tr>
                            </tbody>
                        </table>
                    </div>
                </section>
            </div>
        <?php endif; ?>
            </div>
            <?php stepra_lite_render_admin_sidebar(); ?>
        </div>
    </main>
</div>