<?php
/**
 * MenuX — Help Modal
 * Renders the full-screen help overlay. Included once at the bottom of admin-page.php.
 */
if ( ! defined( 'ABSPATH' ) ) exit;

require_once __DIR__ . '/help-content.php';
$help_sections = menux_help_sections();
?>
<div id="menux-help-modal" role="dialog" aria-modal="true" aria-labelledby="menux-help-title" style="display:none;position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);overflow:hidden;">
    <div style="position:absolute;inset:40px;background:#fff;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;max-width:1100px;margin:0 auto;">

        <!-- Header -->
        <div style="display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid #e5e7eb;flex-shrink:0;background:linear-gradient(135deg,#667eea,#764ba2);">
            <div style="display:flex;align-items:center;gap:12px;">
                <span style="font-size:22px;">❓</span>
                <span id="menux-help-title" style="font-size:18px;font-weight:700;color:#fff;"><?php esc_html_e( 'Help & Documentation', 'giuliomax-menu-builder' ); ?></span>
            </div>
            <button type="button" onclick="menuxHelpClose()" aria-label="<?php esc_attr_e( 'Close help', 'giuliomax-menu-builder' ); ?>" style="background:rgba(255,255,255,.2);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;">&times;</button>
        </div>

        <!-- Body -->
        <div style="display:flex;flex:1;overflow:hidden;">

            <!-- Sidebar nav -->
            <nav style="width:220px;flex-shrink:0;border-right:1px solid #e5e7eb;overflow-y:auto;padding:12px 0;background:#f9fafb;">
                <?php foreach ( $help_sections as $key => $sec ) : ?>
                <button type="button"
                    class="menux-help-nav-btn"
                    data-help-section="<?php echo esc_attr( $key ); ?>"
                    onclick="menuxHelpGoSection('<?php echo esc_js( $key ); ?>')"
                    style="display:flex;align-items:center;gap:10px;width:100%;padding:10px 20px;border:none;background:transparent;cursor:pointer;font-size:13px;font-weight:500;color:#374151;text-align:left;border-left:3px solid transparent;">
                    <span><?php echo esc_html( $sec['icon'] ); ?></span>
                    <span><?php echo esc_html( $sec['title'] ); ?></span>
                </button>
                <?php endforeach; ?>
            </nav>

            <!-- Content area -->
            <div id="menux-help-content" style="flex:1;overflow-y:auto;padding:32px 36px;">
                <?php foreach ( $help_sections as $key => $sec ) : ?>
                <div class="menux-help-section" id="menux-help-sec-<?php echo esc_attr( $key ); ?>" style="display:none;">
                    <h2 style="margin:0 0 4px;font-size:22px;color:#111827;"><?php echo esc_html( $sec['icon'] . ' ' . $sec['title'] ); ?></h2>
                    <hr style="border:none;border-top:2px solid #667eea;width:48px;margin:12px 0 24px;opacity:.6;">
                    <div class="menux-help-body" style="font-size:14px;line-height:1.75;color:#374151;max-width:700px;">
                        <?php echo wp_kses_post( $sec['body'] ); ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

        </div>
    </div>
</div>

<style>
.menux-help-nav-btn:hover { background:#f0f4ff !important; color:#667eea !important; }
.menux-help-nav-btn.active { border-left-color:#667eea !important; background:#f0f4ff !important; color:#667eea !important; font-weight:700 !important; }
.menux-help-body h4 { margin:20px 0 6px; font-size:14px; color:#111827; }
.menux-help-body p  { margin:0 0 12px; }
.menux-help-body ul { margin:0 0 12px; padding-left:20px; }
.menux-help-body li { margin-bottom:5px; }
.menux-help-body code { background:#f3f4f6; padding:1px 5px; border-radius:4px; font-size:12px; color:#7c3aed; }
.menux-help-body strong { color:#111827; }
</style>
