<?php
/**
 * Name: Accessibility Widget
 * Description: Frontend accessibility widget that allows users to customize their viewing experience with font size, contrast, spacing, and more accessibility options
 * Category: Content
 * Icon: -
 * UseCases: [
 *   {
 *     "title": "Improve Website Accessibility",
 *     "description": "Provide users with visual impairments or reading difficulties customizable options to improve their browsing experience."
 *   },
 *   {
 *     "title": "WCAG Compliance Helper",
 *     "description": "Help meet accessibility standards by giving users control over text size, contrast, and readability options."
 *   },
 *   {
 *     "title": "Enhanced User Experience",
 *     "description": "Allow all users to personalize the website appearance according to their preferences and needs."
 *   }
 * ]
 * Added: 2025-11-13
 * Tags: accessibility, a11y, wcag, contrast, font-size, dyslexia, readable
 * WhereToFind: {
 *   "location": "Frontend (Bottom Right Corner)",
 *   "url": "/",
 *   "instructions": "Look for the accessibility widget button in the bottom right corner of any page",
 *   "newTab": true
 * }
 */

// Prevent direct access
if (!defined('ABSPATH')) exit;

class SwitchboardAccessibilityWidget {

    public function __construct() {
        add_action('wp_footer', [$this, 'render_widget']);
        add_action('wp_enqueue_scripts', [$this, 'enqueue_assets']);

        // Register with data registry
        $this->register_with_data_registry();
    }

    private function register_with_data_registry() {
        if (class_exists('Switchboard_Data_Registry')) {
            $registry = Switchboard_Data_Registry::get_instance();
            $registry->auto_register($this, __FILE__);
        }
    }

    public function register_data_locations() {
        return [
            'options' => [
                'switchboard_accessibility-widget_settings'
            ],
            'option_patterns' => [],
            'tables' => [],
            'post_meta' => [],
            'user_meta' => [],
            'transients' => []
        ];
    }

    private function get_settings() {
        $settings = get_option('switchboard_accessibility-widget_settings', []);

        // Ensure it's an array
        if (!is_array($settings)) {
            $settings = [];
        }

        return $settings;
    }

    /**
     * Sanitize color value - allow any valid CSS color format
     */
    private function sanitize_color($color) {
        $color = trim($color);

        // If empty, return default
        if (empty($color)) {
            return '#2271b1';
        }

        // Allow hex colors (#RGB, #RRGGBB, #RRGGBBAA)
        if (preg_match('/^#[a-fA-F0-9]{3,8}$/', $color)) {
            return $color;
        }

        // Allow function-based colors: rgb(), rgba(), hsl(), hsla(), hwb(),
        // lab(), lch(), oklab(), oklch(), color(), etc.
        if (preg_match('/^[a-z-]+\([^)]*\)$/i', $color)) {
            return $color;
        }

        // Allow named colors (e.g., red, blue, transparent, currentColor)
        if (preg_match('/^[a-z]+$/i', $color)) {
            return $color;
        }

        // If none match, return default
        return '#2271b1';
    }

    /**
     * Validate position setting against whitelist
     */
    private function validate_position($position) {
        $allowed_positions = ['bottom-left', 'top-right', 'top-left', 'bottom-right'];
        if (in_array($position, $allowed_positions, true)) {
            return $position;
        }
        return 'bottom-right'; // Default position
    }

    public function enqueue_assets() {
        $settings = $this->get_settings();

        // Check if widget should be displayed
        $enabled = isset($settings['enabled']) ? $settings['enabled'] : 'yes';
        if ($enabled !== 'yes') {
            return;
        }

        // Enqueue inline styles and scripts
        add_action('wp_head', [$this, 'add_inline_styles'], 999);
    }

