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

/**
 * 7S Video & Music Gallery settings screen and option access.
 */
final class SG7G_Settings {
    private const OPTION = 'sg7g_settings';
    private const CACHE_TAG = 'sg7g-gallery';

    public static function init(): void {
        add_action( 'admin_menu', array( __CLASS__, 'menu' ) );
        add_action( 'admin_init', array( __CLASS__, 'register' ) );
        add_action( 'admin_init', array( __CLASS__, 'maybe_flush_rewrite_rules' ), 99 );
        add_action( 'wp', array( __CLASS__, 'tag_frontend_cache' ) );
        add_action( 'update_option_' . self::OPTION, array( __CLASS__, 'purge_frontend_cache' ), 10, 3 );
        add_filter( 'plugin_action_links_' . plugin_basename( SG7G_FILE ), array( __CLASS__, 'action_links' ) );
        add_action( 'admin_notices', array( __CLASS__, 'rewrite_conflict_notice' ) );
    }

    /**
     * Group every public gallery view under one LiteSpeed cache tag.
     */
    public static function tag_frontend_cache(): void {
        if (
            is_admin()
            || (
                ! is_singular( 'sg7g_media' )
                && ! is_post_type_archive( 'sg7g_media' )
                && ! is_tax( array( 'sg7g_category', 'sg7g_tag' ) )
            )
        ) {
            return;
        }

        do_action( 'litespeed_tag_add', self::CACHE_TAG );
    }

    /**
     * Refresh cached gallery output immediately after a real settings change.
     *
     * Purging the custom tag keeps the operation scoped to gallery pages. The
     * post-type and URL purges also clear pages cached before the tag existed.
     */
    public static function purge_frontend_cache( mixed $old_value, mixed $new_value, string $option = '' ): void {
        unset( $option );

        if ( $old_value === $new_value ) {
            return;
        }

        do_action( 'litespeed_purge', self::CACHE_TAG );
        do_action( 'litespeed_purge_posttype', 'sg7g_media' );

        $archive_urls = array_filter(
            array(
                self::archive_url_from_settings( $old_value ),
                self::archive_url_from_settings( $new_value ),
                get_post_type_archive_link( 'sg7g_media' ),
            )
        );

        foreach ( array_unique( $archive_urls ) as $archive_url ) {
            do_action( 'litespeed_purge_url', $archive_url );
        }
    }

    private static function archive_url_from_settings( mixed $settings ): string {
        if ( ! is_array( $settings ) || empty( $settings['archive_slug'] ) ) {
            return '';
        }

        $slug = sanitize_title( (string) $settings['archive_slug'] );
        return '' !== $slug ? home_url( user_trailingslashit( $slug ) ) : '';
    }

    public static function defaults(): array {
        return array(
            'posts_per_page'       => 12,
            'pagination_mode'      => 'numbers',
            'sort_order'           => 'DESC',
            'card_title_limit'     => 48,
            'related_count'        => 3,
            'show_navigation'      => 1,
            'show_category_menu'   => 1,
            'category_icons'       => array(),
            'media_menu_order'     => array(),
            'show_archive_hero'     => 1,
            'hero_image_id'         => 0,
            'hero_eyebrow'          => 'Video & Music Gallery',
            'hero_title'            => '7S Medya',
            'hero_description'      => 'Sinemanın sesini, müziğin hikayesini, unutulmaz anları bir arada keşfedin.',
            'hero_quote'            => '',
            'hero_eyebrow_size'     => 12,
            'hero_eyebrow_mobile'   => 11,
            'hero_title_size'       => 72,
            'hero_title_mobile'     => 48,
            'hero_description_size' => 18,
            'hero_description_mobile' => 15,
            'hero_quote_size'       => 19,
            'hero_quote_mobile'     => 15,
            'show_archive_filters'  => 1,
            'show_featured'        => 1,
            'featured_title'       => '',
            'featured_layout'      => 'editorial_1_4',
            'featured_area_title_size' => 32,
            'show_popular'         => 1,
            'popular_title'        => 'Most Liked',
            'popular_period'       => 'month',
            'popular_count'        => 8,
            'popular_like_color'   => '#a13b43',
            'show_sharing'         => 1,
            'show_likes'           => 1,
            'share_facebook'       => 1,
            'share_x'              => 1,
            'share_whatsapp'       => 1,
            'share_telegram'       => 1,
            'share_linkedin'       => 1,
            'share_reddit'         => 1,
            'share_pinterest'      => 1,
            'share_copy'           => 1,
            'featured_order'       => array(),
            'autoplay_video'       => 0,
            'autoplay_audio'       => 0,
            'youtube_nocookie'     => 1,
            'archive_slug'         => 'galeri',
            'single_slug'          => 'galeri',
            'width_mode'           => 'theme',
            'custom_width'         => 1440,
            'text_color'           => '#161616',
            'muted_color'          => '#696969',
            'line_color'           => '#dedede',
            'surface_color'        => '#f4f4f4',
            'typography_mode'      => 'theme',
            'hero_title_font'      => 'editorial_serif',
            'hero_text_font'       => 'system_sans',
            'hero_title_weight'    => 600,
            'hero_text_weight'     => 400,
            'title_font'           => 'editorial_serif',
            'featured_font'        => 'system_sans',
            'body_font'            => 'system_sans',
            'single_title_font'    => 'editorial_serif',
            'title_weight'         => 600,
            'featured_weight'      => 600,
            'single_title_weight'  => 600,
            'body_weight'          => 400,
            'card_title_size'      => 21,
            'card_title_mobile'    => 19,
            'featured_title_size'  => 24,
            'featured_title_mobile' => 18,
            'single_title_size'    => 62,
            'single_title_mobile'  => 36,
            'content_text_size'    => 18,
            'content_text_mobile'  => 17,
        );
    }

    public static function install_defaults(): void {
        if ( false === get_option( self::OPTION, false ) ) {
            add_option( self::OPTION, self::defaults() );
        }
    }

    public static function all(): array {
        $saved = get_option( self::OPTION, array() );
        return wp_parse_args( is_array( $saved ) ? $saved : array(), self::defaults() );
    }

    public static function get( string $key, mixed $fallback = null ): mixed {
        $settings = self::all();
        return array_key_exists( $key, $settings ) ? $settings[ $key ] : $fallback;
    }

    public static function enabled( string $key ): bool {
        return self::value_is_enabled( self::get( $key, 0 ) );
    }

    private static function value_is_enabled( mixed $value ): bool {
        if ( is_bool( $value ) ) {
            return $value;
        }

        if ( is_int( $value ) || is_float( $value ) ) {
            return 0 < (float) $value;
        }

        if ( is_string( $value ) ) {
            return in_array( strtolower( trim( $value ) ), array( '1', 'true', 'yes', 'on', 'enabled' ), true );
        }

        return ! empty( $value );
    }

    /**
     * Return the saved featured content order as unique post IDs.
     *
     * @return int[]
     */
    public static function featured_order(): array {
        $order = self::get( 'featured_order', array() );
        return is_array( $order )
            ? array_values( array_unique( array_filter( array_map( 'absint', $order ) ) ) )
            : array();
    }

    /**
     * Update only the featured order without resetting unrelated settings.
     *
     * @param int[] $ids Ordered post IDs.
     */
    public static function update_featured_order( array $ids ): void {
        $settings = self::all();
        $settings['featured_order'] = array_values( array_unique( array_filter( array_map( 'absint', $ids ) ) ) );
        update_option( self::OPTION, $settings, false );
    }

    public static function menu(): void {
        add_submenu_page(
            'edit.php?post_type=sg7g_media',
            __( '7S Video & Music Gallery Settings', '7sgaleri' ),
            __( 'Settings', '7sgaleri' ),
            'manage_options',
            'sg7g-settings',
            array( __CLASS__, 'render_page' )
        );
    }

    public static function register(): void {
        register_setting(
            'sg7g_settings_group',
            self::OPTION,
            array(
                'type'              => 'array',
                'sanitize_callback' => array( __CLASS__, 'sanitize' ),
                'default'           => self::defaults(),
            )
        );
    }

