<?php
/**
 * MenuX — Help Modal Content
 * Written from the actual admin panel source code.
 * Each entry: 'key' matches the sidebar data-section, 'icon', 'title', 'body' (HTML).
 */
if ( ! defined( 'ABSPATH' ) ) exit;

function menux_help_sections() {
    return array(

        // ──────────────────────────────────────────────────────────────────────
        'getting-started' => array(
            'icon'  => '🚀',
            'title' => __( 'Quick Start', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'New here? Getting a menu (or footer) live takes <strong>three steps</strong>. Nothing appears on your site until step 3 — building and styling alone won\'t show anything to visitors.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '1 · Build it', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Menu</strong> — open <em>Menu Structure</em> and add items (Pages or Custom Links). Drag the ⠿ handle to reorder.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Footer</strong> — open <em>Menu Builder → Footer</em> and click <em>🪄 Setup Wizard</em> for a complete footer in about a minute.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '2 · Style it', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Pick a ready-made look from the <em>Themes</em> grid (one click), then fine-tune colors, typography and layout if you like. The <strong>live preview</strong> on the right updates as you type — and you can switch Desktop / Tablet / Mobile to check every screen.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '3 · Publish it', 'giuliomax-menu-builder' ) . ' <span style="color:#dc2626;">' . __( '(the step people miss!)', 'giuliomax-menu-builder' ) . '</span></h4>
<p>' . __( 'This is what actually puts it on your site. Choose whichever fits your setup:', 'giuliomax-menu-builder' ) . '</p>
<table style="width:100%;border-collapse:collapse;margin:8px 0;font-size:13px;">
    <tr style="border-bottom:1px solid #e5e7eb;">
        <td style="padding:8px 10px;vertical-align:top;width:130px;"><strong>' . __( 'Block editor / FSE', 'giuliomax-menu-builder' ) . '</strong><br><span style="color:#6b7280;font-size:12px;">' . __( '(easiest)', 'giuliomax-menu-builder' ) . '</span></td>
        <td style="padding:8px 10px;vertical-align:top;">' . __( 'Edit a page or your site template, click the <strong>+</strong> inserter, search <strong>MenuX</strong> and drop the <em>MenuX — Menu</em> or <em>MenuX — Footer</em> block where you want it. No code.', 'giuliomax-menu-builder' ) . '</td>
    </tr>
    <tr style="border-bottom:1px solid #e5e7eb;">
        <td style="padding:8px 10px;vertical-align:top;"><strong>' . __( 'Shortcode', 'giuliomax-menu-builder' ) . '</strong></td>
        <td style="padding:8px 10px;vertical-align:top;">' . __( 'Paste <code>[menux]</code> (menu) or <code>[menux_footer]</code> (footer) into any page, post, Text widget or Shortcode block. Use <code>[menux location="footer"]</code> to show only items assigned to a location.', 'giuliomax-menu-builder' ) . '</td>
    </tr>
    <tr style="border-bottom:1px solid #e5e7eb;">
        <td style="padding:8px 10px;vertical-align:top;"><strong>' . __( 'Footer — automatic', 'giuliomax-menu-builder' ) . '</strong></td>
        <td style="padding:8px 10px;vertical-align:top;">' . __( 'In the Footer toolbar set <em>Placement</em> to <strong>Automatic (every page)</strong> and the footer appears at the bottom of every page — no block or shortcode needed.', 'giuliomax-menu-builder' ) . '</td>
    </tr>
    <tr>
        <td style="padding:8px 10px;vertical-align:top;"><strong>' . __( 'Replace theme menu', 'giuliomax-menu-builder' ) . '</strong></td>
        <td style="padding:8px 10px;vertical-align:top;">' . __( 'Classic (non-FSE) themes only: <em>WP Integration</em> can swap your theme\'s existing menu for a MenuX menu automatically.', 'giuliomax-menu-builder' ) . '</td>
    </tr>
</table>
<p style="margin-top:6px;color:#6b7280;font-size:13px;">' . __( '💡 Each panel has its own Help section in the list on the left — click any topic for the details. This help opens to whatever panel you\'re currently on.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'structure' => array(
            'icon'  => '🧱',
            'title' => __( 'Menu Structure', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Structure</strong> panel is where you build and configure every item in your menu.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Adding items', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Two tabs are available at the top of the panel:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Page</strong> — select any WordPress page from the dropdown and click <em>+ Add</em>. The URL is kept in sync with the page automatically.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Custom Link</strong> — type any URL (external site, anchor <code>#section</code>, or relative path) plus an optional FontAwesome icon class (e.g. <code>fas fa-home</code>), then click <em>+ Add</em>.', 'giuliomax-menu-builder' ) . '</li>
</ul>
<p>' . __( 'Items appear at the bottom of the list. Drag the handle (⠿) on the left of any item to reorder. Click the item header to expand and edit it.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '🌐 Languages', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Each item has a label field per detected language (e.g. IT, EN). If a multilingual plugin is active, all its languages appear here. On the frontend the label matching the visitor\'s browser language is shown; the default label is used as fallback. Without a multilingual plugin, Italian and English fields are shown by default.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '🎨 Icon &amp; Badge', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Icon</strong> — click the <em>🎨 Icon</em> button to open the FontAwesome 6 picker. The chosen icon appears before the link label in the menu.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Badge text</strong> — short text (e.g. "New", "Hot") displayed as a small pill next to the label.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Badge color</strong> — background color of the badge pill (color picker). Default: red <code>#ef4444</code>.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '👁️ Visibility &amp; Behavior', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Visibility</strong> — who sees this item: Everyone, Any logged-in user, Guests only, or a specific WordPress role (Editor, Author, etc.).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Target</strong> — <em>Same tab</em> (default) or <em>↗ New tab</em> (adds <code>target="_blank" rel="noopener"</code>).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Menu location</strong> — assigns this item to a location: Primary, Footer, Sidebar, or Mobile. Use the <code>[menux location="footer"]</code> shortcode to display items per location.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>🔴 Dot</strong> — checkbox that adds a small pulsing notification dot to the item, useful for alerts or new content indicators.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '⚙️ Schedule &amp; Conditions', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Click to expand this section (a purple dot in the header signals active conditions). All fields are optional and combinable.', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>From / To</strong> — date-time range (datetime-local format). The item is only shown between these two moments. Leave either field empty for open-ended scheduling.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Roles</strong> — comma-separated WordPress role slugs (e.g. <code>editor,author</code>). The item is shown only to users who have at least one of these roles.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Device</strong> — All devices (default), Mobile only, Tablet only, or Desktop only. Detection is handled server-side using WordPress\'s built-in device detection. "Mobile only" targets phones; "Tablet only" targets tablets (both rely on <code>wp_is_mobile()</code>, which covers all touch-handheld devices in those classes).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Time window From / To</strong> — time of day in <code>HH:MM</code> format. The item is visible only between these hours (server time).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>UTM source</strong> — show the item only when the URL contains a matching <code>utm_source</code> parameter (case-insensitive).', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '📂 Submenu', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Click <em>+ Add submenu</em> inside any expanded item to create child items. Each child can be a Page or a Custom Link, and supports its own language labels, icon, and target. Children are draggable to reorder. Up to three levels of nesting are supported (parent → child → grandchild). Grandchildren are preserved automatically; their count is shown as a blue badge on the child row.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Mega menu', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The Mega Menu toggle is managed from the dedicated <strong>Mega Menu</strong> panel, not here. Once you enable it there, the item\'s standard dropdown is replaced by a full-width column panel.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '📢 How to display the menu on your site', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The easiest way: in the block editor (or the Site Editor for FSE themes) click the <strong>+</strong> inserter, search for <strong>MenuX</strong> and drop the block wherever you want the navigation — no code required. Alternatively, use the shortcode <code>[menux]</code> in any page, post, Text widget or Shortcode block. See the <strong>WP Integration</strong> section for additional options.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'logo' => array(
            'icon'  => '🖼️',
            'title' => __( 'Logo', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Logo</strong> panel configures the logo that appears inside the navigation bar.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Logo slots', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Three independent slots are available. For each slot you can select an image from the <strong>Media Library</strong> (recommended — enables WebP, srcset and lazy loading) or paste an external URL in the field below the preview. SVG files are rendered inline for perfect sharpness at any resolution.', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Desktop logo</strong> — main logo, shown on screens wider than the mobile breakpoint.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Sticky logo</strong> — replaces the desktop logo when the menu enters sticky mode on scroll. Optional — if empty, the desktop logo is used.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Mobile logo</strong> — shown on small screens instead of the desktop logo. Optional.', 'giuliomax-menu-builder' ) . '</li>
</ul>
<p>' . __( 'The <em>Change</em> button replaces an existing image; <em>Clear</em> removes it. The URL field below each slot is a fallback for images hosted outside the Media Library.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Sizing', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Width</strong> — logo width with unit selector: px, %, em, rem, vw. Default: 40 px.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Height</strong> — leave empty for <code>auto</code> (recommended). Set a value only if you need to enforce a fixed height.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Max-width</strong> — caps the logo size on wide screens, useful with percentage-based widths.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Border radius</strong> — rounds the image corners in px. Use 50% equivalent values for circular logos (e.g. 500 px).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Vertical align</strong> — how the logo aligns inside the nav bar flex row: Top, Center (default), or Bottom.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Spacing (px per side)', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Margin and padding are each split into four individual number fields — Top, Right, Bottom, Left — so you never need to write CSS shorthand manually. All values are in pixels.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Link', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Link enabled</strong> — wraps the logo in an <code>&lt;a&gt;</code> tag pointing to the homepage by default.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Custom URL</strong> — override the link destination. Leave empty to keep the homepage link.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Open in new tab</strong> — adds <code>target="_blank" rel="noopener"</code>.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Alt text', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Text read by screen readers and shown if the image fails to load. Defaults to the site name if left empty.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Hide on mobile', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Hides the logo below 768 px. Useful when the mobile logo slot uses a different, smaller image and you don\'t want both visible.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Position in menu bar', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>⬅️ Left</strong> — logo before all nav links (most common layout).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>➡️ Right</strong> — logo after all nav links.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>⏺️ Center</strong> — logo inserted between menu items.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>⬛ Center split</strong> — logo centered, nav links split equally on both sides.', 'giuliomax-menu-builder' ) . '</li>
</ul>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'megamenu' => array(
            'icon'  => '⚡',
            'title' => __( 'Mega Menu', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Mega Menu</strong> panel replaces a top-level item\'s standard dropdown with a wide, multi-column panel. Maximum 4 columns per item.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Panel Appearance (global settings)', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'These settings apply to all mega panels on the site.', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Panel Background</strong> — click a preset swatch (White, Light Gray, Purple, Indigo, Sky, Teal, Emerald, Sunset, Rose, Gold, Dark, Charcoal) to apply a solid color or gradient instantly. Use <em>⚙ Custom gradient</em> to build your own: choose a direction (135°, Right, Down, 45°, Up) and two colors, then click <em>Apply</em>. Click <em>Clear</em> to reset to white.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Max Width (px)</strong> — constrains the panel width. Leave empty for full-width (spans the entire page).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Padding Top/Bottom (px)</strong> — vertical inner spacing of the panel.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Padding Left/Right (px)</strong> — horizontal inner spacing.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Column Gap (px)</strong> — space between columns inside the panel.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Border Radius (px)</strong> — rounds the panel corners.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Font Size (px)</strong> — overrides the link font size inside all mega panels. Leave empty to use the global font size.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Link Color</strong> — checkbox + color picker. Overrides the color of link items inside mega panels.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Heading Color</strong> — checkbox + color picker. Overrides the color of heading items.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Accent / Icon Color</strong> — checkbox + color picker. Color applied to FontAwesome icons inside the panel.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Mobile Layout</strong> — how mega menu content appears on phones and tablets: <em>Stacked list</em> (all columns merged into one tappable accordion list), <em>2-column grid</em> (sections kept side by side in two columns — great for e-commerce category menus), or <em>Hidden on mobile</em> (the panel doesn\'t render at all).', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Per-item configuration', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Each top-level menu item listed below the appearance settings has its own row with:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Mega Menu toggle</strong> — enables the mega panel for that specific item.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Full width checkbox</strong> — when checked, the panel spans the full page width; when unchecked, it is constrained to the Max Width setting.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Edit Columns button</strong> — opens the column editor modal for that item.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Column editor', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Inside the modal you can add, remove and reorder columns. Each column has a width percentage (e.g. 33 for three equal columns, or 25/50/25 for an asymmetric layout). Within each column you can add items of five types:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Link</strong> — a clickable item with optional FontAwesome icon, label, short description text, URL and target (same/new tab).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Heading</strong> — a non-clickable section label with optional icon. Used to group related links inside a column.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Divider</strong> — a horizontal rule that visually separates groups of items.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Image</strong> — an image from the Media Library or an external URL. Can optionally wrap a link URL and open in a new tab.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Shortcode</strong> — executes any WordPress shortcode (<code>[contact-form-7 ...]</code>, <code>[products ...]</code>, etc.) rendered live inside the panel.', 'giuliomax-menu-builder' ) . '</li>
</ul>
<p>' . __( 'Column items can be dragged to reorder. Click the × button to remove an item or an entire column.', 'giuliomax-menu-builder' ) . '</p>
<p>' . __( 'The editor\'s <strong>🎨 Appearance</strong> tab overrides the global panel settings for this mega menu only: background, padding, column gap, border radius, font size, colors — and <strong>Panel Max Width (px)</strong>, which constrains the panel box itself (centered under the nav) rather than just the content inside it. Leave it empty for a full-width panel. The live preview below the editor updates as you type.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'themes' => array(
            'icon'  => '✨',
            'title' => __( 'Themes', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Themes</strong> panel lets you apply a complete visual preset to your menu in one click. Each theme sets colors, typography, hover effects and layout values simultaneously.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Applying a theme', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( '50 preset themes are available as visual card previews. Click any card to apply it instantly — the live preview updates in real time. Themes do <strong>not</strong> automatically save; click <em>Save</em> at the bottom of the page (or the floating Save button) to persist the changes.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Filter by style category', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'A row of category chips sits above the theme grid. Click one to show only the themes in that style; the number on each chip tells you how many themes it contains. Pick <strong>✨ All</strong> to see every theme. The 10 categories are:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>🌙 Dark</strong> — deep, high-contrast bars (Void Dark, Carbon Pro, Obsidian Gold, Graphite Ice, Dev Dark).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>⚪ Minimal</strong> — clean, light, essential (Ghost, Sky Fresh, Paper White, Nordic Calm, Mono Line).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>🌈 Vibrant</strong> — bold colors and gradients (Tropical Bloom, Ocean Electric, Violet Cloud, Sunset Blaze, Citrus Pop).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>🎨 Creative</strong> — artistic and expressive (Aurora Night, Cyber Matrix, Cosmic Dusk, Neon Synthwave, Holographic).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>💼 Corporate</strong> — sober and professional (Indigo Pulse, Navy Command, Swiss Pro, Executive Navy, Crimson Trust).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>🌿 Nature</strong> — organic, earthy, warm (Evergreen, Warm Honey, Aegean Teal, Forest Moss, Terracotta Earth).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>💎 Elegant</strong> — refined and luxurious, serif typography (Rose Silk, Newspaper Ink, Noir Élégance, Pearl Luxe, Burgundy Velvet).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>📼 Retro</strong> — vintage and nostalgic (Miami 80s, Vaporwave, Vintage Sepia, Retro Arcade, Seventies Funk).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>🧊 Glass</strong> — frosted, translucent, soft (Cloud Glass, Frosted Aqua, Smoked Glass, Rose Quartz, Arctic Glass).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>🎈 Playful</strong> — fun, rounded, friendly (Bubblegum, Candy Pop, Mint Bubble, Sunny Comic, Lemonade).', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'After applying a theme', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'You can freely adjust any individual setting (colors, fonts, spacing) after applying a theme — the theme is just a starting point, not a locked-down style. All overrides are saved as normal style settings.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'colors' => array(
            'icon'  => '🎨',
            'title' => __( 'Colors', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Colors</strong> tab controls all color settings for the navigation bar and its interactive states.', 'giuliomax-menu-builder' ) . '</p>
<p>' . __( '<strong>How color fields work:</strong> every field shows a checkbox on the left. When <strong>unchecked</strong>, the property is not set and the element inherits its color from the theme — perfect when you want MenuX to blend into an existing design. When <strong>checked</strong>, the color picker is active and the chosen value is applied.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Container', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Solid background</strong> — flat background color for the entire nav bar.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Gradient background</strong> — a CSS gradient that <em>overrides</em> the solid color when set. Built with the gradient widget directly in the panel (choose direction and two colors).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Bottom border</strong> — color of the thin border at the bottom of the nav bar.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Normal links', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Text color</strong> — color of all menu link labels in their resting state.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Links on hover', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Text color</strong> — label color when the cursor is over a link.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Background</strong> — background color behind the link on hover. Theme presets can also set a gradient here (stored as a hidden field).', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Active link (current page &amp; scroll spy)', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Applied automatically to the link whose URL matches the current page. When <strong>Scroll Spy</strong> is enabled (Layout tab), the same styles are also applied to the link whose anchor target is currently visible in the viewport.', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Text color</strong> — label color of the active link.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Background</strong> — background of the active link. Theme presets can set a gradient here.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Bottom border</strong> — underline accent color shown only on the active link.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Active font weight</strong> — dropdown: Inherit, Regular (400), Medium (500), Semibold (600), Bold (700). Makes the current page link stand out without changing color.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Last menu item', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Styles the last item in the list independently. Commonly used for a CTA button ("Contact", "Buy now", "Login").', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Push right</strong> — checkbox that applies <code>margin-left: auto</code>, pushing the last item to the far right of the bar regardless of nav alignment.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Text color</strong> — label color for the last item.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Hover color</strong> — label color on hover.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Background</strong> — background color (combine with <em>Link border radius</em> in the Layout tab for a pill button effect).', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Submenu', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Background</strong> — background of dropdown panels (standard submenus).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Border</strong> — border color around the dropdown.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Link color</strong> — text color of links inside submenus.', 'giuliomax-menu-builder' ) . '</li>
</ul>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'typo' => array(
            'icon'  => '🔤',
            'title' => __( 'Typography', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Typography</strong> tab controls the text appearance of all menu links and hover animations.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Font', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Google Font</strong> — click the picker to search and select any Google Fonts family. The font is loaded from Google\'s CDN with weights 300–700. Click the × button inside the picker to revert to the system font.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Font fallback</strong> — a CSS <code>font-family</code> string (e.g. <code>Arial, sans-serif</code>) used when the Google Font field is empty. Useful to reference a font already loaded by your theme.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Size (px)</strong> — font size for all top-level menu link labels. Min 8, Max 48.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Weight</strong> — dropdown: Normal (theme default), Light (300), Regular (400), Medium (500), Semibold (600), Bold (700).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Letter spacing (px)</strong> — extra spacing between characters. Accepts decimals and negative values (range: −2 to 10). Particularly effective with uppercase labels.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Text transform</strong> — None, UPPERCASE, lowercase, or Capitalize (first letter of each word).', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Animations &amp; Transitions', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Hover effect</strong> — CSS animation played on the link when hovered:', 'giuliomax-menu-builder' ) . '
        <ul>
            <li>' . __( '<strong>None</strong> — no animation, only color/bg transitions apply.', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>🚀 Lift</strong> — link moves up slightly (<code>translateY</code>).', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>🔍 Scale</strong> — link scales up to 1.1×.', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>💓 Pulse</strong> — quick scale pulse.', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>🏀 Bounce</strong> — vertical bounce.', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>📳 Shake</strong> — horizontal shake.', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>✨ Glow</strong> — continuous glowing text-shadow.', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>〰️ Animated underline</strong> — a pseudo-element underline that grows from left to right on hover.', 'giuliomax-menu-builder' ) . '</li>
        </ul>
    </li>
    <li>' . __( '<strong>Transition duration (s)</strong> — speed of hover color and background transitions in seconds (e.g. 0.3 = 300 ms). Also controls how fast the hover effect plays. Default: 0.3.', 'giuliomax-menu-builder' ) . '</li>
</ul>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'layout' => array(
            'icon'  => '📐',
            'title' => __( 'Layout', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Layout</strong> tab controls spacing, alignment, sticky behavior, the scroll progress bar, scroll spy, and entrance animations.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Spacing', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Items alignment</strong> — how the nav links are distributed horizontally: ⬅️ Left, ↔️ Center, ➡️ Right, ⟺ Space-between, ⠿ Space-evenly.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Item gap (px)</strong> — space between top-level menu items.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Link horizontal padding (px)</strong> — left/right padding applied to each <code>&lt;a&gt;</code> link element.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Link vertical padding (px)</strong> — top/bottom padding on each link.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Link border radius (px)</strong> — rounds the link background shape. E.g. 20 for pill-shaped buttons, 8 for rounded tabs.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Submenu', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Shadow</strong> — adds a drop shadow to standard dropdown panels.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Open animation</strong> — Fade + Slide (opacity + translateY), Slide accordion (height animation), or None.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Dropdown Indicator', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The small symbol that appears after a menu item label to signal it has a submenu or mega panel. Four styles are available:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>▾ Triangle</strong> — filled Unicode triangle (default). Points down at top level, right for nested items.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>⌄ Chevron</strong> — a clean CSS-drawn chevron. Points down at top level, right for nested items.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>• Dot</strong> — a small filled circle. Scales up when the submenu is open.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>— None</strong> — hides the indicator entirely.', 'giuliomax-menu-builder' ) . '</li>
</ul>
<ul>
    <li>' . __( '<strong>Color</strong> — enable <em>Custom</em> to override the inherited link color.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Size (px)</strong> — controls the font size of the triangle or the dimensions of the chevron/dot. Range: 6–24 px.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Rotate on open</strong> — when checked, the indicator animates as the submenu opens (triangle/chevron rotate to point up, dot scales). Uncheck for a static indicator.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Sticky Menu', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Enable sticky</strong> — fixes the nav bar to the top of the viewport as the user scrolls down.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Sticky background</strong> — color applied to the nav bar when it enters sticky mode, overriding the normal container background.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Shadow sticky</strong> — adds a drop shadow below the bar when sticky.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Z-Index</strong> — stacking order of the sticky bar (default 9999). Increase if other elements appear on top of it.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Horizontal alignment</strong> — justify content of the sticky bar: Left, Center, Right, Space-between. Useful if the sticky bar has a narrower max-width than the page.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Vertical alignment</strong> — align items vertically: ⬆️ Top, ⏺️ Center, ⬇️ Bottom.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Horizontal padding (px)</strong> — left/right padding of the sticky bar (overrides normal padding).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Vertical padding (px)</strong> — top/bottom padding of the sticky bar.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Transition duration (s)</strong> — how long the background color and shadow fade in when the bar becomes sticky. Default: 0.3.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Shrink on sticky</strong> — when checked, reduces the bar\'s padding, font size and logo height once the page is scrolled, giving the menu a compact feel.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Auto-hide on scroll</strong> — always active when sticky is enabled. The bar slides up out of view when you scroll down, and slides back in as soon as you scroll up. A 5 px scroll threshold prevents accidental hiding from micro-scroll jitter.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '📊 Scroll Progress Bar', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Enable</strong> — shows a thin bar that fills horizontally as the visitor scrolls through the page.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Color</strong> — fill color of the bar.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Height (px)</strong> — thickness of the bar (1–10 px).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Position</strong> — Bottom of menu (below the nav bar) or Top of menu (above it).', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '🎯 Scroll Spy', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Scroll Spy automatically highlights the menu link corresponding to the page section currently in the viewport — ideal for single-page or long-scroll layouts.', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Enable scroll spy</strong> — activates the feature. The link whose anchor target is currently on screen receives the same visual treatment as the active-page link (text color, background, bottom border, font weight set in the <strong>Colors</strong> tab) plus the CSS class <code>menux-spy-active</code>. If no active-link colors are configured, a <code>font-weight: 600</code> fallback is applied automatically.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Trigger offset (px)</strong> — how far from the top of the viewport a section heading must be before it is considered "active". Default: 80 px. Set this to at least your sticky nav bar height so section changes register at the right visual moment. MenuX also reads the live sticky bar height at runtime and adds it on top automatically when the bar is in sticky mode.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Smooth scroll</strong> — when checked, clicking a spy-linked anchor scrolls smoothly to the target section instead of jumping instantly. The URL hash is updated via the History API so the browser back button works correctly, and an ARIA live region announces the destination to screen readers.', 'giuliomax-menu-builder' ) . '</li>
</ul>
<h4>' . __( 'How to set up Scroll Spy', 'giuliomax-menu-builder' ) . '</h4>
<ol>
    <li>' . __( 'Add an <code>id</code> attribute to each section on your page (e.g. <code>id="about"</code>, <code>id="services"</code>, <code>id="contact"</code>). In the Gutenberg block editor this is the <strong>Advanced → HTML anchor</strong> field of any block.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( 'In the <strong>Structure</strong> panel, add Custom Link items pointing to those anchors: <code>#about</code>, <code>#services</code>, <code>#contact</code>. Full same-origin URLs ending with a hash also work (e.g. <code>/home#services</code>).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( 'Enable <em>Scroll spy</em> here and save.', 'giuliomax-menu-builder' ) . '</li>
</ol>
<p>' . __( '<strong>Edge case:</strong> on pages where the last section is too short to ever fully cross the trigger line, MenuX activates it automatically once the user scrolls to the very bottom of the page.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '✨ Entrance Animation', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'An animation played once when the page loads and the menu first appears. Items animate in sequence.', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Type</strong> — choose from visual cards: None, Fade in, Slide down, Slide up, Slide left, Slide right, Zoom in, Flip X.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Duration (s)</strong> — how long each item\'s animation lasts (e.g. 0.5).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Delay (s)</strong> — pause before the first item starts animating.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Stagger items (s)</strong> — additional delay added per item so they appear one after another (e.g. 0.05 = 50 ms between each item).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>▶ Preview animation</strong> — button that replays the entrance animation in the live preview without saving.', 'giuliomax-menu-builder' ) . '</li>
</ul>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'mobile' => array(
            'icon'  => '📱',
            'title' => __( 'Mobile', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Mobile</strong> tab controls how the menu behaves on small screens.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '🍔 Hamburger', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Icon style</strong> — Classic (three equal lines, animates to ×), Modern (rounded ends), Minimal (thin lines).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Alignment</strong> — where the hamburger button sits inside the nav bar: Left, Center, Right.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Icon color</strong> — color of the three lines (checkbox + color picker).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Button background</strong> — background behind the icon. Transparent by default. Enable the checkbox to set a color.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '📐 When it appears (Breakpoint mode)', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>✨ Automatic</strong> — MenuX uses JavaScript to detect when the nav items no longer fit in a single row and switches to hamburger mode. No pixel value needed. Best for menus with many items.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>🎚️ Manual</strong> — the hamburger appears below a specific screen width (px) that you set. Typical values: 768 (tablet) or 1024 (all mobile + tablet).', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '📱 Opening mode', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'How the mobile menu expands when the hamburger is tapped. Choose from four visual cards:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>⬇️ Dropdown</strong> — the menu list expands below the nav bar, pushing page content down. The simplest and most common pattern.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>⛶ Fullscreen</strong> — the menu covers the entire viewport with large, centered links. Ideal for minimal, bold navigation.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>◀️ Drawer Left</strong> — a panel slides in from the left edge of the screen.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>▶️ Drawer Right</strong> — same as Drawer Left but from the right.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Background overlay (Fullscreen &amp; Drawer only)', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Color</strong> — background color behind the menu panel (checkbox + color picker).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Opacity</strong> — slider from 0 (invisible) to 1 (fully opaque). The percentage is shown next to the slider in real time.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Background blur (px)</strong> — applies a <code>backdrop-filter: blur()</code> effect to the page content visible behind the overlay. 0 = no blur.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '✕ Close button (Fullscreen &amp; Drawer only)', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Icon color</strong> — color of the × close icon (checkbox + color picker). Leave unchecked to inherit.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Button background</strong> — background behind the ×. When a color is set, a 50% border-radius is applied automatically making it circular.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Fullscreen options', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Items alignment</strong> — how the menu links are aligned inside the fullscreen panel: ⏺️ Center (default), ⬅️ Left, ➡️ Right.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Drawer options', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Width (px)</strong> — width of the side drawer panel. Min 200, Max 600. The actual width is capped at 90vw on very narrow screens.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Dropdown options', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Padding (px)</strong> — inner spacing of the expanded dropdown list.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Shadow</strong> — checkbox that adds a drop shadow below the expanded menu.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Accordion', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( '<strong>Close other submenus when one opens</strong> — when checked, tapping a parent item on mobile automatically collapses any other open submenus at the same level before expanding the new one. Only one submenu is open at a time per level. Recommended for menus with many items to keep the list readable. When unchecked (default), multiple submenus can be open simultaneously.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Open animation', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The animation used when the mobile menu opens (applies to all modes):', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>✨ Fade</strong> — opacity fade in.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>⬇️ Slide</strong> — slides down from the top.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>🔍 Scale</strong> — scales up from the center.', 'giuliomax-menu-builder' ) . '</li>
</ul>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'announcement' => array(
            'icon'  => '📢',
            'title' => __( 'Announcement Bar', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Announcement Bar</strong> panel adds a full-width promotional banner above or below your navigation. It is ideal for time-sensitive offers, shipping notices, event countdowns and site-wide alerts.', 'giuliomax-menu-builder' ) . '</p>
<p>' . __( 'A live preview swatch at the top of the panel updates in real time as you change the text, colors and size — no save required to see how it looks.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Enable bar', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Master toggle. When checked, the bar is rendered on the frontend. When unchecked, nothing is output and no CSS is added to the page. The bar appears exactly once per page load even if multiple <code>[menux]</code> shortcodes or MenuX blocks are present.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Message', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The text displayed inside the bar. Plain text only; emojis are fully supported (e.g. <em>🎉 Free shipping on orders over €50!</em>). The dismissal key is derived from this text — changing the message automatically resets the dismissal for all visitors, so the bar reappears even for users who previously closed it.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Link URL', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Optional. When set, the entire announcement text becomes a clickable link pointing to this URL. Leave empty for a plain non-clickable banner.', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Open in new tab</strong> — adds <code>target="_blank" rel="noopener"</code> to the link.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Background &amp; Text color', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Color pickers for the bar background and the message text. Default: indigo background (<code>#667eea</code>) with white text (<code>#ffffff</code>).', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Position', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Above menu</strong> — the bar is rendered before the sticky spacer, so it scrolls away naturally when the page is scrolled (the menu sticks but the bar does not).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Below menu</strong> — the bar is rendered immediately after the closing <code>&lt;/nav&gt;</code> tag, below the navigation bar.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Font size (px)', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Controls the text size inside the bar. Range: 10–24 px. Default: 14 px.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Vertical padding (px)', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Top and bottom inner spacing of the bar. Range: 4–32 px. Default: 10 px. Left/right padding is fixed at 48 px to leave room for the close button.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Dismissible', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'When checked, a × close button appears on the right side of the bar. Clicking it immediately hides the bar and saves the dismissal in <code>localStorage</code>. The bar will not reappear until the dismissal expires or the message text is changed.', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Remember dismissal (days)</strong> — how many days the bar stays hidden after a visitor closes it. Range: 1–365. Default: 7. Set to 1 for a bar that reappears the next day, or 365 for a near-permanent dismissal.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '⏱ Countdown Timer', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Attach a live ticking countdown to the bar. Initial digit values are calculated server-side so the correct numbers are visible even before JavaScript runs — no first-paint flash.', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Enable countdown</strong> — shows the countdown widget inline with the announcement text. When unchecked, the date/label/expired fields are hidden.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Target date &amp; time</strong> — a date and time picker. The countdown counts down to this exact moment. The value is stored in server time (<code>strtotime()</code>); make sure your WordPress timezone setting is correct.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Label</strong> — text displayed before the timer segments (e.g. <em>Ends in:</em>). Leave empty to show only the numbers.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Expired text</strong> — text shown inside the countdown widget once the target date is reached (e.g. <em>Offer ended</em>). Leave empty to hide the countdown widget entirely after expiry.', 'giuliomax-menu-builder' ) . '</li>
</ul>
<p>' . __( 'The timer shows four segments: days · hours · minutes · seconds. The days segment is hidden automatically when the remaining time drops below 24 hours, so the display stays compact for short deadlines.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'search' => array(
            'icon'  => '🔍',
            'title' => __( 'Search', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Search</strong> panel adds an interactive search modal to the navigation bar.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Enable search icon', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Toggle switch (On/Off). When enabled, a magnifying-glass SVG icon appears in the nav bar. The icon is keyboard-accessible (Enter/Space to open). When disabled, all other settings are shown dimmed and not applied.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Appearance', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Icon color</strong> — a <em>Custom</em> checkbox enables the color picker. When unchecked the icon inherits its color from the surrounding text. The current hex value is shown next to the swatch.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Position</strong> — pill-style radio buttons: ⬅ Left (before menu links) or ➡ Right (after menu links).', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'How the modal works (frontend)', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Clicking the icon opens a full-screen modal overlay with two tabs:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Menu tab</strong> — searches through your menu item labels in real time as you type. Matching text is highlighted in yellow. Results are keyboard-navigable: ↑ ↓ to move between results, Enter to follow the link, Esc to close the modal.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>In-page tab</strong> — searches the visible text content of the current page. Each result shows a short context snippet and its approximate position. Selecting a result scrolls the page to that location and highlights the matched text with a <code>&lt;mark&gt;</code> element. A floating navigation bar (Prev / Next) appears to move between all matches.', 'giuliomax-menu-builder' ) . '</li>
</ul>
<p>' . __( 'The modal footer shows keyboard shortcut hints and a result counter. On screens narrower than 480 px the footer is hidden to save space.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'woocommerce' => array(
            'icon'  => '🛒',
            'title' => __( 'WooCommerce Cart', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>WooCommerce</strong> panel adds a live cart icon to the navigation bar. It requires WooCommerce to be installed and active — if it is not, the icon is hidden on the frontend.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Enable cart icon', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Master toggle (On/Off). When disabled all settings below are dimmed and not applied. When enabled, the cart icon appears in the nav bar and all settings take effect.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Appearance', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Cart icon</strong> — three icon styles to choose from: 🛒 Cart (classic shopping trolley), 🛍 Bag (shopping bag), 🧺 Basket. The icon is a FontAwesome SVG and scales cleanly at any size.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Position</strong> — ⬅ Left (before all menu items) or ➡ Right (after all menu items). Use Right for the most common "nav links on the left, cart on the right" layout.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Icon color</strong> — enable the <em>Custom</em> checkbox and pick a color to override the inherited text color. Leave unchecked to inherit the nav bar\'s link color automatically.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Count badge color</strong> — background color of the small number badge that sits on top of the cart icon. Default: red <code>#ef4444</code>. The badge is always white text.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( 'Behavior', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Show item count</strong> — displays the number of items currently in the cart as a badge on the icon. Updates live (via WooCommerce AJAX) when a product is added or removed without a page reload.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Show cart total</strong> — shows the cart subtotal (formatted in the store currency) next to the icon.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Hide when empty</strong> — hides the cart icon entirely while the cart contains no items. The icon reappears as soon as a product is added.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Mini-cart dropdown</strong> — controls how the cart preview panel opens:', 'giuliomax-menu-builder' ) . '
        <ul>
            <li>' . __( '<strong>🖱 On hover</strong> — the mini-cart opens automatically when the cursor enters the icon area.', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>👆 On click</strong> — the mini-cart only opens when the icon is clicked. Useful on touch devices or to avoid accidental opens.', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>🚫 Off (link to cart)</strong> — no mini-cart; the icon acts as a plain link to the WooCommerce cart page (<code>/cart</code>).', 'giuliomax-menu-builder' ) . '</li>
        </ul>
    </li>
</ul>

<h4>' . __( 'Notes', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The cart item count is updated via WooCommerce\'s built-in <code>woocommerce_add_to_cart</code> AJAX event — no additional plugin is required. The mini-cart renders the <code>[woocommerce_cart]</code> shortcode inside the dropdown, so it respects any custom cart templates from your active theme or other plugins.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'accessibility' => array(
            'icon'  => '♿',
            'title' => __( 'Accessibility', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Accessibility</strong> panel provides a full suite of WCAG 2.2 AA compliance features. All settings are opt-in — enable the master toggle first, then configure each card independently.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Master toggle', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The purple banner at the top. When <strong>Disabled</strong>, no accessibility CSS or JS is applied and all setting cards are hidden. Enable it when you are ready to configure. WCAG criterion references (A / AA / AA ★ for new WCAG 2.2 criteria) are shown as badges next to each setting.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '⌨️ Keyboard Navigation', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Enable keyboard navigation</strong> — master switch for this card. Activates Tab, arrow key, Esc and Home/End support throughout the menu. <em>(WCAG 2.1.1 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Tab key behaviour</strong> — <em>Top level only</em>: Tab moves only between top-level items; use ↓ to enter submenus (ARIA APG recommended). <em>All items</em>: every link is reachable with Tab (simpler but requires more key presses). <em>(WCAG 2.4.3 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Arrow key navigation</strong> — ← → move between top-level items; ↓ opens a submenu and enters it; ↑ opens and selects the last item. <em>(WCAG 2.1.1 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Home / End keys</strong> — Home jumps to the first item in the current level; End jumps to the last (ARIA APG recommended pattern).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Esc closes submenus</strong> — pressing Esc collapses the open submenu or mega panel and returns focus to the trigger link, preventing keyboard traps. <em>(WCAG 2.1.2 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Skip navigation link</strong> — a visually hidden link that becomes visible on first Tab press, letting keyboard users jump straight to the main content. <em>(WCAG 2.4.1 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Skip link text</strong> — the label read by screen readers (e.g. "Skip to content").', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Skip link target ID</strong> — the <code>id</code> of your theme\'s main content wrapper <em>without</em> the <code>#</code> (default: <code>main</code>). Add <code>id="main"</code> to your theme\'s content element if not already present.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '🎯 Focus Appearance', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Focus indicator style</strong> — <em>Ring / Outline</em> (recommended): CSS <code>outline</code> drawn around the focused element. <em>Fill — background highlight</em>: high-contrast background applied on focus. <em>Inherit from theme</em>: let the active theme control focus appearance. <em>(WCAG 2.4.11 AA ★)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Focus ring color</strong> — color of the focus indicator. Must achieve ≥ 3:1 contrast ratio against adjacent colors. Default <code>#005FCC</code> gives ≈ 4.8:1 on white. A real-time contrast check is shown below the picker. <em>(WCAG 1.4.11 AA)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Ring thickness (px)</strong> — minimum 2 px as required by WCAG 2.2. 3 px is safe for all font sizes. <em>(WCAG 2.4.11 AA ★)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Ring offset (px)</strong> — gap between the element edge and the focus ring (<code>outline-offset</code>). A small offset prevents the ring from blending into the element background.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Focus not obscured by sticky header</strong> — when the sticky menu is active, automatically scrolls the page so the focused element is never hidden behind the bar. <em>(WCAG 2.4.12 AA ★)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Trap focus in mobile overlay</strong> — when a fullscreen or drawer menu is open, Tab/Shift+Tab cycle only within the menu panel. Esc always closes it. Required for modal-like overlays. <em>(WCAG 2.1.2 A)</em>', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '📢 ARIA &amp; Screen Readers', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Navigation <code>aria-label</code></strong> — distinguishes this <code>&lt;nav&gt;</code> from other navigation landmarks (footer, breadcrumb). NVDA and VoiceOver announce it when entering the landmark (e.g. "Main navigation"). <em>(WCAG 4.1.2 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong><code>aria-current</code> on current page</strong> — <code>page</code> (recommended): VoiceOver/NVDA announce "current page". <code>true</code>: generic active state for archive or section pages. <em>Disabled</em>: rely only on the CSS <code>.active</code> class.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong><code>aria-haspopup</code> on mega menu triggers</strong> — <code>dialog</code> (recommended for mega menu with mixed content). <code>menu</code> (standard dropdown list pattern). <code>false</code> to disable. <em>(WCAG 4.1.2 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Hide decorative icons from screen readers</strong> — adds <code>aria-hidden="true"</code> to all FontAwesome icons. Without this, NVDA may announce icon Unicode characters (e.g. "f015 Home Home"), duplicating the link label. <em>(WCAG 1.1.1 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Notification dot — screen reader text</strong> — text announced to screen reader users when an item has the 🔴 notification dot enabled. The dot itself is hidden with <code>aria-hidden</code>. <em>(WCAG 1.1.1 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Hamburger button — open label</strong> — <code>aria-label</code> read by VoiceOver/NVDA when the mobile menu is <strong>closed</strong> (e.g. "Open menu"). <em>(WCAG 4.1.2 A)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Hamburger button — close label</strong> — <code>aria-label</code> read when the mobile menu is <strong>open</strong> (e.g. "Close menu").', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Live region</strong> — announces menu state changes to screen reader users without moving focus: <em>Off</em>, <em>Polite</em> (waits for the user to finish reading), or <em>Assertive</em> (interrupts immediately). Use Polite unless announcements are urgent.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '🎞️ Motion &amp; Animation', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Respect <code>prefers-reduced-motion</code></strong> — when the visitor\'s OS has "Reduce motion" enabled, all MenuX animations are disabled or slowed to a simple fade. <em>(WCAG 2.3.3 AAA)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Animation multiplier</strong> — global scale for all animation durations: 0 (disabled), 0.5 (faster), 1 (normal), 2 (slower). Useful for manual override regardless of OS setting.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Hover delay (ms)</strong> — time before a submenu closes after the cursor leaves it. A small delay (e.g. 150 ms) prevents accidental dismissal when moving the mouse diagonally toward the panel.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '🎨 Contrast &amp; Visibility', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Respect <code>prefers-contrast</code></strong> — applies extra contrast rules when the visitor\'s OS has "Increase contrast" enabled. <em>(WCAG 1.4.3 AA)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Windows High Contrast Mode</strong> — ensures menu elements render correctly under the <code>forced-colors</code> CSS media query used by Windows High Contrast themes.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Text spacing compatibility</strong> — guarantees menu text remains readable when the visitor overrides line-height, letter-spacing or word-spacing via a browser extension or user stylesheet. <em>(WCAG 1.4.12 AA)</em>', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '📱 Mobile &amp; Touch', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Touch target size (px)</strong> — minimum tap area for all interactive elements (links, hamburger, close button). WCAG 2.2 recommends ≥ 24 px minimum, 44 px for comfortable use. <em>(WCAG 2.5.8 AA ★)</em>', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Touch spacing (px)</strong> — minimum gap between adjacent touch targets to prevent accidental taps.', 'giuliomax-menu-builder' ) . '</li>
</ul>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'wpnav' => array(
            'icon'  => '🔗',
            'title' => __( 'WP Integration', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>WP Integration</strong> panel lets MenuX automatically replace any theme-registered menu location — without editing theme files.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'How it works', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'WordPress themes register named <em>menu locations</em> (e.g. "Primary Navigation", "Footer Menu") via <code>register_nav_menus()</code>. Normally these render the standard WordPress menu assigned to each location. This panel lets you intercept any location and output a MenuX menu instead, by hooking into <code>pre_wp_nav_menu</code>.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Mapping table', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Every theme location registered on your site appears as a row. For each one you can:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( 'Leave <strong>— Don\'t replace —</strong> to keep the theme\'s original menu unchanged.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( 'Choose a <strong>MenuX location</strong> (Primary, Footer, Sidebar, Mobile) to replace that location\'s output with the corresponding MenuX items.', 'giuliomax-menu-builder' ) . '</li>
</ul>
<p>' . __( 'Save after making changes. A location marked <strong>⚠ no items</strong> will fall back to the theme\'s original menu even if mapped, because there are no MenuX items assigned to that location.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Displaying the menu with a shortcode', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The simplest way to show your menu anywhere on the site is the shortcode <code>[menux]</code>. Paste it into any page, post, Shortcode block (block editor / Site Editor), or Text widget — the menu will render exactly there.', 'giuliomax-menu-builder' ) . '</p>
<p>' . __( 'To show only items assigned to a specific location, add the <code>location</code> attribute:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<code>[menux]</code> — shows all items (no location filter)', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<code>[menux location="footer"]</code> — shows only Footer items', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<code>[menux location="sidebar"]</code> — shows only Sidebar items', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<code>[menux location="mobile"]</code> — shows only Mobile items', 'giuliomax-menu-builder' ) . '</li>
</ul>
<p>' . __( 'If your theme does not call <code>register_nav_menus()</code> (common with block themes) no locations appear in the mapping table above — the shortcode is then the primary way to display the menu. Both methods (WP location mapping and shortcode) can be used simultaneously on the same site.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'import-export' => array(
            'icon'  => '📦',
            'title' => __( 'Import / Export', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Import / Export</strong> panel lets you back up your MenuX configuration or transfer it between sites.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Export configuration', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Click <em>Export configuration</em> to download a <code>.json</code> file containing your current menu items and all style settings. The file is base64-encoded for safety. Save it as a backup before making major changes, or use it to clone the menu to another WordPress installation.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Import configuration', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Click <em>Import configuration</em> and select a previously exported <code>.json</code> file. MenuX validates the file structure and version before applying it. <strong>Warning:</strong> importing overwrites your current menu items and style settings completely and cannot be undone — export your current config first if you want to keep it.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Full reset', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The <em>Reset all settings</em> button (shown with a red warning background) deletes every MenuX option from the WordPress database: menu items, styles, logo settings, accessibility settings, WP nav location mappings, and the Google Font transient. The plugin returns to its factory default state. <strong>This action cannot be undone.</strong> A confirmation step is shown before the reset executes.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'multilingual' => array(
            'icon'  => '🌐',
            'title' => __( 'Multilingual', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Multilingual</strong> panel shows which translation plugins MenuX has detected and provides a button to refresh the language list.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Automatic detection', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'MenuX scans for the following plugins at page load and enables per-language label fields automatically when any of them is active:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li><strong>WPML</strong></li>
    <li><strong>Polylang</strong></li>
    <li><strong>TranslatePress</strong></li>
    <li><strong>Multilingual Press</strong></li>
</ul>
<p>' . __( 'Detected languages appear as short language code badges (IT, EN, FR, DE, etc.) in each menu item\'s <em>🌐 Languages</em> section. Without any of these plugins, Italian (IT) and English (EN) fields are always shown as a default pair.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'How labels are displayed on the frontend', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Each menu item stores one label value per language code (stored as <code>lang_it_IT</code>, <code>lang_en_US</code>, etc.). On page load, the frontend JavaScript reads the active language from the <code>&lt;html lang&gt;</code> attribute, finds the best-matching language code, and swaps each item label to the corresponding translation. If no translation is set for the active language, the default label is displayed as fallback.', 'giuliomax-menu-builder' ) . '</p>
<p>' . __( 'Language matching follows a fallback chain: exact match → language prefix match (e.g. <code>pt</code> matches <code>pt-BR</code>) → default label.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Reload languages', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'If you install or activate a multilingual plugin <em>after</em> MenuX was already configured, click <em>Reload languages</em> to force MenuX to re-detect the available languages. This updates the language fields in the Structure panel without losing any existing translations. The language list is cached for 1 hour; this button clears the cache immediately.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

        // ──────────────────────────────────────────────────────────────────────
        'footer' => array(
            'icon'  => '🦶',
            'title' => __( 'Footer Builder', 'giuliomax-menu-builder' ),
            'body'  => '
<p>' . __( 'The <strong>Footer Builder</strong> (under <em>Menu Builder → Footer</em>) is a standalone tool for designing a full website footer — columns, social icons, a newsletter form, legal links and a bottom bar — without touching your theme. It renders independently of your menus.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Enabling &amp; placing the footer', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Two steps are required for the footer to appear on the front end:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( 'Tick <strong>Enable footer</strong> in the top toolbar and click <em>Save Footer</em>.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( 'Place it on your site one of three ways:', 'giuliomax-menu-builder' ) . '
        <ul>
            <li>' . __( '<strong>Automatic</strong> — set <em>Placement</em> to <strong>Automatic (every page)</strong> in the toolbar and the footer appears at the bottom of every page with no block or shortcode required. Use the <em>Priority</em> field to control the <code>wp_footer</code> hook order if it collides with another plugin (lower numbers print earlier; default 100).', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>Block editor / FSE</strong> — keep <em>Placement</em> on <strong>Manual</strong> and add the <code>MenuX — Footer</code> block to your template footer.', 'giuliomax-menu-builder' ) . '</li>
            <li>' . __( '<strong>Classic themes / page builders</strong> — keep <em>Placement</em> on <strong>Manual</strong> and drop the <code>[menux_footer]</code> shortcode wherever you want it.', 'giuliomax-menu-builder' ) . '</li>
        </ul>
    </li>
</ul>
<p>' . __( 'With automatic placement, MenuX skips the injected copy if a block or shortcode already rendered the footer earlier on the same page, so you never get a duplicate.', 'giuliomax-menu-builder' ) . '</p>
<p>' . __( 'If the footer is disabled or has no sections, the block shows a configuration hint in the editor and outputs nothing on the live site.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '🪄 Setup Wizard', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Click <strong>Setup Wizard</strong> for a guided 4-step start that builds a complete footer for you:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Layout</strong> — pick a structure: 4 columns (Classic), 3 columns (Compact), 2 columns (Minimal) or Centered (Elegant).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Palette</strong> — choose one of the curated themes. Each card is a live mini-preview of the real footer.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Your details</strong> — company name, tagline, email, phone, address and social profile URLs. Every field is optional.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Bottom bar</strong> — copyright line and any legal links.', 'giuliomax-menu-builder' ) . '</li>
</ul>
<p>' . __( 'The wizard pre-fills sections from what you enter; you can fine-tune everything afterwards in the main builder.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '🎨 Footer Themes', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The theme gallery offers <strong>11 curated palettes</strong> — Midnight, Carbon Gold, Graphite, Deep Ocean, Evergreen, Bordeaux, Sapphire, Aurora, Porcelain, Sandstone and Editorial. One click applies the full palette (background, headings, text, links, accent and bottom-bar colors). Every color stays editable in the <em>Style</em> panel afterwards, so a theme is a starting point, not a lock-in. The selected card is highlighted with an accent ring.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '🧱 Footer Sections', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'Click <em>＋ Add section</em> to add a column. Seven section types are available:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>About</strong> — an optional logo/image (with adjustable width and a media-library picker) plus a short text paragraph.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Links</strong> — a list of links. Each row supports a label, a URL (with page-picker autocomplete) and an optional <em>open in new tab</em> flag.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Contact</strong> — address, phone and email rows with icons. The phone becomes a <code>tel:</code> link and the email a <code>mailto:</code> link automatically.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Social icons</strong> — pick from 14 networks (Facebook, Instagram, X, LinkedIn, YouTube, TikTok, Pinterest, GitHub, WhatsApp, Telegram, Discord, Spotify, Threads, Email) and add the profile URL for each.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Opening hours</strong> — a simple list of lines, e.g. <code>Mon–Fri: 9–18</code>.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Newsletter</strong> — an email-capture form. A <strong>Form action URL</strong> (your list manager endpoint) is required — without it the block is skipped on the front end and the preview warns you. Subtitle, placeholder, button text and an optional GDPR consent line are configurable.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Custom HTML</strong> — a free HTML block (sanitized with <code>wp_kses_post</code>).', 'giuliomax-menu-builder' ) . '</li>
</ul>
<p>' . __( 'Each section has a <strong>title</strong>, a drag handle (⠿) to reorder by dragging, and buttons to move up/down, <strong>duplicate</strong> (⧉) or remove (×). The <em>Hide this column on mobile</em> checkbox drops the section on screens ≤600&nbsp;px. Up to 6 sections are supported.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( '⬇ Bottom Bar', 'giuliomax-menu-builder' ) . '</h4>
<ul>
    <li>' . __( '<strong>Copyright text</strong> — shown on the left. The token <code>{year}</code> is replaced with the current year.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Legal links</strong> — small links (Privacy, Terms, etc.) shown on the right.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Social in bottom bar</strong> — mirrors your social icons into the bottom bar; it reuses the first Social section\'s networks.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Scroll-to-top button</strong> — a floating ↑ button that appears once the visitor scrolls down past 300&nbsp;px.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '🎛 Style', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The Style panel gives full control beyond the theme presets:', 'giuliomax-menu-builder' ) . '</p>
<ul>
    <li>' . __( '<strong>Colors</strong> — 8 independent color pickers (background, headings, text, links, link hover, accent, bottom-bar background and text).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Layout</strong> — accent bar toggle + height, vertical/horizontal padding, column gap, content max-width, link spacing, mobile alignment (left/center) and the bottom-bar divider.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Typography</strong> — heading size, weight (400–800) and UPPERCASE/Normal transform; text size; and the link hover effect (slide right, animated underline, or color only).', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Social Icons</strong> — badge shape (circle, rounded square, plain) and icon size.', 'giuliomax-menu-builder' ) . '</li>
    <li>' . __( '<strong>Custom CSS</strong> — scoped overrides. Use <code>.menux-footer</code> as the parent selector to stay contained.', 'giuliomax-menu-builder' ) . '</li>
</ul>

<h4>' . __( '👁 Live Preview &amp; responsiveness', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'A sticky <strong>Live Preview</strong> on the right reflects every change instantly — themes, colors, sections and bottom bar — before you save. The rendered footer is fully responsive: the grid collapses to 2 columns at ≤900&nbsp;px and a single column at ≤600&nbsp;px, and the newsletter form stacks vertically on very narrow screens. Press <kbd>Ctrl/⌘ + S</kbd> to save without leaving the keyboard.', 'giuliomax-menu-builder' ) . '</p>

<h4>' . __( 'Performance', 'giuliomax-menu-builder' ) . '</h4>
<p>' . __( 'The footer CSS is generated once and cached in a transient for 24 hours; it is regenerated automatically whenever you save the footer or its style, so the front end never pays for CSS generation on every page load.', 'giuliomax-menu-builder' ) . '</p>
',
        ),

    );
}