    public function add_inline_styles() {
        ?>
        <style id="sb-accessibility-base-styles">
        /* ============================================
           ACCESSIBILITY WIDGET - REFINED & OPTIMIZED
           Designed to work with ANY WordPress theme
           ============================================ */

        /* Exclude widget itself from accessibility transformations */
        /* Note: Widget styles are defined separately below */

        /* ============================================
           FONT SIZE CONTROLS - Smart Scaling System
           ============================================ */

        /* Base body font size adjustment */
        body.sb-a11y-font-small { font-size: 14px !important; }
        body.sb-a11y-font-normal { font-size: 16px !important; }
        body.sb-a11y-font-large { font-size: 18px !important; }
        body.sb-a11y-font-xlarge { font-size: 22px !important; }

        /* Content text elements - scale proportionally */
        body.sb-a11y-font-small p, body.sb-a11y-font-small li, body.sb-a11y-font-small span:not(#sb-a11y-widget *),
        body.sb-a11y-font-small td, body.sb-a11y-font-small th, body.sb-a11y-font-small label,
        body.sb-a11y-font-small blockquote, body.sb-a11y-font-small figcaption { font-size: 14px !important; }

        body.sb-a11y-font-normal p, body.sb-a11y-font-normal li, body.sb-a11y-font-normal span:not(#sb-a11y-widget *),
        body.sb-a11y-font-normal td, body.sb-a11y-font-normal th, body.sb-a11y-font-normal label,
        body.sb-a11y-font-normal blockquote, body.sb-a11y-font-normal figcaption { font-size: 16px !important; }

        body.sb-a11y-font-large p, body.sb-a11y-font-large li, body.sb-a11y-font-large span:not(#sb-a11y-widget *),
        body.sb-a11y-font-large td, body.sb-a11y-font-large th, body.sb-a11y-font-large label,
        body.sb-a11y-font-large blockquote, body.sb-a11y-font-large figcaption { font-size: 18px !important; }

        body.sb-a11y-font-xlarge p, body.sb-a11y-font-xlarge li, body.sb-a11y-font-xlarge span:not(#sb-a11y-widget *),
        body.sb-a11y-font-xlarge td, body.sb-a11y-font-xlarge th, body.sb-a11y-font-xlarge label,
        body.sb-a11y-font-xlarge blockquote, body.sb-a11y-font-xlarge figcaption { font-size: 22px !important; }

        /* Headings - proportional scaling */
        body.sb-a11y-font-small h1 { font-size: 28px !important; }
        body.sb-a11y-font-small h2 { font-size: 24px !important; }
        body.sb-a11y-font-small h3 { font-size: 20px !important; }
        body.sb-a11y-font-small h4 { font-size: 18px !important; }
        body.sb-a11y-font-small h5 { font-size: 16px !important; }
        body.sb-a11y-font-small h6 { font-size: 14px !important; }

        body.sb-a11y-font-normal h1 { font-size: 32px !important; }
        body.sb-a11y-font-normal h2 { font-size: 28px !important; }
        body.sb-a11y-font-normal h3 { font-size: 24px !important; }
        body.sb-a11y-font-normal h4 { font-size: 20px !important; }
        body.sb-a11y-font-normal h5 { font-size: 18px !important; }
        body.sb-a11y-font-normal h6 { font-size: 16px !important; }

        body.sb-a11y-font-large h1 { font-size: 36px !important; }
        body.sb-a11y-font-large h2 { font-size: 32px !important; }
        body.sb-a11y-font-large h3 { font-size: 28px !important; }
        body.sb-a11y-font-large h4 { font-size: 24px !important; }
        body.sb-a11y-font-large h5 { font-size: 20px !important; }
        body.sb-a11y-font-large h6 { font-size: 18px !important; }

        body.sb-a11y-font-xlarge h1 { font-size: 44px !important; }
        body.sb-a11y-font-xlarge h2 { font-size: 38px !important; }
        body.sb-a11y-font-xlarge h3 { font-size: 32px !important; }
        body.sb-a11y-font-xlarge h4 { font-size: 28px !important; }
        body.sb-a11y-font-xlarge h5 { font-size: 24px !important; }
        body.sb-a11y-font-xlarge h6 { font-size: 22px !important; }

        /* Buttons - slightly smaller scale for UI */
        body.sb-a11y-font-small button:not(#sb-a11y-widget *) { font-size: 13px !important; }
        body.sb-a11y-font-normal button:not(#sb-a11y-widget *) { font-size: 14px !important; }
        body.sb-a11y-font-large button:not(#sb-a11y-widget *) { font-size: 15px !important; }
        body.sb-a11y-font-xlarge button:not(#sb-a11y-widget *) { font-size: 16px !important; }

        /* Form inputs - readable but not too large */
        body.sb-a11y-font-small input:not(#sb-a11y-widget *),
        body.sb-a11y-font-small textarea:not(#sb-a11y-widget *),
        body.sb-a11y-font-small select:not(#sb-a11y-widget *) { font-size: 14px !important; }

        body.sb-a11y-font-normal input:not(#sb-a11y-widget *),
        body.sb-a11y-font-normal textarea:not(#sb-a11y-widget *),
        body.sb-a11y-font-normal select:not(#sb-a11y-widget *) { font-size: 15px !important; }

        body.sb-a11y-font-large input:not(#sb-a11y-widget *),
        body.sb-a11y-font-large textarea:not(#sb-a11y-widget *),
        body.sb-a11y-font-large select:not(#sb-a11y-widget *) { font-size: 16px !important; }

        body.sb-a11y-font-xlarge input:not(#sb-a11y-widget *),
        body.sb-a11y-font-xlarge textarea:not(#sb-a11y-widget *),
        body.sb-a11y-font-xlarge select:not(#sb-a11y-widget *) { font-size: 17px !important; }

        /* ============================================
           LINE HEIGHT CONTROLS
           ============================================ */
        body.sb-a11y-line-height-normal p, body.sb-a11y-line-height-normal li,
        body.sb-a11y-line-height-normal div:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            line-height: 1.5 !important;
        }
        body.sb-a11y-line-height-medium p, body.sb-a11y-line-height-medium li,
        body.sb-a11y-line-height-medium div:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            line-height: 1.8 !important;
        }
        body.sb-a11y-line-height-large p, body.sb-a11y-line-height-large li,
        body.sb-a11y-line-height-large div:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            line-height: 2.2 !important;
        }

        /* ============================================
           LETTER SPACING CONTROLS
           ============================================ */
        body.sb-a11y-letter-spacing-normal p, body.sb-a11y-letter-spacing-normal li,
        body.sb-a11y-letter-spacing-normal span:not(#sb-a11y-widget *),
        body.sb-a11y-letter-spacing-normal h1, body.sb-a11y-letter-spacing-normal h2,
        body.sb-a11y-letter-spacing-normal h3, body.sb-a11y-letter-spacing-normal h4,
        body.sb-a11y-letter-spacing-normal h5, body.sb-a11y-letter-spacing-normal h6 {
            letter-spacing: normal !important;
        }
        body.sb-a11y-letter-spacing-wide p, body.sb-a11y-letter-spacing-wide li,
        body.sb-a11y-letter-spacing-wide span:not(#sb-a11y-widget *),
        body.sb-a11y-letter-spacing-wide h1, body.sb-a11y-letter-spacing-wide h2,
        body.sb-a11y-letter-spacing-wide h3, body.sb-a11y-letter-spacing-wide h4,
        body.sb-a11y-letter-spacing-wide h5, body.sb-a11y-letter-spacing-wide h6 {
            letter-spacing: 0.05em !important;
        }
        body.sb-a11y-letter-spacing-wider p, body.sb-a11y-letter-spacing-wider li,
        body.sb-a11y-letter-spacing-wider span:not(#sb-a11y-widget *),
        body.sb-a11y-letter-spacing-wider h1, body.sb-a11y-letter-spacing-wider h2,
        body.sb-a11y-letter-spacing-wider h3, body.sb-a11y-letter-spacing-wider h4,
        body.sb-a11y-letter-spacing-wider h5, body.sb-a11y-letter-spacing-wider h6 {
            letter-spacing: 0.1em !important;
        }

        /* ============================================
           TEXT ALIGNMENT CONTROLS
           ============================================ */
        body.sb-a11y-align-left p, body.sb-a11y-align-left li,
        body.sb-a11y-align-left div:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-align-left h1, body.sb-a11y-align-left h2, body.sb-a11y-align-left h3,
        body.sb-a11y-align-left h4, body.sb-a11y-align-left h5, body.sb-a11y-align-left h6 {
            text-align: left !important;
        }
        body.sb-a11y-align-center p, body.sb-a11y-align-center li,
        body.sb-a11y-align-center div:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-align-center h1, body.sb-a11y-align-center h2, body.sb-a11y-align-center h3,
        body.sb-a11y-align-center h4, body.sb-a11y-align-center h5, body.sb-a11y-align-center h6 {
            text-align: center !important;
        }
        body.sb-a11y-align-right p, body.sb-a11y-align-right li,
        body.sb-a11y-align-right div:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-align-right h1, body.sb-a11y-align-right h2, body.sb-a11y-align-right h3,
        body.sb-a11y-align-right h4, body.sb-a11y-align-right h5, body.sb-a11y-align-right h6 {
            text-align: right !important;
        }
        body.sb-a11y-align-justify p, body.sb-a11y-align-justify li {
            text-align: justify !important;
        }

        /* ============================================
           READABLE FONT (Dyslexia Friendly)
           ============================================ */
        body.sb-a11y-readable-font,
        body.sb-a11y-readable-font p, body.sb-a11y-readable-font li,
        body.sb-a11y-readable-font span:not(#sb-a11y-widget *),
        body.sb-a11y-readable-font h1, body.sb-a11y-readable-font h2,
        body.sb-a11y-readable-font h3, body.sb-a11y-readable-font h4,
        body.sb-a11y-readable-font h5, body.sb-a11y-readable-font h6,
        body.sb-a11y-readable-font div:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            font-family: Arial, Helvetica, "Trebuchet MS", Verdana, sans-serif !important;
        }

        /* ============================================
           DYSLEXIA-FRIENDLY FONT (OpenDyslexic)
           ============================================ */
        @font-face {
            font-family: 'OpenDyslexic';
            src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-regular.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        body.sb-a11y-dyslexia-font,
        body.sb-a11y-dyslexia-font p, body.sb-a11y-dyslexia-font li,
        body.sb-a11y-dyslexia-font span:not(#sb-a11y-widget *),
        body.sb-a11y-dyslexia-font h1, body.sb-a11y-dyslexia-font h2,
        body.sb-a11y-dyslexia-font h3, body.sb-a11y-dyslexia-font h4,
        body.sb-a11y-dyslexia-font h5, body.sb-a11y-dyslexia-font h6,
        body.sb-a11y-dyslexia-font a:not(#sb-a11y-widget *),
        body.sb-a11y-dyslexia-font button:not(#sb-a11y-widget *),
        body.sb-a11y-dyslexia-font input:not(#sb-a11y-widget *),
        body.sb-a11y-dyslexia-font textarea:not(#sb-a11y-widget *),
        body.sb-a11y-dyslexia-font select:not(#sb-a11y-widget *),
        body.sb-a11y-dyslexia-font div:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            font-family: 'OpenDyslexic', Arial, sans-serif !important;
            word-spacing: 0.16em !important;
        }

        /* ============================================
           READING GUIDE / RULER
           ============================================ */
        .sb-a11y-reading-guide {
            position: fixed !important;
            left: 0 !important;
            width: 100% !important;
            height: 40px !important;
            background: rgba(255, 255, 0, 0.2) !important;
            border-top: 2px solid rgba(0, 0, 0, 0.3) !important;
            border-bottom: 2px solid rgba(0, 0, 0, 0.3) !important;
            pointer-events: none !important;
            z-index: 999998 !important;
            transition: top 0.05s ease-out !important;
        }

        body.sb-a11y-dark-mode .sb-a11y-reading-guide,
        body.sb-a11y-high-contrast .sb-a11y-reading-guide {
            background: rgba(255, 255, 0, 0.15) !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
        }

        /* ============================================
           ENHANCED FOCUS INDICATOR
           ============================================ */
        body.sb-a11y-enhanced-focus *:focus:not(#sb-a11y-widget *) {
            outline: 3px solid #005fcc !important;
            outline-offset: 2px !important;
            box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25) !important;
        }

        body.sb-a11y-enhanced-focus a:focus:not(#sb-a11y-widget *),
        body.sb-a11y-enhanced-focus button:focus:not(#sb-a11y-widget *),
        body.sb-a11y-enhanced-focus input:focus:not(#sb-a11y-widget *),
        body.sb-a11y-enhanced-focus select:focus:not(#sb-a11y-widget *),
        body.sb-a11y-enhanced-focus textarea:focus:not(#sb-a11y-widget *) {
            background-color: rgba(0, 95, 204, 0.1) !important;
        }

        body.sb-a11y-high-contrast.sb-a11y-enhanced-focus *:focus:not(#sb-a11y-widget *) {
            outline-color: #ffff00 !important;
            box-shadow: 0 0 0 6px rgba(255, 255, 0, 0.4) !important;
        }

        /* ============================================
           REDUCED MOTION
           ============================================ */
        body.sb-a11y-reduce-motion *:not(#sb-a11y-widget *),
        body.sb-a11y-reduce-motion *:not(#sb-a11y-widget *)::before,
        body.sb-a11y-reduce-motion *:not(#sb-a11y-widget *)::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }

        /* Also respect prefers-reduced-motion automatically */
        @media (prefers-reduced-motion: reduce) {
            body:not(.sb-a11y-reduce-motion-override) *:not(#sb-a11y-widget *),
            body:not(.sb-a11y-reduce-motion-override) *:not(#sb-a11y-widget *)::before,
            body:not(.sb-a11y-reduce-motion-override) *:not(#sb-a11y-widget *)::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ============================================
           SKIP NAVIGATION LINKS
           ============================================ */
        .sb-a11y-skip-links {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000000;
        }

        .sb-a11y-skip-link {
            position: absolute !important;
            top: -100px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            background: #005fcc !important;
            color: #ffffff !important;
            padding: 12px 24px !important;
            text-decoration: none !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            border-radius: 0 0 8px 8px !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
            transition: top 0.2s ease !important;
            z-index: 1000000 !important;
        }

        .sb-a11y-skip-link:focus {
            top: 0 !important;
            outline: 3px solid #ffff00 !important;
            outline-offset: 2px !important;
        }

        .sb-a11y-skip-link:nth-child(2) {
            left: calc(50% + 180px) !important;
        }

        /* ============================================
           TEXT-TO-SPEECH HIGHLIGHT
           ============================================ */
        .sb-a11y-tts-highlight {
            background-color: rgba(255, 235, 59, 0.4) !important;
            border-radius: 2px !important;
        }

        body.sb-a11y-dark-mode .sb-a11y-tts-highlight,
        body.sb-a11y-high-contrast .sb-a11y-tts-highlight {
            background-color: rgba(255, 235, 59, 0.6) !important;
        }

        /* ============================================
           COLOR SCHEMES - DARK MODE
           ============================================ */
        body.sb-a11y-dark-mode {
            background: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        /* All text elements - comprehensive coverage */
        body.sb-a11y-dark-mode *:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            color: #e0e0e0 !important;
        }

        /* Headings with slightly brighter color for hierarchy */
        body.sb-a11y-dark-mode h1:not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode h2:not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode h3:not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode h4:not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode h5:not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode h6:not(#sb-a11y-widget *) {
            color: #ffffff !important;
        }

        /* Links */
        body.sb-a11y-dark-mode a:not(#sb-a11y-widget *) {
            color: #58a6ff !important;
        }

        /* Main content areas and containers */
        body.sb-a11y-dark-mode main:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode article:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode section:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode div:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode header:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode footer:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode aside:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode nav:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            background-color: #1a1a1a !important;
            background-image: none !important;
            background: #1a1a1a !important;
            border-color: #444 !important;
        }

        /* Override inline styles for elements with style attribute */
        body.sb-a11y-dark-mode [style*="background"]:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode [style*="margin"]:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            background-color: #1a1a1a !important;
            background-image: none !important;
            background: #1a1a1a !important;
        }

        /* Elements that typically have lighter backgrounds */
        body.sb-a11y-dark-mode .card:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode .box:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode .panel:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode .modal:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode [class*="bg-"]:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            background-color: #252525 !important;
            background-image: none !important;
            border-color: #444 !important;
        }

        /* Form elements */
        body.sb-a11y-dark-mode button:not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode input:not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode textarea:not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode select:not(#sb-a11y-widget *) {
            background-color: #2a2a2a !important;
            color: #e0e0e0 !important;
            border-color: #444 !important;
        }

        /* Tables */
        body.sb-a11y-dark-mode table:not(#sb-a11y-widget *) {
            background-color: #1a1a1a !important;
            border-color: #444 !important;
        }

        body.sb-a11y-dark-mode th:not(#sb-a11y-widget *),
        body.sb-a11y-dark-mode td:not(#sb-a11y-widget *) {
            border-color: #444 !important;
        }

        /* ============================================
           COLOR SCHEMES - HIGH CONTRAST
           ============================================ */
        body.sb-a11y-high-contrast {
            background: #000000 !important;
            color: #ffffff !important;
        }

        /* All text elements - comprehensive coverage */
        body.sb-a11y-high-contrast *:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            color: #ffffff !important;
        }

        /* Headings with pure white for maximum contrast */
        body.sb-a11y-high-contrast h1:not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast h2:not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast h3:not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast h4:not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast h5:not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast h6:not(#sb-a11y-widget *) {
            color: #ffffff !important;
        }

        /* Links bright yellow with underline */
        body.sb-a11y-high-contrast a:not(#sb-a11y-widget *) {
            color: #ffff00 !important;
            text-decoration: underline !important;
        }

        /* Main content areas and containers */
        body.sb-a11y-high-contrast main:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast article:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast section:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast div:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast header:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast footer:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast aside:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast nav:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            background-color: #000000 !important;
            background-image: none !important;
            background: #000000 !important;
            border-color: #ffffff !important;
        }

        /* Override inline styles for elements with style attribute */
        body.sb-a11y-high-contrast [style*="background"]:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast [style*="margin"]:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            background-color: #000000 !important;
            background-image: none !important;
            background: #000000 !important;
        }

        /* Elements that typically have lighter backgrounds */
        body.sb-a11y-high-contrast .card:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast .box:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast .panel:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast .modal:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast [class*="bg-"]:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            background-color: #000000 !important;
            background-image: none !important;
            background: #000000 !important;
            border-color: #ffffff !important;
        }

        /* Form elements */
        body.sb-a11y-high-contrast button:not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast input:not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast textarea:not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast select:not(#sb-a11y-widget *) {
            background-color: #000000 !important;
            color: #ffffff !important;
            border: 2px solid #ffffff !important;
        }

        /* Tables */
        body.sb-a11y-high-contrast table:not(#sb-a11y-widget *) {
            background-color: #000000 !important;
            border-color: #ffffff !important;
        }

        body.sb-a11y-high-contrast th:not(#sb-a11y-widget *),
        body.sb-a11y-high-contrast td:not(#sb-a11y-widget *) {
            border-color: #ffffff !important;
            color: #ffffff !important;
        }

        /* ============================================
           COLOR SCHEMES - GRAYSCALE
           ============================================ */
        /* Apply grayscale to content containers only, not body to preserve widget positioning */
        body.sb-a11y-grayscale main,
        body.sb-a11y-grayscale article,
        body.sb-a11y-grayscale section:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-grayscale header:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-grayscale footer:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-grayscale aside:not(#sb-a11y-widget):not(#sb-a11y-widget *),
        body.sb-a11y-grayscale nav:not(#sb-a11y-widget):not(#sb-a11y-widget *) {
            filter: grayscale(100%) !important;
        }

        /* Apply to images and videos directly */
        body.sb-a11y-grayscale img:not(#sb-a11y-widget img),
        body.sb-a11y-grayscale video:not(#sb-a11y-widget video) {
            filter: grayscale(100%) !important;
        }

        /* ============================================
           LINK ENHANCEMENT
           ============================================ */
        body.sb-a11y-underline-links a:not(#sb-a11y-widget *) {
            text-decoration: underline !important;
        }

        body.sb-a11y-highlight-links a:not(#sb-a11y-widget *):hover,
        body.sb-a11y-highlight-links a:not(#sb-a11y-widget *):focus {
            background-color: #ffff00 !important;
            color: #000000 !important;
            outline: 3px solid #000000 !important;
            outline-offset: 2px !important;
            padding: 2px 4px !important;
        }

        /* ============================================
           CURSOR SIZE
           ============================================ */
        body.sb-a11y-cursor-large,
        body.sb-a11y-cursor-large * {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="black" stroke="white" stroke-width="1" d="M2,2 L2,28 L12,20 L18,30 L22,28 L16,18 L28,18 Z"/></svg>') 0 0, auto !important;
        }
        body.sb-a11y-cursor-xlarge,
        body.sb-a11y-cursor-xlarge * {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="white" stroke-width="2" d="M3,3 L3,42 L18,30 L27,45 L33,42 L24,27 L42,27 Z"/></svg>') 0 0, auto !important;
        }

        /* ============================================
           HIDE IMAGES (Text-only mode)
           ============================================ */
        body.sb-a11y-hide-images img:not(#sb-a11y-widget img),
        body.sb-a11y-hide-images picture:not(#sb-a11y-widget picture),
        body.sb-a11y-hide-images video:not(#sb-a11y-widget video),
        body.sb-a11y-hide-images svg:not(#sb-a11y-widget svg):not([class*="icon"]) {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

        /* Keep widget visible and functional */
        body.sb-a11y-hide-images #sb-a11y-widget,
        body.sb-a11y-hide-images #sb-a11y-widget *,
        body.sb-a11y-hide-images #sb-a11y-widget svg,
        body.sb-a11y-hide-images #sb-a11y-widget img {
            visibility: visible !important;
            opacity: 1 !important;
        }

        body.sb-a11y-hide-images #sb-a11y-widget {
            display: block !important;
        }

        body.sb-a11y-hide-images #sb-a11y-toggle-btn {
            display: flex !important;
        }

        body.sb-a11y-hide-images .sb-a11y-controls {
            display: flex !important;
        }

        body.sb-a11y-hide-images .sb-a11y-panel-header {
            display: flex !important;
        }

        /* Keep icons visible (they're usually functional, not decorative) */
        body.sb-a11y-hide-images svg[class*="icon"],
        body.sb-a11y-hide-images .icon,
        body.sb-a11y-hide-images [class*="icon-"] {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        </style>
        <?php
    }

    public function render_widget() {
        $settings = $this->get_settings();

        // Check if widget should be displayed
        $enabled = isset($settings['enabled']) ? $settings['enabled'] : 'yes';
        if ($enabled !== 'yes') {
            return;
        }

        // Get settings with validation
        $position = isset($settings['position']) ? $this->validate_position($settings['position']) : 'bottom-right';
        $button_text = isset($settings['button_text']) ? sanitize_text_field($settings['button_text']) : __('Accessibility', 'wpswitchboard');
        $widget_title = isset($settings['widget_title']) ? sanitize_text_field($settings['widget_title']) : __('Accessibility Options', 'wpswitchboard');
        $primary_color = isset($settings['primary_color']) ? $this->sanitize_color($settings['primary_color']) : '#3b82f6';

        // Determine position classes
        $position_styles = '';
        switch ($position) {
            case 'bottom-left':
                $position_styles = 'bottom: 20px; left: 20px;';
                break;
            case 'top-right':
                $position_styles = 'top: 20px; right: 20px;';
                break;
            case 'top-left':
                $position_styles = 'top: 20px; left: 20px;';
                break;
            case 'bottom-right':
            default:
                $position_styles = 'bottom: 20px; right: 20px;';
                break;
        }

        ?>
        <style>
        /* Accessibility Widget Styles - Override any accessibility transformations */
        #sb-a11y-widget {
            position: fixed !important;
            <?php echo esc_attr($position_styles); ?>
            z-index: 999999 !important;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
            font-size: 16px !important;
            line-height: 1.5 !important;
            letter-spacing: normal !important;
            text-align: left !important;
        }

        #sb-a11y-widget * {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        }

        #sb-a11y-toggle-btn {
            background: <?php echo $primary_color; ?> !important;
            color: white !important;
            border: none !important;
            padding: 12px 20px !important;
            border-radius: 50px !important;
            cursor: pointer !important;
            font-size: 16px !important;
            font-weight: 600 !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            transition: all 0.3s ease !important;
        }

        #sb-a11y-toggle-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.2);
        }

        #sb-a11y-toggle-btn svg {
            width: 20px;
            height: 20px;
        }

        #sb-a11y-panel {
            position: absolute !important;
            <?php echo (strpos($position, 'bottom') !== false) ? 'bottom: 60px !important;' : 'top: 60px !important;'; ?>
            <?php echo (strpos($position, 'right') !== false) ? 'right: 0 !important;' : 'left: 0 !important;'; ?>
            background: white !important;
            border-radius: 8px !important;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
            width: 520px !important;
            max-width: calc(100vw - 40px) !important;
            max-height: calc(100vh - 100px) !important;
            overflow-y: auto !important;
            display: none;
            border: 1px solid #ddd !important;
        }

        #sb-a11y-panel.active {
            display: block !important;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .sb-a11y-panel-header {
            padding: 10px 14px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f8f8;
            color: #333;
            border-radius: 8px 8px 0 0;
        }

        .sb-a11y-panel-header h3 {
            margin: 0;
            font-size: 13px;
            font-weight: 600;
            color: #555;
        }

        .sb-a11y-close-btn {
            background: transparent;
            border: none;
            color: #999;
            font-size: 18px;
            cursor: pointer;
            width: 24px;
            height: 24px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transition: all 0.2s;
        }

        .sb-a11y-close-btn:hover {
            background: #e5e5e5;
            color: #333;
        }

        .sb-a11y-panel-content {
            padding: 12px;
        }

        .sb-a11y-section {
            margin-bottom: 10px;
        }

        .sb-a11y-section:last-child {
            margin-bottom: 0;
        }

        .sb-a11y-section-title {
            font-size: 10px;
            font-weight: 600;
            color: #aaa;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sb-a11y-section-reset {
            font-size: 9px;
            color: #999;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 2px 5px;
            border-radius: 3px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.15s;
        }

        .sb-a11y-section-reset:hover {
            background: #f0f0f0;
            color: #666;
        }

        .sb-a11y-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .sb-a11y-btn {
            background: #fff !important;
            border: 1px solid #ddd !important;
            padding: 5px 10px !important;
            border-radius: 4px !important;
            cursor: pointer !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            text-align: center !important;
            transition: all 0.15s !important;
            color: #666 !important;
            flex: 0 0 auto !important;
            white-space: nowrap !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 1.2 !important;
            gap: 3px;
        }

        .sb-a11y-btn:hover {
            background: #f8f8f8 !important;
            border-color: #bbb !important;
            color: #333 !important;
        }

        .sb-a11y-btn.active {
            background: <?php echo $primary_color; ?> !important;
            color: #fff !important;
            border-color: <?php echo $primary_color; ?> !important;
        }

        .sb-a11y-btn svg {
            width: 20px;
            height: 20px;
        }

        .sb-a11y-reset-btn {
            background: #fff;
            color: #666;
            border: 1px solid #ddd;
            padding: 6px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            width: 100%;
            margin-top: 6px;
            transition: all 0.15s;
        }

        .sb-a11y-reset-btn:hover {
            background: #f8f8f8;
            border-color: #bbb;
            color: #333;
        }

        .sb-a11y-divider {
            height: 1px;
            background: #e5e5e5;
            margin: 8px 0;
        }

        @media (max-width: 560px) {
            #sb-a11y-panel {
                width: calc(100vw - 40px) !important;
            }

            .sb-a11y-btn {
                padding: 6px 8px !important;
                font-size: 11px !important;
            }
        }

        /* ============================================
           CUSTOM CSS - User Defined Styles
           ============================================ */
        <?php
        $custom_css = isset($settings['custom_css']) ? $settings['custom_css'] : '';
        if (!empty($custom_css)) {
            // Output custom CSS - already sanitized on save
            echo wp_strip_all_tags($custom_css);
        }
        ?>
        </style>

        <div id="sb-a11y-widget">
            <button id="sb-a11y-toggle-btn" aria-label="<?php echo esc_attr($button_text); ?>">
                <svg viewBox="0 0 16 16" fill="currentColor">
                    <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M9.25 3.75a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0M12 8H9.419l1.786 5H9.08L8 9.973 6.919 13H4.795l1.786-5H4V6h8z" clip-rule="evenodd"/>
                </svg>
                <span><?php echo esc_html($button_text); ?></span>
            </button>

            <div id="sb-a11y-panel">
                <div class="sb-a11y-panel-header">
                    <h3><?php echo esc_html($widget_title); ?></h3>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <button class="sb-a11y-reset-btn" style="width: auto; margin: 0; padding: 4px 8px; font-size: 10px;"><?php esc_html_e('Reset All', 'wpswitchboard'); ?></button>
                        <button class="sb-a11y-close-btn" aria-label="Close">&times;</button>
                    </div>
                </div>

                <div class="sb-a11y-panel-content">
                    <!-- Quick Presets -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Quick Presets', 'wpswitchboard'); ?></span>
                        </div>
                        <div class="sb-a11y-controls">
                            <button class="sb-a11y-btn sb-a11y-preset-btn" data-preset="dyslexia">
                                <?php esc_html_e('Dyslexia Friendly', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn sb-a11y-preset-btn" data-preset="lowVision">
                                <?php esc_html_e('Low Vision', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn sb-a11y-preset-btn" data-preset="reduceDistractions">
                                <?php esc_html_e('Reduce Distractions', 'wpswitchboard'); ?>
                            </button>
                        </div>
                    </div>

                    <div class="sb-a11y-divider"></div>

                    <!-- Font Size -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Font Size', 'wpswitchboard'); ?></span>
                            <button class="sb-a11y-section-reset" data-reset="fontSize"><?php esc_html_e('Reset', 'wpswitchboard'); ?></button>
                        </div>
                        <div class="sb-a11y-controls">
                            <button class="sb-a11y-btn" data-setting="fontSize" data-value="small"><?php esc_html_e('Small', 'wpswitchboard'); ?></button>
                            <button class="sb-a11y-btn active" data-setting="fontSize" data-value="normal"><?php esc_html_e('Normal', 'wpswitchboard'); ?></button>
                            <button class="sb-a11y-btn" data-setting="fontSize" data-value="large"><?php esc_html_e('Large', 'wpswitchboard'); ?></button>
                            <button class="sb-a11y-btn" data-setting="fontSize" data-value="xlarge"><?php esc_html_e('X-Large', 'wpswitchboard'); ?></button>
                        </div>
                    </div>

                    <div class="sb-a11y-divider"></div>

                    <!-- Line Height -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Line Height', 'wpswitchboard'); ?></span>
                            <button class="sb-a11y-section-reset" data-reset="lineHeight"><?php esc_html_e('Reset', 'wpswitchboard'); ?></button>
                        </div>
                        <div class="sb-a11y-controls">
                            <button class="sb-a11y-btn active" data-setting="lineHeight" data-value="normal">
                                <?php esc_html_e('Normal', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="lineHeight" data-value="medium">
                                <?php esc_html_e('Medium', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="lineHeight" data-value="large">
                                <?php esc_html_e('Large', 'wpswitchboard'); ?>
                            </button>
                        </div>
                    </div>

                    <div class="sb-a11y-divider"></div>

                    <!-- Letter Spacing -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Letter Spacing', 'wpswitchboard'); ?></span>
                            <button class="sb-a11y-section-reset" data-reset="letterSpacing"><?php esc_html_e('Reset', 'wpswitchboard'); ?></button>
                        </div>
                        <div class="sb-a11y-controls">
                            <button class="sb-a11y-btn active" data-setting="letterSpacing" data-value="normal">
                                <?php esc_html_e('Normal', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="letterSpacing" data-value="wide">
                                <?php esc_html_e('Wide', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="letterSpacing" data-value="wider">
                                <?php esc_html_e('Wider', 'wpswitchboard'); ?>
                            </button>
                        </div>
                    </div>

                    <div class="sb-a11y-divider"></div>

                    <!-- Color Schemes -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Color Schemes', 'wpswitchboard'); ?></span>
                            <button class="sb-a11y-section-reset" data-reset="colorScheme"><?php esc_html_e('Reset', 'wpswitchboard'); ?></button>
                        </div>
                        <div class="sb-a11y-controls">
                            <button class="sb-a11y-btn active" data-setting="colorScheme" data-value="normal">
                                <?php esc_html_e('Normal', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="colorScheme" data-value="dark">
                                <?php esc_html_e('Dark Mode', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="colorScheme" data-value="contrast">
                                <?php esc_html_e('High Contrast', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="colorScheme" data-value="grayscale">
                                <?php esc_html_e('Grayscale', 'wpswitchboard'); ?>
                            </button>
                        </div>
                    </div>

                    <div class="sb-a11y-divider"></div>

                    <!-- Text Alignment -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Text Alignment', 'wpswitchboard'); ?></span>
                            <button class="sb-a11y-section-reset" data-reset="textAlign"><?php esc_html_e('Reset', 'wpswitchboard'); ?></button>
                        </div>
                        <div class="sb-a11y-controls">
                            <button class="sb-a11y-btn" data-setting="textAlign" data-value="left">
                                <?php esc_html_e('Left', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="textAlign" data-value="center">
                                <?php esc_html_e('Center', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="textAlign" data-value="right">
                                <?php esc_html_e('Right', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="textAlign" data-value="justify">
                                <?php esc_html_e('Justify', 'wpswitchboard'); ?>
                            </button>
                        </div>
                    </div>

                    <div class="sb-a11y-divider"></div>

                    <!-- Additional Options -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Options', 'wpswitchboard'); ?></span>
                            <button class="sb-a11y-section-reset" data-reset="additionalOptions"><?php esc_html_e('Reset', 'wpswitchboard'); ?></button>
                        </div>
                        <div class="sb-a11y-controls">
                            <button class="sb-a11y-btn" data-setting="readableFont" data-value="toggle"><?php esc_html_e('Readable', 'wpswitchboard'); ?></button>
                            <button class="sb-a11y-btn" data-setting="dyslexiaFont" data-value="toggle"><?php esc_html_e('Dyslexia', 'wpswitchboard'); ?></button>
                            <button class="sb-a11y-btn" data-setting="underlineLinks" data-value="toggle"><?php esc_html_e('Underline', 'wpswitchboard'); ?></button>
                            <button class="sb-a11y-btn" data-setting="highlightLinks" data-value="toggle"><?php esc_html_e('Highlight', 'wpswitchboard'); ?></button>
                            <button class="sb-a11y-btn" data-setting="hideImages" data-value="toggle"><?php esc_html_e('Hide Images', 'wpswitchboard'); ?></button>
                        </div>
                    </div>

                    <div class="sb-a11y-divider"></div>

                    <!-- Reading & Focus Tools -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Reading & Focus', 'wpswitchboard'); ?></span>
                            <button class="sb-a11y-section-reset" data-reset="readingFocus"><?php esc_html_e('Reset', 'wpswitchboard'); ?></button>
                        </div>
                        <div class="sb-a11y-controls">
                            <button class="sb-a11y-btn" data-setting="readingGuide" data-value="toggle">
                                <?php esc_html_e('Reading Guide', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="enhancedFocus" data-value="toggle">
                                <?php esc_html_e('Enhanced Focus', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="reduceMotion" data-value="toggle">
                                <?php esc_html_e('Reduce Motion', 'wpswitchboard'); ?>
                            </button>
                        </div>
                    </div>

                    <div class="sb-a11y-divider"></div>

                    <!-- Text to Speech -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Read Aloud', 'wpswitchboard'); ?></span>
                            <button class="sb-a11y-section-reset" data-reset="textToSpeech"><?php esc_html_e('Stop', 'wpswitchboard'); ?></button>
                        </div>
                        <div class="sb-a11y-controls" style="align-items: center;">
                            <button class="sb-a11y-btn" id="sb-a11y-tts-play" data-setting="ttsPlay" data-value="toggle">
                                <span class="sb-a11y-tts-play-icon">▶</span>
                                <span class="sb-a11y-tts-pause-icon" style="display:none;">⏸</span>
                                <span class="sb-a11y-tts-play-text"><?php esc_html_e('Play', 'wpswitchboard'); ?></span>
                                <span class="sb-a11y-tts-pause-text" style="display:none;"><?php esc_html_e('Pause', 'wpswitchboard'); ?></span>
                            </button>
                            <button class="sb-a11y-btn" id="sb-a11y-tts-stop" data-setting="ttsStop"><?php esc_html_e('Stop', 'wpswitchboard'); ?></button>
                            <span style="font-size: 10px; color: #999; margin-left: 8px;"><?php esc_html_e('Speed:', 'wpswitchboard'); ?></span>
                            <input type="range" id="sb-a11y-tts-speed" min="0.5" max="2" step="0.25" value="1" style="width: 80px; cursor: pointer;">
                            <span id="sb-a11y-tts-speed-value" style="font-size: 10px; color: #666; min-width: 20px;">1x</span>
                        </div>
                    </div>

                    <div class="sb-a11y-divider"></div>

                    <!-- Cursor Size -->
                    <div class="sb-a11y-section">
                        <div class="sb-a11y-section-title">
                            <span><?php esc_html_e('Cursor Size', 'wpswitchboard'); ?></span>
                            <button class="sb-a11y-section-reset" data-reset="cursorSize"><?php esc_html_e('Reset', 'wpswitchboard'); ?></button>
                        </div>
                        <div class="sb-a11y-controls">
                            <button class="sb-a11y-btn active" data-setting="cursorSize" data-value="normal">
                                <?php esc_html_e('Normal', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="cursorSize" data-value="large">
                                <?php esc_html_e('Large', 'wpswitchboard'); ?>
                            </button>
                            <button class="sb-a11y-btn" data-setting="cursorSize" data-value="xlarge">
                                <?php esc_html_e('X-Large', 'wpswitchboard'); ?>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
        (function() {
            'use strict';

            // Accessibility Widget Controller
            const A11yWidget = {
                settings: {
                    fontSize: 'normal',
                    lineHeight: 'normal',
                    letterSpacing: 'normal',
                    colorScheme: 'normal',
                    textAlign: null,
                    readableFont: false,
                    dyslexiaFont: false,
                    underlineLinks: false,
                    highlightLinks: false,
                    hideImages: false,
                    cursorSize: 'normal',
                    readingGuide: false,
                    enhancedFocus: false,
                    reduceMotion: false,
                    ttsSpeed: 1
                },

                // Text-to-Speech state
                tts: {
                    utterance: null,
                    isPlaying: false,
                    isPaused: false
                },

                // Reading guide element
                readingGuideEl: null,
                readingGuideHandler: null,

                init: function() {
                    this.loadSettings();
                    this.bindEvents();
                    this.applySettings();
                    this.initSkipLinks();
                    this.initTTS();
                    this.checkReducedMotionPreference();
                },

                loadSettings: function() {
                    try {
                        const saved = localStorage.getItem('sb_a11y_settings');
                        if (saved) {
                            const parsed = JSON.parse(saved);

                            // Security: Validate all settings against allowed values
                            const validSettings = {
                                fontSize: ['small', 'normal', 'large', 'xlarge'],
                                lineHeight: ['normal', 'medium', 'large'],
                                letterSpacing: ['normal', 'wide', 'wider'],
                                colorScheme: ['normal', 'dark', 'contrast', 'grayscale'],
                                textAlign: [null, 'left', 'center', 'right', 'justify'],
                                cursorSize: ['normal', 'large', 'xlarge']
                            };

                            // Boolean settings whitelist
                            const booleanSettings = [
                                'readableFont', 'dyslexiaFont', 'underlineLinks', 'highlightLinks',
                                'hideImages', 'readingGuide', 'enhancedFocus', 'reduceMotion'
                            ];

                            // Only accept validated values
                            for (const [key, value] of Object.entries(parsed)) {
                                if (validSettings[key] && validSettings[key].includes(value)) {
                                    this.settings[key] = value;
                                } else if (typeof value === 'boolean' && booleanSettings.includes(key)) {
                                    this.settings[key] = value;
                                } else if (key === 'ttsSpeed' && typeof value === 'number' && value >= 0.5 && value <= 2) {
                                    this.settings[key] = value;
                                }
                            }
                        }
                    } catch (e) {
                        // Reset to defaults on error - don't log sensitive info
                        this.resetSettingsToDefaults();
                    }
                },

                resetSettingsToDefaults: function() {
                    this.settings = {
                        fontSize: 'normal',
                        lineHeight: 'normal',
                        letterSpacing: 'normal',
                        colorScheme: 'normal',
                        textAlign: null,
                        readableFont: false,
                        dyslexiaFont: false,
                        underlineLinks: false,
                        highlightLinks: false,
                        hideImages: false,
                        cursorSize: 'normal',
                        readingGuide: false,
                        enhancedFocus: false,
                        reduceMotion: false,
                        ttsSpeed: 1
                    };
                },

                saveSettings: function() {
                    try {
                        localStorage.setItem('sb_a11y_settings', JSON.stringify(this.settings));
                    } catch (e) {
                        console.error('Error saving accessibility settings:', e);
                    }
                },

                bindEvents: function() {
                    const self = this;
                    const toggleBtn = document.getElementById('sb-a11y-toggle-btn');
                    const panel = document.getElementById('sb-a11y-panel');
                    const closeBtn = document.querySelector('.sb-a11y-close-btn');
                    const resetBtn = document.querySelector('.sb-a11y-reset-btn');
                    const allBtns = document.querySelectorAll('.sb-a11y-btn:not(.sb-a11y-preset-btn):not(#sb-a11y-tts-play):not(#sb-a11y-tts-stop)');

                    // Toggle panel
                    toggleBtn.addEventListener('click', () => {
                        panel.classList.toggle('active');
                    });

                    // Close panel
                    closeBtn.addEventListener('click', () => {
                        panel.classList.remove('active');
                    });

                    // Close on outside click
                    document.addEventListener('click', (e) => {
                        if (!document.getElementById('sb-a11y-widget').contains(e.target)) {
                            panel.classList.remove('active');
                        }
                    });

                    // Setting buttons
                    allBtns.forEach(btn => {
                        btn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            const setting = btn.dataset.setting;
                            const value = btn.dataset.value;

                            if (value === 'toggle') {
                                // Toggle boolean settings
                                self.settings[setting] = !self.settings[setting];
                                btn.classList.toggle('active');
                            } else {
                                // Radio-style settings
                                const siblings = btn.parentElement.querySelectorAll('.sb-a11y-btn');
                                siblings.forEach(s => s.classList.remove('active'));
                                btn.classList.add('active');
                                self.settings[setting] = value;
                            }

                            self.applySettings();
                            self.saveSettings();
                        });
                    });

                    // Preset buttons
                    const presetBtns = document.querySelectorAll('.sb-a11y-preset-btn');
                    presetBtns.forEach(btn => {
                        btn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            const preset = btn.dataset.preset;
                            self.applyPreset(preset);
                        });
                    });

                    // Reset button
                    resetBtn.addEventListener('click', () => {
                        self.resetSettings();
                    });

                    // Section reset buttons
                    const sectionResetBtns = document.querySelectorAll('.sb-a11y-section-reset');
                    sectionResetBtns.forEach(btn => {
                        btn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            const setting = btn.dataset.reset;

                            // Reset to default value
                            if (setting === 'additionalOptions') {
                                self.settings.readableFont = false;
                                self.settings.dyslexiaFont = false;
                                self.settings.underlineLinks = false;
                                self.settings.highlightLinks = false;
                                self.settings.hideImages = false;
                                self.applySettings();
                                self.saveSettings();
                            } else if (setting === 'readingFocus') {
                                self.settings.readingGuide = false;
                                self.settings.enhancedFocus = false;
                                self.settings.reduceMotion = false;
                                self.toggleReadingGuide();
                                self.applySettings();
                                self.saveSettings();
                            } else if (setting === 'textToSpeech') {
                                self.stopTTS();
                            } else {
                                const defaults = {
                                    fontSize: 'normal',
                                    lineHeight: 'normal',
                                    letterSpacing: 'normal',
                                    colorScheme: 'normal',
                                    textAlign: null,
                                    cursorSize: 'normal'
                                };

                                if (defaults.hasOwnProperty(setting)) {
                                    self.settings[setting] = defaults[setting];
                                    self.applySettings();
                                    self.saveSettings();
                                }
                            }
                        });
                    });

                    // Keyboard accessibility
                    document.addEventListener('keydown', (e) => {
                        if (e.key === 'Escape' && panel.classList.contains('active')) {
                            panel.classList.remove('active');
                        }
                    });
                },

                applyPreset: function(preset) {
                    // Stop TTS if playing
                    this.stopTTS();

                    // Disable reading guide before resetting (clean up event listener)
                    if (this.settings.readingGuide) {
                        this.settings.readingGuide = false;
                        this.toggleReadingGuide();
                    }

                    // Reset all settings to defaults
                    this.resetSettingsToDefaults();

                    switch (preset) {
                        case 'dyslexia':
                            this.settings.dyslexiaFont = true;
                            this.settings.lineHeight = 'large';
                            this.settings.letterSpacing = 'wide';
                            break;
                        case 'lowVision':
                            this.settings.fontSize = 'xlarge';
                            this.settings.colorScheme = 'contrast';
                            this.settings.enhancedFocus = true;
                            break;
                        case 'reduceDistractions':
                            this.settings.hideImages = true;
                            this.settings.colorScheme = 'grayscale';
                            this.settings.reduceMotion = true;
                            break;
                    }

                    this.applySettings();
                    this.saveSettings();
                    this.updateButtonStates();
                },

                applySettings: function() {
                    const body = document.body;

                    // Remove all accessibility classes
                    const classes = body.className.split(' ').filter(c => !c.startsWith('sb-a11y-'));
                    body.className = classes.join(' ');

                    // Apply font size (only if not default 'normal')
                    if (this.settings.fontSize && this.settings.fontSize !== 'normal') {
                        body.classList.add('sb-a11y-font-' + this.settings.fontSize);
                    }

                    // Apply line height (only if not default 'normal')
                    if (this.settings.lineHeight && this.settings.lineHeight !== 'normal') {
                        body.classList.add('sb-a11y-line-height-' + this.settings.lineHeight);
                    }

                    // Apply letter spacing (only if not default 'normal')
                    if (this.settings.letterSpacing && this.settings.letterSpacing !== 'normal') {
                        body.classList.add('sb-a11y-letter-spacing-' + this.settings.letterSpacing);
                    }

                    // Apply color scheme (only if not default 'normal')
                    if (this.settings.colorScheme && this.settings.colorScheme !== 'normal') {
                        if (this.settings.colorScheme === 'dark') {
                            body.classList.add('sb-a11y-dark-mode');
                            this.removeInlineBackgrounds();
                        } else if (this.settings.colorScheme === 'contrast') {
                            body.classList.add('sb-a11y-high-contrast');
                            this.removeInlineBackgrounds();
                        } else if (this.settings.colorScheme === 'grayscale') {
                            body.classList.add('sb-a11y-grayscale');
                        }
                    }

                    // Apply text alignment
                    if (this.settings.textAlign) {
                        body.classList.add('sb-a11y-align-' + this.settings.textAlign);
                    }

                    // Apply readable font
                    if (this.settings.readableFont) {
                        body.classList.add('sb-a11y-readable-font');
                    }

                    // Apply dyslexia font
                    if (this.settings.dyslexiaFont) {
                        body.classList.add('sb-a11y-dyslexia-font');
                    }

                    // Apply link styles
                    if (this.settings.underlineLinks) {
                        body.classList.add('sb-a11y-underline-links');
                    }
                    if (this.settings.highlightLinks) {
                        body.classList.add('sb-a11y-highlight-links');
                    }

                    // Apply hide images
                    if (this.settings.hideImages) {
                        body.classList.add('sb-a11y-hide-images');
                    }

                    // Apply cursor size
                    if (this.settings.cursorSize && this.settings.cursorSize !== 'normal') {
                        body.classList.add('sb-a11y-cursor-' + this.settings.cursorSize);
                    }

                    // Apply enhanced focus
                    if (this.settings.enhancedFocus) {
                        body.classList.add('sb-a11y-enhanced-focus');
                    }

                    // Apply reduce motion
                    if (this.settings.reduceMotion) {
                        body.classList.add('sb-a11y-reduce-motion');
                        this.pauseAnimations();
                    }

                    // Apply reading guide
                    this.toggleReadingGuide();

                    // Update button states
                    this.updateButtonStates();
                },

                updateButtonStates: function() {
                    document.querySelectorAll('.sb-a11y-btn:not(.sb-a11y-preset-btn):not(#sb-a11y-tts-play):not(#sb-a11y-tts-stop)').forEach(btn => {
                        const setting = btn.dataset.setting;
                        const value = btn.dataset.value;

                        if (value === 'toggle') {
                            if (this.settings[setting]) {
                                btn.classList.add('active');
                            } else {
                                btn.classList.remove('active');
                            }
                        } else {
                            if (this.settings[setting] === value) {
                                btn.classList.add('active');
                            } else {
                                btn.classList.remove('active');
                            }
                        }
                    });
                },

                removeInlineBackgrounds: function() {
                    const elementsWithBg = document.querySelectorAll('[style*="background"]:not(#sb-a11y-widget):not(#sb-a11y-widget *)');

                    elementsWithBg.forEach(el => {
                        if (!el.hasAttribute('data-original-inline-style')) {
                            el.setAttribute('data-original-inline-style', el.getAttribute('style') || '');
                        }

                        const style = el.style;
                        style.removeProperty('background');
                        style.removeProperty('background-color');
                        style.removeProperty('background-image');
                        style.removeProperty('background-gradient');
                    });
                },

                // Reading Guide functionality
                toggleReadingGuide: function() {
                    if (this.settings.readingGuide) {
                        if (!this.readingGuideEl) {
                            this.readingGuideEl = document.createElement('div');
                            this.readingGuideEl.className = 'sb-a11y-reading-guide';
                            this.readingGuideEl.style.display = 'none';
                            document.body.appendChild(this.readingGuideEl);
                        }

                        // Add event listener if not already added
                        if (!this.readingGuideHandler) {
                            this.readingGuideHandler = this.moveReadingGuide.bind(this);
                            document.addEventListener('mousemove', this.readingGuideHandler);
                        }

                        this.readingGuideEl.style.display = 'block';
                    } else {
                        if (this.readingGuideEl) {
                            this.readingGuideEl.style.display = 'none';
                        }
                        // Remove event listener when disabled to save resources
                        if (this.readingGuideHandler) {
                            document.removeEventListener('mousemove', this.readingGuideHandler);
                            this.readingGuideHandler = null;
                        }
                    }
                },

                moveReadingGuide: function(e) {
                    if (this.readingGuideEl && this.settings.readingGuide) {
                        this.readingGuideEl.style.top = (e.clientY - 20) + 'px';
                    }
                },

                // Skip links initialization
                initSkipLinks: function() {
                    // Check if skip links already exist
                    if (document.querySelector('.sb-a11y-skip-links')) {
                        return;
                    }

                    const skipLinksContainer = document.createElement('div');
                    skipLinksContainer.className = 'sb-a11y-skip-links';

                    // Skip to main content
                    const mainContent = document.querySelector('main, #main, #content, [role="main"], .main-content');
                    if (mainContent) {
                        if (!mainContent.id) {
                            mainContent.id = 'sb-a11y-main-content';
                        }
                        const skipToMain = document.createElement('a');
                        skipToMain.href = '#' + mainContent.id;
                        skipToMain.className = 'sb-a11y-skip-link';
                        skipToMain.textContent = 'Skip to main content';
                        skipLinksContainer.appendChild(skipToMain);
                    }

                    // Skip to navigation
                    const nav = document.querySelector('nav, #navigation, .navigation, .main-navigation, [role="navigation"]');
                    if (nav) {
                        if (!nav.id) {
                            nav.id = 'sb-a11y-navigation';
                        }
                        const skipToNav = document.createElement('a');
                        skipToNav.href = '#' + nav.id;
                        skipToNav.className = 'sb-a11y-skip-link';
                        skipToNav.textContent = 'Skip to navigation';
                        skipLinksContainer.appendChild(skipToNav);
                    }

                    if (skipLinksContainer.children.length > 0) {
                        document.body.insertBefore(skipLinksContainer, document.body.firstChild);
                    }
                },

                // Text-to-Speech functionality
                initTTS: function() {
                    const self = this;
                    const playBtn = document.getElementById('sb-a11y-tts-play');
                    const stopBtn = document.getElementById('sb-a11y-tts-stop');
                    const speedSlider = document.getElementById('sb-a11y-tts-speed');
                    const speedValue = document.getElementById('sb-a11y-tts-speed-value');

                    if (!window.speechSynthesis) {
                        // Hide TTS section if not supported
                        if (playBtn) {
                            playBtn.closest('.sb-a11y-section').style.display = 'none';
                        }
                        return;
                    }

                    // Set initial speed from settings
                    if (speedSlider && speedValue) {
                        speedSlider.value = this.settings.ttsSpeed;
                        speedValue.textContent = this.settings.ttsSpeed + 'x';
                    }

                    // Play/Pause button
                    if (playBtn) {
                        playBtn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            if (self.tts.isPlaying && !self.tts.isPaused) {
                                self.pauseTTS();
                            } else if (self.tts.isPaused) {
                                self.resumeTTS();
                            } else {
                                self.startTTS();
                            }
                        });
                    }

                    // Stop button
                    if (stopBtn) {
                        stopBtn.addEventListener('click', (e) => {
                            e.stopPropagation();
                            self.stopTTS();
                        });
                    }

                    // Speed slider
                    if (speedSlider && speedValue) {
                        speedSlider.addEventListener('input', function() {
                            self.settings.ttsSpeed = parseFloat(this.value);
                            speedValue.textContent = self.settings.ttsSpeed + 'x';
                            self.saveSettings();

                            // Note: Web Speech API doesn't support changing rate mid-playback
                            // The new rate will be applied when speech is restarted
                        });
                    }

                    // Stop TTS when navigating away
                    window.addEventListener('beforeunload', () => {
                        self.stopTTS();
                    });
                },

                getPageText: function() {
                    // Get main content area text
                    const mainContent = document.querySelector('main, #main, #content, [role="main"], .main-content, article');
                    const contentElement = mainContent || document.body;

                    // Clone to avoid modifying the DOM
                    const clone = contentElement.cloneNode(true);

                    // Remove scripts, styles, and the accessibility widget
                    const removeElements = clone.querySelectorAll('script, style, noscript, #sb-a11y-widget, nav, header, footer, aside, .sidebar');
                    removeElements.forEach(el => el.remove());

                    // Get text content
                    return clone.textContent.replace(/\s+/g, ' ').trim();
                },

                startTTS: function() {
                    if (!window.speechSynthesis) return;

                    const text = this.getPageText();
                    if (!text) return;

                    // Cancel any existing speech
                    window.speechSynthesis.cancel();

                    this.tts.utterance = new SpeechSynthesisUtterance(text);
                    this.tts.utterance.rate = this.settings.ttsSpeed;
                    this.tts.utterance.lang = document.documentElement.lang || 'en-US';

                    const self = this;

                    this.tts.utterance.onstart = function() {
                        self.tts.isPlaying = true;
                        self.tts.isPaused = false;
                        self.updateTTSButton();
                    };

                    this.tts.utterance.onend = function() {
                        self.tts.isPlaying = false;
                        self.tts.isPaused = false;
                        self.updateTTSButton();
                    };

                    this.tts.utterance.onerror = function() {
                        self.tts.isPlaying = false;
                        self.tts.isPaused = false;
                        self.updateTTSButton();
                    };

                    window.speechSynthesis.speak(this.tts.utterance);
                },

                pauseTTS: function() {
                    if (window.speechSynthesis && this.tts.isPlaying) {
                        window.speechSynthesis.pause();
                        this.tts.isPaused = true;
                        this.updateTTSButton();
                    }
                },

                resumeTTS: function() {
                    if (window.speechSynthesis && this.tts.isPaused) {
                        window.speechSynthesis.resume();
                        this.tts.isPaused = false;
                        this.updateTTSButton();
                    }
                },

                stopTTS: function() {
                    if (window.speechSynthesis) {
                        window.speechSynthesis.cancel();
                        this.tts.isPlaying = false;
                        this.tts.isPaused = false;
                        this.tts.utterance = null;
                        this.updateTTSButton();
                    }
                },

                updateTTSButton: function() {
                    const playBtn = document.getElementById('sb-a11y-tts-play');
                    if (!playBtn) return;

                    const playIcon = playBtn.querySelector('.sb-a11y-tts-play-icon');
                    const pauseIcon = playBtn.querySelector('.sb-a11y-tts-pause-icon');
                    const playText = playBtn.querySelector('.sb-a11y-tts-play-text');
                    const pauseText = playBtn.querySelector('.sb-a11y-tts-pause-text');

                    if (this.tts.isPlaying && !this.tts.isPaused) {
                        // Show pause state
                        playBtn.classList.add('active');
                        if (playIcon) playIcon.style.display = 'none';
                        if (pauseIcon) pauseIcon.style.display = 'inline';
                        if (playText) playText.style.display = 'none';
                        if (pauseText) pauseText.style.display = 'inline';
                    } else {
                        // Show play state
                        playBtn.classList.remove('active');
                        if (playIcon) playIcon.style.display = 'inline';
                        if (pauseIcon) pauseIcon.style.display = 'none';
                        if (playText) playText.style.display = 'inline';
                        if (pauseText) pauseText.style.display = 'none';
                    }
                },

                // Reduced motion helpers
                checkReducedMotionPreference: function() {
                    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                        if (!this.settings.reduceMotion) {
                            // Auto-enable reduce motion if system preference is set
                            this.settings.reduceMotion = true;
                            this.applySettings();
                            this.saveSettings();
                        }
                    }
                },

                pauseAnimations: function() {
                    // Pause videos (but not autoplay controls)
                    const videos = document.querySelectorAll('video[autoplay]:not(#sb-a11y-widget video)');
                    videos.forEach(video => {
                        video.pause();
                        video.setAttribute('data-sb-a11y-paused', 'true');
                    });

                    // Pause GIFs by replacing with static image (optional, can be complex)
                    // This is a simplified approach - full implementation would require canvas
                },

                resetSettings: function() {
                    // Stop TTS if playing
                    this.stopTTS();

                    // Reset reading guide
                    this.settings.readingGuide = false;
                    this.toggleReadingGuide();

                    // Reset all settings to defaults
                    this.resetSettingsToDefaults();
                    this.applySettings();
                    this.saveSettings();
                }
            };

            // Initialize when DOM is ready
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', () => A11yWidget.init());
            } else {
                A11yWidget.init();
            }
        })();
        </script>
        <?php
    }

    public function render_settings($settings = []) {
        // Security: Check user capability
        if (!current_user_can('manage_options')) {
            wp_die(__('You do not have sufficient permissions to access this page.', 'wpswitchboard'));
        }

        $enabled = isset($settings['enabled']) ? $settings['enabled'] : 'yes';
        $position = isset($settings['position']) ? $this->validate_position($settings['position']) : 'bottom-right';
        $button_text = isset($settings['button_text']) ? sanitize_text_field($settings['button_text']) : __('Accessibility', 'wpswitchboard');
        $widget_title = isset($settings['widget_title']) ? sanitize_text_field($settings['widget_title']) : __('Accessibility Options', 'wpswitchboard');
        $primary_color = isset($settings['primary_color']) ? $this->sanitize_color($settings['primary_color']) : '#3b82f6';
        ?>
        <input type="hidden" name="module" value="accessibility-widget">
        <?php wp_nonce_field('switchboard_accessibility_widget_settings', 'accessibility_widget_nonce'); ?>

        <div class="sb-sp-group">
            <h4 class="sb-sp-heading-sm"><?php esc_html_e('Frontend Accessibility Widget', 'wpswitchboard'); ?></h4>
            <p class="sb-sp-description"><?php esc_html_e('Provide your users with powerful accessibility options to customize their viewing experience. Features include font size control, high contrast modes, dyslexia-friendly fonts, and much more.', 'wpswitchboard'); ?></p>
        </div>

        <div class="sb-sp-group">
                    <input type="hidden" name="setting_enabled" value="no">
            <div class="sb-module-option-item sb-module-toggle-item">
                <div class="sb-module-option-content">
                    <div class="sb-module-toggle-header">
                        <strong class="sb-module-option-title"><?php esc_html_e('Display accessibility widget on frontend', 'wpswitchboard'); ?></strong>
                        <label class="sb-module-toggle">
                            <input type="checkbox" name="setting_enabled" id="setting_enabled" value="yes" <?php checked($enabled, 'yes'); ?>>
                            <span class="sb-module-toggle-slider"></span>
                    </label>
                    </div>
                    <p class="sb-module-option-text"><?php esc_html_e('Shows a floating accessibility button that allows users to customize their viewing experience.', 'wpswitchboard'); ?></p>
                </div>
            </div>
        </div>

        <div class="sb-sp-group sb-sp-field-horizontal">
            <div class="sb-sp-field-horizontal-left">
                <label class="sb-sp-label" for="setting_position"><?php esc_html_e('Widget Position', 'wpswitchboard'); ?></label>
                <p class="sb-sp-description"><?php esc_html_e('Choose where the accessibility button should appear on your site.', 'wpswitchboard'); ?></p>
            </div>
            <select name="setting_position" id="setting_position" class="sb-sp-select">
                <option value="bottom-right" <?php selected($position, 'bottom-right'); ?>><?php esc_html_e('Bottom Right (Recommended)', 'wpswitchboard'); ?></option>
                <option value="bottom-left" <?php selected($position, 'bottom-left'); ?>><?php esc_html_e('Bottom Left', 'wpswitchboard'); ?></option>
                <option value="top-right" <?php selected($position, 'top-right'); ?>><?php esc_html_e('Top Right', 'wpswitchboard'); ?></option>
                <option value="top-left" <?php selected($position, 'top-left'); ?>><?php esc_html_e('Top Left', 'wpswitchboard'); ?></option>
            </select>
        </div>

        <div class="sb-sp-group sb-sp-field-horizontal">
            <div class="sb-sp-field-horizontal-left">
                <label class="sb-sp-label" for="setting_button_text"><?php esc_html_e('Button Text', 'wpswitchboard'); ?></label>
                <p class="sb-sp-description"><?php esc_html_e('Text displayed on the accessibility toggle button.', 'wpswitchboard'); ?></p>
            </div>
            <input type="text" name="setting_button_text" id="setting_button_text" value="<?php echo esc_attr($button_text); ?>">
        </div>

        <div class="sb-sp-group sb-sp-field-horizontal">
            <div class="sb-sp-field-horizontal-left">
                <label class="sb-sp-label" for="setting_widget_title"><?php esc_html_e('Widget Title', 'wpswitchboard'); ?></label>
                <p class="sb-sp-description"><?php esc_html_e('Title displayed in the widget panel header.', 'wpswitchboard'); ?></p>
            </div>
            <input type="text" name="setting_widget_title" id="setting_widget_title" value="<?php echo esc_attr($widget_title); ?>">
        </div>

        <div class="sb-sp-group sb-sp-field-horizontal">
            <div class="sb-sp-field-horizontal-left">
                <label class="sb-sp-label" for="setting_primary_color"><?php esc_html_e('Primary Color', 'wpswitchboard'); ?></label>
                <p class="sb-sp-description"><?php esc_html_e('Choose the color for the widget button and header.', 'wpswitchboard'); ?></p>
            </div>
            <input type="text" name="setting_primary_color" id="setting_primary_color" value="<?php echo esc_attr($primary_color); ?>" class="color-picker">
        </div>

        <div class="sb-sp-group">
            <label class="sb-sp-label" for="setting_custom_css"><?php esc_html_e('Custom CSS', 'wpswitchboard'); ?></label>
            <textarea name="setting_custom_css" id="setting_custom_css" rows="8" class="sb-sp-textarea" placeholder="/* Add your custom CSS here */" style="font-family: 'Courier New', monospace; font-size: 13px;"><?php echo esc_textarea($settings['custom_css'] ?? ''); ?></textarea>
                    <p class="sb-sp-description">
                        <?php esc_html_e('Add custom CSS to customize the accessibility widget appearance. Example:', 'wpswitchboard'); ?><br>
                <code style="display: block; background: #f1f5f9; padding: 12px; border-radius: 6px; margin-top: 8px; font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.6;">
/* Custom button styles */<br>
.sb-a11y-btn {<br>
&nbsp;&nbsp;border-radius: 8px !important;<br>
}<br>
<br>
/* Custom widget position */<br>
#sb-a11y-widget {<br>
&nbsp;&nbsp;bottom: 20px !important;<br>
&nbsp;&nbsp;right: 20px !important;<br>
}
                        </code>
                    </p>
        </div>

        <hr class="sb-sp-divider">

            <div class="sb-sp-group">
            <h4 class="sb-sp-heading-sm"><?php esc_html_e('Widget Features', 'wpswitchboard'); ?></h4>
            <p class="sb-sp-description"><?php esc_html_e('The accessibility widget provides the following features to your users:', 'wpswitchboard'); ?></p>
            </div>

        <div class="sb-sp-grid-2" style="margin-bottom: 24px;">
            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Font Size Control</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Adjust text size from small to extra large for better readability.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Color Schemes</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Dark mode, high contrast, and grayscale options.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Spacing Controls</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Adjust line height and letter spacing for comfortable reading.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Dyslexia Font</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">OpenDyslexic font with increased word spacing for easier reading.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Text-to-Speech</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Read page content aloud with adjustable speed controls.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Reading Guide</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Horizontal ruler that follows cursor to help track reading position.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Enhanced Focus</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">High-contrast focus indicators for keyboard navigation.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Link Enhancement</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Underline and highlight links for better visibility.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Cursor Size</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Increase cursor size for users with visual impairments.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Reduce Motion</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Disable animations and auto-playing media for sensitive users.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Skip Links</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Hidden skip links for keyboard users to jump to main content.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Quick Presets</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">One-click presets for Dyslexia, Low Vision, and Reduce Distractions.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Hide Images</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Remove images for text-only, distraction-free reading.</p>
            </div>

            <div class="sb-sp-group" style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px;">
                <h4 class="sb-sp-heading-sm" style="margin: 0 0 8px 0;">Text Alignment</h4>
                <p style="margin: 0; font-size: 13px; color: #64748b;">Change text alignment to left, center, right, or justify.</p>
            </div>
        </div>

        <hr class="sb-sp-divider">

        <div class="sb-sp-info-box sb-sp-info-box-info">
            <h4 class="sb-sp-heading-sm"><?php esc_html_e('Benefits', 'wpswitchboard'); ?></h4>
            <ul class="sb-sp-list">
                <li class="sb-sp-list-item"><strong><?php esc_html_e('WCAG Compliance:', 'wpswitchboard'); ?></strong> <?php esc_html_e('Help meet Web Content Accessibility Guidelines standards', 'wpswitchboard'); ?></li>
                <li class="sb-sp-list-item"><strong><?php esc_html_e('Better User Experience:', 'wpswitchboard'); ?></strong> <?php esc_html_e('Allow users to customize the site to their needs', 'wpswitchboard'); ?></li>
                <li class="sb-sp-list-item"><strong><?php esc_html_e('Persistent Settings:', 'wpswitchboard'); ?></strong> <?php esc_html_e('User preferences are saved and restored automatically', 'wpswitchboard'); ?></li>
                <li class="sb-sp-list-item"><strong><?php esc_html_e('No Page Refresh:', 'wpswitchboard'); ?></strong> <?php esc_html_e('All changes apply instantly without reloading', 'wpswitchboard'); ?></li>
                <li class="sb-sp-list-item"><strong><?php esc_html_e('Lightweight:', 'wpswitchboard'); ?></strong> <?php esc_html_e('Pure CSS and vanilla JavaScript, no external dependencies', 'wpswitchboard'); ?></li>
                <li class="sb-sp-list-item"><strong><?php esc_html_e('Mobile Friendly:', 'wpswitchboard'); ?></strong> <?php esc_html_e('Fully responsive and works on all devices', 'wpswitchboard'); ?></li>
                <li class="sb-sp-list-item"><strong><?php esc_html_e('Keyboard Accessible:', 'wpswitchboard'); ?></strong> <?php esc_html_e('Can be operated using keyboard only (ESC to close)', 'wpswitchboard'); ?></li>
            </ul>
        </div>

        <div class="sb-sp-info-box sb-sp-info-box-tip" style="margin-top: 24px;">
            <h4 class="sb-sp-heading-sm"><?php esc_html_e('Pro Tip', 'wpswitchboard'); ?></h4>
            <p class="sb-sp-description" style="margin: 0;"><?php esc_html_e('This accessibility widget is a unique feature that sets your site apart from competitors. It demonstrates your commitment to inclusive design and can improve your SEO rankings.', 'wpswitchboard'); ?></p>
        </div>

        <script>
        jQuery(document).ready(function($) {
            // Color picker
            if ($.fn.wpColorPicker) {
                $('.color-picker').wpColorPicker();
            }
            
            // Clear placeholder on focus/click for custom CSS textarea
            var $cssTextarea = $('#setting_custom_css');
            function clearPlaceholder() {
                var $this = $cssTextarea;
                if ($this.val() === '' && $this.attr('placeholder')) {
                    $this.attr('data-placeholder', $this.attr('placeholder'));
                    $this.attr('placeholder', '');
                }
            }
            function restorePlaceholder() {
                var $this = $cssTextarea;
                if ($this.val() === '' && $this.attr('data-placeholder')) {
                    $this.attr('placeholder', $this.attr('data-placeholder'));
                    $this.removeAttr('data-placeholder');
                }
            }
            $cssTextarea.on('focus click', clearPlaceholder);
            $cssTextarea.on('blur', restorePlaceholder);
        });
        </script>
        <?php
    }
}

// Initialize and register with data system
$switchboard_instance = new SwitchboardAccessibilityWidget();
Switchboard_Data_Registry::get_instance()->auto_register($switchboard_instance, __FILE__);
