<?php
/**
 * MenuX Free — Footer Builder Admin Page
 * Submenu page: wizard, themes, column builder, bottom bar and style settings.
 * @package MenuX
 */

if ( ! defined( 'ABSPATH' ) ) exit;

add_action( 'admin_menu', 'menux_register_footer_page', 11 );
function menux_register_footer_page() {
    add_submenu_page(
        'menux',
        esc_html__( 'Footer Builder', 'giuliomax-menu-builder' ),
        esc_html__( 'Footer', 'giuliomax-menu-builder' ),
        'manage_options',
        'menux-footer',
        'menux_render_footer_admin'
    );
}

/* ── Sanitization ─────────────────────────────────────────────────────── */

/**
 * Deep-sanitizes the footer content structure coming from the builder JSON.
 */
function menux_footer_sanitize_content( $raw ) {
    $clean = menux_footer_defaults();

    $clean['enabled']       = ! empty( $raw['enabled'] ) && $raw['enabled'] === '1' ? '1' : '0';
    $clean['placement']     = ( $raw['placement'] ?? '' ) === 'auto' ? 'auto' : 'manual';
    $clean['auto_priority'] = isset( $raw['auto_priority'] ) && is_numeric( $raw['auto_priority'] )
        ? (string) max( 1, min( 9999, intval( $raw['auto_priority'] ) ) )
        : '100';
    $clean['layout']        = in_array( $raw['layout'] ?? '', array( 'equal', 'wide-first', 'centered' ), true ) ? $raw['layout'] : 'wide-first';

    $networks = menux_footer_social_networks();
    $columns  = array();

    foreach ( array_slice( (array) ( $raw['columns'] ?? array() ), 0, 6 ) as $col ) {
        $type = in_array( $col['type'] ?? '', array( 'about', 'links', 'contact', 'social', 'hours', 'html', 'newsletter' ), true ) ? $col['type'] : 'links';
        $c    = array(
            'type'        => $type,
            'title'       => sanitize_text_field( $col['title'] ?? '' ),
            'hide_mobile' => ! empty( $col['hide_mobile'] ) ? '1' : '0',
        );
        switch ( $type ) {
            case 'about':
                $c['text']      = sanitize_textarea_field( $col['text'] ?? '' );
                $c['img_url']   = esc_url_raw( $col['img_url'] ?? '' );
                // Allow only safe CSS dimension values to prevent style-attribute injection.
                $raw_width      = sanitize_text_field( $col['img_width'] ?? '' );
                $c['img_width'] = preg_match( '/^\d+(\.\d+)?(px|%|em|rem|vw)$/', $raw_width ) ? $raw_width : '';
                break;
            case 'links':
                $c['items'] = array();
                foreach ( array_slice( (array) ( $col['items'] ?? array() ), 0, 20 ) as $item ) {
                    $c['items'][] = array(
                        'label'  => sanitize_text_field( $item['label'] ?? '' ),
                        'url'    => esc_url_raw( $item['url'] ?? '' ),
                        'target' => ( $item['target'] ?? '' ) === '_blank' ? '_blank' : '',
                    );
                }
                break;
            case 'contact':
                $c['address'] = sanitize_textarea_field( $col['address'] ?? '' );
                $c['phone']   = sanitize_text_field( $col['phone'] ?? '' );
                $email        = sanitize_email( $col['email'] ?? '' );
                $c['email']   = is_email( $email ) ? $email : '';
                break;
            case 'social':
                $c['networks'] = array();
                foreach ( array_slice( (array) ( $col['networks'] ?? array() ), 0, 14 ) as $soc ) {
                    $key = sanitize_key( $soc['network'] ?? '' );
                    if ( ! isset( $networks[ $key ] ) ) continue;
                    $c['networks'][] = array(
                        'network' => $key,
                        'url'     => esc_url_raw( $soc['url'] ?? '' ),
                    );
                }
                break;
            case 'hours':
                $c['lines'] = array();
                foreach ( array_slice( (array) ( $col['lines'] ?? array() ), 0, 10 ) as $line ) {
                    $c['lines'][] = sanitize_text_field( $line );
                }
                break;
            case 'html':
                $c['html'] = wp_kses_post( $col['html'] ?? '' );
                break;
            case 'newsletter':
                $c['subtitle']    = sanitize_textarea_field( $col['subtitle'] ?? '' );
                $c['form_action'] = esc_url_raw( $col['form_action'] ?? '' );
                $c['placeholder'] = sanitize_text_field( $col['placeholder'] ?? '' );
                $c['button_text'] = sanitize_text_field( $col['button_text'] ?? '' );
                $c['gdpr_text']   = sanitize_text_field( $col['gdpr_text'] ?? '' );
                break;
        }
        $columns[] = $c;
    }
    $clean['columns'] = $columns;

    $bottom = (array) ( $raw['bottom'] ?? array() );
    $clean['bottom'] = array(
        'copyright'   => sanitize_text_field( $bottom['copyright'] ?? '' ),
        'links'       => array(),
        'show_social' => ! empty( $bottom['show_social'] ) && $bottom['show_social'] === '1' ? '1' : '0',
        'networks'    => array(),
    );
    foreach ( array_slice( (array) ( $bottom['links'] ?? array() ), 0, 6 ) as $l ) {
        $clean['bottom']['links'][] = array(
            'label' => sanitize_text_field( $l['label'] ?? '' ),
            'url'   => esc_url_raw( $l['url'] ?? '' ),
        );
    }
    foreach ( array_slice( (array) ( $bottom['networks'] ?? array() ), 0, 14 ) as $soc ) {
        $key = sanitize_key( $soc['network'] ?? '' );
        if ( ! isset( $networks[ $key ] ) ) continue;
        $clean['bottom']['networks'][] = array(
            'network' => $key,
            'url'     => esc_url_raw( $soc['url'] ?? '' ),
        );
    }

    return $clean;
}