    public static function sanitize( mixed $input ): array {
        $input    = is_array( $input ) ? $input : array();
        $defaults = self::defaults();
        $old      = self::all();
        $clean    = array();

        $clean['posts_per_page'] = min( 48, max( 1, absint( $input['posts_per_page'] ?? $defaults['posts_per_page'] ) ) );
        $clean['pagination_mode'] = in_array( (string) ( $input['pagination_mode'] ?? '' ), array( 'numbers', 'load_more', 'infinite' ), true )
            ? (string) $input['pagination_mode']
            : $defaults['pagination_mode'];
        $clean['sort_order']     = in_array( strtoupper( (string) ( $input['sort_order'] ?? '' ) ), array( 'ASC', 'DESC' ), true )
            ? strtoupper( (string) $input['sort_order'] )
            : $defaults['sort_order'];
        $clean['card_title_limit'] = min( 200, max( 0, absint( $input['card_title_limit'] ?? $defaults['card_title_limit'] ) ) );
        $clean['related_count']  = min( 12, max( 0, absint( $input['related_count'] ?? $defaults['related_count'] ) ) );
        $featured_order = isset( $input['featured_order'] ) && is_array( $input['featured_order'] ) ? $input['featured_order'] : array();
        $clean['featured_order'] = array_values( array_unique( array_filter( array_map( 'absint', $featured_order ) ) ) );
        $clean['featured_title'] = sanitize_text_field( (string) ( $input['featured_title'] ?? $old['featured_title'] ?? $defaults['featured_title'] ) );
        $featured_layout = (string) ( $input['featured_layout'] ?? $old['featured_layout'] ?? $defaults['featured_layout'] );
        if ( 'spotlight' === $featured_layout ) {
            $featured_layout = 'editorial_1_4';
        }
        $clean['featured_layout'] = in_array( $featured_layout, array( 'editorial_1_4', 'editorial_2_3' ), true )
            ? $featured_layout
            : $defaults['featured_layout'];
        $clean['featured_area_title_size'] = max( 1, absint( $input['featured_area_title_size'] ?? $defaults['featured_area_title_size'] ) );
        $clean['popular_title'] = sanitize_text_field( (string) ( $input['popular_title'] ?? $defaults['popular_title'] ) );
        $clean['hero_image_id'] = absint( $input['hero_image_id'] ?? $defaults['hero_image_id'] );
        $clean['hero_eyebrow'] = sanitize_text_field( (string) ( $input['hero_eyebrow'] ?? $defaults['hero_eyebrow'] ) );
        $clean['hero_title'] = sanitize_text_field( (string) ( $input['hero_title'] ?? $defaults['hero_title'] ) );
        $clean['hero_description'] = sanitize_text_field( (string) ( $input['hero_description'] ?? $defaults['hero_description'] ) );
        $clean['hero_quote'] = sanitize_text_field( (string) ( $input['hero_quote'] ?? $defaults['hero_quote'] ) );

        $clean['category_icons'] = array();
        $category_icons = isset( $input['category_icons'] ) && is_array( $input['category_icons'] ) ? $input['category_icons'] : array();
        $allowed_category_icons = array_keys( SG7G_Archive_UI::category_icon_options() );
        foreach ( $category_icons as $term_id => $icon_key ) {
            $term_id = absint( $term_id );
            $icon_key = sanitize_key( (string) $icon_key );
            if ( $term_id > 0 && in_array( $icon_key, $allowed_category_icons, true ) ) {
                $clean['category_icons'][ $term_id ] = $icon_key;
            }
        }
        $available_menu_keys = array_keys( self::media_menu_items( $clean ) );
        $submitted_menu_order = isset( $input['media_menu_order'] ) && is_array( $input['media_menu_order'] )
            ? $input['media_menu_order']
            : array();
        $clean['media_menu_order'] = array_values(
            array_unique(
                array_filter(
                    array_map(
                        static function ( mixed $item ) use ( $available_menu_keys ): string {
                            $item = sanitize_key( (string) $item );
                            return in_array( $item, $available_menu_keys, true ) ? $item : '';
                        },
                        $submitted_menu_order
                    )
                )
            )
        );
        $clean['popular_period'] = in_array( (string) ( $input['popular_period'] ?? '' ), array( 'week', 'month', 'all' ), true )
            ? (string) $input['popular_period']
            : $defaults['popular_period'];
        $popular_count = absint( $input['popular_count'] ?? $defaults['popular_count'] );
        $clean['popular_count'] = in_array( $popular_count, array( 4, 8, 12 ), true ) ? $popular_count : $defaults['popular_count'];
        $popular_like_color = sanitize_hex_color( (string) ( $input['popular_like_color'] ?? '' ) );
        $clean['popular_like_color'] = $popular_like_color ?: $defaults['popular_like_color'];
        if ( function_exists( 'mb_substr' ) ) {
            $clean['featured_title'] = mb_substr( $clean['featured_title'], 0, 120 );
            $clean['popular_title']  = mb_substr( $clean['popular_title'], 0, 120 );
        } else {
            $clean['featured_title'] = substr( $clean['featured_title'], 0, 120 );
            $clean['popular_title']  = substr( $clean['popular_title'], 0, 120 );
        }

        foreach ( array( 'show_navigation', 'show_category_menu', 'show_archive_hero', 'show_archive_filters', 'show_featured', 'show_popular', 'show_sharing', 'show_likes', 'share_facebook', 'share_x', 'share_whatsapp', 'share_telegram', 'share_linkedin', 'share_reddit', 'share_pinterest', 'share_copy', 'autoplay_video', 'autoplay_audio', 'youtube_nocookie' ) as $boolean_key ) {
            $clean[ $boolean_key ] = empty( $input[ $boolean_key ] ) ? 0 : 1;
        }

        $clean['archive_slug'] = self::sanitize_slug( $input['archive_slug'] ?? $defaults['archive_slug'], $defaults['archive_slug'] );
        $clean['single_slug']  = self::sanitize_slug( $input['single_slug'] ?? $defaults['single_slug'], $defaults['single_slug'] );

        $clean['width_mode']   = in_array( (string) ( $input['width_mode'] ?? '' ), array( 'theme', 'custom' ), true )
            ? (string) $input['width_mode']
            : $defaults['width_mode'];
        $clean['custom_width'] = min( 2200, max( 640, absint( $input['custom_width'] ?? $defaults['custom_width'] ) ) );
        $clean['typography_mode'] = in_array( (string) ( $input['typography_mode'] ?? '' ), array( 'theme', 'custom' ), true )
            ? (string) $input['typography_mode']
            : $defaults['typography_mode'];

        $font_options = array( 'theme', 'system_sans', 'editorial_serif', 'classic_serif' );
        foreach ( array( 'hero_title_font', 'hero_text_font', 'title_font', 'featured_font', 'single_title_font', 'body_font' ) as $font_key ) {
            $font_value = (string) ( $input[ $font_key ] ?? '' );
            $clean[ $font_key ] = in_array( $font_value, $font_options, true ) ? $font_value : $defaults[ $font_key ];
        }

        foreach ( array( 'hero_title_weight', 'hero_text_weight', 'title_weight', 'featured_weight', 'single_title_weight', 'body_weight' ) as $weight_key ) {
            $weight = absint( $input[ $weight_key ] ?? $defaults[ $weight_key ] );
            $clean[ $weight_key ] = in_array( $weight, array( 400, 500, 600, 700 ), true ) ? $weight : $defaults[ $weight_key ];
        }

        $size_ranges = array(
            'card_title_size'       => array( 14, 32 ),
            'card_title_mobile'     => array( 14, 28 ),
            'featured_title_size'   => array( 16, 40 ),
            'featured_title_mobile' => array( 14, 30 ),
            'single_title_size'     => array( 32, 88 ),
            'single_title_mobile'   => array( 28, 60 ),
            'content_text_size'     => array( 14, 24 ),
            'content_text_mobile'   => array( 14, 22 ),
            'hero_eyebrow_size'     => array( 9, 20 ),
            'hero_eyebrow_mobile'   => array( 9, 18 ),
            'hero_title_size'       => array( 32, 110 ),
            'hero_title_mobile'     => array( 28, 78 ),
            'hero_description_size' => array( 12, 30 ),
            'hero_description_mobile' => array( 12, 24 ),
            'hero_quote_size'       => array( 12, 28 ),
            'hero_quote_mobile'     => array( 12, 24 ),
        );
        foreach ( $size_ranges as $size_key => $range ) {
            $clean[ $size_key ] = min( $range[1], max( $range[0], absint( $input[ $size_key ] ?? $defaults[ $size_key ] ) ) );
        }

        $clean['card_title_mobile']     = min( $clean['card_title_mobile'], $clean['card_title_size'] );
        $clean['featured_title_mobile'] = min( $clean['featured_title_mobile'], $clean['featured_title_size'] );
        $clean['single_title_mobile']   = min( $clean['single_title_mobile'], $clean['single_title_size'] );
        $clean['content_text_mobile']   = min( $clean['content_text_mobile'], $clean['content_text_size'] );
        $clean['hero_eyebrow_mobile']    = min( $clean['hero_eyebrow_mobile'], $clean['hero_eyebrow_size'] );
        $clean['hero_title_mobile']      = min( $clean['hero_title_mobile'], $clean['hero_title_size'] );
        $clean['hero_description_mobile'] = min( $clean['hero_description_mobile'], $clean['hero_description_size'] );
        $clean['hero_quote_mobile']      = min( $clean['hero_quote_mobile'], $clean['hero_quote_size'] );

        foreach ( array( 'text_color', 'muted_color', 'line_color', 'surface_color' ) as $color_key ) {
            $color = sanitize_hex_color( (string) ( $input[ $color_key ] ?? '' ) );
            $clean[ $color_key ] = $color ?: $defaults[ $color_key ];
        }

        if ( $old['archive_slug'] !== $clean['archive_slug'] || $old['single_slug'] !== $clean['single_slug'] ) {
            update_option( 'sg7g_flush_rewrite_rules', 1, false );
        }

        return $clean;
    }

    private static function sanitize_slug( mixed $value, string $fallback ): string {
        $slug = sanitize_title( (string) $value );
        return '' !== $slug ? $slug : $fallback;
    }

    public static function maybe_flush_rewrite_rules(): void {
        if ( ! current_user_can( 'manage_options' ) || ! get_option( 'sg7g_flush_rewrite_rules' ) ) {
            return;
        }

        flush_rewrite_rules( false );
        delete_option( 'sg7g_flush_rewrite_rules' );
    }

    public static function rewrite_conflict_notice(): void {
        if ( ! current_user_can( 'manage_options' ) ) {
            return;
        }

        $screen = get_current_screen();
        if ( ! $screen || ( 'sg7g_media' !== $screen->post_type && ! str_contains( (string) $screen->id, 'sg7g-settings' ) ) ) {
            return;
        }

        $archive_slug = (string) self::get( 'archive_slug', 'galeri' );
        $page         = get_page_by_path( $archive_slug, OBJECT, 'page' );

        if ( ! $page instanceof WP_Post || ! in_array( $page->post_status, array( 'publish', 'private', 'future' ), true ) ) {
            return;
        }

        printf(
            '<div class="notice notice-warning"><p><strong>%1$s</strong> %2$s</p></div>',
            esc_html__( 'Gallery permalink warning:', '7sgaleri' ),
            sprintf(
                /* translators: %s is the conflicting slug. */
                /* translators: %s: Conflicting page permalink. */ esc_html__( 'A WordPress page using the “%s” permalink was found. If the gallery archive produces a 404 error or redirect conflict, choose a different archive permalink under 7S Gallery → Settings.', '7sgaleri' ),
                esc_html( $archive_slug )
            )
        );
    }

    public static function action_links( array $links ): array {
        $url = admin_url( 'edit.php?post_type=sg7g_media&page=sg7g-settings' );
        array_unshift( $links, '<a href="' . esc_url( $url ) . '">' . esc_html__( 'Settings', '7sgaleri' ) . '</a>' );
        return $links;
    }

