<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
$chrome_extension_store_url = (string) NEXDIRECTORY_CHROME_EXTENSION_URL;
?>
                <section class="nexdirectory-settings-panel space-y-6" id="nexdirectory-tab-seo" data-tab="advanced" data-subtab="seo">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-slate-900"><?php esc_html_e('SEO', 'nexdirectory'); ?></h2>
                        <p class="text-sm text-slate-500 mt-1"><?php esc_html_e('Shape how the directory homepage appears in search results.', 'nexdirectory'); ?></p>
                    </div>

                    <div class="p-6 bg-white border border-slate-200 rounded-2xl shadow-sm nexdirectory-settings-field nexdirectory-full">
                        <h3 class="text-lg font-bold text-slate-900 mb-6 flex items-center gap-2">
                            <i class="fas fa-search text-indigo-500 bg-indigo-50 p-2 rounded-lg"></i> <?php esc_html_e('Homepage SEO', 'nexdirectory'); ?>
                        </h3>

                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                            <div class="space-y-6">
                                <div>
                                    <label for="nexdirectory_home_meta_title" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('Homepage Meta Title', 'nexdirectory'); ?></label>
                                    <input type="text" id="nexdirectory_home_meta_title" name="nexdirectory_home_meta_title" maxlength="60" value="<?php echo esc_attr($home_meta_title_value); ?>" placeholder="<?php esc_attr_e('Best between 50 and 60 characters', 'nexdirectory'); ?>" class="block w-full px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-900 transition-colors">
                                    <div class="flex justify-between items-center mt-1">
                                        <p class="text-[11px] text-slate-500" id="nexdirectory-home-meta-title-status"><?php esc_html_e('Set an SEO title for homepage search results.', 'nexdirectory'); ?></p>
                                        <p class="text-[11px] font-mono font-medium text-slate-400"><span id="nexdirectory-home-meta-title-count"><?php echo esc_html((string) $home_meta_title_count); ?></span> / 60</p>
                                    </div>
                                </div>

                                <div>
                                    <label for="nexdirectory_home_meta_description" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('Homepage Meta Description', 'nexdirectory'); ?></label>
                                    <textarea id="nexdirectory_home_meta_description" name="nexdirectory_home_meta_description" rows="3" maxlength="158" placeholder="<?php esc_attr_e('Best between 120 and 158 characters', 'nexdirectory'); ?>" class="block w-full px-4 py-3 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-900 transition-colors"><?php echo esc_textarea($home_meta_description_value); ?></textarea>
                                    <div class="flex justify-between items-center mt-1">
                                        <p class="text-[11px] text-slate-500" id="nexdirectory-home-meta-description-status"><?php esc_html_e('Write a concise summary for homepage search snippets.', 'nexdirectory'); ?></p>
                                        <p class="text-[11px] font-mono font-medium text-slate-400"><span id="nexdirectory-home-meta-description-count"><?php echo esc_html((string) $home_meta_description_count); ?></span> / 158</p>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-slate-50 p-5 rounded-xl border border-slate-200 h-fit">
                                <span class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-3"><i class="fab fa-google text-slate-400 mr-1"></i> <?php esc_html_e('Live Google Preview', 'nexdirectory'); ?></span>
                                <div class="bg-white p-4 rounded-lg border border-slate-200 shadow-sm" id="nexdirectory-home-seo-serp-preview">
                                    <div class="text-[#202124] text-[13px] mb-1 flex items-center gap-2">
                                        <span class="w-6 h-6 rounded-full bg-slate-200 flex-shrink-0"></span>
                                        <span class="truncate" id="nexdirectory-seo-serp-url"><?php echo esc_html($home_meta_preview_url); ?></span>
                                    </div>
                                    <div class="text-[#1a0dab] text-xl font-medium leading-tight mb-1 truncate hover:underline cursor-pointer" id="nexdirectory-home-serp-title"><?php echo esc_html($home_meta_preview_title); ?></div>
                                    <div class="text-[#4d5156] text-sm leading-snug line-clamp-2" id="nexdirectory-home-serp-description"><?php echo esc_html($home_meta_preview_description); ?></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </section>

                <section class="nexdirectory-settings-panel space-y-6" id="nexdirectory-tab-extension" data-tab="advanced" data-subtab="extension">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-slate-900"><?php esc_html_e('Chrome Extension', 'nexdirectory'); ?></h2>
                        <p class="text-sm text-slate-500 mt-1"><?php esc_html_e('Install the Chrome extension, connect it to this site, and choose how imported listings should be saved.', 'nexdirectory'); ?></p>
                    </div>

                    <aside class="nexdirectory-extension-download-card" aria-labelledby="nexdirectory-extension-download-title">
                        <div class="nexdirectory-extension-download-copy">
                            <span class="nexdirectory-extension-download-eyebrow">
                                <i class="fab fa-chrome" aria-hidden="true"></i>
                                <?php esc_html_e('Official Chrome Web Store download', 'nexdirectory'); ?>
                            </span>
                            <h3 id="nexdirectory-extension-download-title"><?php esc_html_e('Install the Nex Directory Chrome Extension', 'nexdirectory'); ?></h3>
                            <p>
                                <?php esc_html_e('Scan pages in Chrome and send structured listing drafts directly into Nex Directory. Install it first, then use the connector settings below.', 'nexdirectory'); ?>
                            </p>
                            <ol class="nexdirectory-extension-download-steps" aria-label="<?php esc_attr_e('Extension setup steps', 'nexdirectory'); ?>">
                                <li><span aria-hidden="true">1</span><?php esc_html_e('Install in Chrome', 'nexdirectory'); ?></li>
                                <li><span aria-hidden="true">2</span><?php esc_html_e('Enable the connector', 'nexdirectory'); ?></li>
                                <li><span aria-hidden="true">3</span><?php esc_html_e('Add your connection key', 'nexdirectory'); ?></li>
                            </ol>
                        </div>
                        <div class="nexdirectory-extension-download-actions">
                            <a
                                class="nexdirectory-extension-download-button"
                                href="<?php echo esc_url( $chrome_extension_store_url ); ?>"
                                target="_blank"
                                rel="noopener noreferrer external"
                                data-nexdirectory-extension-download="chrome-web-store"
                                aria-label="<?php esc_attr_e('Install the Nex Directory Chrome Extension from the Chrome Web Store (opens in a new tab)', 'nexdirectory'); ?>"
                            >
                                <i class="fab fa-chrome" aria-hidden="true"></i>
                                <span><?php esc_html_e('Install from Chrome Web Store', 'nexdirectory'); ?></span>
                                <i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i>
                            </a>
                            <span class="nexdirectory-extension-download-meta">
                                <span class="dashicons dashicons-shield" aria-hidden="true"></span>
                                <?php esc_html_e('Opens the official Chrome Web Store listing.', 'nexdirectory'); ?>
                            </span>
                        </div>
                    </aside>

                    <div class="p-6 bg-white border border-slate-200 rounded-2xl shadow-sm hover:border-indigo-300 transition-colors nexdirectory-settings-field nexdirectory-full">
                        <div class="mb-6 flex items-start justify-between gap-4 pb-4 border-b border-slate-100">
                            <div>
                                <h3 class="text-lg font-bold text-slate-900 flex items-center gap-2 mb-1">
                                    <i class="fab fa-chrome text-indigo-500 bg-indigo-50 p-2 rounded-lg"></i> <?php esc_html_e('Chrome Extension Connector', 'nexdirectory'); ?>
                                </h3>
                                <p class="text-xs text-slate-500 max-w-2xl">
                                    <?php /* translators: %s: Placeholder value. */ ?>
                                    <?php printf(esc_html__('Connect the %s Chrome extension so admins can turn web pages into listing drafts.', 'nexdirectory'), esc_html($settings_brand_name)); ?>
                                </p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer flex-shrink-0 mt-2">
                                <input type="hidden" name="nexdirectory_extension_enabled" value="0">
                                <input type="checkbox" name="nexdirectory_extension_enabled" value="1" class="sr-only peer" aria-label="<?php esc_attr_e('Enable the Chrome extension connector', 'nexdirectory'); ?>" <?php checked((string) get_option('nexdirectory_extension_enabled', '0'), '1'); ?>>
                                <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                            </label>
                        </div>

                        <div class="space-y-6">

                            <div>
                                    <label for="nexdirectory_extension_app_pass" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('Extension connection key', 'nexdirectory'); ?></label>
                                    <p class="text-xs text-slate-500 mb-2"><?php esc_html_e('Copy this into the Chrome extension so it can connect to this site. Keep it private. New keys are shown for one hour, then stored securely.', 'nexdirectory'); ?></p>
                                <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
                                    <input type="hidden" name="nexdirectory_extension_app_pass" value="">
                                    <input type="text" id="nexdirectory_extension_app_pass" value="<?php echo esc_attr($extension_app_pass); ?>" autocomplete="off" readonly placeholder="<?php esc_attr_e('Stored securely. Regenerate to reveal a new key.', 'nexdirectory'); ?>" class="block w-full min-w-0 sm:min-w-[220px] sm:max-w-md sm:flex-1 px-4 py-2.5 text-sm font-mono border border-slate-300 bg-slate-50 text-slate-500 rounded-lg">
                                    <button type="button" class="nexdirectory-copy-shortcode inline-flex min-h-[44px] items-center justify-center px-4 py-2.5 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 bg-white hover:bg-indigo-50 hover:text-indigo-600 transition-colors disabled:cursor-not-allowed disabled:opacity-50" data-shortcode="<?php echo esc_attr($extension_app_pass); ?>" aria-label="<?php esc_attr_e('Copy the extension connection key', 'nexdirectory'); ?>" title="<?php esc_attr_e('Copy connection key', 'nexdirectory'); ?>" <?php disabled($extension_app_pass, ''); ?>>
                                        <i class="far fa-copy" aria-hidden="true"></i>
                                        <span class="sr-only"><?php esc_html_e('Copy connection key', 'nexdirectory'); ?></span>
                                        <span class="sr-only" data-nexdirectory-copy-status aria-live="polite"></span>
                                    </button>
                                    <button type="button" id="nexdirectory-regenerate-app-pass-trigger" aria-controls="nexdirectory-regenerate-app-pass-confirmation" aria-expanded="false" class="inline-flex min-h-[44px] items-center justify-center px-4 py-2.5 border border-red-200 rounded-lg text-sm font-medium text-red-700 bg-red-50 hover:bg-red-100 transition-colors">
                                        <i class="fas fa-sync-alt mr-2"></i> <?php esc_html_e('Regenerate', 'nexdirectory'); ?>
                                    </button>
                                </div>
                                <div id="nexdirectory-regenerate-app-pass-confirmation" class="mt-3 rounded-xl border border-amber-200 bg-amber-50 p-4" role="group" aria-labelledby="nexdirectory-regenerate-app-pass-title" hidden>
                                    <p id="nexdirectory-regenerate-app-pass-title" class="m-0 text-sm font-bold text-amber-950"><?php esc_html_e('Create a new connection key?', 'nexdirectory'); ?></p>
                                    <p class="mb-3 mt-1 text-xs leading-5 text-amber-900"><?php esc_html_e('Browsers that use the old key will stop working until the new key is added to the extension.', 'nexdirectory'); ?></p>
                                    <div class="flex flex-col gap-2 sm:flex-row">
                                        <button type="submit" form="nexdirectory-regenerate-app-pass-form" id="nexdirectory-regenerate-app-pass-confirm" class="inline-flex min-h-[44px] items-center justify-center rounded-lg border border-red-700 bg-red-700 px-4 py-2.5 text-sm font-bold text-white transition-colors hover:bg-red-800 disabled:cursor-wait disabled:opacity-70">
                                            <?php esc_html_e('Yes, create a new key', 'nexdirectory'); ?>
                                        </button>
                                        <button type="button" id="nexdirectory-regenerate-app-pass-cancel" class="inline-flex min-h-[44px] items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50">
                                            <?php esc_html_e('Cancel', 'nexdirectory'); ?>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-slate-100">
                                <div>
                                    <label for="nexdirectory_extension_import_status" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('How imported listings are saved', 'nexdirectory'); ?></label>
                                    <div class="relative">
                                        <select id="nexdirectory_extension_import_status" name="nexdirectory_extension_import_status" class="block w-full pl-4 pr-10 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 appearance-none cursor-pointer">
                                            <option value="draft" <?php selected($extension_import_status, 'draft'); ?>><?php esc_html_e('Draft (recommended)', 'nexdirectory'); ?></option>
                                            <option value="publish" <?php selected($extension_import_status, 'publish'); ?>><?php esc_html_e('Publish immediately', 'nexdirectory'); ?></option>
                                        </select>
                                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500"><i class="fas fa-chevron-down text-xs"></i></div>
                                    </div>
                                </div>

                                <div>
                                    <label for="nexdirectory_extension_import_media_policy" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('Media to import', 'nexdirectory'); ?></label>
                                    <div class="relative">
                                        <select id="nexdirectory_extension_import_media_policy" name="nexdirectory_extension_import_media_policy" class="block w-full pl-4 pr-10 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 appearance-none cursor-pointer">
                                            <option value="none" <?php selected($extension_import_media_policy, 'none'); ?>><?php esc_html_e('No media (default)', 'nexdirectory'); ?></option>
                                            <option value="images" <?php selected($extension_import_media_policy, 'images'); ?>><?php esc_html_e('Images only', 'nexdirectory'); ?></option>
                                            <option value="video" <?php selected($extension_import_media_policy, 'video'); ?>><?php esc_html_e('Video only', 'nexdirectory'); ?></option>
                                            <option value="images_video" <?php selected($extension_import_media_policy, 'images_video'); ?>><?php esc_html_e('Images and video', 'nexdirectory'); ?></option>
                                        </select>
                                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500"><i class="fas fa-chevron-down text-xs"></i></div>
                                    </div>
                                </div>

                                <div>
                                    <label for="nexdirectory_extension_import_content_mode" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('Imported text', 'nexdirectory'); ?></label>
                                    <?php if ($extension_ai_importer_enabled) : ?>
                                        <div class="relative">
                                            <select id="nexdirectory_extension_import_content_mode" name="nexdirectory_extension_import_content_mode" class="block w-full pl-4 pr-10 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 appearance-none cursor-pointer">
                                                <option value="rewrite" <?php selected($extension_import_content_mode, 'rewrite'); ?>><?php esc_html_e('AI rewrite and enrichment (Pro)', 'nexdirectory'); ?></option>
                                                <option value="verbatim" <?php selected($extension_import_content_mode, 'verbatim'); ?>><?php esc_html_e('Use source text verbatim', 'nexdirectory'); ?></option>
                                            </select>
                                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500"><i class="fas fa-chevron-down text-xs"></i></div>
                                        </div>
                                    <?php else : ?>
                                        <input type="hidden" id="nexdirectory_extension_import_content_mode" name="nexdirectory_extension_import_content_mode" value="verbatim">
                                        <div class="flex min-h-[42px] items-center justify-between gap-3 rounded-lg border border-slate-300 bg-slate-50 px-4 py-2.5 text-sm text-slate-700">
                                            <span><?php esc_html_e('Use source text verbatim', 'nexdirectory'); ?></span>
                                            <span class="rounded-full bg-white px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-slate-500"><?php esc_html_e('Free', 'nexdirectory'); ?></span>
                                        </div>
                                        <p class="mt-2 text-xs leading-5 text-slate-500">
                                            <?php esc_html_e('AI rewriting is available with the Pro add-on.', 'nexdirectory'); ?>
                                            <a href="<?php echo esc_url($extension_ai_importer_url); ?>" class="font-bold text-indigo-600 hover:underline"><?php esc_html_e('Compare features', 'nexdirectory'); ?></a>
                                        </p>
                                    <?php endif; ?>
                                </div>

                                <div>
                                    <label for="nexdirectory_extension_import_author_id" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('Default listing owner', 'nexdirectory'); ?></label>
                                    <div class="relative">
                                        <select id="nexdirectory_extension_import_author_id" name="nexdirectory_extension_import_author_id" class="block w-full pl-4 pr-10 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 appearance-none cursor-pointer">
                                            <option value="0" <?php selected($extension_import_author_id, 0); ?>><?php esc_html_e('Auto (current admin)', 'nexdirectory'); ?></option>
                                            <?php foreach ((array) $extension_import_author_options as $author_option) : ?>
                                                <?php
                                                if (!$author_option instanceof WP_User) {
                                                    continue;
                                                }
                                                $author_label = trim((string) $author_option->display_name);
                                                if ($author_label === '') {
                                                    $author_label = (string) $author_option->user_email;
                                                }
                                                ?>
                                                <option value="<?php echo esc_attr((string) $author_option->ID); ?>" <?php selected($extension_import_author_id, (int) $author_option->ID); ?>>
                                                    <?php echo esc_html($author_label . ' (' . (string) $author_option->user_email . ')'); ?>
                                                </option>
                                            <?php endforeach; ?>
                                        </select>
                                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500"><i class="fas fa-chevron-down text-xs"></i></div>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4 border-t border-slate-100">
                                <label class="flex items-start gap-3 cursor-pointer p-3 bg-slate-50 rounded-xl border border-slate-200 hover:border-indigo-300 transition-colors">
                                    <input type="hidden" name="nexdirectory_extension_import_mark_claimable" value="0">
                                    <input type="checkbox" name="nexdirectory_extension_import_mark_claimable" value="1" class="w-4 h-4 mt-0.5 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_extension_import_mark_claimable', '1'), '1'); ?>>
                                    <span class="text-sm font-bold text-slate-700 leading-snug"><?php esc_html_e('Mark imported listings as claimable', 'nexdirectory'); ?></span>
                                </label>
                                <label class="flex items-start gap-3 cursor-pointer p-3 bg-slate-50 rounded-xl border border-slate-200 hover:border-indigo-300 transition-colors">
                                    <input type="hidden" name="nexdirectory_extension_notify_potential_owner_default" value="0">
                                    <input type="checkbox" name="nexdirectory_extension_notify_potential_owner_default" value="1" class="w-4 h-4 mt-0.5 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked($extension_notify_owner_default); ?>>
                                    <span class="text-sm font-bold text-slate-700 leading-snug"><?php esc_html_e('Email the possible owner', 'nexdirectory'); ?></span>
                                </label>
                                <label class="flex items-start gap-3 cursor-pointer p-3 bg-slate-50 rounded-xl border border-slate-200 hover:border-indigo-300 transition-colors">
                                    <input type="hidden" name="nexdirectory_enable_autogenerated_disclaimer" value="0">
                                    <input type="checkbox" name="nexdirectory_enable_autogenerated_disclaimer" value="1" class="w-4 h-4 mt-0.5 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_enable_autogenerated_disclaimer', '1'), '1'); ?>>
                                    <span class="text-sm font-bold text-slate-700 leading-snug"><?php esc_html_e('Show an auto-generated notice on public listings', 'nexdirectory'); ?></span>
                                </label>
                            </div>

                            <div>
                                <label for="nexdirectory_autogenerated_disclaimer_text" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('Custom auto-generated notice', 'nexdirectory'); ?></label>
                                <textarea id="nexdirectory_autogenerated_disclaimer_text" name="nexdirectory_autogenerated_disclaimer_text" rows="2" placeholder="<?php esc_attr_e('This listing was auto-generated. Listing details may change. Please verify with the original source.', 'nexdirectory'); ?>" class="block w-full px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors"><?php echo esc_textarea((string) get_option('nexdirectory_autogenerated_disclaimer_text', '')); ?></textarea>
                            </div>

                            <div class="bg-slate-800 text-slate-300 p-4 rounded-xl border border-slate-700 space-y-2 mt-4 font-mono text-[11px]">
                                <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
                                    <span class="text-slate-400"><?php esc_html_e('Listing import URL:', 'nexdirectory'); ?></span>
                                    <span class="text-indigo-300 truncate select-all"><?php echo esc_html(esc_url_raw(rest_url('nexdirectory/v1/extension/import'))); ?></span>
                                </div>
                                <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
                                    <span class="text-slate-400"><?php esc_html_e('Site check URL:', 'nexdirectory'); ?></span>
                                    <span class="text-indigo-300 truncate select-all"><?php echo esc_html(esc_url_raw(rest_url('nexdirectory/v1/extension/ping'))); ?></span>
                                </div>
                                <div class="flex flex-col sm:flex-row sm:justify-between gap-1">
                                    <span class="text-slate-400"><?php esc_html_e('Policy sync URL:', 'nexdirectory'); ?></span>
                                    <span class="text-indigo-300 truncate select-all"><?php echo esc_html(esc_url_raw(rest_url('nexdirectory/v1/extension/preferences'))); ?></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="nexdirectory-settings-panel space-y-6" id="nexdirectory-tab-email" data-tab="advanced" data-subtab="email">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-slate-900"><?php esc_html_e('Email Delivery (SMTP)', 'nexdirectory'); ?></h2>
                        <p class="text-sm text-slate-500 mt-1"><?php esc_html_e('Configure SMTP delivery and test outbound email.', 'nexdirectory'); ?></p>
                    </div>

                    <?php $email_connected = !empty($settings_email_health['connected']); ?>
                    <div class="p-6 rounded-2xl border shadow-sm flex flex-col sm:flex-row gap-5 nexdirectory-settings-field nexdirectory-full <?php echo $email_connected ? 'border-emerald-200 bg-emerald-50/50' : 'border-amber-200 bg-amber-50/50'; ?>">
                        <div class="flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center <?php echo $email_connected ? 'bg-emerald-100 text-emerald-600' : 'bg-amber-100 text-amber-600'; ?>">
                            <i class="fas fa-envelope-open-text text-xl"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-2">
                                <h3 class="text-lg font-bold text-slate-900 m-0"><?php esc_html_e('Email Connection Status', 'nexdirectory'); ?></h3>
                                <span class="px-2.5 py-1 text-[10px] uppercase font-bold tracking-wider rounded-full border <?php echo $email_connected ? 'bg-emerald-100 text-emerald-700 border-emerald-300' : 'bg-amber-100 text-amber-800 border-amber-300'; ?>">
                                    <?php echo esc_html($email_connected ? __('Connected', 'nexdirectory') : __('Not connected', 'nexdirectory')); ?>
                                </span>
                            </div>
                            <p class="text-sm text-slate-600 mb-4"><?php echo esc_html((string) ($settings_email_health['summary'] ?? '')); ?></p>

                            <div class="flex items-center gap-2 max-w-sm">
                                <input type="email" name="nexdirectory_test_email_to" form="nexdirectory-send-test-email-form" placeholder="<?php echo esc_attr(get_option('admin_email')); ?>" class="block w-full px-3 py-2 text-sm border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg">
                                <button type="submit" form="nexdirectory-send-test-email-form" class="whitespace-nowrap inline-flex items-center px-4 py-2 border border-slate-300 rounded-lg shadow-sm text-sm font-semibold text-slate-700 bg-white hover:bg-slate-50 transition-colors">
                                    <?php esc_html_e('Send Test', 'nexdirectory'); ?>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="p-6 bg-white border border-slate-200 rounded-2xl shadow-sm nexdirectory-settings-field nexdirectory-full">
                        <div class="mb-6 flex items-start justify-between gap-4 pb-4 border-b border-slate-100">
                            <div>
                                <h3 class="text-lg font-bold text-slate-900 flex items-center gap-2 mb-1">
                                    <i class="fas fa-server text-indigo-500 bg-indigo-50 p-2 rounded-lg"></i> <?php esc_html_e('SMTP Configuration', 'nexdirectory'); ?>
                                </h3>
                                <p class="text-xs text-slate-500 max-w-2xl"><?php esc_html_e('Use your dedicated SMTP provider for platform emails (notifications, reminders, moderation updates).', 'nexdirectory'); ?></p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer flex-shrink-0 mt-2">
                                <input type="hidden" name="nexdirectory_smtp_enabled" value="0">
                                <input type="checkbox" name="nexdirectory_smtp_enabled" value="1" class="sr-only peer" <?php checked((string) get_option('nexdirectory_smtp_enabled', '0'), '1'); ?>>
                                <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                            </label>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div class="lg:col-span-2">
                                <label for="nexdirectory_smtp_host" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('SMTP Host', 'nexdirectory'); ?></label>
                                <input type="text" id="nexdirectory_smtp_host" name="nexdirectory_smtp_host" value="<?php echo esc_attr((string) get_option('nexdirectory_smtp_host', '')); ?>" placeholder="smtp.example.com" class="block w-full px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors">
                            </div>
                            <div>
                                <label for="nexdirectory_smtp_port" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('SMTP Port', 'nexdirectory'); ?></label>
                                <input type="number" id="nexdirectory_smtp_port" name="nexdirectory_smtp_port" min="1" max="65535" value="<?php echo esc_attr((string) get_option('nexdirectory_smtp_port', 587)); ?>" class="block w-full px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors">
                            </div>

                            <div>
                                <label for="nexdirectory_smtp_encryption" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('Encryption', 'nexdirectory'); ?></label>
                                <div class="relative">
                                    <select id="nexdirectory_smtp_encryption" name="nexdirectory_smtp_encryption" class="block w-full pl-4 pr-10 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 appearance-none cursor-pointer">
                                        <option value="none" <?php selected((string) get_option('nexdirectory_smtp_encryption', 'tls'), 'none'); ?>><?php esc_html_e('None', 'nexdirectory'); ?></option>
                                        <option value="tls" <?php selected((string) get_option('nexdirectory_smtp_encryption', 'tls'), 'tls'); ?>><?php esc_html_e('TLS', 'nexdirectory'); ?></option>
                                        <option value="ssl" <?php selected((string) get_option('nexdirectory_smtp_encryption', 'tls'), 'ssl'); ?>><?php esc_html_e('SSL', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500"><i class="fas fa-chevron-down text-xs"></i></div>
                                </div>
                            </div>
                            <div class="lg:col-span-2 flex items-center pt-6">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="hidden" name="nexdirectory_smtp_auth" value="0">
                                    <input type="checkbox" name="nexdirectory_smtp_auth" value="1" class="sr-only peer" <?php checked((string) get_option('nexdirectory_smtp_auth', '1'), '1'); ?>>
                                    <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                    <span class="ml-3 text-sm font-bold text-slate-800"><?php esc_html_e('Use SMTP Authentication', 'nexdirectory'); ?></span>
                                </label>
                            </div>

                            <div>
                                <label for="nexdirectory_smtp_username" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('SMTP Username', 'nexdirectory'); ?></label>
                                <input type="text" id="nexdirectory_smtp_username" name="nexdirectory_smtp_username" value="<?php echo esc_attr((string) get_option('nexdirectory_smtp_username', '')); ?>" class="block w-full px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors">
                            </div>
                            <div class="lg:col-span-2">
                                <label for="nexdirectory_smtp_password" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('SMTP Password', 'nexdirectory'); ?></label>
                                <input type="password" id="nexdirectory_smtp_password" name="nexdirectory_smtp_password" value="" autocomplete="off" placeholder="<?php esc_attr_e('Leave blank to keep existing password', 'nexdirectory'); ?>" class="block w-full px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors">
                            </div>

                            <div class="md:col-span-2 lg:col-span-3 pt-6 border-t border-slate-100 grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="nexdirectory_smtp_from_name" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('From Name (Global Sender)', 'nexdirectory'); ?></label>
                                    <input type="text" id="nexdirectory_smtp_from_name" name="nexdirectory_smtp_from_name" value="<?php echo esc_attr((string) get_option('nexdirectory_smtp_from_name', '')); ?>" placeholder="<?php echo esc_attr($this->get_white_label_brand_name()); ?>" class="block w-full px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors">
                                </div>
                                <div>
                                    <label for="nexdirectory_smtp_from_email" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('From Email (Global Sender)', 'nexdirectory'); ?></label>
                                    <input type="email" id="nexdirectory_smtp_from_email" name="nexdirectory_smtp_from_email" value="<?php echo esc_attr((string) get_option('nexdirectory_smtp_from_email', '')); ?>" placeholder="noreply@example.com" class="block w-full px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors">
                                    <p class="text-[11px] text-slate-500 mt-1"><?php esc_html_e('Used for automatic platform emails, even when SMTP is disabled.', 'nexdirectory'); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="nexdirectory-settings-panel space-y-6" id="nexdirectory-tab-apis" data-tab="advanced" data-subtab="apis">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-slate-900"><?php esc_html_e('APIs & Credentials', 'nexdirectory'); ?></h2>
                        <p class="text-sm text-slate-500 mt-1"><?php esc_html_e('Manage credentials for maps and anti-spam protection.', 'nexdirectory'); ?></p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <?php $captcha_connected = !empty($settings_captcha_health['connected']); ?>
                        <div class="p-5 rounded-2xl border shadow-sm flex flex-col nexdirectory-settings-field <?php echo $captcha_connected ? 'border-emerald-200 bg-emerald-50/50' : 'border-slate-200 bg-slate-50'; ?>">
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-full flex items-center justify-center <?php echo $captcha_connected ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-200 text-slate-500'; ?>">
                                        <i class="fas fa-shield-alt"></i>
                                    </div>
                                    <strong class="text-sm font-bold text-slate-900"><?php esc_html_e('reCAPTCHA', 'nexdirectory'); ?></strong>
                                </div>
                                <span class="px-2 py-0.5 text-[10px] uppercase font-bold tracking-wider rounded border <?php echo $captcha_connected ? 'bg-emerald-100 text-emerald-700 border-emerald-300' : 'bg-slate-200 text-slate-600 border-slate-300'; ?>">
                                    <?php echo esc_html($captcha_connected ? __('Connected', 'nexdirectory') : __('Not connected', 'nexdirectory')); ?>
                                </span>
                            </div>
                            <p class="text-xs text-slate-600 mb-4 flex-1"><?php echo esc_html((string) ($settings_captcha_health['summary'] ?? '')); ?></p>
                            <button type="submit" form="nexdirectory-test-captcha-form" class="w-full justify-center inline-flex items-center px-4 py-2 border border-slate-300 rounded-lg shadow-sm text-xs font-semibold text-slate-700 bg-white hover:bg-slate-50 transition-colors">
                                <?php esc_html_e('Test Captcha', 'nexdirectory'); ?>
                            </button>
                        </div>
                    </div>

                    <div class="p-6 bg-white border border-slate-200 rounded-2xl shadow-sm nexdirectory-settings-field nexdirectory-full">
                        <h3 class="text-lg font-bold text-slate-900 mb-6 flex items-center gap-2">
                            <i class="fas fa-key text-indigo-500 bg-indigo-50 p-2 rounded-lg"></i> <?php esc_html_e('Credential Settings', 'nexdirectory'); ?>
                        </h3>

                        <div class="space-y-8">
                            <div>
                                <label for="nexdirectory_google_maps_api_key" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('Google Maps API Key', 'nexdirectory'); ?></label>
                                <input type="password" id="nexdirectory_google_maps_api_key" name="nexdirectory_google_maps_api_key" value="" autocomplete="off" placeholder="<?php esc_attr_e('Leave blank to keep existing key', 'nexdirectory'); ?>" class="block w-full max-w-lg px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors">
                                <p class="text-[11px] text-slate-500 mt-1">
                                    <?php esc_html_e('Used for map enhancements and address geocoding.', 'nexdirectory'); ?>
                                    <a href="https://developers.google.com/maps" target="_blank" rel="noopener noreferrer" class="text-indigo-600 hover:underline"><?php esc_html_e('Get a key', 'nexdirectory'); ?></a>.
                                </p>
                            </div>

                            <div class="pt-6 border-t border-slate-100">
                                <label for="nexdirectory_recaptcha_site_key" class="block text-sm font-bold text-slate-800 mb-1"><?php esc_html_e('reCAPTCHA Site Key', 'nexdirectory'); ?></label>
                                <input type="text" id="nexdirectory_recaptcha_site_key" name="nexdirectory_recaptcha_site_key" value="<?php echo esc_attr((string) get_option('nexdirectory_recaptcha_site_key', '')); ?>" class="block w-full max-w-lg px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors">

                                <label for="nexdirectory_recaptcha_secret_key" class="block text-sm font-bold text-slate-800 mt-4 mb-1"><?php esc_html_e('reCAPTCHA Secret Key', 'nexdirectory'); ?></label>
                                <input type="password" id="nexdirectory_recaptcha_secret_key" name="nexdirectory_recaptcha_secret_key" value="" autocomplete="off" placeholder="<?php esc_attr_e('Leave blank to keep existing secret', 'nexdirectory'); ?>" class="block w-full max-w-lg px-4 py-2.5 text-sm border border-slate-300 bg-slate-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 transition-colors">

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 max-w-2xl">
                                    <div>
                                        <label for="nexdirectory_recaptcha_version" class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1"><?php esc_html_e('Version', 'nexdirectory'); ?></label>
                                        <div class="relative">
                                            <select id="nexdirectory_recaptcha_version" name="nexdirectory_recaptcha_version" class="block w-full pl-3 pr-8 py-2 text-sm border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 appearance-none cursor-pointer">
                                                <option value="v3" <?php selected($recaptcha_version_value, 'v3'); ?>><?php esc_html_e('v3 (recommended)', 'nexdirectory'); ?></option>
                                                <option value="v2" <?php selected($recaptcha_version_value, 'v2'); ?>><?php esc_html_e('v2', 'nexdirectory'); ?></option>
                                            </select>
                                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-500"><i class="fas fa-chevron-down text-xs"></i></div>
                                        </div>
                                    </div>
                                    <div class="flex items-center pt-6">
                                        <label class="flex items-center gap-2 cursor-pointer">
                                            <input type="hidden" name="nexdirectory_recaptcha_show_submit" value="0">
                                            <input type="checkbox" name="nexdirectory_recaptcha_show_submit" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_recaptcha_show_submit', '0'), '1'); ?>>
                                            <span class="text-sm font-semibold text-slate-700"><?php esc_html_e('Show on submission form', 'nexdirectory'); ?></span>
                                        </label>
                                    </div>
                                </div>
                                <p class="text-[11px] text-slate-500 mt-2">
                                    <?php esc_html_e('v3 runs silently. v2 shows a challenge box.', 'nexdirectory'); ?>
                                    <a href="https://www.google.com/recaptcha/admin/create" target="_blank" rel="noopener noreferrer" class="text-indigo-600 hover:underline"><?php esc_html_e('Create reCAPTCHA keys', 'nexdirectory'); ?></a>.
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="nexdirectory-settings-panel space-y-6" id="nexdirectory-tab-display-advanced" data-tab="advanced" data-subtab="display">
                    <div class="mb-6">
                        <h2 class="text-2xl font-bold text-slate-900"><?php esc_html_e('Display (Advanced)', 'nexdirectory'); ?></h2>
                        <p class="text-sm text-slate-500 mt-1"><?php esc_html_e('Control theme override behavior and resolve layout conflicts.', 'nexdirectory'); ?></p>
                    </div>

                    <div class="p-6 bg-white border border-slate-200 rounded-2xl shadow-sm nexdirectory-settings-field nexdirectory-full">
                        <h3 class="text-lg font-bold text-slate-900 mb-6 flex items-center gap-2">
                            <i class="fas fa-layer-group text-indigo-500 bg-indigo-50 p-2 rounded-lg"></i> <?php esc_html_e('Theme Layout Overrides', 'nexdirectory'); ?>
                        </h3>

                        <div class="space-y-4">
                            <div class="flex items-start gap-4 pb-4 border-b border-slate-100">
                                <label class="relative inline-flex items-center cursor-pointer mt-0.5 flex-shrink-0">
                                    <input type="hidden" name="nexdirectory_theme_override_all_plugin_pages" value="0">
                                    <input type="checkbox" id="nexdirectory_theme_override_all_plugin_pages" name="nexdirectory_theme_override_all_plugin_pages" value="1" class="sr-only peer" <?php checked((string) get_option('nexdirectory_theme_override_all_plugin_pages', '1'), '1'); ?>>
                                    <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </label>
                                <div>
                                    <span class="block text-sm font-bold text-slate-800"><?php esc_html_e('Override all theme settings on plugin pages (recommended)', 'nexdirectory'); ?></span>
                                    <span class="text-xs text-slate-500"><?php esc_html_e('Uses a clean full-width canvas: no theme titles, no theme padding, reduced conflicts.', 'nexdirectory'); ?></span>
                                </div>
                            </div>

                            <div id="nexdirectory-theme-override-granular" class="grid grid-cols-1 md:grid-cols-2 gap-3 pl-14">
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded hover:bg-slate-50 transition-colors">
                                    <input type="hidden" name="nexdirectory_theme_override_full_width" value="0"><input type="checkbox" name="nexdirectory_theme_override_full_width" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_theme_override_full_width', '1'), '1'); ?>>
                                    <span class="text-sm text-slate-700"><?php esc_html_e('Force full-width wrappers', 'nexdirectory'); ?></span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded hover:bg-slate-50 transition-colors">
                                    <input type="hidden" name="nexdirectory_theme_override_remove_padding" value="0"><input type="checkbox" name="nexdirectory_theme_override_remove_padding" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_theme_override_remove_padding', '1'), '1'); ?>>
                                    <span class="text-sm text-slate-700"><?php esc_html_e('Remove theme padding/margins', 'nexdirectory'); ?></span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded hover:bg-slate-50 transition-colors">
                                    <input type="hidden" name="nexdirectory_theme_override_hide_title" value="0"><input type="checkbox" name="nexdirectory_theme_override_hide_title" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_theme_override_hide_title', '1'), '1'); ?>>
                                    <span class="text-sm text-slate-700"><?php esc_html_e('Hide theme page titles', 'nexdirectory'); ?></span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded hover:bg-slate-50 transition-colors">
                                    <input type="hidden" name="nexdirectory_theme_override_hide_comments" value="0"><input type="checkbox" name="nexdirectory_theme_override_hide_comments" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_theme_override_hide_comments', '1'), '1'); ?>>
                                    <span class="text-sm text-slate-700"><?php esc_html_e('Disable comments areas', 'nexdirectory'); ?></span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded hover:bg-slate-50 transition-colors">
                                    <input type="hidden" name="nexdirectory_theme_override_hide_featured_image" value="0"><input type="checkbox" name="nexdirectory_theme_override_hide_featured_image" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_theme_override_hide_featured_image', '1'), '1'); ?>>
                                    <span class="text-sm text-slate-700"><?php esc_html_e('Suppress theme featured image', 'nexdirectory'); ?></span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded hover:bg-slate-50 transition-colors">
                                    <input type="hidden" name="nexdirectory_theme_override_hide_header" value="0"><input type="checkbox" name="nexdirectory_theme_override_hide_header" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_theme_override_hide_header', '0'), '1'); ?>>
                                    <span class="text-sm text-slate-700"><?php esc_html_e('Remove Header', 'nexdirectory'); ?></span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded hover:bg-slate-50 transition-colors md:col-span-2">
                                    <input type="hidden" name="nexdirectory_theme_override_reset_theme_styles" value="0"><input type="checkbox" name="nexdirectory_theme_override_reset_theme_styles" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_theme_override_reset_theme_styles', '1'), '1'); ?>>
                                    <span class="text-sm text-slate-700"><?php esc_html_e('Neutralize theme cards/shadows around plugin content', 'nexdirectory'); ?></span>
                                </label>
                            </div>
                            <input type="hidden" name="nexdirectory_hide_theme_titles_on_plugin_pages" value="<?php echo esc_attr((string) get_option('nexdirectory_hide_theme_titles_on_plugin_pages', '0')); ?>">
                        </div>
                    </div>

                    <div class="p-6 bg-white border border-slate-200 rounded-2xl shadow-sm nexdirectory-settings-field nexdirectory-full">
                        <h3 class="text-lg font-bold text-slate-900 mb-6 flex items-center gap-2">
                            <i class="fas fa-space-shuttle text-indigo-500 bg-indigo-50 p-2 rounded-lg"></i> <?php esc_html_e('SPA Navigation & Motion', 'nexdirectory'); ?>
                        </h3>

                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-6 pb-6 border-b border-slate-100">
                            <label class="flex items-center gap-3 cursor-pointer p-3 bg-slate-50 rounded-xl border border-slate-200 hover:border-indigo-300 transition-colors">
                                <input type="hidden" name="nexdirectory_enable_spa_hybrid" value="0">
                                <input type="checkbox" name="nexdirectory_enable_spa_hybrid" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_enable_spa_hybrid', '1'), '1'); ?>>
                                <span class="text-sm font-bold text-slate-700 leading-snug"><?php esc_html_e('Enable Hybrid SPA', 'nexdirectory'); ?></span>
                            </label>
                            <label class="flex items-center gap-3 cursor-pointer p-3 bg-slate-50 rounded-xl border border-slate-200 hover:border-indigo-300 transition-colors">
                                <input type="hidden" name="nexdirectory_show_spa_feedback_badge" value="0">
                                <input type="checkbox" name="nexdirectory_show_spa_feedback_badge" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_show_spa_feedback_badge', '0'), '1'); ?>>
                                <span class="text-sm font-bold text-slate-700 leading-snug"><?php esc_html_e('Show SPA Toasts', 'nexdirectory'); ?></span>
                            </label>
                            <label class="flex items-center gap-3 cursor-pointer p-3 bg-slate-50 rounded-xl border border-slate-200 hover:border-indigo-300 transition-colors">
                                <input type="hidden" name="nexdirectory_enable_smooth_scrolling" value="0">
                                <input type="checkbox" name="nexdirectory_enable_smooth_scrolling" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_enable_smooth_scrolling', '0'), '1'); ?>>
                                <span class="text-sm font-bold text-slate-700 leading-snug"><?php esc_html_e('Smooth Scrolling', 'nexdirectory'); ?></span>
                            </label>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <?php $smooth_profile = method_exists($this, 'sanitize_smooth_scroll_profile_option') ? (string) $this->sanitize_smooth_scroll_profile_option((string) get_option('nexdirectory_smooth_scroll_profile', 'balanced')) : (string) get_option('nexdirectory_smooth_scroll_profile', 'balanced'); ?>
                            <div>
                                <label for="nexdirectory_smooth_scroll_profile" class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1"><?php esc_html_e('Scroll Profile', 'nexdirectory'); ?></label>
                                <div class="relative">
                                    <select id="nexdirectory_smooth_scroll_profile" name="nexdirectory_smooth_scroll_profile" class="block w-full pl-3 pr-8 py-2 text-sm border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 appearance-none cursor-pointer">
                                        <option value="gentle" <?php selected($smooth_profile, 'gentle'); ?>><?php esc_html_e('Gentle', 'nexdirectory'); ?></option>
                                        <option value="balanced" <?php selected($smooth_profile, 'balanced'); ?>><?php esc_html_e('Balanced (Recommended)', 'nexdirectory'); ?></option>
                                        <option value="snappy" <?php selected($smooth_profile, 'snappy'); ?>><?php esc_html_e('Snappy', 'nexdirectory'); ?></option>
                                        <option value="custom" <?php selected($smooth_profile, 'custom'); ?>><?php esc_html_e('Custom', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-500"><i class="fas fa-chevron-down text-xs"></i></div>
                                </div>
                            </div>

                            <?php $smooth_touchpad_behavior = method_exists($this, 'sanitize_smooth_scroll_touchpad_behavior_option') ? (string) $this->sanitize_smooth_scroll_touchpad_behavior_option((string) get_option('nexdirectory_smooth_scroll_touchpad_behavior', 'native')) : (string) get_option('nexdirectory_smooth_scroll_touchpad_behavior', 'native'); ?>
                            <div class="lg:col-span-2">
                                <label for="nexdirectory_smooth_scroll_touchpad_behavior" class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1"><?php esc_html_e('Trackpad Behavior', 'nexdirectory'); ?></label>
                                <div class="relative">
                                    <select id="nexdirectory_smooth_scroll_touchpad_behavior" name="nexdirectory_smooth_scroll_touchpad_behavior" class="block w-full pl-3 pr-8 py-2 text-sm border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700 appearance-none cursor-pointer">
                                        <option value="native" <?php selected($smooth_touchpad_behavior, 'native'); ?>><?php esc_html_e('Use Native Trackpad Physics (Recommended)', 'nexdirectory'); ?></option>
                                        <option value="assist" <?php selected($smooth_touchpad_behavior, 'assist'); ?>><?php esc_html_e('Assist Trackpad Scroll', 'nexdirectory'); ?></option>
                                        <option value="force" <?php selected($smooth_touchpad_behavior, 'force'); ?>><?php esc_html_e('Force Full Engine on Trackpad', 'nexdirectory'); ?></option>
                                    </select>
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-500"><i class="fas fa-chevron-down text-xs"></i></div>
                                </div>
                            </div>

                            <div>
                                <label for="nexdirectory_smooth_scroll_wheel_multiplier" class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1"><?php esc_html_e('Multiplier', 'nexdirectory'); ?></label>
                                <input type="number" id="nexdirectory_smooth_scroll_wheel_multiplier" name="nexdirectory_smooth_scroll_wheel_multiplier" min="0.4" max="3" step="0.01" value="<?php echo esc_attr((string) get_option('nexdirectory_smooth_scroll_wheel_multiplier', '1')); ?>" class="block w-full px-3 py-2 text-sm border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700">
                            </div>
                            <div>
                                <label for="nexdirectory_smooth_scroll_ease" class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1"><?php esc_html_e('Duration (sec)', 'nexdirectory'); ?></label>
                                <input type="number" id="nexdirectory_smooth_scroll_ease" name="nexdirectory_smooth_scroll_ease" min="0.4" max="3" step="0.05" value="<?php echo esc_attr((string) get_option('nexdirectory_smooth_scroll_ease', '1.2')); ?>" class="block w-full px-3 py-2 text-sm border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700">
                            </div>
                            <div>
                                <label for="nexdirectory_smooth_scroll_max_step_px" class="block text-xs font-bold text-slate-600 uppercase tracking-wide mb-1"><?php esc_html_e('Max Step (px)', 'nexdirectory'); ?></label>
                                <input type="number" id="nexdirectory_smooth_scroll_max_step_px" name="nexdirectory_smooth_scroll_max_step_px" min="180" max="2400" step="10" value="<?php echo esc_attr((string) get_option('nexdirectory_smooth_scroll_max_step_px', 960)); ?>" class="block w-full px-3 py-2 text-sm border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-lg text-slate-700">
                            </div>

                            <div class="md:col-span-2 lg:col-span-3 flex items-center justify-between mt-2">
                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input type="hidden" name="nexdirectory_smooth_scroll_enable_on_touch" value="0">
                                    <input type="checkbox" name="nexdirectory_smooth_scroll_enable_on_touch" value="1" class="w-4 h-4 text-indigo-600 bg-white border-slate-300 rounded focus:ring-indigo-500" <?php checked((string) get_option('nexdirectory_smooth_scroll_enable_on_touch', '0'), '1'); ?>>
                                    <span class="text-sm font-semibold text-slate-700"><?php esc_html_e('Force engine on touch devices', 'nexdirectory'); ?></span>
                                </label>

                                <button type="submit" form="nexdirectory-reset-smooth-scroll-form" onclick="return confirm('<?php echo esc_js(__('Reset smooth scrolling settings to Lenis defaults?', 'nexdirectory')); ?>');" class="text-xs font-semibold text-red-600 hover:text-red-800 transition-colors">
                                    <?php esc_html_e('Reset Defaults', 'nexdirectory'); ?>
                                </button>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="nexdirectory-settings-panel space-y-6" id="nexdirectory-tab-logs" data-tab="advanced" data-subtab="logs">
                    <div class="mb-6 flex justify-between items-end">
                        <div>
                            <h2 class="text-2xl font-bold text-slate-900"><?php esc_html_e('Runtime Logs', 'nexdirectory'); ?></h2>
                            <p class="text-sm text-slate-500 mt-1"><?php esc_html_e('Review operational warnings/errors and clear logs.', 'nexdirectory'); ?></p>
                        </div>
                        <button type="submit" form="nexdirectory-clear-logs-form" onclick="return confirm('<?php echo esc_js(__('Clear all runtime logs?', 'nexdirectory')); ?>');" class="inline-flex items-center px-4 py-2 border border-slate-300 rounded-lg shadow-sm text-sm font-semibold text-slate-700 bg-white hover:bg-slate-50 transition-colors">
                            <i class="fas fa-eraser mr-2 text-slate-400"></i> <?php esc_html_e('Clear Logs', 'nexdirectory'); ?>
                        </button>
                    </div>

                    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden nexdirectory-settings-field nexdirectory-full">
                        <?php if (!empty($runtime_logs)) : ?>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-slate-200 text-left text-sm">
                                    <thead class="bg-slate-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 font-bold text-slate-600 uppercase tracking-wider w-40"><?php esc_html_e('Time', 'nexdirectory'); ?></th>
                                            <th scope="col" class="px-6 py-3 font-bold text-slate-600 uppercase tracking-wider w-24"><?php esc_html_e('Level', 'nexdirectory'); ?></th>
                                            <th scope="col" class="px-6 py-3 font-bold text-slate-600 uppercase tracking-wider w-1/3"><?php esc_html_e('Message', 'nexdirectory'); ?></th>
                                            <th scope="col" class="px-6 py-3 font-bold text-slate-600 uppercase tracking-wider"><?php esc_html_e('Context', 'nexdirectory'); ?></th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-100 bg-white font-mono text-[11px] text-slate-600">
                                        <?php foreach ((array) $runtime_logs as $entry) : ?>
                                            <?php
                                            $entry = is_array($entry) ? $entry : [];
                                            $entry_context = isset($entry['context']) && is_array($entry['context']) ? $entry['context'] : [];

                                            $level = strtoupper((string) ($entry['level'] ?? 'info'));
                                            $badge_class = 'bg-slate-100 text-slate-700 border-slate-200';
                                            if (in_array($level, ['ERROR', 'CRITICAL', 'FATAL', 'EMERGENCY'], true)) {
                                                $badge_class = 'bg-red-50 text-red-700 border-red-200';
                                            } elseif (in_array($level, ['WARNING', 'ALERT'], true)) {
                                                $badge_class = 'bg-amber-50 text-amber-700 border-amber-200';
                                            } elseif ($level === 'DEBUG') {
                                                $badge_class = 'bg-indigo-50 text-indigo-700 border-indigo-200';
                                            }
                                            ?>
                                            <tr class="hover:bg-slate-50/50 transition-colors">
                                                <td class="px-6 py-3 whitespace-nowrap text-slate-500"><?php echo esc_html((string) ($entry['time'] ?? '')); ?></td>
                                                <td class="px-6 py-3 whitespace-nowrap">
                                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold tracking-wider border <?php echo esc_attr($badge_class); ?>">
                                                        <?php echo esc_html($level); ?>
                                                    </span>
                                                </td>
                                                <td class="px-6 py-3 font-sans font-medium text-slate-800"><?php echo esc_html((string) ($entry['message'] ?? '')); ?></td>
                                                <td class="px-6 py-3">
                                                    <?php if (!empty($entry_context)) : ?>
                                                        <div class="bg-slate-50 p-2 rounded border border-slate-100 overflow-x-auto max-w-md">
                                                            <code><?php echo esc_html((string) wp_json_encode($entry_context)); ?></code>
                                                        </div>
                                                    <?php else : ?>
                                                        <span class="text-slate-400 italic">--</span>
                                                    <?php endif; ?>
                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        <?php else : ?>
                            <div class="p-12 text-center text-slate-500">
                                <i class="fas fa-clipboard-check text-4xl mb-3 text-slate-200"></i>
                                <p class="text-base font-semibold text-slate-700"><?php esc_html_e('No logs recorded yet.', 'nexdirectory'); ?></p>
                                <p class="text-sm"><?php esc_html_e('System operations are running smoothly.', 'nexdirectory'); ?></p>
                            </div>
                        <?php endif; ?>
                    </div>
                </section>