/**
 * Sanitizes footer style settings.
 */
function menux_footer_sanitize_style( $raw ) {
    $d   = menux_footer_style_defaults();
    $s   = array();
    $hex = function( $k ) use ( $raw, $d ) {
        $c = sanitize_hex_color( $raw[ $k ] ?? '' );
        return $c ? $c : $d[ $k ];
    };
    $int = function( $k, $min, $max ) use ( $raw, $d ) {
        return isset( $raw[ $k ] ) && is_numeric( $raw[ $k ] ) ? (string) max( $min, min( $max, intval( $raw[ $k ] ) ) ) : $d[ $k ];
    };

    $valid_themes = array( 'midnight', 'charcoal', 'light', 'corporate', 'forest', 'gradient', 'cream', 'carbon', 'ocean', 'wine', 'mono' );
    $s['theme']             = in_array( sanitize_key( $raw['theme'] ?? '' ), $valid_themes, true ) ? sanitize_key( $raw['theme'] ) : $d['theme'];
    foreach ( array( 'bg', 'heading_color', 'text_color', 'link_color', 'link_hover_color', 'accent_color', 'bottom_bg', 'bottom_text_color' ) as $k ) {
        $s[ $k ] = $hex( $k );
    }
    $s['bg_gradient']       = menux_sanitize_bg_gradient( $raw['bg_gradient'] ?? '' );
    $s['accent_bar']        = ! empty( $raw['accent_bar'] ) ? '1' : '0';
    $s['accent_height']     = $int( 'accent_height', 1, 10 );
    $s['padding_y']         = $int( 'padding_y', 16, 160 );
    $s['padding_x']         = $int( 'padding_x', 0, 120 );
    $s['col_gap']           = $int( 'col_gap', 8, 120 );
    $s['max_width']         = $int( 'max_width', 600, 1920 );
    $s['link_gap']          = $int( 'link_gap', 2, 40 );
    $s['mobile_align']      = ( $raw['mobile_align'] ?? '' ) === 'center' ? 'center' : 'left';
    $s['heading_size']      = $int( 'heading_size', 10, 28 );
    $s['heading_weight']    = in_array( $raw['heading_weight'] ?? '', array( '400', '500', '600', '700', '800' ), true ) ? $raw['heading_weight'] : $d['heading_weight'];
    $s['heading_transform'] = ( $raw['heading_transform'] ?? '' ) === 'none' ? 'none' : 'uppercase';
    $s['font_size']         = $int( 'font_size', 11, 20 );
    $s['link_hover_effect'] = in_array( $raw['link_hover_effect'] ?? '', array( 'none', 'underline', 'slide' ), true ) ? $raw['link_hover_effect'] : $d['link_hover_effect'];
    $s['social_style']      = in_array( $raw['social_style'] ?? '', array( 'plain', 'circle', 'square' ), true ) ? $raw['social_style'] : $d['social_style'];
    $s['social_size']       = $int( 'social_size', 12, 28 );
    $s['bottom_divider']    = ! empty( $raw['bottom_divider'] ) ? '1' : '0';
    $s['scroll_top']        = ! empty( $raw['scroll_top'] ) ? '1' : '0';
    $s['custom_css']        = isset( $raw['custom_css'] ) ? wp_strip_all_tags( $raw['custom_css'] ) : '';

    return $s;
}

