<?php
/**
 * Theme Name: Mindkosha 3D Skill Theme
 * Theme URI: https://mindkosha.com
 * Author: Mindkosha Team & S.A.G.E. Initiative
 * Author URI: https://mindkosha.com
 * Description: Premium WordPress Theme for Mindkosha 3D Skill Ecosystem (Soft, Life, Meta Skills), S.A.G.E. Global Education Advising, and the E.P.I.C. Initiative (IIM Calcutta Alumni Association).
 * Version: 2.0.0
 * License: GNU General Public License v2 or later
 * Text Domain: mindkosha
 */

// Register Menus and Theme Support if running within WordPress core
if ( function_exists( 'add_action' ) ) {
    add_action( 'after_setup_theme', function() {
        add_theme_support( 'title-tag' );
        add_theme_support( 'post-thumbnails' );
        add_theme_support( 'custom-logo' );
        add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
        
        register_nav_menus( array(
            'primary' => __( 'Primary Header Menu', 'mindkosha' ),
            'footer'  => __( 'Footer Menu', 'mindkosha' ),
        ) );
    } );
}

// Security Guardrail: Prevent direct script execution if isolated without WP core context
if ( ! defined( 'ABSPATH' ) && ! function_exists( 'add_action' ) ) {
    // Graceful fallback display for preview mode
}
?>
<!DOCTYPE html>
<html <?php if ( function_exists( 'language_attributes' ) ) { language_attributes(); } else { echo 'lang="en"'; } ?> class="scroll-smooth">
<head>
    <meta charset="<?php echo function_exists( 'bloginfo' ) ? get_bloginfo( 'charset' ) : 'UTF-8'; ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <?php if ( function_exists( 'wp_head' ) ) : ?>
        <?php wp_head(); ?>
    <?php else : ?>
        <title>Mindkosha | 3D Skill Development, S.A.G.E. & E.P.I.C. Initiative</title>
    <?php endif; ?>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            blue: '#0C61C8',
                            dark: '#051A34',
                            cyan: '#009384',
                            gold: '#F9B200',
                            icy: '#F2F8FD',
                            accent: '#00BBAC'
                        }
                    },
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    boxShadow: {
                        'glass': '0 8px 32px 0 rgba(12, 97, 200, 0.08)',
                        'glow': '0 0 25px rgba(12, 97, 200, 0.25)',
                    }
                }
            }
        }
    </script>

    <style>
        .glass-panel {
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
        .glass-dark {
            background: rgba(5, 26, 52, 0.92);
            backdrop-filter: blur(18px);
        }
        @keyframes pulseGlow {
            0%, 100% { opacity: 0.4; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
        }
        .animate-pulse-glow {
            animation: pulseGlow 4s infinite ease-in-out;
        }
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #F2F8FD;
        }
        ::-webkit-scrollbar-thumb {
            background: #0C61C8;
            border-radius: 4px;
        }
    </style>
</head>
<body <?php if ( function_exists( 'body_class' ) ) { body_class( 'font-sans bg-slate-50 text-slate-800 antialiased selection:bg-brand-cyan selection:text-white' ); } else { echo 'class="font-sans bg-slate-50 text-slate-800 antialiased selection:bg-brand-cyan selection:text-white"'; } ?>>

    <?php if ( function_exists( 'wp_body_open' ) ) { wp_body_open(); } ?>

    <header class="sticky top-0 z-50 glass-panel border-b border-slate-200/80 transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                
                <!-- Brand Logo / Custom WP Logo -->
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="flex items-center gap-3 group">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-brand-blue via-brand-cyan to-brand-gold p-0.5 shadow-md group-hover:rotate-6 transition-transform">
                        <div class="w-full h-full bg-brand-dark rounded-[10px] flex items-center justify-center">
                            <i class="fa-solid fa-cubes text-brand-cyan text-lg"></i>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-xl font-extrabold tracking-tight text-brand-dark group-hover:text-brand-blue transition-colors">
                            <?php echo function_exists( 'bloginfo' ) ? get_bloginfo( 'name' ) : 'MINDKOSHA'; ?><span class="text-brand-cyan">.COM</span>
                        </span>
                        <span class="text-[10px] font-bold text-slate-400 tracking-wider uppercase -mt-1">
                            <?php echo function_exists( 'bloginfo' ) ? ( get_bloginfo( 'description' ) ?: '3D Skill Ecosystem' ) : '3D Skill Ecosystem'; ?>
                        </span>
                    </div>
                </a>

                <!-- Desktop Navigation Menu -->
                <nav class="hidden md:flex items-center gap-8">
                    <a href="#about" class="text-sm font-semibold text-slate-700 hover:text-brand-blue transition-colors">About</a>
                    
                    <!-- 3D Skills Dropdown -->
                    <div class="relative group">
                        <button class="flex items-center gap-1.5 text-sm font-semibold text-slate-700 hover:text-brand-blue py-2">
                            3D Skills <i class="fa-solid fa-chevron-down text-xs text-slate-400 group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <div class="absolute top-full left-0 w-64 glass-panel border border-slate-200 shadow-xl rounded-2xl p-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform translate-y-2 group-hover:translate-y-0">
                            <a href="#skills-soft" class="flex items-center gap-3 p-2.5 rounded-xl hover:bg-brand-icy transition-colors">
                                <div class="w-8 h-8 rounded-lg bg-blue-100 text-brand-blue flex items-center justify-center text-xs"><i class="fa-solid fa-comments"></i></div>
                                <div>
                                    <div class="text-sm font-bold text-slate-800">Soft Skills</div>
                                    <div class="text-xs text-slate-500">Communication & Leadership</div>
                                </div>
                            </a>
                            <a href="#skills-life" class="flex items-center gap-3 p-2.5 rounded-xl hover:bg-teal-50 transition-colors">
                                <div class="w-8 h-8 rounded-lg bg-teal-100 text-brand-cyan flex items-center justify-center text-xs"><i class="fa-solid fa-heart-pulse"></i></div>
                                <div>
                                    <div class="text-sm font-bold text-slate-800">Life Skills</div>
                                    <div class="text-xs text-slate-500">Financial & Personal Mastery</div>
                                </div>
                            </a>
                            <a href="#skills-meta" class="flex items-center gap-3 p-2.5 rounded-xl hover:bg-amber-50 transition-colors">
                                <div class="w-8 h-8 rounded-lg bg-amber-100 text-amber-600 flex items-center justify-center text-xs"><i class="fa-solid fa-brain"></i></div>
                                <div>
                                    <div class="text-sm font-bold text-slate-800">Meta Skills</div>
                                    <div class="text-xs text-slate-500">SDL & Learning How to Learn</div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- Programs Dropdown -->
                    <div class="relative group">
                        <button class="flex items-center gap-1.5 text-sm font-semibold text-slate-700 hover:text-brand-blue py-2">
                            Programs <i class="fa-solid fa-chevron-down text-xs text-slate-400 group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <div class="absolute top-full left-0 w-72 glass-panel border border-slate-200 shadow-xl rounded-2xl p-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform translate-y-2 group-hover:translate-y-0">
                            <a href="#epic-initiative" class="flex items-start gap-3 p-2.5 rounded-xl hover:bg-blue-50 transition-colors">
                                <div class="w-8 h-8 rounded-lg bg-brand-dark text-brand-cyan flex items-center justify-center text-xs shrink-0 mt-0.5"><i class="fa-solid fa-graduation-cap"></i></div>
                                <div>
                                    <div class="text-sm font-bold text-slate-800">E.P.I.C. Program</div>
                                    <div class="text-xs text-slate-500">IIM-C Alumni Association • SDL & PUM</div>
                                </div>
                            </a>
                            <a href="#sage-advising" class="flex items-start gap-3 p-2.5 rounded-xl hover:bg-blue-50 transition-colors">
                                <div class="w-8 h-8 rounded-lg bg-brand-blue text-white flex items-center justify-center text-xs shrink-0 mt-0.5"><i class="fa-solid fa-globe"></i></div>
                                <div>
                                    <div class="text-sm font-bold text-slate-800">S.A.G.E. Global</div>
                                    <div class="text-xs text-slate-500">Strategic Advising for Education</div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <a href="#archives" class="text-sm font-semibold text-slate-700 hover:text-brand-blue transition-colors">Archives</a>
                    <a href="#insights" class="text-sm font-semibold text-slate-700 hover:text-brand-blue transition-colors">Insights</a>
                </nav>

                <!-- Header Actions -->
                <div class="hidden lg:flex items-center gap-4">
                    <button onclick="openModal('consultModal')" class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-brand-blue to-brand-cyan text-white font-semibold text-sm shadow-md hover:shadow-lg hover:brightness-105 transition-all">
                        <i class="fa-solid fa-calendar-check mr-2"></i> Book S.A.G.E. Session
                    </button>
                </div>

                <!-- Mobile Menu Button -->
                <button id="mobileMenuBtn" class="md:hidden p-2 text-slate-700 hover:text-brand-blue" aria-label="Toggle Navigation">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>
            </div>
        </div>

        <!-- Mobile Drawer -->
        <div id="mobileMenu" class="hidden md:hidden border-t border-slate-200 bg-white px-4 pt-3 pb-6 space-y-3">
            <a href="#about" class="block py-2 text-slate-700 font-medium">About Mindkosha</a>
            <a href="#skills-soft" class="block py-2 text-slate-700 font-medium">Soft Skills</a>
            <a href="#skills-life" class="block py-2 text-slate-700 font-medium">Life Skills</a>
            <a href="#skills-meta" class="block py-2 text-slate-700 font-medium">Meta Skills (SDL)</a>
            <a href="#epic-initiative" class="block py-2 text-slate-700 font-medium">E.P.I.C. Initiative (IIM-C)</a>
            <a href="#sage-advising" class="block py-2 text-slate-700 font-medium">S.A.G.E. Global Counseling</a>
            <a href="#archives" class="block py-2 text-slate-700 font-medium">Free MOOCs & Competitions</a>
            <button onclick="openModal('consultModal')" class="w-full mt-2 py-3 bg-brand-blue text-white font-bold rounded-xl">
                Book S.A.G.E. Session
            </button>
        </div>
    </header>

    <section class="relative bg-gradient-to-b from-brand-icy via-white to-slate-50 pt-12 pb-20 overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid lg:grid-cols-12 gap-12 items-center">
                
                <!-- Left Hero Text Content -->
                <div class="lg:col-span-6 space-y-6 text-center lg:text-left">
                    <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-brand-cyan/10 border border-brand-cyan/20 text-brand-cyan text-xs font-bold uppercase tracking-wider">
                        <span class="w-2 h-2 rounded-full bg-brand-cyan animate-ping"></span>
                        Architecting Future-Ready Indian Youth
                    </div>

                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-brand-dark tracking-tight leading-[1.15]">
                        Master the <span class="bg-gradient-to-r from-brand-blue via-brand-cyan to-brand-gold bg-clip-text text-transparent">3D Skill Matrix</span> for Global Success
                    </h1>

                    <p class="text-lg text-slate-600 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
                        Transforming student potential across India through <strong>Soft, Life & Meta Skills</strong>, strategic global education counseling (<strong class="text-brand-blue">S.A.G.E.</strong>), and the visionary <strong class="text-brand-dark">E.P.I.C. Program</strong> (IIM-C Alumni Association).
                    </p>

                    <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-2">
                        <a href="#archives" class="w-full sm:w-auto px-7 py-3.5 rounded-xl bg-brand-blue hover:bg-blue-700 text-white font-bold text-base shadow-lg shadow-brand-blue/25 hover:shadow-xl transition-all text-center flex items-center justify-center gap-2">
                            <i class="fa-solid fa-magnifying-glass"></i> Explore Free Global MOOCs
                        </a>
                        <a href="#epic-initiative" class="w-full sm:w-auto px-7 py-3.5 rounded-xl bg-white border-2 border-slate-200 hover:border-brand-cyan text-slate-800 font-bold text-base shadow-sm hover:shadow-md transition-all text-center flex items-center justify-center gap-2">
                            <i class="fa-solid fa-chart-line text-brand-cyan"></i> Discover E.P.I.C. & PUM
                        </a>
                    </div>

                    <!-- Trust Stats Bar -->
                    <div class="pt-8 border-t border-slate-200/80 grid grid-cols-3 gap-4 text-center lg:text-left">
                        <div>
                            <div class="text-2xl font-black text-brand-dark">1,200+</div>
                            <div class="text-xs font-medium text-slate-500">Free University MOOCs</div>
                        </div>
                        <div>
                            <div class="text-2xl font-black text-brand-blue">100%</div>
                            <div class="text-xs font-medium text-slate-500">Self-Directed Learning</div>
                        </div>
                        <div>
                            <div class="text-2xl font-black text-brand-cyan">IIM-C</div>
                            <div class="text-xs font-medium text-slate-500">Alumni Led Initiative</div>
                        </div>
                    </div>
                </div>

                <!-- Right Hero Canvas Card -->
                <div class="lg:col-span-6">
                    <div class="relative rounded-3xl bg-brand-dark p-2 shadow-2xl border border-slate-800">
                        <div class="flex items-center justify-between px-5 py-3 border-b border-slate-800">
                            <div class="flex items-center gap-2">
                                <span class="w-3 h-3 rounded-full bg-red-500"></span>
                                <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
                                <span class="w-3 h-3 rounded-full bg-green-500"></span>
                                <span class="ml-2 text-xs font-mono text-slate-400">Mindkosha 3D Matrix Visualizer</span>
                            </div>
                            <span class="text-xs font-bold text-brand-cyan px-2.5 py-0.5 rounded-md bg-brand-cyan/10">Interactive Engine</span>
                        </div>

                        <div class="relative bg-slate-950 rounded-b-2xl overflow-hidden">
                            <canvas id="heroSkillCanvas" class="w-full h-[400px] cursor-pointer block"></canvas>
                            
                            <!-- Overlay Instruction -->
                            <div class="absolute top-4 left-4 pointer-events-none bg-slate-900/80 backdrop-blur-md px-3 py-1.5 rounded-lg border border-slate-800 text-[11px] text-slate-300 flex items-center gap-2">
                                <i class="fa-solid fa-hand-pointer text-brand-gold animate-bounce"></i> Click any glowing node to inspect skill specs
                            </div>

                            <!-- Dynamic Skill Info Popover -->
                            <div id="canvasNodePopover" class="hidden absolute bottom-4 left-4 right-4 bg-slate-900/95 backdrop-blur-xl border border-brand-blue/40 p-4 rounded-xl shadow-2xl transition-all">
                                <div class="flex items-start justify-between">
                                    <div>
                                        <span id="popoverBadge" class="text-[10px] font-black uppercase px-2 py-0.5 rounded bg-brand-blue text-white">SOFT SKILLS</span>
                                        <h4 id="popoverTitle" class="text-base font-bold text-white mt-1">Skill Name</h4>
                                    </div>
                                    <button onclick="closePopover()" class="text-slate-400 hover:text-white p-1" aria-label="Close Popover"><i class="fa-solid fa-xmark"></i></button>
                                </div>
                                <p id="popoverDesc" class="text-xs text-slate-300 mt-2 leading-relaxed">Skill description output.</p>
                            </div>
                        </div>
                    </div>
                </div>

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

    <section id="about" class="py-20 bg-white relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <span class="text-xs font-bold text-brand-blue uppercase tracking-widest bg-brand-icy px-3 py-1 rounded-full border border-brand-blue/20">The Core Philosophy</span>
                <h2 class="text-3xl sm:text-4xl font-extrabold text-brand-dark mt-3">The 3D Skill Development Ecosystem</h2>
                <p class="text-slate-600 mt-3 text-base">Conventional education focuses heavily on academic theory. Mindkosha bridges the gap by building 3 dimensional competence essential for thriving in the modern global economy.</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <!-- Soft Skills Card -->
                <div id="skills-soft" class="group relative rounded-3xl bg-slate-50 border border-slate-200/80 p-8 hover:bg-white hover:border-brand-blue hover:shadow-2xl transition-all duration-300">
                    <div class="w-14 h-14 rounded-2xl bg-blue-100 text-brand-blue flex items-center justify-center text-2xl font-black mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-users"></i>
                    </div>
                    <span class="text-xs font-extrabold text-brand-blue tracking-wider uppercase">Dimensional Pillar 1</span>
                    <h3 class="text-2xl font-bold text-brand-dark mt-1 mb-3">Soft Skills</h3>
                    <p class="text-slate-600 text-sm leading-relaxed mb-6">Master interpersonal communication, persuasive pitch dynamics, leadership, corporate readiness, and collaborative emotional intelligence.</p>
                    
                    <ul class="space-y-3 text-sm text-slate-700">
                        <li class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-brand-blue text-xs"></i> Effective Communication & Articulation</li>
                        <li class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-brand-blue text-xs"></i> Executive Leadership & Influence</li>
                        <li class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-brand-blue text-xs"></i> Team Synergy & Negotiation</li>
                    </ul>
                </div>

                <!-- Life Skills Card -->
                <div id="skills-life" class="group relative rounded-3xl bg-slate-50 border border-slate-200/80 p-8 hover:bg-white hover:border-brand-cyan hover:shadow-2xl transition-all duration-300">
                    <div class="w-14 h-14 rounded-2xl bg-teal-100 text-brand-cyan flex items-center justify-center text-2xl font-black mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-shield-halved"></i>
                    </div>
                    <span class="text-xs font-extrabold text-brand-cyan tracking-wider uppercase">Dimensional Pillar 2</span>
                    <h3 class="text-2xl font-bold text-brand-dark mt-1 mb-3">Life Skills</h3>
                    <p class="text-slate-600 text-sm leading-relaxed mb-6">Navigating real-world challenges through financial literacy, emotional resilience, stress management, and ethical decision-making frameworks.</p>
                    
                    <ul class="space-y-3 text-sm text-slate-700">
                        <li class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-brand-cyan text-xs"></i> Financial Literacy & Wealth Management</li>
                        <li class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-brand-cyan text-xs"></i> Emotional Intelligence & Resilience</li>
                        <li class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-brand-cyan text-xs"></i> Critical Thinking & Problem Solving</li>
                    </ul>
                </div>

                <!-- Meta Skills Card -->
                <div id="skills-meta" class="group relative rounded-3xl bg-slate-50 border border-slate-200/80 p-8 hover:bg-white hover:border-brand-gold hover:shadow-2xl transition-all duration-300">
                    <div class="w-14 h-14 rounded-2xl bg-amber-100 text-amber-600 flex items-center justify-center text-2xl font-black mb-6 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-brain"></i>
                    </div>
                    <span class="text-xs font-extrabold text-amber-600 tracking-wider uppercase">Dimensional Pillar 3</span>
                    <h3 class="text-2xl font-bold text-brand-dark mt-1 mb-3">Meta Skills</h3>
                    <p class="text-slate-600 text-sm leading-relaxed mb-6">Cognitive abilities that allow students to "learn how to learn"—including Self-Directed Learning (SDL), adaptive thinking, and mental agility.</p>
                    
                    <ul class="space-y-3 text-sm text-slate-700">
                        <li class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-amber-500 text-xs"></i> Self-Directed Learning (SDL) Engines</li>
                        <li class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-amber-500 text-xs"></i> Learning How to Learn (Meta Learning)</li>
                        <li class="flex items-center gap-2.5"><i class="fa-solid fa-circle-check text-amber-500 text-xs"></i> Systems Thinking & Cognitive Flexibility</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="epic-initiative" class="py-20 bg-brand-dark text-white relative overflow-hidden">
        <div class="absolute inset-0 bg-[linear-gradient(to_right,#0c61c815_1px,transparent_1px),linear-gradient(to_bottom,#0c61c815_1px,transparent_1px)] bg-[size:4rem_4rem]"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid lg:grid-cols-12 gap-12 items-center">
                
                <!-- Info Section -->
                <div class="lg:col-span-6 space-y-6">
                    <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-brand-cyan/20 border border-brand-cyan/40 text-brand-cyan text-xs font-bold uppercase tracking-wider">
                        <i class="fa-solid fa-award"></i> Featured Institutional Program
                    </div>

                    <h2 class="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
                        The <span class="text-brand-cyan">E.P.I.C. Program</span> — Empowering Performance & Autonomous Learning
                    </h2>

                    <p class="text-slate-300 text-base leading-relaxed">
                        Hosted in collaboration with the <strong>IIM Calcutta Alumni Association</strong> under the leadership of visionary leader <strong>Shri Praful Sheth</strong> and his team of educators, the E.P.I.C. program introduces pioneering frameworks for student upliftment in India:
                    </p>

                    <div class="grid sm:grid-cols-2 gap-4 pt-2">
                        <div class="p-4 rounded-2xl bg-slate-900/80 border border-slate-800">
                            <div class="text-brand-cyan text-lg font-black mb-1">SDL Framework</div>
                            <div class="text-xs text-slate-400 font-bold">Self-Directed Learning</div>
                            <p class="text-slate-300 text-xs mt-2">Shifting students from passive memorization to proactive knowledge acquisition.</p>
                        </div>

                        <div class="p-4 rounded-2xl bg-slate-900/80 border border-slate-800">
                            <div class="text-brand-gold text-lg font-black mb-1">PUM System</div>
                            <div class="text-xs text-slate-400 font-bold">Performance Upliftment Monitor</div>
                            <p class="text-slate-300 text-xs mt-2">Diagnostic tracking tools to benchmark, monitor, and elevate student output.</p>
                        </div>
                    </div>

                    <div class="pt-4 flex items-center gap-4">
                        <button onclick="openModal('epicEnrollModal')" class="px-6 py-3 rounded-xl bg-brand-cyan text-brand-dark font-extrabold text-sm hover:brightness-110 transition-all shadow-lg shadow-brand-cyan/20">
                            Register School / Student for E.P.I.C.
                        </button>
                    </div>
                </div>

                <!-- Interactive PUM Diagnostic Tool Widget -->
                <div class="lg:col-span-6">
                    <div class="rounded-3xl bg-slate-900 border border-slate-700/80 p-6 sm:p-8 shadow-2xl">
                        <div class="flex items-center justify-between pb-6 border-b border-slate-800">
                            <div>
                                <h3 class="text-lg font-bold text-white"><i class="fa-solid fa-gauge-high text-brand-cyan mr-2"></i> PUM Performance Upliftment Calculator</h3>
                                <p class="text-xs text-slate-400">Interactive SDL Diagnostic Preview</p>
                            </div>
                            <span class="text-[10px] font-extrabold uppercase px-2.5 py-1 rounded-md bg-brand-blue/30 text-brand-blue">Interactive Test</span>
                        </div>

                        <!-- Interactive Range Sliders -->
                        <div class="space-y-5 my-6">
                            <div>
                                <div class="flex justify-between text-xs font-bold mb-1.5">
                                    <span class="text-slate-300">Self-Directed Study Hours / Week</span>
                                    <span id="valStudyHours" class="text-brand-cyan">10 hrs</span>
                                </div>
                                <input type="range" id="inputStudyHours" min="2" max="30" value="10" class="w-full accent-brand-cyan cursor-pointer">
                            </div>

                            <div>
                                <div class="flex justify-between text-xs font-bold mb-1.5">
                                    <span class="text-slate-300">MOOC & Skill Certification Completion</span>
                                    <span id="valMooc" class="text-brand-cyan">2 Courses</span>
                                </div>
                                <input type="range" id="inputMooc" min="0" max="10" value="2" class="w-full accent-brand-cyan cursor-pointer">
                            </div>

                            <div>
                                <div class="flex justify-between text-xs font-bold mb-1.5">
                                    <span class="text-slate-300">Goal Tracking & Reflection Frequency</span>
                                    <span id="valReflection" class="text-brand-cyan">Weekly</span>
                                </div>
                                <input type="range" id="inputReflection" min="1" max="5" value="3" class="w-full accent-brand-cyan cursor-pointer">
                            </div>
                        </div>

                        <!-- Calculated Output Banner -->
                        <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800 flex items-center justify-between">
                            <div>
                                <div class="text-xs text-slate-400 font-semibold">Estimated Academic Growth Index</div>
                                <div id="pumScore" class="text-3xl font-black text-brand-gold mt-0.5">74 / 100</div>
                            </div>
                            <div class="text-right">
                                <span id="pumBadge" class="text-xs font-bold px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-400">High Growth Readiness</span>
                            </div>
                        </div>
                    </div>
                </div>

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

    <section id="sage-advising" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-gradient-to-r from-brand-blue to-indigo-900 rounded-3xl text-white p-8 sm:p-12 shadow-2xl relative overflow-hidden">
                <div class="grid lg:grid-cols-12 gap-8 items-center relative z-10">
                    
                    <div class="lg:col-span-8 space-y-4">
                        <span class="px-3 py-1 rounded-full bg-white/10 text-brand-cyan text-xs font-bold uppercase tracking-wider">Strategic Counseling</span>
                        <h2 class="text-3xl sm:text-4xl font-extrabold text-white">S.A.G.E. — Strategic Advising for Global Education</h2>
                        <p class="text-slate-200 text-sm sm:text-base leading-relaxed max-w-2xl">
                            Navigating international university admissions, Ivy League profiles, scholarship applications, and global research opportunities. Designed specifically to mentor ambitious Indian students.
                        </p>

                        <div class="grid sm:grid-cols-3 gap-4 pt-4">
                            <div class="flex items-center gap-3">
                                <i class="fa-solid fa-graduation-cap text-brand-cyan text-xl"></i>
                                <span class="text-xs font-bold text-slate-100">Ivy & Top 50 University Pathways</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <i class="fa-solid fa-passport text-brand-cyan text-xl"></i>
                                <span class="text-xs font-bold text-slate-100">Global SOP & Portfolio Profiling</span>
                            </div>
                            <div class="flex items-center gap-3">
                                <i class="fa-solid fa-hand-holding-dollar text-brand-cyan text-xl"></i>
                                <span class="text-xs font-bold text-slate-100">Scholarship & Grant Strategy</span>
                            </div>
                        </div>
                    </div>

                    <div class="lg:col-span-4 text-center lg:text-right">
                        <button onclick="openModal('consultModal')" class="w-full sm:w-auto px-8 py-4 rounded-2xl bg-brand-cyan hover:bg-teal-400 text-brand-dark font-black text-base shadow-xl transition-all">
                            Book 1-on-1 S.A.G.E. Session
                        </button>
                    </div>

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

    <section id="archives" class="py-20 bg-slate-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row md:items-end justify-between mb-10">
                <div>
                    <span class="text-xs font-bold text-brand-blue uppercase tracking-widest">Global Repository</span>
                    <h2 class="text-3xl font-extrabold text-brand-dark mt-1">Student Free Resource Archive</h2>
                    <p class="text-slate-600 text-sm mt-1">Free courses from top universities & national/international competitions.</p>
                </div>

                <!-- Tab Filters -->
                <div class="flex items-center gap-2 mt-4 md:mt-0 bg-white p-1.5 rounded-2xl border border-slate-200">
                    <button onclick="switchArchiveTab('moocs')" id="tabBtnMoocs" class="px-5 py-2 rounded-xl text-xs font-bold bg-brand-blue text-white shadow-md transition-all">
                        <i class="fa-solid fa-book-open mr-1.5"></i> Free MOOCs
                    </button>
                    <button onclick="switchArchiveTab('competitions')" id="tabBtnComp" class="px-5 py-2 rounded-xl text-xs font-bold text-slate-600 hover:text-brand-blue transition-all">
                        <i class="fa-solid fa-trophy mr-1.5"></i> Competitions
                    </button>
                </div>
            </div>

            <!-- Search Bar & Filters -->
            <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm mb-8 flex flex-col md:flex-row gap-4 items-center">
                <div class="relative w-full md:flex-1">
                    <i class="fa-solid fa-magnifying-glass absolute left-4 top-3.5 text-slate-400"></i>
                    <input type="text" id="archiveSearchInput" onkeyup="filterArchiveItems()" placeholder="Search by course name, university (MIT, Harvard, NPTEL), or topic..." class="w-full pl-11 pr-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 text-sm focus:outline-none focus:border-brand-blue">
                </div>

                <div class="flex items-center gap-3 w-full md:w-auto">
                    <select id="archiveCategorySelect" onchange="filterArchiveItems()" class="w-full md:w-auto px-4 py-2.5 rounded-xl bg-slate-50 border border-slate-200 text-xs font-bold text-slate-700 focus:outline-none">
                        <option value="ALL">All Categories</option>
                        <option value="Computer Science">Computer Science & AI</option>
                        <option value="Business">Business & Leadership</option>
                        <option value="Meta Skills">Meta Skills & Learning</option>
                        <option value="STEM">Olympiads & STEM</option>
                    </select>
                </div>
            </div>

            <!-- Archive Grid Cards (Dynamic WP Query Loop with Fallback) -->
            <div id="archiveGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                
                <?php
                // WordPress Loop Integration for Custom Posts / Posts
                if ( function_exists( 'have_posts' ) && have_posts() ) :
                    while ( have_posts() ) : the_post();
                        $cat = get_the_category();
                        $cat_name = ! empty( $cat ) ? $cat[0]->name : 'Meta Skills';
                        ?>
                        <div class="archive-card mooc-item bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-lg transition-all" data-category="<?php echo esc_attr( $cat_name ); ?>" data-title="<?php echo esc_attr( get_the_title() ); ?>">
                            <div class="flex items-center justify-between mb-4">
                                <span class="px-2.5 py-1 rounded-md bg-blue-100 text-brand-blue text-[11px] font-bold"><?php echo esc_html( $cat_name ); ?></span>
                                <span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">WordPress Entry</span>
                            </div>
                            <h4 class="text-base font-bold text-brand-dark mb-2"><?php the_title(); ?></h4>
                            <p class="text-xs text-slate-500 mb-4"><?php echo get_the_excerpt(); ?></p>
                            <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                                <span class="text-[11px] text-slate-400 font-semibold"><i class="fa-regular fa-clock mr-1"></i> <?php echo get_the_date(); ?></span>
                                <a href="<?php the_permalink(); ?>" class="text-xs font-bold text-brand-blue hover:underline">Read Article <i class="fa-solid fa-arrow-right ml-1"></i></a>
                            </div>
                        </div>
                        <?php
                    endwhile;
                else :
                    // Pre-designed Static Fallback MOOC & Competition Items
                ?>
                    <!-- MOOC Item 1 -->
                    <div class="archive-card mooc-item bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-lg transition-all" data-category="Computer Science" data-title="Introduction to Computer Science edX CS50">
                        <div class="flex items-center justify-between mb-4">
                            <span class="px-2.5 py-1 rounded-md bg-blue-100 text-brand-blue text-[11px] font-bold">Harvard University</span>
                            <span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">Free Audit</span>
                        </div>
                        <h4 class="text-base font-bold text-brand-dark mb-2">CS50: Introduction to Computer Science</h4>
                        <p class="text-xs text-slate-500 mb-4">An entry-level course teaching algorithmic thinking and problem solving efficiently.</p>
                        <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                            <span class="text-[11px] text-slate-400 font-semibold"><i class="fa-regular fa-clock mr-1"></i> 12 Weeks</span>
                            <a href="https://pll.harvard.edu/course/cs50-introduction-computer-science" target="_blank" class="text-xs font-bold text-brand-blue hover:underline">Access Course <i class="fa-solid fa-arrow-up-right-from-square ml-1"></i></a>
                        </div>
                    </div>

                    <!-- MOOC Item 2 -->
                    <div class="archive-card mooc-item bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-lg transition-all" data-category="Meta Skills" data-title="Learning How to Learn Brain Tools">
                        <div class="flex items-center justify-between mb-4">
                            <span class="px-2.5 py-1 rounded-md bg-purple-100 text-purple-700 text-[11px] font-bold">Deep Teaching Solutions</span>
                            <span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">Free Audit</span>
                        </div>
                        <h4 class="text-base font-bold text-brand-dark mb-2">Learning How to Learn: Powerful Mental Tools</h4>
                        <p class="text-xs text-slate-500 mb-4">Master complex subjects using memory techniques and focused vs. diffuse thinking modes.</p>
                        <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                            <span class="text-[11px] text-slate-400 font-semibold"><i class="fa-regular fa-clock mr-1"></i> 4 Weeks</span>
                            <a href="https://www.coursera.org/learn/learning-how-to-learn" target="_blank" class="text-xs font-bold text-brand-blue hover:underline">Access Course <i class="fa-solid fa-arrow-up-right-from-square ml-1"></i></a>
                        </div>
                    </div>

                    <!-- MOOC Item 3 -->
                    <div class="archive-card mooc-item bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-lg transition-all" data-category="Computer Science" data-title="NPTEL Soft Skills IIT Kharagpur">
                        <div class="flex items-center justify-between mb-4">
                            <span class="px-2.5 py-1 rounded-md bg-orange-100 text-orange-700 text-[11px] font-bold">NPTEL / IIT Kharagpur</span>
                            <span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">Free Course</span>
                        </div>
                        <h4 class="text-base font-bold text-brand-dark mb-2">Development of Soft Skills & Personality</h4>
                        <p class="text-xs text-slate-500 mb-4">Comprehensive Indian curriculum focusing on workplace dynamics, communication, and etiquette.</p>
                        <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                            <span class="text-[11px] text-slate-400 font-semibold"><i class="fa-regular fa-clock mr-1"></i> 8 Weeks</span>
                            <a href="https://nptel.ac.in/" target="_blank" class="text-xs font-bold text-brand-blue hover:underline">Access Course <i class="fa-solid fa-arrow-up-right-from-square ml-1"></i></a>
                        </div>
                    </div>

                    <!-- Competition Item 1 (Hidden by default in MOOC view) -->
                    <div class="archive-card comp-item hidden bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-lg transition-all" data-category="STEM" data-title="Smart India Hackathon SIH">
                        <div class="flex items-center justify-between mb-4">
                            <span class="px-2.5 py-1 rounded-md bg-amber-100 text-amber-800 text-[11px] font-bold">National Competition</span>
                            <span class="text-xs font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded">Upcoming</span>
                        </div>
                        <h4 class="text-base font-bold text-brand-dark mb-2">Smart India Hackathon (SIH 2026)</h4>
                        <p class="text-xs text-slate-500 mb-4">World's biggest open innovation model for students to solve pressing real-life problems.</p>
                        <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                            <span class="text-[11px] text-slate-400 font-semibold"><i class="fa-solid fa-trophy text-brand-gold mr-1"></i> ₹1,00,000 / Problem</span>
                            <a href="https://sih.gov.in/" target="_blank" class="text-xs font-bold text-brand-blue hover:underline">View Details <i class="fa-solid fa-arrow-up-right-from-square ml-1"></i></a>
                        </div>
                    </div>

                    <!-- Competition Item 2 -->
                    <div class="archive-card comp-item hidden bg-white rounded-2xl border border-slate-200 p-6 shadow-sm hover:shadow-lg transition-all" data-category="Business" data-title="IIM Calcutta Case Study Challenge">
                        <div class="flex items-center justify-between mb-4">
                            <span class="px-2.5 py-1 rounded-md bg-teal-100 text-teal-800 text-[11px] font-bold">IIM Calcutta Alumni</span>
                            <span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">Registration Open</span>
                        </div>
                        <h4 class="text-base font-bold text-brand-dark mb-2">E.P.I.C. National Case Competition</h4>
                        <p class="text-xs text-slate-500 mb-4">Solve real business challenges using Self-Directed Learning & strategic frameworks.</p>
                        <div class="flex items-center justify-between pt-4 border-t border-slate-100">
                            <span class="text-[11px] text-slate-400 font-semibold"><i class="fa-solid fa-medal text-brand-cyan mr-1"></i> Merit Certificates</span>
                            <button onclick="openModal('epicEnrollModal')" class="text-xs font-bold text-brand-blue hover:underline">Register Team <i class="fa-solid fa-arrow-right ml-1"></i></button>
                        </div>
                    </div>
                <?php endif; ?>

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

    <section id="insights" class="py-20 bg-brand-dark text-white relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-12 gap-12 items-center">
                
                <div class="lg:col-span-6 space-y-4">
                    <span class="text-xs font-bold text-brand-cyan uppercase tracking-widest">Mindkosha Insights</span>
                    <h2 class="text-3xl font-extrabold">Subscribe to <span class="text-brand-cyan">The Mindkosha Digest</span></h2>
                    <p class="text-slate-300 text-sm leading-relaxed">
                        Join thousands of Indian students, educators, and global aspirants receiving weekly updates on meta-learning, university scholarships, and skill development frameworks.
                    </p>
                </div>

                <div class="lg:col-span-6">
                    <form onsubmit="handleSubscribe(event)" class="bg-slate-900 border border-slate-800 p-6 rounded-3xl shadow-xl space-y-4">
                        <?php if ( function_exists( 'wp_nonce_field' ) ) wp_nonce_field( 'mindkosha_subscribe', 'mk_sub_nonce' ); ?>
                        <div>
                            <label class="block text-xs font-bold text-slate-400 uppercase mb-2">Email Address</label>
                            <input type="email" id="subEmail" required placeholder="student@university.ac.in" class="w-full px-4 py-3 rounded-xl bg-slate-950 border border-slate-800 text-white text-sm focus:outline-none focus:border-brand-cyan">
                        </div>
                        <div class="flex items-center gap-3">
                            <input type="checkbox" id="subCheck" required class="accent-brand-cyan">
                            <label for="subCheck" class="text-xs text-slate-400">I agree to receive educational newsletter digests from Mindkosha.</label>
                        </div>
                        <button type="submit" class="w-full py-3.5 rounded-xl bg-brand-cyan text-brand-dark font-black text-sm hover:brightness-110 transition-all">
                            Join Free Digest Subscriptions
                        </button>
                    </form>
                </div>

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

    <footer class="bg-slate-950 text-slate-400 pt-16 pb-12 border-t border-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
                
                <!-- Brand Info -->
                <div class="col-span-2 space-y-4">
                    <a href="#" class="flex items-center gap-2">
                        <span class="text-xl font-black text-white">MINDKOSHA<span class="text-brand-cyan">.COM</span></span>
                    </a>
                    <p class="text-xs text-slate-400 leading-relaxed max-w-sm">
                        Promoting 3D Skill Development (Soft, Life & Meta Skills), S.A.G.E. global education advising, and the E.P.I.C. program (IIM-C Alumni Association) to empower Indian students.
                    </p>
                </div>

                <!-- Navigation Column 1 -->
                <div>
                    <h4 class="text-xs font-bold text-white uppercase tracking-wider mb-4">3D Skills</h4>
                    <ul class="space-y-2.5 text-xs">
                        <li><a href="#skills-soft" class="hover:text-white transition-colors">Soft Skills</a></li>
                        <li><a href="#skills-life" class="hover:text-white transition-colors">Life Skills</a></li>
                        <li><a href="#skills-meta" class="hover:text-white transition-colors">Meta Skills (SDL)</a></li>
                    </ul>
                </div>

                <!-- Navigation Column 2 -->
                <div>
                    <h4 class="text-xs font-bold text-white uppercase tracking-wider mb-4">Programs</h4>
                    <ul class="space-y-2.5 text-xs">
                        <li><a href="#epic-initiative" class="hover:text-white transition-colors">E.P.I.C. Initiative</a></li>
                        <li><a href="#sage-advising" class="hover:text-white transition-colors">S.A.G.E. Global</a></li>
                        <li><a href="#epic-initiative" class="hover:text-white transition-colors">PUM Monitor</a></li>
                    </ul>
                </div>

                <!-- Navigation Column 3 -->
                <div>
                    <h4 class="text-xs font-bold text-white uppercase tracking-wider mb-4">Archives</h4>
                    <ul class="space-y-2.5 text-xs">
                        <li><a href="#archives" class="hover:text-white transition-colors">Free Global MOOCs</a></li>
                        <li><a href="#archives" class="hover:text-white transition-colors">Competitions</a></li>
                        <li><a href="#insights" class="hover:text-white transition-colors">Blog & Newsletters</a></li>
                    </ul>
                </div>

            </div>

            <div class="pt-8 border-t border-slate-900 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500 gap-4">
                <p>&copy; <?php echo date('Y'); ?> Mindkosha.com. All rights reserved.</p>
                <div class="flex gap-6">
                    <a href="#" class="hover:text-slate-300">Privacy Policy</a>
                    <a href="#" class="hover:text-slate-300">Terms of Service</a>
                    <a href="#" class="hover:text-slate-300">Leadership & Advisory</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Custom UI Toast Notification System -->
    <div id="mkToast" class="fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 pointer-events-none transition-all duration-300 ease-out bg-slate-900 border border-slate-700 text-white px-5 py-4 rounded-2xl shadow-2xl flex items-center gap-3">
        <i id="mkToastIcon" class="fa-solid fa-circle-check text-emerald-400 text-lg"></i>
        <span id="mkToastText" class="text-xs font-bold">Action completed successfully.</span>
    </div>

    <!-- S.A.G.E Consultation Modal -->
    <div id="consultModal" class="hidden fixed inset-0 z-50 glass-dark flex items-center justify-center p-4">
        <div class="bg-white rounded-3xl max-w-lg w-full p-6 sm:p-8 relative shadow-2xl">
            <button onclick="closeModal('consultModal')" class="absolute top-5 right-5 text-slate-400 hover:text-slate-700" aria-label="Close Modal"><i class="fa-solid fa-xmark text-lg"></i></button>
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-brand-blue text-white flex items-center justify-center font-bold"><i class="fa-solid fa-globe"></i></div>
                <div>
                    <h3 class="text-lg font-extrabold text-brand-dark">Book S.A.G.E. Session</h3>
                    <p class="text-xs text-slate-500">Strategic Advising for Global Education</p>
                </div>
            </div>

            <form onsubmit="handleFormSubmit(event, 'consultModal', 'S.A.G.E. Advisory Booking Received! Our team will reach out shortly.')" class="space-y-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Full Name</label>
                    <input type="text" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm focus:outline-none focus:border-brand-blue">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Email Address</label>
                    <input type="email" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm focus:outline-none focus:border-brand-blue">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Target Educational Goal</label>
                    <select class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs font-bold text-slate-700">
                        <option>Foreign University Undergraduate Admissions</option>
                        <option>Master's / Ph.D. Scholarship Search</option>
                        <option>Profile & Portfolio Building</option>
                    </select>
                </div>
                <button type="submit" class="w-full py-3 bg-brand-blue text-white font-bold rounded-xl text-sm hover:bg-blue-700 transition-colors">
                    Confirm Consultation Request
                </button>
            </form>
        </div>
    </div>

    <!-- E.P.I.C Enrollment Modal -->
    <div id="epicEnrollModal" class="hidden fixed inset-0 z-50 glass-dark flex items-center justify-center p-4">
        <div class="bg-white rounded-3xl max-w-lg w-full p-6 sm:p-8 relative shadow-2xl">
            <button onclick="closeModal('epicEnrollModal')" class="absolute top-5 right-5 text-slate-400 hover:text-slate-700" aria-label="Close Modal"><i class="fa-solid fa-xmark text-lg"></i></button>
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-brand-cyan text-brand-dark flex items-center justify-center font-bold"><i class="fa-solid fa-graduation-cap"></i></div>
                <div>
                    <h3 class="text-lg font-extrabold text-brand-dark">Register for E.P.I.C. Program</h3>
                    <p class="text-xs text-slate-500">IIM Calcutta Alumni Association Initiative</p>
                </div>
            </div>

            <form onsubmit="handleFormSubmit(event, 'epicEnrollModal', 'E.P.I.C. Program Registration Submitted!')" class="space-y-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Institution / Student Name</label>
                    <input type="text" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm focus:outline-none focus:border-brand-cyan">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Contact Email</label>
                    <input type="email" required class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-sm focus:outline-none focus:border-brand-cyan">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1">Enrollment Type</label>
                    <select class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 text-xs font-bold text-slate-700">
                        <option>Individual Student (SDL & PUM Monitor)</option>
                        <option>School / Institution Partnership Cohort</option>
                    </select>
                </div>
                <button type="submit" class="w-full py-3 bg-brand-cyan text-brand-dark font-extrabold rounded-xl text-sm hover:brightness-110 transition-all">
                    Submit E.P.I.C. Registration
                </button>
            </form>
        </div>
    </div>

    <script>
        // Custom UI Toast Notification Engine (No native alerts)
        function showToast(message, type = 'success') {
            const toast = document.getElementById('mkToast');
            const toastText = document.getElementById('mkToastText');
            const toastIcon = document.getElementById('mkToastIcon');
            if (!toast) return;

            toastText.textContent = message;
            if (type === 'success') {
                toastIcon.className = 'fa-solid fa-circle-check text-emerald-400 text-lg';
            } else {
                toastIcon.className = 'fa-solid fa-circle-info text-brand-cyan text-lg';
            }

            toast.classList.remove('translate-y-20', 'opacity-0', 'pointer-events-none');
            toast.classList.add('translate-y-0', 'opacity-100');

            setTimeout(() => {
                toast.classList.remove('translate-y-0', 'opacity-100');
                toast.classList.add('translate-y-20', 'opacity-0', 'pointer-events-none');
            }, 4000);
        }

        // Hero Canvas Node Visualizer Engine
        const canvas = document.getElementById('heroSkillCanvas');
        const ctx = canvas.getContext('2d');
        const popover = document.getElementById('canvasNodePopover');

        function setCanvasDimensions() {
            canvas.width = canvas.parentElement.clientWidth;
            canvas.height = 400;
        }
        setCanvasDimensions();
        window.addEventListener('resize', setCanvasDimensions);

        const skillNodesData = [
            { name: 'Self-Directed Learning (SDL)', category: 'Meta Skill', color: '#F9B200', desc: 'Core pillar of E.P.I.C. program enabling students to take autonomous charge of academic progress.' },
            { name: 'S.A.G.E. Global Strategy', category: 'Strategic', color: '#0C61C8', desc: 'Strategic Advising for Global Education navigating top university admissions and scholarships.' },
            { name: 'PUM Progress Monitoring', category: 'Meta Skill', color: '#009384', desc: 'Performance Upliftment Monitor system tracking study velocity and cognitive growth.' },
            { name: 'Financial & Life Literacy', category: 'Life Skill', color: '#009384', desc: 'Understanding personal economics, investment fundamentals, and real-world resilience.' },
            { name: 'Leadership & Pitching', category: 'Soft Skill', color: '#0C61C8', desc: 'Executive communication, public speaking, negotiation, and corporate readiness.' }
        ];

        class DynamicNode {
            constructor(skill) {
                this.skill = skill;
                this.x = Math.random() * (canvas.width - 80) + 40;
                this.y = Math.random() * (canvas.height - 80) + 40;
                this.radius = Math.random() * 4 + 7;
                this.vx = (Math.random() - 0.5) * 1.2;
                this.vy = (Math.random() - 0.5) * 1.2;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius + 4, 0, Math.PI * 2);
                ctx.fillStyle = `${this.skill.color}33`;
                ctx.fill();

                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.skill.color;
                ctx.fill();
                ctx.strokeStyle = '#FFFFFF';
                ctx.lineWidth = 1.5;
                ctx.stroke();
            }

            update() {
                if (this.x < 20 || this.x > canvas.width - 20) this.vx *= -1;
                if (this.y < 20 || this.y > canvas.height - 20) this.vy *= -1;

                this.x += this.vx;
                this.y += this.vy;
                this.draw();
            }
        }

        const nodesList = [];
        for (let i = 0; i < 18; i++) {
            nodesList.push(new DynamicNode(skillNodesData[i % skillNodesData.length]));
        }

        function drawConnections() {
            for (let i = 0; i < nodesList.length; i++) {
                for (let j = i + 1; j < nodesList.length; j++) {
                    const dx = nodesList[i].x - nodesList[j].x;
                    const dy = nodesList[i].y - nodesList[j].y;
                    const dist = Math.sqrt(dx * dx + dy * dy);

                    if (dist < 120) {
                        ctx.strokeStyle = `rgba(0, 147, 132, ${1 - dist / 120})`;
                        ctx.lineWidth = 0.8;
                        ctx.beginPath();
                        ctx.moveTo(nodesList[i].x, nodesList[i].y);
                        ctx.lineTo(nodesList[j].x, nodesList[j].y);
                        ctx.stroke();
                    }
                }
            }
        }

        function animateCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawConnections();
            nodesList.forEach(node => node.update());
            requestAnimationFrame(animateCanvas);
        }

        window.onload = function() {
            animateCanvas();
        };

        // Canvas Click Listener
        canvas.addEventListener('click', (e) => {
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;

            nodesList.forEach(node => {
                const dist = Math.hypot(mouseX - node.x, mouseY - node.y);
                if (dist < node.radius + 8) {
                    document.getElementById('popoverBadge').textContent = node.skill.category;
                    document.getElementById('popoverTitle').textContent = node.skill.name;
                    document.getElementById('popoverDesc').textContent = node.skill.desc;
                    popover.classList.remove('hidden');
                }
            });
        });

        function closePopover() {
            popover.classList.add('hidden');
        }
    </script>

    <script>
        // PUM Diagnostic Calculator Logic
        const sliderHours = document.getElementById('inputStudyHours');
        const sliderMooc = document.getElementById('inputMooc');
        const sliderReflect = document.getElementById('inputReflection');

        function updatePUMScore() {
            const h = parseInt(sliderHours.value);
            const m = parseInt(sliderMooc.value);
            const r = parseInt(sliderReflect.value);

            document.getElementById('valStudyHours').textContent = `${h} hrs`;
            document.getElementById('valMooc').textContent = `${m} Courses`;
            document.getElementById('valReflection').textContent = r > 3 ? 'Daily' : 'Weekly';

            const score = Math.min(100, Math.round((h * 2.5) + (m * 4) + (r * 7)));
            document.getElementById('pumScore').textContent = `${score} / 100`;

            const badge = document.getElementById('pumBadge');
            if (score > 80) {
                badge.textContent = 'Optimal SDL Velocity';
                badge.className = 'text-xs font-bold px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-400';
            } else if (score > 50) {
                badge.textContent = 'Moderate Growth Potential';
                badge.className = 'text-xs font-bold px-3 py-1 rounded-full bg-amber-500/20 text-amber-400';
            } else {
                badge.textContent = 'Requires E.P.I.C. Upliftment';
                badge.className = 'text-xs font-bold px-3 py-1 rounded-full bg-red-500/20 text-red-400';
            }
        }

        [sliderHours, sliderMooc, sliderReflect].forEach(slider => {
            slider.addEventListener('input', updatePUMScore);
        });

        // Archive Tab Switcher & Filter Engine
        let currentTab = 'moocs';

        function switchArchiveTab(tab) {
            currentTab = tab;
            const moocBtn = document.getElementById('tabBtnMoocs');
            const compBtn = document.getElementById('tabBtnComp');

            if (tab === 'moocs') {
                moocBtn.className = 'px-5 py-2 rounded-xl text-xs font-bold bg-brand-blue text-white shadow-md transition-all';
                compBtn.className = 'px-5 py-2 rounded-xl text-xs font-bold text-slate-600 hover:text-brand-blue transition-all';
            } else {
                compBtn.className = 'px-5 py-2 rounded-xl text-xs font-bold bg-brand-blue text-white shadow-md transition-all';
                moocBtn.className = 'px-5 py-2 rounded-xl text-xs font-bold text-slate-600 hover:text-brand-blue transition-all';
            }
            filterArchiveItems();
        }

        function filterArchiveItems() {
            const searchVal = document.getElementById('archiveSearchInput').value.toLowerCase();
            const catVal = document.getElementById('archiveCategorySelect').value;

            const moocItems = document.querySelectorAll('.mooc-item');
            const compItems = document.querySelectorAll('.comp-item');

            const activeList = currentTab === 'moocs' ? moocItems : compItems;
            const inactiveList = currentTab === 'moocs' ? compItems : moocItems;

            inactiveList.forEach(item => item.classList.add('hidden'));

            activeList.forEach(item => {
                const title = item.getAttribute('data-title').toLowerCase();
                const category = item.getAttribute('data-category');

                const matchesSearch = title.includes(searchVal);
                const matchesCat = (catVal === 'ALL' || category === catVal);

                if (matchesSearch && matchesCat) {
                    item.classList.remove('hidden');
                } else {
                    item.classList.add('hidden');
                }
            });
        }

        // Modal & Form Utilities
        function openModal(id) {
            document.getElementById(id).classList.remove('hidden');
        }
        function closeModal(id) {
            document.getElementById(id).classList.add('hidden');
        }
        function handleFormSubmit(e, modalId, msg) {
            e.preventDefault();
            showToast(msg, 'success');
            closeModal(modalId);
        }
        function handleSubscribe(e) {
            e.preventDefault();
            showToast('Thank you for subscribing to The Mindkosha Digest!', 'success');
            document.getElementById('subEmail').value = '';
        }

        // Mobile drawer toggle
        document.getElementById('mobileMenuBtn').addEventListener('click', () => {
            document.getElementById('mobileMenu').classList.toggle('hidden');
        });
    </script>

    <?php if ( function_exists( 'wp_footer' ) ) wp_footer(); ?>
</body>
</html>