    public static function render_page(): void {
        if ( ! current_user_can( 'manage_options' ) ) {
            return;
        }

        $settings    = self::all();
        $archive_url = get_post_type_archive_link( 'sg7g_media' ) ?: home_url( '/' );
        $site_prefix = trailingslashit( home_url( '/' ) );
        ?>
        <div class="wrap sg7g-settings-page" data-sg7g-settings-page>
            <div class="sg7g-panel-header">
                <div class="sg7g-panel-header__identity">
                    <span class="sg7g-panel-header__mark" aria-hidden="true">7</span>
                    <div>
                        <h1><?php esc_html_e( '7S Video & Music Gallery', '7sgaleri' ); ?></h1>
                        <p><?php esc_html_e( 'Choose how your gallery looks, how visitors browse it, and how individual media pages behave.', '7sgaleri' ); ?></p>
                    </div>
                </div>
                <div class="sg7g-panel-header__meta">
                    <a class="sg7g-panel-view-link" href="<?php echo esc_url( $archive_url ); ?>" target="_blank" rel="noopener noreferrer">
                        <span class="dashicons dashicons-external" aria-hidden="true"></span>
                        <?php esc_html_e( 'View Gallery', '7sgaleri' ); ?>
                    </a>
                </div>
            </div>

            <?php settings_errors(); ?>

            <div class="sg7g-settings-shell">
                <nav class="sg7g-settings-nav" role="tablist" aria-label="<?php esc_attr_e( '7S Gallery settings sections', '7sgaleri' ); ?>">
                    <?php self::nav_item( 'listing', 'dashicons-screenoptions', __( 'Listing', '7sgaleri' ), __( 'Archive and pagination', '7sgaleri' ), true ); ?>
                    <?php self::nav_item( 'featured', 'dashicons-star-filled', __( 'Home Page', '7sgaleri' ), __( 'Showcase, popularity and ordering', '7sgaleri' ) ); ?>
                    <?php self::nav_item( 'single', 'dashicons-media-document', __( 'Single Content', '7sgaleri' ), __( 'Navigation, likes, recommendations and sharing', '7sgaleri' ) ); ?>
                    <?php self::nav_item( 'player', 'dashicons-controls-play', __( 'Player', '7sgaleri' ), __( 'Video and audio', '7sgaleri' ) ); ?>
                    <?php self::nav_item( 'links', 'dashicons-admin-links', __( 'Permalinks', '7sgaleri' ), __( 'Archive and single URLs', '7sgaleri' ) ); ?>
                    <?php self::nav_item( 'typography', 'dashicons-editor-textcolor', __( 'Typography', '7sgaleri' ), __( 'Font family and sizes', '7sgaleri' ) ); ?>
                    <?php self::nav_item( 'appearance', 'dashicons-admin-appearance', __( 'Appearance', '7sgaleri' ), __( 'Width and colors', '7sgaleri' ) ); ?>
                    <?php self::nav_item( 'transfer', 'dashicons-migrate', __( 'Import / Export', '7sgaleri' ), __( 'Demo, backup and migration', '7sgaleri' ) ); ?>
                </nav>

                <main class="sg7g-settings-content">
                    <form action="options.php" method="post" class="sg7g-settings-form" data-sg7g-settings-form>
                        <?php settings_fields( 'sg7g_settings_group' ); ?>
                        <section class="sg7g-settings-panel is-active" data-sg7g-tab-panel="listing" id="sg7g-panel-listing" role="tabpanel" aria-labelledby="sg7g-tab-listing">

                            <?php self::card_start( __( 'Content flow', '7sgaleri' ), __( 'Manage the number of items in each loading batch and the default publication order.', '7sgaleri' ), 'dashicons-editor-ol' ); ?>
                            <div class="sg7g-settings-grid">
                                <?php self::number_field( 'posts_per_page', __( 'Content per page', '7sgaleri' ), $settings, 1, 48, __( 'Applied to each loading batch in the selected pagination method.', '7sgaleri' ) ); ?>
                                <?php self::select_field(
                                    'sort_order',
                                    __( 'Default order', '7sgaleri' ),
                                    $settings,
                                    array(
                                        'DESC' => __( 'Newest → Oldest', '7sgaleri' ),
                                        'ASC'  => __( 'Oldest → Newest', '7sgaleri' ),
                                    ),
                                    __( 'Determines the date order of archive and live search results.', '7sgaleri' )
                                ); ?>
                                <?php self::number_field( 'card_title_limit', __( 'Card title character limit', '7sgaleri' ), $settings, 0, 200, __( 'Titles stay on one line. Use 0 to disable server-side shortening.', '7sgaleri' ) ); ?>
                            </div>
                            <?php self::card_end(); ?>

                            <?php self::card_start( __( 'Pagination method', '7sgaleri' ), __( 'Choose how visitors move through the content stream.', '7sgaleri' ), 'dashicons-image-filter' ); ?>
                            <?php self::choice_field(
                                'pagination_mode',
                                $settings,
                                array(
                                    'numbers' => array(
                                        'label'       => __( 'Pagination', '7sgaleri' ),
                                        'description' => __( 'Classic numbered pagination links.', '7sgaleri' ),
                                        'icon'        => 'dashicons-editor-ol',
                                    ),
                                    'load_more' => array(
                                        'label'       => __( 'Load More', '7sgaleri' ),
                                        'description' => __( 'New content is appended each time the button is pressed.', '7sgaleri' ),
                                        'icon'        => 'dashicons-download',
                                    ),
                                    'infinite' => array(
                                        'label'       => __( 'Infinite Scroll', '7sgaleri' ),
                                        'description' => __( 'Loads automatically when the visitor approaches the end of the page.', '7sgaleri' ),
                                        'icon'        => 'dashicons-update',
                                    ),
                                ),
                                3
                            ); ?>
                            <?php self::card_end(); ?>

                            <?php self::card_start( __( 'Category navigation', '7sgaleri' ), __( 'Manage the persistent media navigation shown on gallery archives and single media pages.', '7sgaleri' ), 'dashicons-category' ); ?>
                            <?php self::checkbox_field( 'show_category_menu', __( 'Show media navigation', '7sgaleri' ), $settings, __( 'Shows All, Video, Music and gallery categories in the same navigation strip on archive and single media pages.', '7sgaleri' ) ); ?>
                            <?php self::media_menu_order_field( $settings ); ?>
                            <?php self::card_end(); ?>
                        </section>

                        <section class="sg7g-settings-panel" data-sg7g-tab-panel="featured" id="sg7g-panel-featured" role="tabpanel" aria-labelledby="sg7g-tab-featured">

                            <?php self::card_start( __( 'Hero Area', '7sgaleri' ), __( 'Controls the cinematic introduction at the top of the main gallery archive. A built-in temporary hero image is shown until you upload your own image.', '7sgaleri' ), 'dashicons-format-image' ); ?>
                            <?php self::checkbox_field( 'show_archive_hero', __( 'Show cinematic hero', '7sgaleri' ), $settings, __( 'Displayed only on the first, unfiltered gallery archive page.', '7sgaleri' ) ); ?>
                            <?php self::image_field( 'hero_image_id', __( 'Hero image', '7sgaleri' ), $settings, __( 'Recommended: a wide cinematic image, at least 1920 × 800 px. If no image is selected, the built-in temporary hero image is used automatically.', '7sgaleri' ), SG7G_URL . 'assets/images/default-hero.png' ); ?>
                            <div class="sg7g-settings-grid">
                                <?php self::text_field( 'hero_eyebrow', __( 'Eyebrow', '7sgaleri' ), $settings, '', 100 ); ?>
                                <?php self::text_field( 'hero_title', __( 'Hero title', '7sgaleri' ), $settings, '', 100 ); ?>
                                <?php self::text_field( 'hero_description', __( 'Hero description', '7sgaleri' ), $settings, '', 220 ); ?>
                                <?php self::text_field( 'hero_quote', __( 'Optional quote', '7sgaleri' ), $settings, __( 'Leave blank to hide the quote on the right side of the hero.', '7sgaleri' ), 220 ); ?>
                            </div>
                            <?php self::checkbox_field( 'show_archive_filters', __( 'Show gallery search', '7sgaleri' ), $settings, __( 'Shows the clean gallery search field below the media navigation. Type, category, year and sort dropdowns are no longer displayed.', '7sgaleri' ) ); ?>
                            <?php self::card_end(); ?>

                            <div data-sg7g-dependent-section="featured">
                                <?php self::card_start( __( 'Showcase Settings', '7sgaleri' ), __( 'Control the featured showcase and its section heading.', '7sgaleri' ), 'dashicons-visibility' ); ?>
                                <?php self::checkbox_field( 'show_featured', __( 'Show featured content', '7sgaleri' ), $settings, __( 'Shows the featured showcase using the selected layout below.', '7sgaleri' ), 'featured' ); ?>
                                <?php self::featured_layout_field( $settings ); ?>
                                <div class="sg7g-settings-grid">
                                    <?php self::text_field( 'featured_title', __( 'Featured heading', '7sgaleri' ), $settings, __( 'Controls the Featured section heading. Leave blank to use “Featured”.', '7sgaleri' ), 120 ); ?>
                                    <?php self::unbounded_number_field( 'featured_area_title_size', __( 'Section heading size', '7sgaleri' ), $settings, 1, __( 'Applies consistently to Featured, Most Liked and Latest.', '7sgaleri' ), __( 'px', '7sgaleri' ) ); ?>
                                </div>
                                <?php self::card_end(); ?>

                                <div data-sg7g-dependent-content="featured">
                                    <?php self::card_start( __( 'Content order', '7sgaleri' ), __( 'Drag content to set the showcase and reserve order.', '7sgaleri' ), 'dashicons-sort' ); ?>
                                    <?php SG7G_Featured::render_settings_order(); ?>
                                    <?php self::card_end(); ?>
                                </div>
                            </div>
                            <?php self::card_start( __( 'Most Liked Settings', '7sgaleri' ), __( 'Show a compact thumbnail-led index of the most-liked media between Featured and Latest.', '7sgaleri' ), 'dashicons-heart' ); ?>
                            <?php self::checkbox_field( 'show_popular', __( 'Show Most Liked', '7sgaleri' ), $settings, __( 'Uses real visitor likes. If no like history exists yet, published items are used as a neutral fallback so the section remains visible.', '7sgaleri' ) ); ?>
                            <div class="sg7g-settings-grid sg7g-settings-grid--three">
                                <?php self::text_field( 'popular_title', __( 'Section title', '7sgaleri' ), $settings, __( 'Leave blank to use “Most Liked”.', '7sgaleri' ), 120 ); ?>
                                <?php self::select_field(
                                    'popular_period',
                                    __( 'Ranking period', '7sgaleri' ),
                                    $settings,
                                    array(
                                        'week'  => __( 'Last 7 days', '7sgaleri' ),
                                        'month' => __( 'Last 30 days', '7sgaleri' ),
                                        'all'   => __( 'All time', '7sgaleri' ),
                                    ),
                                    __( 'Controls which likes are used for ordering. The period is not printed on the public page.', '7sgaleri' )
                                ); ?>
                                <?php self::select_field(
                                    'popular_count',
                                    __( 'Number of items', '7sgaleri' ),
                                    $settings,
                                    array(
                                        '4'  => __( '4 items', '7sgaleri' ),
                                        '8'  => __( '8 items', '7sgaleri' ),
                                        '12' => __( '12 items', '7sgaleri' ),
                                    ),
                                    __( 'Most Liked always uses a four-column desktop grid. Choose 4, 8, or 12 items to display one, two, or three complete rows.', '7sgaleri' )
                                ); ?>
                            </div>
                            <div class="sg7g-popular-color-setting">
                                <?php self::color_field( 'popular_like_color', __( 'Like icon color', '7sgaleri' ), $settings, __( 'Controls the heart icon accent used in Most Liked.', '7sgaleri' ) ); ?>
                            </div>
                            <?php self::card_end(); ?>
                        </section>

                        <section class="sg7g-settings-panel" data-sg7g-tab-panel="single" id="sg7g-panel-single" role="tabpanel" aria-labelledby="sg7g-tab-single">

                            <?php self::card_start( __( 'Content navigation', '7sgaleri' ), __( 'Manage how visitors move to the previous and next posts.', '7sgaleri' ), 'dashicons-controls-skipforward' ); ?>
                            <?php self::checkbox_field( 'show_navigation', __( 'Show previous and next content', '7sgaleri' ), $settings, __( 'Enables or disables two-way content navigation below the single page.', '7sgaleri' ) ); ?>
                            <?php self::card_end(); ?>

                            <?php self::card_start( __( 'Related content', '7sgaleri' ), __( 'Set how many recommendations are shown based on categories, tags, people, and view data.', '7sgaleri' ), 'dashicons-networking' ); ?>
                            <div class="sg7g-settings-grid sg7g-settings-grid--single">
                                <?php self::number_field( 'related_count', __( 'Number of items to show', '7sgaleri' ), $settings, 0, 12, __( 'Select 0 to disable the related content section completely.', '7sgaleri' ) ); ?>
                            </div>
                            <?php self::card_end(); ?>

                            <?php self::card_start( __( 'Content likes', '7sgaleri' ), __( 'Let visitors like gallery content and see the total number of likes.', '7sgaleri' ), 'dashicons-heart' ); ?>
                            <?php self::checkbox_field( 'show_likes', __( 'Enable likes', '7sgaleri' ), $settings, __( 'Guests can like without signing in. They can also remove their like from the same browser.', '7sgaleri' ) ); ?>
                            <?php self::card_end(); ?>

                            <div data-sg7g-dependent-section="sharing">
                                <?php self::card_start( __( 'Social sharing', '7sgaleri' ), __( 'Choose whether sharing controls appear on single content pages.', '7sgaleri' ), 'dashicons-share' ); ?>
                                <?php self::checkbox_field( 'show_sharing', __( 'Show sharing tools', '7sgaleri' ), $settings, __( 'When disabled, the network selections below are preserved but hidden on the front end.', '7sgaleri' ), 'sharing' ); ?>
                                <?php self::card_end(); ?>

                                <div data-sg7g-dependent-content="sharing">
                                    <?php self::card_start( __( 'Sharing platforms', '7sgaleri' ), __( 'Select the platforms visitors can use on single content pages.', '7sgaleri' ), 'dashicons-admin-site-alt3' ); ?>
                                    <div class="sg7g-network-grid">
                                        <?php self::network_field( 'share_facebook', __( 'Facebook', '7sgaleri' ), $settings, 'F' ); ?>
                                        <?php self::network_field( 'share_x', __( 'X', '7sgaleri' ), $settings, 'X' ); ?>
                                        <?php self::network_field( 'share_whatsapp', __( 'WhatsApp', '7sgaleri' ), $settings, 'W' ); ?>
                                        <?php self::network_field( 'share_telegram', __( 'Telegram', '7sgaleri' ), $settings, 'T' ); ?>
                                        <?php self::network_field( 'share_linkedin', __( 'LinkedIn', '7sgaleri' ), $settings, 'in' ); ?>
                                        <?php self::network_field( 'share_reddit', __( 'Reddit', '7sgaleri' ), $settings, 'R' ); ?>
                                        <?php self::network_field( 'share_pinterest', __( 'Pinterest', '7sgaleri' ), $settings, 'P' ); ?>
                                        <?php self::network_field( 'share_copy', __( 'Copy link', '7sgaleri' ), $settings, '↗' ); ?>
                                    </div>
                                    <p class="sg7g-panel-note"><?php esc_html_e( 'Sharing icons are rendered as local SVG graphics included with 7S Video & Music Gallery; no external icon library is required.', '7sgaleri' ); ?></p>
                                    <?php self::card_end(); ?>
                                </div>
                            </div>
                        </section>

                        <section class="sg7g-settings-panel" data-sg7g-tab-panel="player" id="sg7g-panel-player" role="tabpanel" aria-labelledby="sg7g-tab-player">

                            <?php self::card_start( __( 'Autoplay', '7sgaleri' ), __( 'Set automatic playback behavior separately for video and audio content.', '7sgaleri' ), 'dashicons-controls-play' ); ?>
                            <div class="sg7g-settings-stack">
                                <?php self::checkbox_field( 'autoplay_video', __( 'Autoplay videos', '7sgaleri' ), $settings, __( 'Video playback starts automatically when allowed by the browser and source.', '7sgaleri' ) ); ?>
                                <?php self::checkbox_field( 'autoplay_audio', __( 'Autoplay audio', '7sgaleri' ), $settings, __( 'Browsers usually block autoplay with sound until the user interacts with the page.', '7sgaleri' ) ); ?>
                            </div>
                            <?php self::card_end(); ?>

                            <?php self::card_start( __( 'YouTube privacy', '7sgaleri' ), __( 'Use the privacy-enhanced version of the YouTube embed domain.', '7sgaleri' ), 'dashicons-shield-alt' ); ?>
                            <?php self::checkbox_field( 'youtube_nocookie', __( 'Use YouTube privacy-enhanced mode', '7sgaleri' ), $settings, __( 'When enabled, players are created through the youtube-nocookie.com domain.', '7sgaleri' ) ); ?>
                            <?php self::card_end(); ?>
                        </section>

                        <section class="sg7g-settings-panel" data-sg7g-tab-panel="links" id="sg7g-panel-links" role="tabpanel" aria-labelledby="sg7g-tab-links">

                            <?php self::card_start( __( 'URL structure', '7sgaleri' ), __( 'Enter only the permalink base; you do not need to add a slash at the beginning or end.', '7sgaleri' ), 'dashicons-admin-links' ); ?>
                            <div class="sg7g-settings-grid">
                                <?php self::slug_field( 'archive_slug', __( 'Archive permalink', '7sgaleri' ), $settings, $site_prefix, __( 'The main URL of the gallery archive.', '7sgaleri' ) ); ?>
                                <?php self::slug_field( 'single_slug', __( 'Single content permalink', '7sgaleri' ), $settings, $site_prefix, __( 'The permalink base for each video and audio item.', '7sgaleri' ) ); ?>
                            </div>
                            <p class="sg7g-panel-note"><?php esc_html_e( 'WordPress rewrite rules are refreshed automatically when these fields are changed.', '7sgaleri' ); ?></p>
                            <?php self::card_end(); ?>
                        </section>

                        <section class="sg7g-settings-panel" data-sg7g-tab-panel="typography" id="sg7g-panel-typography" role="tabpanel" aria-labelledby="sg7g-tab-typography">

                            <div class="sg7g-typography-preview-card">
                                <?php self::card_start( __( 'Live Preview', '7sgaleri' ), '', 'dashicons-visibility' ); ?>
                                <div class="sg7g-typography-preview" data-sg7g-typography-preview>
                                    <div class="sg7g-typography-preview__toolbar">
                                        <div class="sg7g-typography-preview__status">
                                            <strong><?php esc_html_e( 'Gallery appearance', '7sgaleri' ); ?></strong>
                                            <span data-sg7g-preview-status><?php esc_html_e( 'Desktop preview', '7sgaleri' ); ?></span>
                                        </div>
                                        <div class="sg7g-typography-preview__devices" role="group" aria-label="<?php esc_attr_e( 'Preview device', '7sgaleri' ); ?>">
                                            <button type="button" class="sg7g-typography-preview__device is-active" data-sg7g-preview-device="desktop" aria-pressed="true">
                                                <span class="sg7g-typography-preview__device-visual sg7g-typography-preview__device-visual--desktop" aria-hidden="true">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </span>
                                                <span class="sg7g-typography-preview__device-copy">
                                                    <strong><?php esc_html_e( 'Desktop', '7sgaleri' ); ?></strong>
                                                    <small><?php esc_html_e( 'Wide gallery preview', '7sgaleri' ); ?></small>
                                                </span>
                                                <span class="sg7g-typography-preview__device-check dashicons dashicons-yes-alt" aria-hidden="true"></span>
                                            </button>
                                            <button type="button" class="sg7g-typography-preview__device" data-sg7g-preview-device="mobile" aria-pressed="false">
                                                <span class="sg7g-typography-preview__device-visual sg7g-typography-preview__device-visual--mobile" aria-hidden="true">
                                                    <i></i><i></i><i></i><i></i><i></i>
                                                </span>
                                                <span class="sg7g-typography-preview__device-copy">
                                                    <strong><?php esc_html_e( 'Mobile', '7sgaleri' ); ?></strong>
                                                    <small><?php esc_html_e( 'Compact gallery preview', '7sgaleri' ); ?></small>
                                                </span>
                                                <span class="sg7g-typography-preview__device-check dashicons dashicons-yes-alt" aria-hidden="true"></span>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="sg7g-typography-preview__stage" data-sg7g-preview-stage data-device="desktop">
                                        <div class="sg7g-typography-preview__canvas">
                                            <div class="sg7g-typography-preview__samples">
                                                <article class="sg7g-typography-preview__featured-sample sg7g-typography-preview__sample-card">
                                                    <span class="sg7g-typography-preview__sample-label sg7g-typography-preview__ui-text"><?php esc_html_e( 'Featured', '7sgaleri' ); ?></span>
                                                    <div class="sg7g-typography-preview__showcase" data-sg7g-preview-showcase data-layout="<?php echo esc_attr( 'editorial_2_3' === ( $settings['featured_layout'] ?? 'editorial_1_4' ) ? 'editorial_2_3' : 'editorial_1_4' ); ?>">
                                                        <article class="sg7g-typography-preview__showcase-item" data-sg7g-preview-showcase-item="1">
                                                            <div class="sg7g-typography-preview__featured-visual sg7g-typography-preview__featured-visual--lead">
                                                                <span class="sg7g-typography-preview__media-icon dashicons dashicons-controls-play" aria-hidden="true"></span>
                                                                <span class="sg7g-typography-preview__metrics sg7g-typography-preview__ui-text" aria-hidden="true">◉ 128&nbsp;&nbsp;♥ 8</span>
                                                            </div>
                                                            <strong class="sg7g-typography-preview__featured-title"><?php esc_html_e( 'Showcase Card Title', '7sgaleri' ); ?></strong>
                                                        </article>
                                                        <article class="sg7g-typography-preview__showcase-item" data-sg7g-preview-showcase-item="2">
                                                            <div class="sg7g-typography-preview__featured-visual">
                                                                <span class="sg7g-typography-preview__media-icon dashicons dashicons-format-audio" aria-hidden="true"></span>
                                                            </div>
                                                            <strong class="sg7g-typography-preview__featured-title"><?php esc_html_e( 'Showcase Card Title', '7sgaleri' ); ?></strong>
                                                        </article>
                                                        <article class="sg7g-typography-preview__showcase-item" data-sg7g-preview-showcase-item="3">
                                                            <div class="sg7g-typography-preview__featured-visual">
                                                                <span class="sg7g-typography-preview__media-icon dashicons dashicons-controls-play" aria-hidden="true"></span>
                                                            </div>
                                                            <strong class="sg7g-typography-preview__featured-title"><?php esc_html_e( 'Showcase Card Title', '7sgaleri' ); ?></strong>
                                                        </article>
                                                        <article class="sg7g-typography-preview__showcase-item" data-sg7g-preview-showcase-item="4">
                                                            <div class="sg7g-typography-preview__featured-visual">
                                                                <span class="sg7g-typography-preview__media-icon dashicons dashicons-controls-play" aria-hidden="true"></span>
                                                            </div>
                                                            <strong class="sg7g-typography-preview__featured-title"><?php esc_html_e( 'Showcase Card Title', '7sgaleri' ); ?></strong>
                                                        </article>
                                                        <article class="sg7g-typography-preview__showcase-item" data-sg7g-preview-showcase-item="5">
                                                            <div class="sg7g-typography-preview__featured-visual">
                                                                <span class="sg7g-typography-preview__media-icon dashicons dashicons-format-audio" aria-hidden="true"></span>
                                                            </div>
                                                            <strong class="sg7g-typography-preview__featured-title"><?php esc_html_e( 'Showcase Card Title', '7sgaleri' ); ?></strong>
                                                        </article>
                                                    </div>
                                                </article>

                                                <article class="sg7g-typography-preview__normal-card sg7g-typography-preview__sample-card">
                                                    <span class="sg7g-typography-preview__sample-label sg7g-typography-preview__ui-text"><?php esc_html_e( 'Content card', '7sgaleri' ); ?></span>
                                                    <div class="sg7g-typography-preview__card-visual">
                                                        <span class="sg7g-typography-preview__media-icon dashicons dashicons-format-audio" aria-hidden="true"></span>
                                                    </div>
                                                    <div class="sg7g-typography-preview__card-copy">
                                                        <h3 class="sg7g-typography-preview__card-title"><?php esc_html_e( 'Content Title', '7sgaleri' ); ?></h3>
                                                        <span class="sg7g-typography-preview__metrics sg7g-typography-preview__ui-text" aria-hidden="true">◉ 128&nbsp;&nbsp;♥ 8</span>
                                                    </div>
                                                </article>
                                            </div>

                                            <article class="sg7g-typography-preview__single">
                                                <span class="sg7g-typography-preview__sample-label sg7g-typography-preview__ui-text"><?php esc_html_e( 'Single content', '7sgaleri' ); ?></span>
                                                <h2 class="sg7g-typography-preview__single-title"><?php esc_html_e( 'Content Title', '7sgaleri' ); ?></h2>
                                                <p class="sg7g-typography-preview__body-text"><?php esc_html_e( 'Content text is previewed here with the typography you select. The title, body text, and surrounding spacing remain readable at their natural scale.', '7sgaleri' ); ?></p>
                                            </article>

                                            <nav class="sg7g-typography-preview__mobile-navigation" aria-hidden="true">
                                                <span class="sg7g-typography-preview__mobile-navigation-item is-active">
                                                    <span class="sg7g-typography-preview__mobile-navigation-icon"><?php echo SG7G_Archive_UI::nav_icon( 'all' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static trusted SVG. ?></span>
                                                    <span><?php esc_html_e( 'All', '7sgaleri' ); ?></span>
                                                </span>
                                                <span class="sg7g-typography-preview__mobile-navigation-item">
                                                    <span class="sg7g-typography-preview__mobile-navigation-icon"><?php echo SG7G_Archive_UI::nav_icon( 'video' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static trusted SVG. ?></span>
                                                    <span><?php esc_html_e( 'Video', '7sgaleri' ); ?></span>
                                                </span>
                                                <span class="sg7g-typography-preview__mobile-navigation-item">
                                                    <span class="sg7g-typography-preview__mobile-navigation-icon"><?php echo SG7G_Archive_UI::nav_icon( 'audio' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static trusted SVG. ?></span>
                                                    <span><?php esc_html_e( 'Music', '7sgaleri' ); ?></span>
                                                </span>
                                                <span class="sg7g-typography-preview__mobile-navigation-item">
                                                    <span class="sg7g-typography-preview__mobile-navigation-icon"><?php echo SG7G_Archive_UI::nav_icon( 'all' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static trusted SVG. ?></span>
                                                    <span><?php esc_html_e( 'Categories', '7sgaleri' ); ?></span>
                                                </span>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                                <?php self::card_end(); ?>
                            </div>

                            <div class="sg7g-typography-source-card">
                                <?php self::card_start( __( 'Typography source', '7sgaleri' ), __( 'Use your theme fonts or give the gallery its own typography.', '7sgaleri' ), 'dashicons-editor-textcolor' ); ?>
                                <?php self::choice_field(
                                    'typography_mode',
                                    $settings,
                                    array(
                                        'theme' => array(
                                            'label'       => __( 'Theme typography', '7sgaleri' ),
                                            'description' => __( 'Uses the active theme’s font families and weights. Gallery title and text sizes remain adjustable below.', '7sgaleri' ),
                                            'icon'        => 'dashicons-admin-appearance',
                                        ),
                                        'custom' => array(
                                            'label'       => __( 'Gallery typography', '7sgaleri' ),
                                            'description' => __( 'Manage font family, weight, and size for each gallery area.', '7sgaleri' ),
                                            'icon'        => 'dashicons-editor-textcolor',
                                        ),
                                    ),
                                    2
                                ); ?>
                                <?php self::card_end(); ?>
                            </div>

                            <div>
                                <?php self::card_start( __( 'Typography areas', '7sgaleri' ), __( 'Desktop and mobile sizes are always available, including Hero Area sizes. Font family and weight controls are used only when Gallery typography is selected.', '7sgaleri' ), 'dashicons-editor-paragraph' ); ?>
                                <div class="sg7g-typography-control-grid">
                                    <section class="sg7g-typography-control-group sg7g-typography-control-group--hero">
                                        <header><span class="dashicons dashicons-format-image" aria-hidden="true"></span><h4><?php esc_html_e( 'Hero Area', '7sgaleri' ); ?></h4></header>
                                        <div class="sg7g-typography-control-fields">
                                            <div class="sg7g-typography-custom-fields" data-sg7g-typography-custom>
                                                <?php self::select_field( 'hero_title_font', __( 'Title font family', '7sgaleri' ), $settings, self::font_options() ); ?>
                                                <?php self::select_field( 'hero_title_weight', __( 'Title weight', '7sgaleri' ), $settings, self::weight_options() ); ?>
                                                <?php self::select_field( 'hero_text_font', __( 'Text font family', '7sgaleri' ), $settings, self::font_options() ); ?>
                                                <?php self::select_field( 'hero_text_weight', __( 'Text weight', '7sgaleri' ), $settings, self::weight_options() ); ?>
                                            </div>
                                            <div class="sg7g-hero-type-grid">
                                                <section class="sg7g-hero-type-group">
                                                    <strong><?php esc_html_e( 'Eyebrow', '7sgaleri' ); ?></strong>
                                                    <div class="sg7g-settings-grid">
                                                        <?php self::number_field( 'hero_eyebrow_size', __( 'Desktop', '7sgaleri' ), $settings, 9, 20, '', __( 'px', '7sgaleri' ) ); ?>
                                                        <?php self::number_field( 'hero_eyebrow_mobile', __( 'Mobile', '7sgaleri' ), $settings, 9, 18, '', __( 'px', '7sgaleri' ) ); ?>
                                                    </div>
                                                </section>
                                                <section class="sg7g-hero-type-group">
                                                    <strong><?php esc_html_e( 'Hero title', '7sgaleri' ); ?></strong>
                                                    <div class="sg7g-settings-grid">
                                                        <?php self::number_field( 'hero_title_size', __( 'Desktop', '7sgaleri' ), $settings, 32, 110, '', __( 'px', '7sgaleri' ) ); ?>
                                                        <?php self::number_field( 'hero_title_mobile', __( 'Mobile', '7sgaleri' ), $settings, 28, 78, '', __( 'px', '7sgaleri' ) ); ?>
                                                    </div>
                                                </section>
                                                <section class="sg7g-hero-type-group">
                                                    <strong><?php esc_html_e( 'Description', '7sgaleri' ); ?></strong>
                                                    <div class="sg7g-settings-grid">
                                                        <?php self::number_field( 'hero_description_size', __( 'Desktop', '7sgaleri' ), $settings, 12, 30, '', __( 'px', '7sgaleri' ) ); ?>
                                                        <?php self::number_field( 'hero_description_mobile', __( 'Mobile', '7sgaleri' ), $settings, 12, 24, '', __( 'px', '7sgaleri' ) ); ?>
                                                    </div>
                                                </section>
                                                <section class="sg7g-hero-type-group">
                                                    <strong><?php esc_html_e( 'Quote', '7sgaleri' ); ?></strong>
                                                    <div class="sg7g-settings-grid">
                                                        <?php self::number_field( 'hero_quote_size', __( 'Desktop', '7sgaleri' ), $settings, 12, 28, '', __( 'px', '7sgaleri' ) ); ?>
                                                        <?php self::number_field( 'hero_quote_mobile', __( 'Mobile', '7sgaleri' ), $settings, 12, 24, '', __( 'px', '7sgaleri' ) ); ?>
                                                    </div>
                                                </section>
                                            </div>
                                        </div>
                                    </section>

                                    <section class="sg7g-typography-control-group">
                                        <header><span class="dashicons dashicons-grid-view" aria-hidden="true"></span><h4><?php esc_html_e( 'Card title', '7sgaleri' ); ?></h4></header>
                                        <div class="sg7g-typography-control-fields">
                                            <div class="sg7g-typography-custom-fields" data-sg7g-typography-custom>
                                                <?php self::select_field( 'title_font', __( 'Font family', '7sgaleri' ), $settings, self::font_options() ); ?>
                                                <?php self::select_field( 'title_weight', __( 'Weight', '7sgaleri' ), $settings, self::weight_options() ); ?>
                                            </div>
                                            <?php self::number_field( 'card_title_size', __( 'Desktop', '7sgaleri' ), $settings, 14, 32, '', __( 'px', '7sgaleri' ) ); ?>
                                            <?php self::number_field( 'card_title_mobile', __( 'Mobile', '7sgaleri' ), $settings, 14, 28, '', __( 'px', '7sgaleri' ) ); ?>
                                        </div>
                                    </section>

                                    <section class="sg7g-typography-control-group">
                                        <header><span class="dashicons dashicons-cover-image" aria-hidden="true"></span><h4><?php esc_html_e( 'Showcase card titles', '7sgaleri' ); ?></h4></header>
                                        <div class="sg7g-typography-control-fields">
                                            <div class="sg7g-typography-custom-fields" data-sg7g-typography-custom>
                                                <?php self::select_field( 'featured_font', __( 'Font family', '7sgaleri' ), $settings, self::font_options() ); ?>
                                                <?php self::select_field( 'featured_weight', __( 'Weight', '7sgaleri' ), $settings, self::weight_options() ); ?>
                                            </div>
                                            <?php self::number_field( 'featured_title_size', __( 'Desktop', '7sgaleri' ), $settings, 16, 40, '', __( 'px', '7sgaleri' ) ); ?>
                                            <?php self::number_field( 'featured_title_mobile', __( 'Mobile', '7sgaleri' ), $settings, 14, 30, '', __( 'px', '7sgaleri' ) ); ?>
                                        </div>
                                    </section>

                                    <section class="sg7g-typography-control-group">
                                        <header><span class="dashicons dashicons-editor-textcolor" aria-hidden="true"></span><h4><?php esc_html_e( 'Single content title', '7sgaleri' ); ?></h4></header>
                                        <div class="sg7g-typography-control-fields">
                                            <div class="sg7g-typography-custom-fields" data-sg7g-typography-custom>
                                                <?php self::select_field( 'single_title_font', __( 'Font family', '7sgaleri' ), $settings, self::font_options() ); ?>
                                                <?php self::select_field( 'single_title_weight', __( 'Weight', '7sgaleri' ), $settings, self::weight_options() ); ?>
                                            </div>
                                            <?php self::number_field( 'single_title_size', __( 'Desktop', '7sgaleri' ), $settings, 32, 88, '', __( 'px', '7sgaleri' ) ); ?>
                                            <?php self::number_field( 'single_title_mobile', __( 'Mobile', '7sgaleri' ), $settings, 28, 60, '', __( 'px', '7sgaleri' ) ); ?>
                                        </div>
                                    </section>

                                    <section class="sg7g-typography-control-group">
                                        <header><span class="dashicons dashicons-editor-alignleft" aria-hidden="true"></span><h4><?php esc_html_e( 'Interface and content text', '7sgaleri' ); ?></h4></header>
                                        <div class="sg7g-typography-control-fields">
                                            <div class="sg7g-typography-custom-fields" data-sg7g-typography-custom>
                                                <?php self::select_field( 'body_font', __( 'Font family', '7sgaleri' ), $settings, self::font_options() ); ?>
                                                <?php self::select_field( 'body_weight', __( 'Weight', '7sgaleri' ), $settings, self::weight_options() ); ?>
                                            </div>
                                            <?php self::number_field( 'content_text_size', __( 'Desktop', '7sgaleri' ), $settings, 14, 24, '', __( 'px', '7sgaleri' ) ); ?>
                                            <?php self::number_field( 'content_text_mobile', __( 'Mobile', '7sgaleri' ), $settings, 14, 22, '', __( 'px', '7sgaleri' ) ); ?>
                                        </div>
                                    </section>
                                </div>
                                <?php self::card_end(); ?>
                            </div>
                        </section>

                        <section class="sg7g-settings-panel" data-sg7g-tab-panel="appearance" id="sg7g-panel-appearance" role="tabpanel" aria-labelledby="sg7g-tab-appearance">

                            <?php self::card_start( __( 'Content width', '7sgaleri' ), __( 'Archive and single content pages use the same width rule.', '7sgaleri' ), 'dashicons-editor-expand' ); ?>
                            <?php self::choice_field(
                                'width_mode',
                                $settings,
                                array(
                                    'theme' => array(
                                        'label'       => __( 'Theme width', '7sgaleri' ),
                                        'description' => __( 'Uses the active theme’s site or wide content width.', '7sgaleri' ),
                                        'icon'        => 'dashicons-admin-appearance',
                                    ),
                                    'custom' => array(
                                        'label'       => __( 'Custom width', '7sgaleri' ),
                                        'description' => __( 'Sets an independent maximum width in pixels.', '7sgaleri' ),
                                        'icon'        => 'dashicons-editor-expand',
                                    ),
                                ),
                                2
                            ); ?>
                            <div class="sg7g-dependent-field" data-sg7g-width-custom>
                                <?php self::number_field( 'custom_width', __( 'Custom width value', '7sgaleri' ), $settings, 640, 2200, __( 'Use a value between 640 and 2200 pixels.', '7sgaleri' ), __( 'px', '7sgaleri' ) ); ?>
                            </div>
                            <?php self::card_end(); ?>

                            <?php self::card_start( __( 'Interface colors', '7sgaleri' ), __( 'Set the base gallery colors used when theme variables are unavailable.', '7sgaleri' ), 'dashicons-art' ); ?>
                            <div class="sg7g-color-grid">
                                <?php self::color_field( 'text_color', __( 'Primary text', '7sgaleri' ), $settings ); ?>
                                <?php self::color_field( 'muted_color', __( 'Secondary text', '7sgaleri' ), $settings ); ?>
                                <?php self::color_field( 'line_color', __( 'Divider', '7sgaleri' ), $settings ); ?>
                                <?php self::color_field( 'surface_color', __( 'Surface', '7sgaleri' ), $settings ); ?>
                            </div>
                            <?php self::card_end(); ?>
                        </section>

                        <div class="sg7g-settings-actions">
                            <div class="sg7g-settings-actions__status">
                                <span class="dashicons dashicons-saved" aria-hidden="true"></span>
                                <p data-sg7g-save-state aria-live="polite"><?php esc_html_e( 'No front-end changes are applied until the settings are saved.', '7sgaleri' ); ?></p>
                            </div>
                            <?php submit_button( __( 'Save Settings', '7sgaleri' ), 'primary', 'submit', false ); ?>
                        </div>
                    </form>

                    <?php SG7G_Transfer::render_settings_panel(); ?>
                </main>
            </div>
        </div>
        <?php
    }

    private static function nav_item( string $target, string $icon, string $label, string $description, bool $active = false ): void {
        ?>
        <button type="button" id="sg7g-tab-<?php echo esc_attr( $target ); ?>" class="sg7g-settings-nav__item<?php echo $active ? ' is-active' : ''; ?>" data-sg7g-tab-target="<?php echo esc_attr( $target ); ?>" role="tab" aria-controls="sg7g-panel-<?php echo esc_attr( $target ); ?>" aria-selected="<?php echo $active ? 'true' : 'false'; ?>" tabindex="<?php echo $active ? '0' : '-1'; ?>">
            <span class="dashicons <?php echo esc_attr( $icon ); ?>" aria-hidden="true"></span>
            <span class="sg7g-settings-nav__copy">
                <strong><?php echo esc_html( $label ); ?></strong>
                <small><?php echo esc_html( $description ); ?></small>
            </span>
        </button>
        <?php
    }


    private static function card_start( string $title, string $description, string $icon = '' ): void {
        ?>
        <section class="sg7g-settings-card">
            <header class="sg7g-settings-card__header">
                <?php if ( '' !== $icon ) : ?><span class="dashicons <?php echo esc_attr( $icon ); ?>" aria-hidden="true"></span><?php endif; ?>
                <div>
                    <h3><?php echo esc_html( $title ); ?></h3>
                    <?php if ( '' !== $description ) : ?><p><?php echo esc_html( $description ); ?></p><?php endif; ?>
                </div>
            </header>
            <div class="sg7g-settings-card__body">
        <?php
    }

    private static function card_end(): void {
        ?>
            </div>
        </section>
        <?php
    }

    private static function field_name( string $key ): string {
        return self::OPTION . '[' . $key . ']';
    }

    private static function number_field( string $key, string $label, array $settings, int $min, int $max, string $description = '', string $suffix = '' ): void {
        ?>
        <div class="sg7g-setting-field">
            <label for="sg7g-<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></label>
            <div class="sg7g-input-with-suffix">
                <input type="number" id="sg7g-<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="<?php echo esc_attr( (string) $settings[ $key ] ); ?>" min="<?php echo esc_attr( (string) $min ); ?>" max="<?php echo esc_attr( (string) $max ); ?>" step="1" />
                <?php if ( '' !== $suffix ) : ?><span><?php echo esc_html( $suffix ); ?></span><?php endif; ?>
            </div>
            <?php if ( '' !== $description ) : ?><p class="description"><?php echo esc_html( $description ); ?></p><?php endif; ?>
        </div>
        <?php
    }


    private static function unbounded_number_field( string $key, string $label, array $settings, int $min = 1, string $description = '', string $suffix = '' ): void {
        ?>
        <div class="sg7g-setting-field">
            <label for="sg7g-<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></label>
            <div class="sg7g-input-with-suffix">
                <input type="number" id="sg7g-<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="<?php echo esc_attr( (string) $settings[ $key ] ); ?>" min="<?php echo esc_attr( (string) $min ); ?>" step="1" inputmode="numeric" />
                <?php if ( '' !== $suffix ) : ?><span><?php echo esc_html( $suffix ); ?></span><?php endif; ?>
            </div>
            <?php if ( '' !== $description ) : ?><p class="description"><?php echo esc_html( $description ); ?></p><?php endif; ?>
        </div>
        <?php
    }

    private static function text_field( string $key, string $label, array $settings, string $description = '', int $maxlength = 0 ): void {
        ?>
        <div class="sg7g-setting-field">
            <label for="sg7g-<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></label>
            <input
                type="text"
                id="sg7g-<?php echo esc_attr( $key ); ?>"
                name="<?php echo esc_attr( self::field_name( $key ) ); ?>"
                value="<?php echo esc_attr( (string) $settings[ $key ] ); ?>"
                <?php if ( $maxlength > 0 ) : ?>maxlength="<?php echo esc_attr( (string) $maxlength ); ?>"<?php endif; ?>
                autocomplete="off"
            />
            <?php if ( '' !== $description ) : ?><p class="description"><?php echo esc_html( $description ); ?></p><?php endif; ?>
        </div>
        <?php
    }

    private static function image_field( string $key, string $label, array $settings, string $description = '', string $fallback_url = '' ): void {
        $attachment_id = absint( $settings[ $key ] ?? 0 );
        $preview_url   = $attachment_id ? wp_get_attachment_image_url( $attachment_id, 'medium_large' ) : '';
        $fallback_url  = esc_url_raw( $fallback_url );
        $display_url   = $preview_url ?: $fallback_url;
        ?>
        <div class="sg7g-setting-field sg7g-setting-field--image" data-sg7g-image-field<?php echo $fallback_url ? ' data-sg7g-image-fallback-url="' . esc_attr( $fallback_url ) . '"' : ''; ?>>
            <label for="sg7g-<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></label>
            <input type="hidden" id="sg7g-<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="<?php echo esc_attr( (string) $attachment_id ); ?>" data-sg7g-image-id />
            <div class="sg7g-image-picker<?php echo $preview_url ? ' has-image' : ( $fallback_url ? ' has-fallback' : '' ); ?>">
                <div class="sg7g-image-picker__preview" data-sg7g-image-preview>
                    <?php if ( $display_url ) : ?>
                        <img src="<?php echo esc_url( $display_url ); ?>" alt="" />
                    <?php else : ?>
                        <span class="dashicons dashicons-format-image" aria-hidden="true"></span>
                    <?php endif; ?>
                </div>
                <div class="sg7g-image-picker__actions">
                    <button type="button" class="button button-secondary" data-sg7g-image-select><?php esc_html_e( 'Select image', '7sgaleri' ); ?></button>
                    <button type="button" class="button button-link-delete" data-sg7g-image-remove<?php echo $preview_url ? '' : ' hidden'; ?>><?php esc_html_e( 'Remove image', '7sgaleri' ); ?></button>
                </div>
            </div>
            <?php if ( '' !== $description ) : ?><p class="description"><?php echo esc_html( $description ); ?></p><?php endif; ?>
        </div>
        <?php
    }

    private static function slug_field( string $key, string $label, array $settings, string $prefix, string $description = '' ): void {
        ?>
        <div class="sg7g-setting-field">
            <label for="sg7g-<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></label>
            <div class="sg7g-slug-field">
                <span title="<?php echo esc_attr( $prefix ); ?>"><?php echo esc_html( wp_parse_url( $prefix, PHP_URL_HOST ) ?: $prefix ); ?>/</span>
                <input type="text" id="sg7g-<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="<?php echo esc_attr( (string) $settings[ $key ] ); ?>" autocomplete="off" />
            </div>
            <code class="sg7g-slug-preview" data-sg7g-slug-preview="sg7g-<?php echo esc_attr( $key ); ?>" data-sg7g-slug-prefix="<?php echo esc_attr( $prefix ); ?>"><?php echo esc_html( trailingslashit( $prefix . trim( (string) $settings[ $key ], '/' ) ) ); ?></code>
            <?php if ( '' !== $description ) : ?><p class="description"><?php echo esc_html( $description ); ?></p><?php endif; ?>
        </div>
        <?php
    }

    private static function select_field( string $key, string $label, array $settings, array $options, string $description = '' ): void {
        ?>
        <div class="sg7g-setting-field">
            <label for="sg7g-<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $label ); ?></label>
            <select id="sg7g-<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( self::field_name( $key ) ); ?>">
                <?php foreach ( $options as $value => $option_label ) : ?>
                    <option value="<?php echo esc_attr( (string) $value ); ?>" <?php selected( (string) $settings[ $key ], (string) $value ); ?>><?php echo esc_html( (string) $option_label ); ?></option>
                <?php endforeach; ?>
            </select>
            <?php if ( '' !== $description ) : ?><p class="description"><?php echo esc_html( $description ); ?></p><?php endif; ?>
        </div>
        <?php
    }

    private static function featured_layout_field( array $settings ): void {
        $value = (string) ( $settings['featured_layout'] ?? 'editorial_1_4' );
        if ( ! in_array( $value, array( 'editorial_1_4', 'editorial_2_3' ), true ) ) {
            $value = 'editorial_1_4';
        }
        ?>
        <fieldset class="sg7g-featured-layout-field">
            <legend><?php esc_html_e( 'Featured layout', '7sgaleri' ); ?></legend>
            <div class="sg7g-featured-layout-choices">
                <label class="sg7g-featured-layout-option">
                    <input type="radio" name="<?php echo esc_attr( self::field_name( 'featured_layout' ) ); ?>" value="editorial_1_4" <?php checked( $value, 'editorial_1_4' ); ?> />
                    <span class="sg7g-featured-layout-option__card">
                        <span class="sg7g-featured-layout-preview sg7g-featured-layout-preview--mosaic" aria-hidden="true">
                            <span class="sg7g-featured-layout-preview__lead"></span>
                            <span class="sg7g-featured-layout-preview__support">
                                <i></i><i></i><i></i><i></i>
                            </span>
                        </span>
                        <span class="sg7g-featured-layout-option__copy">
                            <strong><?php esc_html_e( 'Editorial Mosaic', '7sgaleri' ); ?></strong>
                            <small><?php esc_html_e( '1 large + 4 small', '7sgaleri' ); ?></small>
                        </span>
                        <span class="sg7g-featured-layout-option__check dashicons dashicons-yes-alt" aria-hidden="true"></span>
                    </span>
                </label>
                <label class="sg7g-featured-layout-option">
                    <input type="radio" name="<?php echo esc_attr( self::field_name( 'featured_layout' ) ); ?>" value="editorial_2_3" <?php checked( $value, 'editorial_2_3' ); ?> />
                    <span class="sg7g-featured-layout-option__card">
                        <span class="sg7g-featured-layout-preview sg7g-featured-layout-preview--two-three" aria-hidden="true">
                            <i></i><i></i><i></i><i></i><i></i>
                        </span>
                        <span class="sg7g-featured-layout-option__copy">
                            <strong><?php esc_html_e( 'Editorial 2+3', '7sgaleri' ); ?></strong>
                            <small><?php esc_html_e( '2 large + 3 small', '7sgaleri' ); ?></small>
                        </span>
                        <span class="sg7g-featured-layout-option__check dashicons dashicons-yes-alt" aria-hidden="true"></span>
                    </span>
                </label>
            </div>
            <p class="description"><?php esc_html_e( 'Choose the Featured arrangement from the live layout previews. Both layouts use the first five published featured items.', '7sgaleri' ); ?></p>
        </fieldset>
        <?php
    }

    private static function checkbox_field( string $key, string $label, array $settings, string $description = '', string $controller = '' ): void {
        $label_id = 'sg7g-' . $key . '-label';
        ?>
        <div class="sg7g-setting-field sg7g-setting-field--switch">
            <div class="sg7g-setting-field__copy">
                <strong id="<?php echo esc_attr( $label_id ); ?>"><?php echo esc_html( $label ); ?></strong>
                <?php if ( '' !== $description ) : ?><p class="description"><?php echo esc_html( $description ); ?></p><?php endif; ?>
            </div>
            <label class="sg7g-switch" aria-labelledby="<?php echo esc_attr( $label_id ); ?>">
                <input type="hidden" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="0" />
                <input type="checkbox" id="sg7g-<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="1" <?php checked( self::value_is_enabled( $settings[ $key ] ) ); ?><?php echo '' !== $controller ? ' data-sg7g-controller="' . esc_attr( $controller ) . '"' : ''; ?> />
                <span class="sg7g-switch__track" aria-hidden="true"><span class="sg7g-switch__thumb"></span></span>
                <span class="screen-reader-text"><?php echo esc_html( $label ); ?></span>
            </label>
        </div>
        <?php
    }

    private static function choice_field( string $key, array $settings, array $options, int $columns = 3 ): void {
        ?>
        <div class="sg7g-choice-grid sg7g-choice-grid--<?php echo esc_attr( (string) $columns ); ?>">
            <?php foreach ( $options as $value => $option ) : ?>
                <label class="sg7g-choice-option">
                    <input type="radio" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="<?php echo esc_attr( (string) $value ); ?>" <?php checked( (string) $settings[ $key ], (string) $value ); ?> />
                    <span class="sg7g-choice-option__card">
                        <span class="sg7g-choice-option__icon dashicons <?php echo esc_attr( (string) ( $option['icon'] ?? 'dashicons-admin-generic' ) ); ?>" aria-hidden="true"></span>
                        <span class="sg7g-choice-option__copy">
                            <strong><?php echo esc_html( (string) $option['label'] ); ?></strong>
                            <small><?php echo esc_html( (string) ( $option['description'] ?? '' ) ); ?></small>
                        </span>
                        <span class="sg7g-choice-option__check dashicons dashicons-yes-alt" aria-hidden="true"></span>
                    </span>
                </label>
            <?php endforeach; ?>
        </div>
        <?php
    }

    private static function media_menu_items( array $settings ): array {
        $items = array(
            'all'   => array(
                'label'    => __( 'All', '7sgaleri' ),
                'icon'     => 'all',
                'term_id'  => 0,
                'current'  => '',
                'automatic' => '',
            ),
            'video' => array(
                'label'    => __( 'Video', '7sgaleri' ),
                'icon'     => 'video',
                'term_id'  => 0,
                'current'  => '',
                'automatic' => '',
            ),
            'audio' => array(
                'label'    => __( 'Music', '7sgaleri' ),
                'icon'     => 'audio',
                'term_id'  => 0,
                'current'  => '',
                'automatic' => '',
            ),
        );

        $terms = get_terms(
            array(
                'taxonomy'   => 'sg7g_category',
                'hide_empty' => false,
                'orderby'    => 'name',
                'order'      => 'ASC',
            )
        );

        if ( is_wp_error( $terms ) ) {
            return $items;
        }

        $saved_icons = isset( $settings['category_icons'] ) && is_array( $settings['category_icons'] )
            ? $settings['category_icons']
            : array();

        foreach ( $terms as $term ) {
            $normalized_name = sanitize_title( remove_accents( $term->name ) );
            if ( in_array( $normalized_name, array( 'video', 'videos', 'music', 'muzik', 'audio' ), true ) ) {
                continue;
            }

            $current_icon = sanitize_key( (string) ( $saved_icons[ $term->term_id ] ?? 'auto' ) );
            if ( ! array_key_exists( $current_icon, SG7G_Archive_UI::category_icon_options() ) ) {
                $current_icon = 'auto';
            }
            $automatic_icon = SG7G_Archive_UI::automatic_category_icon_key( $term );
            $preview_icon   = 'auto' === $current_icon ? $automatic_icon : $current_icon;

            $items[ 'category-' . absint( $term->term_id ) ] = array(
                'label'     => $term->name,
                'icon'      => $preview_icon,
                'term_id'   => absint( $term->term_id ),
                'current'   => $current_icon,
                'automatic' => $automatic_icon,
            );
        }

        return $items;
    }

    private static function media_menu_order_field( array $settings ): void {
        $items   = self::media_menu_items( $settings );
        $options = SG7G_Archive_UI::category_icon_options();
        $saved   = isset( $settings['media_menu_order'] ) && is_array( $settings['media_menu_order'] )
            ? array_map( 'sanitize_key', $settings['media_menu_order'] )
            : array();
        $order = array();

        foreach ( $saved as $key ) {
            if ( isset( $items[ $key ] ) && ! in_array( $key, $order, true ) ) {
                $order[] = $key;
            }
        }

        foreach ( array_keys( $items ) as $key ) {
            if ( ! in_array( $key, $order, true ) ) {
                $order[] = $key;
            }
        }
        ?>
        <div class="sg7g-media-menu-order-settings">
            <div class="sg7g-media-menu-order-settings__heading">
                <strong><?php esc_html_e( 'Menu order and category icons', '7sgaleri' ); ?></strong>
                <p class="description"><?php esc_html_e( 'Drag items into position. Use the icon button on category rows to change that category’s icon.', '7sgaleri' ); ?></p>
            </div>
            <div class="sg7g-media-menu-order" data-sg7g-media-menu-order>
                <?php foreach ( $order as $index => $key ) :
                    $item        = $items[ $key ];
                    $is_category = $item['term_id'] > 0;
                    $panel_id    = $is_category ? 'sg7g-category-icon-panel-' . $item['term_id'] : '';
                    ?>
                    <div
                        class="sg7g-media-menu-order__item"
                        data-sg7g-media-menu-order-item
                        data-sg7g-media-menu-key="<?php echo esc_attr( $key ); ?>"
                        <?php if ( $is_category ) : ?>data-sg7g-category-icon-row data-auto-icon="<?php echo esc_attr( $item['automatic'] ); ?>"<?php endif; ?>
                    >
                        <button
                            type="button"
                            class="sg7g-media-menu-order__handle"
                            aria-label="<?php echo esc_attr( sprintf( /* translators: %s: Gallery menu item label. */ __( 'Reorder %s', '7sgaleri' ), $item['label'] ) ); ?>"
                        >
                            <span class="dashicons dashicons-menu" aria-hidden="true"></span>
                        </button>
                        <?php if ( $is_category ) : ?>
                            <div class="sg7g-category-icon-picker" data-sg7g-category-icon-picker>
                                <input
                                    type="hidden"
                                    name="<?php echo esc_attr( self::OPTION . '[category_icons][' . $item['term_id'] . ']' ); ?>"
                                    value="<?php echo esc_attr( $item['current'] ); ?>"
                                    data-sg7g-category-icon-value
                                />
                                <button
                                    type="button"
                                    class="sg7g-category-icon-picker__toggle"
                                    data-sg7g-category-icon-toggle
                                    aria-haspopup="dialog"
                                    aria-expanded="false"
                                    aria-controls="<?php echo esc_attr( $panel_id ); ?>"
                                >
                                    <span class="sg7g-media-menu-order__icon" data-sg7g-category-icon-preview aria-hidden="true"><?php echo SG7G_Archive_UI::nav_icon( $item['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static trusted SVG. ?></span>
                                    <span class="screen-reader-text"><?php echo esc_html( sprintf( /* translators: %s: Gallery category name. */ __( 'Choose an icon for %s', '7sgaleri' ), $item['label'] ) ); ?></span>
                                    <span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
                                </button>
                                <div
                                    id="<?php echo esc_attr( $panel_id ); ?>"
                                    class="sg7g-category-icon-picker__panel"
                                    data-sg7g-category-icon-panel
                                    role="dialog"
                                    aria-label="<?php echo esc_attr( sprintf( /* translators: %s: Gallery category name. */ __( 'Choose an icon for %s', '7sgaleri' ), $item['label'] ) ); ?>"
                                    hidden
                                >
                                    <div class="sg7g-category-icon-picker__grid">
                                        <?php foreach ( $options as $value => $label ) : ?>
                                            <button
                                                type="button"
                                                class="sg7g-category-icon-picker__option<?php echo $item['current'] === $value ? ' is-selected' : ''; ?>"
                                                data-sg7g-category-icon-option="<?php echo esc_attr( $value ); ?>"
                                                aria-label="<?php echo esc_attr( $label ); ?>"
                                                aria-pressed="<?php echo $item['current'] === $value ? 'true' : 'false'; ?>"
                                                title="<?php echo esc_attr( $label ); ?>"
                                            >
                                                <?php echo SG7G_Archive_UI::nav_icon( 'auto' === $value ? 'auto' : $value ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static trusted SVG. ?>
                                                <span class="dashicons dashicons-yes" aria-hidden="true"></span>
                                            </button>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            </div>
                        <?php else : ?>
                            <span class="sg7g-media-menu-order__icon" aria-hidden="true"><?php echo SG7G_Archive_UI::nav_icon( $item['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static trusted SVG. ?></span>
                        <?php endif; ?>
                        <strong><?php echo esc_html( $item['label'] ); ?></strong>
                        <span class="sg7g-media-menu-order__position" data-sg7g-media-menu-position aria-label="<?php echo esc_attr( sprintf( /* translators: %d: Menu position. */ __( 'Position %d', '7sgaleri' ), $index + 1 ) ); ?>"><?php echo esc_html( (string) ( $index + 1 ) ); ?></span>
                        <input type="hidden" name="<?php echo esc_attr( self::OPTION . '[media_menu_order][]' ); ?>" value="<?php echo esc_attr( $key ); ?>" />
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php
    }

    private static function network_field( string $key, string $label, array $settings, string $mark ): void {
        $label_id = 'sg7g-' . $key . '-label';
        ?>
        <div class="sg7g-network-option">
            <span class="sg7g-network-option__mark" aria-hidden="true"><?php echo esc_html( $mark ); ?></span>
            <strong id="<?php echo esc_attr( $label_id ); ?>"><?php echo esc_html( $label ); ?></strong>
            <label class="sg7g-switch sg7g-switch--small" aria-labelledby="<?php echo esc_attr( $label_id ); ?>">
                <input type="hidden" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="0" />
                <input type="checkbox" id="sg7g-<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="1" <?php checked( self::value_is_enabled( $settings[ $key ] ) ); ?> />
                <span class="sg7g-switch__track" aria-hidden="true"><span class="sg7g-switch__thumb"></span></span>
                <span class="screen-reader-text"><?php echo esc_html( $label ); ?></span>
            </label>
        </div>
        <?php
    }

    private static function font_options(): array {
        return array(
            'theme'           => __( 'Theme font', '7sgaleri' ),
            'system_sans'     => __( 'System Sans', '7sgaleri' ),
            'editorial_serif' => __( 'Editorial Serif', '7sgaleri' ),
            'classic_serif'   => __( 'Classic Serif', '7sgaleri' ),
        );
    }

    private static function weight_options(): array {
        return array(
            400 => __( 'Regular — 400', '7sgaleri' ),
            500 => __( 'Medium — 500', '7sgaleri' ),
            600 => __( 'Semi Bold — 600', '7sgaleri' ),
            700 => __( 'Bold — 700', '7sgaleri' ),
        );
    }

    private static function color_field( string $key, string $label, array $settings, string $description = '' ): void {
        ?>
        <div class="sg7g-color-field">
            <label for="sg7g-<?php echo esc_attr( $key ); ?>">
                <span class="sg7g-color-field__swatch" style="--sg7g-swatch: <?php echo esc_attr( (string) $settings[ $key ] ); ?>" aria-hidden="true"></span>
                <span>
                    <strong><?php echo esc_html( $label ); ?></strong>
                    <code><?php echo esc_html( (string) $settings[ $key ] ); ?></code>
                    <?php if ( '' !== $description ) : ?><small><?php echo esc_html( $description ); ?></small><?php endif; ?>
                </span>
            </label>
            <input type="color" id="sg7g-<?php echo esc_attr( $key ); ?>" name="<?php echo esc_attr( self::field_name( $key ) ); ?>" value="<?php echo esc_attr( (string) $settings[ $key ] ); ?>" />
        </div>
        <?php
    }
}