/* ── Page render ──────────────────────────────────────────────────────── */

function menux_render_footer_admin() {
    if ( ! current_user_can( 'manage_options' ) ) return;

    $saved      = false;
    $save_error = false;
    if ( isset( $_POST['menux_footer_save'] ) && check_admin_referer( 'menux_footer_save_action', 'menux_footer_nonce' ) ) {
        $json = json_decode( wp_unslash( $_POST['menux_footer_json'] ?? '' ), true ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- deep-sanitized below
        if ( is_array( $json ) ) {
            update_option( 'menux_footer', menux_footer_sanitize_content( $json ) );
            $saved = true;
        } else {
            $save_error = true; // Columns not saved (invalid/missing JSON from JS serializer)
        }
        $raw_style = isset( $_POST['menux_fstyle'] ) && is_array( $_POST['menux_fstyle'] ) ? wp_unslash( $_POST['menux_fstyle'] ) : array(); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- sanitized below
        update_option( 'menux_footer_style', menux_footer_sanitize_style( $raw_style ) );
        if ( ! $save_error ) {
            $saved = true;
        }
    }

    $footer = wp_parse_args( get_option( 'menux_footer', array() ), menux_footer_defaults() );
    $style  = wp_parse_args( get_option( 'menux_footer_style', array() ), menux_footer_style_defaults() );
    $nets   = menux_footer_social_networks();

    $td = 'padding:8px 10px;font-size:13px;color:#374151;width:220px;vertical-align:top;';
    $tv = 'padding:8px 10px;';
    ?>
    <div class="wrap" style="max-width:1280px;">
        <h1 style="display:flex;align-items:center;gap:10px;">
            🦶 <?php esc_html_e( 'Footer Builder', 'giuliomax-menu-builder' ); ?>
            <span style="font-size:12px;font-weight:400;color:#9ca3af;">Giuliomax Menu Builder</span>
        </h1>

        <?php if ( $saved ) : ?>
        <div class="notice notice-success is-dismissible"><p><strong><?php esc_html_e( 'Footer saved.', 'giuliomax-menu-builder' ); ?></strong> <?php
            printf(
                /* translators: 1: MenuX Footer block name, 2: shortcode */
                esc_html__( 'Place it with the %1$s block or the %2$s shortcode.', 'giuliomax-menu-builder' ),
                '<code>' . esc_html__( 'MenuX — Footer', 'giuliomax-menu-builder' ) . '</code>',
                '<code>[menux_footer]</code>'
            );
        ?></p></div>
        <?php elseif ( $save_error ) : ?>
        <div class="notice notice-error is-dismissible"><p><strong><?php esc_html_e( 'Style settings saved, but footer layout could not be saved', 'giuliomax-menu-builder' ); ?></strong> <?php esc_html_e( '— the builder data was missing or invalid. Please try saving again.', 'giuliomax-menu-builder' ); ?></p></div>
        <?php endif; ?>

        <form method="post" id="menux-footer-form">
            <?php wp_nonce_field( 'menux_footer_save_action', 'menux_footer_nonce' ); ?>
            <input type="hidden" name="menux_footer_json" id="menux-footer-json" value="">

            <!-- Toolbar -->
            <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 18px;margin:14px 0;">
                <label class="mx-toggle" style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                    <input type="checkbox" id="mxf-enabled" <?php checked( $footer['enabled'], '1' ); ?>>
                    <strong style="font-size:13px;"><?php esc_html_e( 'Enable footer', 'giuliomax-menu-builder' ); ?></strong>
                </label>
                <span style="color:#d1d5db;">|</span>
                <label style="font-size:13px;color:#374151;"><?php esc_html_e( 'Layout', 'giuliomax-menu-builder' ); ?>
                    <select id="mxf-layout" style="margin-left:6px;">
                        <option value="wide-first" <?php selected( $footer['layout'], 'wide-first' ); ?>><?php esc_html_e( 'First column wide', 'giuliomax-menu-builder' ); ?></option>
                        <option value="equal"      <?php selected( $footer['layout'], 'equal' ); ?>><?php esc_html_e( 'Equal columns', 'giuliomax-menu-builder' ); ?></option>
                        <option value="centered"   <?php selected( $footer['layout'], 'centered' ); ?>><?php esc_html_e( 'Centered', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </label>
                <span style="color:#d1d5db;">|</span>
                <label style="font-size:13px;color:#374151;" title="<?php esc_attr_e( 'Manual: place it yourself with the block or shortcode. Automatic: show it at the bottom of every page.', 'giuliomax-menu-builder' ); ?>"><?php esc_html_e( 'Placement', 'giuliomax-menu-builder' ); ?>
                    <select id="mxf-placement" style="margin-left:6px;">
                        <option value="manual" <?php selected( $footer['placement'] ?? 'manual', 'manual' ); ?>><?php esc_html_e( 'Manual (block / shortcode)', 'giuliomax-menu-builder' ); ?></option>
                        <option value="auto"   <?php selected( $footer['placement'] ?? 'manual', 'auto' ); ?>><?php esc_html_e( 'Automatic (every page)', 'giuliomax-menu-builder' ); ?></option>
                    </select>
                </label>
                <span id="mxf-priority-wrap" style="font-size:13px;color:#374151;<?php echo ( $footer['placement'] ?? 'manual' ) === 'auto' ? '' : 'display:none;'; ?>" title="<?php esc_attr_e( 'wp_footer hook priority — lower numbers print earlier. Raise it if the footer collides with another plugin.', 'giuliomax-menu-builder' ); ?>"><?php esc_html_e( 'Priority', 'giuliomax-menu-builder' ); ?>
                    <input type="number" id="mxf-priority" value="<?php echo esc_attr( $footer['auto_priority'] ?? '100' ); ?>" min="1" max="9999" style="width:72px;margin-left:6px;">
                </label>
                <button type="button" class="button" id="mxf-wizard-open" style="margin-left:auto;">🪄 <?php esc_html_e( 'Setup Wizard', 'giuliomax-menu-builder' ); ?></button>
                <button type="submit" name="menux_footer_save" value="1" class="button button-primary">💾 <?php esc_html_e( 'Save Footer', 'giuliomax-menu-builder' ); ?></button>
            </div>

            <!-- Themes -->
            <style>
                .mxf-theme-card:hover,.mxf-wiz-theme:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.1)!important;}
                .mxf-theme-card,.mxf-wiz-theme{transition:border-color .15s,box-shadow .15s,transform .15s!important;}
            </style>
            <div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px;margin-bottom:14px;">
                <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;">🎨 <?php esc_html_e( 'Footer Themes', 'giuliomax-menu-builder' ); ?></div>
                <p style="font-size:12px;color:#9ca3af;margin:0 0 12px;"><?php esc_html_e( 'One click applies a curated palette. You can fine-tune every color below afterwards.', 'giuliomax-menu-builder' ); ?></p>
                <div id="mxf-themes-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;"></div>
            </div>

            <div style="display:grid;grid-template-columns:1.1fr 1fr;gap:14px;align-items:start;">

                <!-- Columns builder -->
                <div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px;">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                        <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;">🧱 <?php esc_html_e( 'Footer Sections', 'giuliomax-menu-builder' ); ?></div>
                        <button type="button" class="button button-small" id="mxf-add-col">＋ <?php esc_html_e( 'Add section', 'giuliomax-menu-builder' ); ?></button>
                    </div>
                    <div id="mxf-cols"></div>

                    <!-- Bottom bar -->
                    <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin:20px 0 10px;border-top:1px solid #f3f4f6;padding-top:16px;">⬇ <?php esc_html_e( 'Bottom Bar', 'giuliomax-menu-builder' ); ?></div>
                    <table style="border-collapse:collapse;width:100%;"><tbody>
                    <tr>
                        <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Copyright text', 'giuliomax-menu-builder' ); ?></td>
                        <td style="<?php echo esc_attr( $tv ); ?>">
                            <input type="text" id="mxf-copyright" value="" style="width:100%;">
                            <p style="font-size:11px;color:#9ca3af;margin:4px 0 0;"><code>{year}</code> <?php esc_html_e( 'is replaced with the current year.', 'giuliomax-menu-builder' ); ?></p>
                        </td>
                    </tr>
                    <tr>
                        <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Legal links', 'giuliomax-menu-builder' ); ?></td>
                        <td style="<?php echo esc_attr( $tv ); ?>">
                            <div id="mxf-bottom-links"></div>
                            <button type="button" class="button button-small" id="mxf-add-bottom-link">＋ <?php esc_html_e( 'Add link', 'giuliomax-menu-builder' ); ?></button>
                        </td>
                    </tr>
                    <tr>
                        <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Social in bottom bar', 'giuliomax-menu-builder' ); ?></td>
                        <td style="<?php echo esc_attr( $tv ); ?>">
                            <label><input type="checkbox" id="mxf-bottom-social"> <?php esc_html_e( 'Mirror the social icons in the bottom bar', 'giuliomax-menu-builder' ); ?></label>
                        </td>
                    </tr>
                    <tr>
                        <td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Scroll-to-top button', 'giuliomax-menu-builder' ); ?></td>
                        <td style="<?php echo esc_attr( $tv ); ?>">
                            <label><input type="checkbox" name="menux_fstyle[scroll_top]" value="1" class="mxf-style" <?php checked( $style['scroll_top'] ?? '0', '1' ); ?>> <?php esc_html_e( 'Show a floating ↑ button when user scrolls', 'giuliomax-menu-builder' ); ?></label>
                        </td>
                    </tr>
                    </tbody></table>
                </div>

                <!-- Right column: preview (sticky) + style settings -->
                <div style="position:sticky;top:32px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin;">

                <!-- Live preview -->
                <div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;flex-shrink:0;">
                    <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;">👁 <?php esc_html_e( 'Live Preview', 'giuliomax-menu-builder' ); ?></div>
                    <div id="menux-footer-preview" style="border-radius:8px;overflow:hidden;border:1px solid #f3f4f6;"></div>
                </div>

                <!-- Style settings -->
                <div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px;">
                    <div style="font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;">🎛 <?php esc_html_e( 'Style', 'giuliomax-menu-builder' ); ?></div>
                    <input type="hidden" name="menux_fstyle[theme]" id="mxf-theme" value="<?php echo esc_attr( $style['theme'] ); ?>">

                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin:4px 0 8px;"><?php esc_html_e( 'Colors', 'giuliomax-menu-builder' ); ?></div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;">
                        <?php foreach ( array(
                            'bg'                => esc_html__( 'Background', 'giuliomax-menu-builder' ),
                            'heading_color'     => esc_html__( 'Headings', 'giuliomax-menu-builder' ),
                            'text_color'        => esc_html__( 'Text', 'giuliomax-menu-builder' ),
                            'link_color'        => esc_html__( 'Links', 'giuliomax-menu-builder' ),
                            'link_hover_color'  => esc_html__( 'Links hover', 'giuliomax-menu-builder' ),
                            'accent_color'      => esc_html__( 'Accent', 'giuliomax-menu-builder' ),
                            'bottom_bg'         => esc_html__( 'Bottom bar bg', 'giuliomax-menu-builder' ),
                            'bottom_text_color' => esc_html__( 'Bottom bar text', 'giuliomax-menu-builder' ),
                        ) as $k => $label ) : ?>
                        <label style="display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#374151;">
                            <?php echo esc_html( $label ); ?>
                            <input type="color" name="menux_fstyle[<?php echo esc_attr( $k ); ?>]" value="<?php echo esc_attr( $style[ $k ] ); ?>" class="mxf-style" style="width:38px;height:26px;padding:1px;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;">
                        </label>
                        <?php endforeach; ?>
                    </div>
                    <input type="hidden" name="menux_fstyle[bg_gradient]" id="mxf-bg-gradient" value="<?php echo esc_attr( $style['bg_gradient'] ); ?>">

                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;"><?php esc_html_e( 'Layout', 'giuliomax-menu-builder' ); ?></div>
                    <table style="border-collapse:collapse;width:100%;"><tbody>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Accent bar (top line)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><label><input type="checkbox" name="menux_fstyle[accent_bar]" value="1" class="mxf-style" <?php checked( $style['accent_bar'], '1' ); ?>> <?php esc_html_e( 'Show', 'giuliomax-menu-builder' ); ?></label>
                        <input type="number" name="menux_fstyle[accent_height]" value="<?php echo esc_attr( $style['accent_height'] ); ?>" min="1" max="10" class="mxf-style" style="width:60px;margin-left:10px;"> px</td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Vertical padding (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_fstyle[padding_y]" value="<?php echo esc_attr( $style['padding_y'] ); ?>" min="16" max="160" class="mxf-style" style="width:80px;"></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Horizontal padding (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_fstyle[padding_x]" value="<?php echo esc_attr( $style['padding_x'] ); ?>" min="0" max="120" class="mxf-style" style="width:80px;"></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Column gap (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_fstyle[col_gap]" value="<?php echo esc_attr( $style['col_gap'] ); ?>" min="8" max="120" class="mxf-style" style="width:80px;"></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Content max width (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_fstyle[max_width]" value="<?php echo esc_attr( $style['max_width'] ); ?>" min="600" max="1920" class="mxf-style" style="width:80px;"></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Link spacing (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_fstyle[link_gap]" value="<?php echo esc_attr( $style['link_gap'] ); ?>" min="2" max="40" class="mxf-style" style="width:80px;"></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Mobile alignment', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>">
                        <select name="menux_fstyle[mobile_align]" class="mxf-style">
                            <option value="left"   <?php selected( $style['mobile_align'], 'left' ); ?>><?php esc_html_e( 'Left', 'giuliomax-menu-builder' ); ?></option>
                            <option value="center" <?php selected( $style['mobile_align'], 'center' ); ?>><?php esc_html_e( 'Center', 'giuliomax-menu-builder' ); ?></option>
                        </select></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Bottom bar divider', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><label><input type="checkbox" name="menux_fstyle[bottom_divider]" value="1" class="mxf-style" <?php checked( $style['bottom_divider'], '1' ); ?>> <?php esc_html_e( 'Show top border', 'giuliomax-menu-builder' ); ?></label></td></tr>
                    </tbody></table>

                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;"><?php esc_html_e( 'Typography', 'giuliomax-menu-builder' ); ?></div>
                    <table style="border-collapse:collapse;width:100%;"><tbody>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Heading size (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_fstyle[heading_size]" value="<?php echo esc_attr( $style['heading_size'] ); ?>" min="10" max="28" class="mxf-style" style="width:80px;"></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Heading weight', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>">
                        <select name="menux_fstyle[heading_weight]" class="mxf-style">
                            <?php foreach ( array(
                                '400' => esc_html__( 'Regular', 'giuliomax-menu-builder' ),
                                '500' => esc_html__( 'Medium', 'giuliomax-menu-builder' ),
                                '600' => esc_html__( 'Semi-bold', 'giuliomax-menu-builder' ),
                                '700' => esc_html__( 'Bold', 'giuliomax-menu-builder' ),
                                '800' => esc_html__( 'Extra-bold', 'giuliomax-menu-builder' ),
                            ) as $w => $wl ) : ?>
                            <option value="<?php echo esc_attr( $w ); ?>" <?php selected( $style['heading_weight'], $w ); ?>><?php
                                /* translators: 1: weight label (e.g. Bold), 2: numeric font weight (e.g. 700) */
                                printf( esc_html__( '%1$s (%2$s)', 'giuliomax-menu-builder' ), $wl, esc_html( $w ) ); ?></option>
                            <?php endforeach; ?>
                        </select></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Heading style', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>">
                        <select name="menux_fstyle[heading_transform]" class="mxf-style">
                            <option value="uppercase" <?php selected( $style['heading_transform'], 'uppercase' ); ?>><?php esc_html_e( 'UPPERCASE', 'giuliomax-menu-builder' ); ?></option>
                            <option value="none"      <?php selected( $style['heading_transform'], 'none' ); ?>><?php esc_html_e( 'Normal', 'giuliomax-menu-builder' ); ?></option>
                        </select></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Text size (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_fstyle[font_size]" value="<?php echo esc_attr( $style['font_size'] ); ?>" min="11" max="20" class="mxf-style" style="width:80px;"></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Link hover effect', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>">
                        <select name="menux_fstyle[link_hover_effect]" class="mxf-style">
                            <option value="slide"     <?php selected( $style['link_hover_effect'], 'slide' ); ?>><?php esc_html_e( 'Slide right', 'giuliomax-menu-builder' ); ?></option>
                            <option value="underline" <?php selected( $style['link_hover_effect'], 'underline' ); ?>><?php esc_html_e( 'Animated underline', 'giuliomax-menu-builder' ); ?></option>
                            <option value="none"      <?php selected( $style['link_hover_effect'], 'none' ); ?>><?php esc_html_e( 'Color only', 'giuliomax-menu-builder' ); ?></option>
                        </select></td></tr>
                    </tbody></table>

                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;"><?php esc_html_e( 'Social Icons', 'giuliomax-menu-builder' ); ?></div>
                    <table style="border-collapse:collapse;width:100%;"><tbody>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Icon style', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>">
                        <select name="menux_fstyle[social_style]" class="mxf-style">
                            <option value="circle" <?php selected( $style['social_style'], 'circle' ); ?>><?php esc_html_e( 'Circle badge', 'giuliomax-menu-builder' ); ?></option>
                            <option value="square" <?php selected( $style['social_style'], 'square' ); ?>><?php esc_html_e( 'Rounded square', 'giuliomax-menu-builder' ); ?></option>
                            <option value="plain"  <?php selected( $style['social_style'], 'plain' ); ?>><?php esc_html_e( 'Plain icons', 'giuliomax-menu-builder' ); ?></option>
                        </select></td></tr>
                    <tr><td style="<?php echo esc_attr( $td ); ?>"><?php esc_html_e( 'Icon size (px)', 'giuliomax-menu-builder' ); ?></td><td style="<?php echo esc_attr( $tv ); ?>"><input type="number" name="menux_fstyle[social_size]" value="<?php echo esc_attr( $style['social_size'] ); ?>" min="12" max="28" class="mxf-style" style="width:80px;"></td></tr>
                    </tbody></table>

                    <div style="font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;"><?php esc_html_e( 'Custom CSS', 'giuliomax-menu-builder' ); ?></div>
                    <textarea name="menux_fstyle[custom_css]" rows="4" class="mxf-style" style="width:100%;font-family:monospace;font-size:12px;resize:vertical;" placeholder="<?php esc_attr_e( '/* Target .menux-footer for scoped overrides */', 'giuliomax-menu-builder' ); ?>"><?php echo esc_textarea( $style['custom_css'] ?? '' ); ?></textarea>
                    <p style="font-size:11px;color:#9ca3af;margin:4px 0 0;"><?php
                        printf(
                            /* translators: %s: CSS selector wrapped in a code element */
                            esc_html__( 'Use %s as parent selector to stay scoped.', 'giuliomax-menu-builder' ),
                            '<code>.menux-footer</code>'
                        );
                    ?></p>

                    <div style="margin-top:16px;padding:12px;background:#f8fafc;border-radius:8px;font-size:12px;color:#64748b;line-height:1.7;">
                        <strong style="color:#374151;"><?php esc_html_e( 'How to place the footer:', 'giuliomax-menu-builder' ); ?></strong><br>
                        • <?php
                            printf(
                                /* translators: %s: the word "Automatic" wrapped in a strong element */
                                esc_html__( '%s placement (toolbar) shows it at the bottom of every page — no block or shortcode needed', 'giuliomax-menu-builder' ),
                                '<strong>' . esc_html__( 'Automatic', 'giuliomax-menu-builder' ) . '</strong>'
                            );
                        ?><br>
                        • <?php
                            printf(
                                /* translators: %s: MenuX Footer block name wrapped in a code element */
                                esc_html__( 'Block editor / FSE: add the %s block to your template footer', 'giuliomax-menu-builder' ),
                                '<code>' . esc_html__( 'MenuX — Footer', 'giuliomax-menu-builder' ) . '</code>'
                            );
                        ?><br>
                        • <?php
                            printf(
                                /* translators: %s: shortcode wrapped in a code element */
                                esc_html__( 'Classic / page builders: use the shortcode %s', 'giuliomax-menu-builder' ),
                                '<code>[menux_footer]</code>'
                            );
                        ?>
                    </div>
                </div><!-- /style panel -->
                </div><!-- /right sticky column -->
            </div><!-- /grid -->

            <p style="margin-top:14px;">
                <button type="submit" name="menux_footer_save" value="1" class="button button-primary button-hero">💾 <?php esc_html_e( 'Save Footer', 'giuliomax-menu-builder' ); ?></button>
            </p>
        </form>

        <!-- Wizard overlay -->
        <div id="mxf-wizard" style="display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:99999;align-items:center;justify-content:center;padding:20px;">
            <div style="background:#fff;border-radius:16px;max-width:680px;width:100%;max-height:88vh;overflow-y:auto;padding:28px 32px;box-shadow:0 24px 64px rgba(0,0,0,.3);">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
                    <h2 style="margin:0;font-size:18px;">🪄 <?php esc_html_e( 'Footer Setup Wizard', 'giuliomax-menu-builder' ); ?></h2>
                    <button type="button" id="mxf-wizard-close" class="button-link" style="font-size:22px;color:#9ca3af;text-decoration:none;cursor:pointer;">×</button>
                </div>
                <div id="mxf-wizard-progress" style="display:flex;gap:6px;margin:14px 0 22px;"></div>
                <div id="mxf-wizard-body"></div>
                <div style="display:flex;justify-content:space-between;margin-top:24px;">
                    <button type="button" class="button" id="mxf-wizard-back">← <?php esc_html_e( 'Back', 'giuliomax-menu-builder' ); ?></button>
                    <button type="button" class="button button-primary" id="mxf-wizard-next"><?php esc_html_e( 'Next', 'giuliomax-menu-builder' ); ?> →</button>
                </div>
            </div>
        </div>
    </div>

    <script>
    /* Bootstrap data for footer-admin.js */
    window.menuxFooterData = <?php echo wp_json_encode( array(
        'footer'   => $footer,
        'style'    => $style,
        'networks' => $nets,
        'restUrl'  => rest_url(),
    ) ); ?>;
    </script>
    <?php
}
