<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shri Ganesa Sarma - Official Devotional Platform</title>
    <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=Cinzel:wght@500;700;900&family=Lora:ital,wght=0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-saffron: #FF6B35;
            --mid-saffron: #FF9933;
            --gold-accent: #D4AF37;
            --light-gold: #FFF8DC;
            --bg-cream: #FFFDF9;
            --dark-brown: #2C1810;
            --deep-terracotta: #B84300;
            --card-shadow: 0 6px 20px rgba(44, 24, 16, 0.08);
            --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        body {
            font-family: 'Lora', serif;
            background-color: var(--bg-cream);
            color: var(--dark-brown);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* DYNAMIC TEXT SPECIAL MESSAGE BANNER */
        .announcement-banner {
            background: linear-gradient(90deg, #B84300 0%, #FF6B35 50%, #B84300 100%);
            color: #FFFFFF;
            font-family: 'Cinzel', serif;
            font-size: 0.95rem;
            font-weight: 700;
            padding: 12px 20px;
            text-align: center;
            border-bottom: 2px solid var(--gold-accent);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            letter-spacing: 0.5px;
            line-height: 1.5;
        }
        
        .announcement-line {
            display: block;
            margin-bottom: 4px;
        }
        .announcement-line:last-child {
            margin-bottom: 0;
        }

        /* HEADER & NAVIGATION BRANDING */
        .main-header {
            background: linear-gradient(135deg, #FF6B35 0%, #FF9933 50%, #FFA726 100%);
            border-bottom: 4px solid var(--deep-terracotta);
            box-shadow: 0 4px 15px rgba(0,0,0,0.12);
            padding: 20px;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }

        .brand-box {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .brand-box img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 2px solid var(--light-gold);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            object-fit: cover;
        }

        .brand-text h1 {
            font-family: 'Cinzel', serif;
            margin: 0;
            font-size: clamp(1.4rem, 4vw, 2.4rem);
            color: #FFFFFF;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            font-weight: 900;
        }

        .brand-text p {
            margin: 3px 0 0 0;
            color: var(--light-gold);
            font-size: clamp(0.8rem, 2vw, 1.1rem);
            font-style: italic;
            letter-spacing: 0.5px;
        }

        /* NAVIGATION MENU STRUCTURE */
        .main-nav {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .nav-link {
            font-family: 'Cinzel', serif;
            color: #FFFFFF;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.88rem;
            padding: 8px 14px;
            border-radius: 4px;
            border: 1px solid transparent;
            transition: var(--transition-smooth);
            white-space: nowrap;
            cursor: pointer;
        }

        .nav-link:hover, .nav-link.active {
            background-color: var(--dark-brown);
            color: var(--light-gold);
            border-color: var(--gold-accent);
        }

        /* MAIN APP ENVIRONMENT */
        .main-workspace {
            max-width: 1200px;
            margin: 25px auto;
            padding: 0 15px;
            display: flex;
            flex-direction: column;
            gap: 25px;
            box-sizing: border-box;
            width: 100%;
        }

        /* PROFILE SUMMARY SECTION */
        .profile-section {
            background: #FFFFFF;
            border-radius: 12px;
            border: 1px solid #FFE5B4;
            box-shadow: var(--card-shadow);
            display: grid;
            grid-template-columns: 300px 1fr;
            overflow: hidden;
        }

        @media (max-width: 850px) {
            .profile-section {
                grid-template-columns: 1fr;
            }
        }

        .profile-img-box {
            background-color: #FDF6EC;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            border-right: 1px solid #FFE5B4;
        }

        @media (max-width: 850px) {
            .profile-img-box {
                border-right: none;
                border-bottom: 1px solid #FFE5B4;
            }
        }

        .profile-img-box img {
            width: 100%;
            max-width: 250px;
            height: auto;
            border-radius: 8px;
            border: 4px solid var(--gold-accent);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }

        .profile-content-box {
            padding: 25px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .profile-content-box h2 {
            font-family: 'Cinzel', serif;
            color: var(--deep-terracotta);
            margin-top: 0;
            margin-bottom: 8px;
            font-size: 1.6rem;
            border-bottom: 2px dashed #FFE5B4;
            padding-bottom: 8px;
        }

        .profile-tagline {
            font-weight: 600;
            color: #8B5A2B;
            margin-bottom: 15px;
            font-size: 1rem;
        }

        .profile-content-box p {
            margin-top: 0;
            line-height: 1.65;
            font-size: 1rem;
            color: #4A3525;
        }

        .btn-about-trigger {
            align-self: flex-start;
            font-family: 'Cinzel', serif;
            background-color: var(--dark-brown);
            color: var(--light-gold);
            border: 2px solid var(--gold-accent);
            padding: 10px 22px;
            font-size: 0.85rem;
            font-weight: 700;
            border-radius: 6px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: var(--transition-smooth);
            margin-top: 10px;
        }

        .btn-about-trigger:hover {
            background-color: var(--primary-saffron);
            color: #FFFFFF;
            transform: translateY(-2px);
        }

        /* VIDEO STREAM ARCHIVE INTEGRATION WITH IMAGES */
        .video-player-center {
            background: #FFFFFF;
            border-radius: 12px;
            border: 1px solid #FFE5B4;
            box-shadow: var(--card-shadow);
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .section-header-box {
            border-bottom: 3px solid var(--primary-saffron);
            padding-bottom: 10px;
        }

        .section-header-box h2 {
            font-family: 'Cinzel', serif;
            color: var(--dark-brown);
            margin: 0;
            font-size: 1.45rem;
        }

        .media-workspace-grid {
            display: grid;
            grid-template-columns: 1fr 360px;
            gap: 20px;
        }

        @media (max-width: 950px) {
            .media-workspace-grid {
                grid-template-columns: 1fr;
            }
        }

        .player-and-portrait-stack {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .player-viewport-frame {
            background-color: #000000;
            border-radius: 8px;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            border: 3px solid var(--dark-brown);
        }

        .player-viewport-frame iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        /* HIGH-CONTRAST DYNAMIC DESCRIPTION BOX BELOW THE VIDEO PLAYER */
        .video-description-container {
            background-color: var(--dark-brown);
            color: #FFFFFF;
            border-left: 5px solid var(--primary-saffron);
            border-radius: 6px;
            padding: 15px 20px;
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
            line-height: 1.6;
        }

        .video-description-title {
            font-family: 'Cinzel', serif;
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--light-gold);
            margin: 0 0 8px 0;
        }

        .video-description-meta {
            font-size: 0.9rem;
            color: #E6D7C3;
            margin: 0;
            border-top: 1px dashed rgba(255, 248, 220, 0.2);
            padding-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 12px;
        }

        .video-description-meta span strong {
            color: var(--mid-saffron);
        }

        /* QUICK ACCESS LIVE SHORTCUT CONTAINER PANELS */
        .quick-access-shortcuts-box {
            background-color: #1F100A;
            border: 1px solid var(--gold-accent);
            border-radius: 6px;
            padding: 12px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        @media (max-width: 650px) {
            .quick-access-shortcuts-box {
                grid-template-columns: 1fr;
            }
        }

        .quick-access-btn {
            font-family: 'Cinzel', serif;
            background: linear-gradient(135deg, #FF6B35 0%, #B84300 100%);
            color: #FFFFFF;
            border: 1px solid var(--gold-accent);
            padding: 10px 14px;
            font-size: 0.8rem;
            font-weight: 700;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            line-height: 1.4;
            transition: var(--transition-smooth);
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }

        .quick-access-btn:hover {
            background: linear-gradient(135deg, var(--dark-brown) 0%, #1F100A 100%);
            color: var(--light-gold);
            transform: translateY(-1px);
        }

        /* PORTRAIT CONTAINER IMAGES */
        .portrait-frame-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            }

        @media (max-width: 550px) {
            .portrait-frame-row {
                grid-template-columns: 1fr;
            }
        }

        .portrait-card {
            background-color: #FFFDF9;
            border: 1px solid #FFE5B4;
            border-radius: 8px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

        .portrait-card img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 6px;
            border: 2px solid var(--gold-accent);
            background-color: #FAFAFA;
        }
        
        .portrait-caption {
            font-family: 'Cinzel', serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--dark-brown);
            margin-top: 8px;
        }

        /* SEARCH ENGINE SIDE PANELS */
        .discovery-pane {
            display: flex;
            flex-direction: column;
            min-height: 400px;
        }

        @media (min-width: 951px) {
            .discovery-pane {
                height: 100%;
                max-height: 800px;
            }
        }

        .search-control-wrapper {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 12px;
        }

        /* FIXED HARDCODED COUNT STATUS BAR DISPLAY */
        .database-counter-badge {
            font-family: 'Cinzel', serif;
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--deep-terracotta);
            background-color: var(--light-gold);
            border: 1px solid var(--gold-accent);
            padding: 8px 12px;
            border-radius: 5px;
            text-align: center;
            letter-spacing: 0.5px;
        }

        .search-input-field {
            font-family: 'Lora', serif;
            padding: 12px;
            font-size: 0.95rem;
            border: 2px solid #E0E0E0;
            border-radius: 6px;
            box-sizing: border-box;
            width: 100%;
            background-color: #FAFAFA;
            transition: var(--transition-smooth);
        }

        .search-input-field:focus {
            outline: none;
            border-color: var(--primary-saffron);
            background-color: #FFFFFF;
            box-shadow: 0 0 8px rgba(255, 107, 53, 0.2);
        }

        .filter-dropdown-selector {
            font-family: 'Cinzel', serif;
            padding: 10px;
            font-size: 0.85rem;
            font-weight: 700;
            border: 2px solid #E0E0E0;
            border-radius: 6px;
            background-color: #FFFFFF;
            color: var(--dark-brown);
            cursor: pointer;
            width: 100%;
        }

        .registry-scroll-box {
            border: 1px solid #FFE5B4;
            background-color: #FFFDF9;
            border-radius: 6px;
            overflow-y: auto;
            flex-grow: 1;
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-height: 400px;
        }
        
        @media (min-width: 951px) {
            .registry-scroll-box {
                max-height: none;
            }
        }

        .video-selection-row {
            background-color: #FFFFFF;
            border: 1px solid #FFE5B4;
            border-radius: 5px;
            padding: 10px;
            font-size: 0.88rem;
            text-align: left;
            cursor: pointer;
            transition: var(--transition-smooth);
            line-height: 1.4;
            color: var(--dark-brown);
        }

        .video-selection-row:hover {
            background-color: var(--light-gold);
            border-color: var(--gold-accent);
        }

        .video-selection-row.active {
            background: linear-gradient(135deg, #FF6B35 0%, #FF9933 100%);
            color: #FFFFFF;
            border-color: var(--deep-terracotta);
            font-weight: 600;
        }

        /* HIGH-CONTRAST HQ CONTACT INFORMATION BLOCK */
        .hq-contact-block {
            background-color: #FFF6EC;
            border: 2px solid var(--gold-accent);
            border-radius: 12px;
            padding: 30px;
            box-shadow: var(--card-shadow);
            margin-top: 15px;
            text-align: center;
        }

        .hq-contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            max-width: 900px;
            margin: 0 auto;
            align-items: center;
        }

        @media (max-width: 700px) {
            .hq-contact-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
        }

        .hq-contact-title {
            font-family: 'Cinzel', serif;
            color: var(--deep-terracotta);
            font-size: 1.3rem;
            font-weight: 700;
            margin: 0 0 10px 0;
            letter-spacing: 0.5px;
            border-bottom: 2px solid var(--primary-saffron);
            padding-bottom: 8px;
            display: inline-block;
        }

        .hq-address-pane {
            text-align: left;
            font-size: 1.05rem;
            line-height: 1.6;
            color: var(--dark-brown);
            border-right: 1px dashed #FFE5B4;
            padding-right: 20px;
        }

        @media (max-width: 700px) {
            .hq-address-pane {
                border-right: none;
                padding-right: 0;
                text-align: center;
                border-bottom: 1px dashed #FFE5B4;
                padding-bottom: 20px;
            }
        }

        .hq-comms-pane {
            text-align: left;
            font-size: 1.05rem;
            line-height: 1.8;
            padding-left: 20px;
        }

        @media (max-width: 700px) {
            .hq-comms-pane {
                padding-left: 0;
                text-align: center;
            }
        }

        .hq-comms-pane a {
            color: var(--deep-terracotta);
            text-decoration: none;
            font-weight: 600;
        }

        .hq-comms-pane a:hover {
            text-decoration: underline;
            color: var(--primary-saffron);
        }

        /* MODAL ARCHITECTURE LAYOUTS */
        .about-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(44, 24, 16, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            padding: 15px;
            box-sizing: border-box;
        }

        .about-modal-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .about-modal-box {
            background-color: var(--bg-cream);
            max-width: 720px;
            width: 100%;
            max-height: 85vh;
            border-radius: 12px;
            border: 4px solid var(--gold-accent);
            box-shadow: 0 12px 40px rgba(0,0,0,0.4);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* LARGER SCALE MODAL HOOK FOR MEDIA ARCHIVE DISPLAYS */
        .about-modal-box.large-variant {
            max-width: 1000px;
        }

        .modal-header-bar {
            background: linear-gradient(135deg, var(--dark-brown) 0%, #4A2E1B 100%);
            padding: 15px 20px;
            border-bottom: 2px solid var(--gold-accent);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header-bar h3 {
            font-family: 'Cinzel', serif;
            color: var(--light-gold);
            margin: 0;
            font-size: 1.25rem;
        }

        .modal-close-btn {
            background: none;
            border: none;
            color: var(--light-gold);
            font-size: 1.8rem;
            cursor: pointer;
            line-height: 1;
        }

        .modal-scrollable-body {
            padding: 25px;
            overflow-y: auto;
            font-size: 1rem;
            line-height: 1.7;
            color: #333;
        }

        .modal-scrollable-body h4 {
            font-family: 'Cinzel', serif;
            color: var(--deep-terracotta);
            margin-top: 18px;
            margin-bottom: 8px;
            font-size: 1.1rem;
            border-bottom: 1px solid #FFE5B4;
            padding-bottom: 4px;
        }

        .modal-scrollable-body ul {
            margin: 10px 0;
            padding-left: 20px;
        }

        .modal-scrollable-body li {
            margin-bottom: 6px;
        }

        /* GRID CONFLICT PATCH FOR MODAL CHANNEL WRAPPERS */
        .modal-channels-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 12px;
            background-color: #FFFDF9;
            border: 1px solid #FFE5B4;
            padding: 15px;
            border-radius: 6px;
        }

        @media (max-width: 500px) {
            .modal-channels-grid {
                grid-template-columns: 1fr;
            }
        }

        .modal-channel-item {
            font-size: 0.9rem;
            color: var(--dark-brown);
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
        }

        .modal-channel-item::before {
            content: "•";
            color: var(--primary-saffron);
            font-size: 1.2rem;
        }

        /* DYNAMIC IMAGE GALLERY STRUCTURES (USED FOR ACCOLADES, PRESS, BOOKS, AND GALLERY) */
        .accolades-gallery-stack {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .accolades-group-row {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 15px;
            padding: 10px 0;
        }

        .accolades-group-row.landscape-layout {
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
        }

        .accolade-image-card {
            background-color: #FFFFFF;
            border: 1px solid #FFE5B4;
            border-radius: 6px;
            padding: 10px;
            box-shadow: 0 4px 10px rgba(44,24,16,0.04);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: var(--transition-smooth);
            cursor: pointer;
        }

        .accolade-image-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(212,175,55,0.15);
            border-color: var(--gold-accent);
        }

        .accolade-image-card img {
            width: 100%;
            height: auto;
            max-height: 320px;
            object-fit: contain;
            border-radius: 4px;
            border: 1px solid #F0F0F0;
        }

        /* FULL RESOLUTION HIGH CONTRAST LIGHTBOX MODAL */
        .lightbox-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 8, 5, 0.95);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 20000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
            padding: 20px;
            box-sizing: border-box;
        }

        .lightbox-modal-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .lightbox-modal-box {
            background-color: var(--bg-cream);
            border: 4px solid var(--gold-accent);
            border-radius: 12px;
            max-width: 95vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 15px 50px rgba(0,0,0,0.6);
            overflow: hidden;
            position: relative;
        }

        .lightbox-top-actions {
            position: absolute;
            top: 12px;
            right: 15px;
            z-index: 20005;
        }

        .lightbox-close-x {
            background: rgba(44, 24, 16, 0.85);
            color: var(--light-gold);
            border: 2px solid var(--gold-accent);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 1.6rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transition: var(--transition-smooth);
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        .lightbox-close-x:hover {
            background-color: var(--primary-saffron);
            color: #FFFFFF;
        }

        .lightbox-image-viewport {
            padding: 40px 40px 15px 40px;
            overflow: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            background-color: #111111;
        }

        .lightbox-image-viewport img {
            max-width: 100%;
            max-height: 65vh;
            object-fit: contain;
            border: 2px solid #333;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            background-color: #FFFFFF;
        }

        .lightbox-bottom-actions {
            background-color: var(--dark-brown);
            padding: 12px 20px;
            display: flex;
            justify-content: center;
            border-top: 2px solid var(--gold-accent);
        }

        .lightbox-btn-ok {
            font-family: 'Cinzel', serif;
            background-color: var(--primary-saffron);
            color: #FFFFFF;
            border: 2px solid var(--gold-accent);
            padding: 8px 30px;
            font-size: 0.9rem;
            font-weight: 700;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition-smooth);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .lightbox-btn-ok:hover {
            background-color: var(--light-gold);
            color: var(--dark-brown);
        }

        /* SYSTEM FOOTER PATTERN */
        .main-footer {
            background-color: var(--dark-brown);
            color: var(--light-gold);
            padding: 20px 15px;
            text-align: center;
            font-size: 0.85rem;
            border-top: 3px solid var(--gold-accent);
            margin-top: auto;
            font-family: 'Cinzel', serif;
            letter-spacing: 0.5px;
        }

        .main-footer p {
            margin: 4px 0;
        }
    </style>
</head>
<body>

    <div id="dynamicSpecialBanner" class="announcement-banner">
        Maha Periyava Temple Maha Kumbhabhishekam Successfully Solemnized at Mylapore, Chennai on 10.02.2025.
    </div>

    <header class="main-header">
        <div class="header-container">
            <div class="brand-box">
                <img src="Essentials/Images/mp1.jpg" onerror="this.src='Essentials/Images/mp2.jpg'" alt="Mylai Maha Periyava Anusham Trust Logo">
                <div class="brand-text">
                    <h1>Shri Ganesa Sarma</h1>
                    <p>Periyava Kuralaga — Dedicating Life to Divine Pravachanam and Heritage</p>
                </div>
            </div>
            <nav class="main-nav">
                <a href="#" class="nav-link active">Home</a>
                <a onclick="toggleAccoladesModal(true)" class="nav-link">Accolades</a>
                <a onclick="togglePressModal(true)" class="nav-link">Press</a>
                <a onclick="toggleBooksModal(true)" class="nav-link">Books</a>
                <a onclick="toggleGalleryModal(true)" class="nav-link">Gallery</a>
                <a onclick="toggleAcknowledgementModal(true)" class="nav-link">Acknowledgement</a>
                <a href="mylai.html" class="nav-link">Mylai Anusham Trust</a>
                <a href="TimeLine.html" class="nav-link">Temple Timeline</a>
            </nav>
        </div>
    </header>

    <main class="main-workspace">

        <section class="profile-section">
            <div class="profile-img-box">
                <img src="Essentials/Images/mp2.jpg" alt="Sri Maha Periyava Graphic">
            </div>
            <div class="profile-content-box">
                <h2>Bhakthi Prachara Mani Shri Ganesa Sarma</h2>
                <div class="profile-tagline">Native of Kumbakonam & Dedicated Devotee of Sri Kanchi Maha Periyava</div>
                <p>
                    Shri Ganesa Sarma has served the spiritual community for decades by presenting unique Pravachanams on the life and miraculous history of Sri Kanchi Maha Periyava in a grand Sapthaham Style ("7 days in 7 Cantos"). His enlightening talks have drawn thousands globally, bridging cultural heritage across India, the USA, Singapore, Australia, and the Middle East.
                </p>
                <p>
                    Following years of devoted leadership alongside dedicated spiritual followers, the landmark Himalayan task of spearheading the creation of the exquisite new temple for Sri Maha Periyava at Mylapore, Chennai has reached full fulfillment, marked by its holy Kumbhabhishekam on February 10, 2025.
                </p>
                <button class="btn-about-trigger" onclick="toggleAboutModal(true)">Read Complete Profile</button>
            </div>
        </section>

        <section class="video-player-center">
            <div class="section-header-box">
                <h2>Devotional Media Archive & Pravachanam Registry</h2>
            </div>

            <div class="media-workspace-grid">

                <div class="player-and-portrait-stack">
                    <div class="player-viewport-frame">
                        <iframe id="mainVideoPlayer" src="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    </div>

                    <div id="videoDescriptionBox" class="video-description-container">
                        <h3 id="descVideoTitle" class="video-description-title">Loading video details...</h3>
                        <p id="descVideoMeta" class="video-description-meta">
                            <span><strong>Date:</strong> <span id="metaDate">-</span></span>
                            <span><strong>Channel/Source:</strong> <span id="metaSource">-</span></span>
                        </p>
                        <div id="DivVidTitle2" style="font-size:0.8rem; font-style:italic; color:#FFE5B4; margin-top:-4px; margin-bottom:12px; display:none;"></div>

                        <div id="DivVarious" class="quick-access-shortcuts-box">
                        </div>
                    </div>

                    <div class="portrait-frame-row">
                        <div class="portrait-card">
                            <img src="Essentials/Images/mp3.jpg" onerror="this.src='Essentials/Images/mp2.jpg'" alt="Maha Periyava Graphic Icon">
                            <div class="portrait-caption">Sri Maha Periyava</div>
                        </div>
                        <div class="portrait-card">
                            <img src="Essentials/Images/mp4.jpg" onerror="this.src='Essentials/Images/gs1.jpg'" alt="Shri Ganesa Sarma Image Icon">
                            <div class="portrait-caption">Shri Ganesa Sarma</div>
                        </div>
                    </div>
                </div>

                <div class="discovery-pane">
                    <div class="search-control-wrapper">
                        <div id="videoCountDisplay" class="database-counter-badge">
                            Total Videos: 6000 Plus
                        </div>

                        <input type="text" id="videoSearchInput" class="search-input-field" placeholder="Search titles... (use commas for multiple words)" onkeyup="filterVideoRegistry()">

                        <select id="channelFilterDropdown" class="filter-dropdown-selector" onchange="filterVideoRegistry()">
                            <option value="">All Streaming Channels / Sources</option>
                        </select>
                    </div>

                    <div id="registryScrollBox" class="registry-scroll-box">
                    </div>
                </div>

            </div>
        </section>

        <section class="hq-contact-block">
            <div class="hq-contact-grid">
                <div class="hq-address-pane">
                    <h3 class="hq-contact-title">Mailing Address</h3>
                    <div style="font-weight: 700; color: var(--dark-brown);">Shri Ganesa Sarma Office</div>
                    <div>New No. 4, Old No. 23,</div>
                    <div>Pichupillai Street,</div>
                    <div>Mylapore, Chennai - 600004</div>
                </div>
                <div class="hq-comms-pane">
                    <h3 class="hq-contact-title">Communication Desk</h3>
                    <div><strong>Phone (P):</strong> <span style="color: var(--dark-brown); font-weight: 600;">+91 63808 98231</span></div>
                    <div><strong>Support Team:</strong></div>
                    <div><a href="mailto:ganesasarma@googlegroups.com">ganesasarma@googlegroups.com</a></div>
                </div>
            </div>
        </section>

    </main>

    <div id="aboutModal" class="about-modal-overlay" onclick="toggleAboutModal(false)">
        <div class="about-modal-box" onclick="event.stopPropagation()">
            <div class="modal-header-bar">
                <h3>Detailed Profile Context</h3>
                <button class="modal-close-btn" onclick="toggleAboutModal(false)">&times;</button>
            </div>
            <div class="modal-scrollable-body">
                <h4>Spiritual Discourses & Global Missions</h4>
                <p>
                    A native of Kumbakonam and a Post Graduate in Business Administration, Shri Ganesa Sarma served for more than 20 years at TAFE Limited before dedicating himself wholly to divine service. He has presented his signature Maha Periyava Sapthaham nearly 200 times across major international hubs including India, USA, Singapore, Australia, New Zealand, Bahrain, Muscat, Dubai, and Sharjah.
                </p>
                <p>
                    He also shares profound lectures on <i>Deivathin Kural</i>, Periyapuranam, Baktha Charitram, Thiru Vachagam, Bhagavat Gita, and various Devatha Murthy Mahimais.
                </p>

                <h4>Katha-Kutcheri Collaborations</h4>
                <p>
                    Shri Sarma regularly coordinates highly acclaimed Katha-Kutcheri programs alongside eminent Carnatic music stalwarts, including Neyveli Santhanagopalan, Vijay Shiva, Dr. Ganesh, J.B. Keerthana, Sivasri Skandaprasad, Swetharanyam Sisters, and Nandini Venkatraman.
                </p>

                <h4>Media Broadcasts & Publications</h4>
                <ul>
                    <li><strong>Broadcast Channels:</strong> Regularly featured across prominent spaces including AIR FM, Podhigai, Sri Sankara TV, Sai, Vijay, and Captain TV.</li>
                    <li><strong>Digital Footprint:</strong> Manages vibrant community hubs across his personal YouTube channels: <i>Periyava Kuralaga Ganesa Sarma</i> and <i>Gems of Ganesa Sarma</i>.</li>
                    <li><strong>Internet Radio Broadcast:</strong> Provides continuous inspiration via "Periyava Vanoli", broadcasting Periyava programming 24 hours a day, 7 days a week to over 10,000 daily listeners worldwide.</li>
                    <li><strong>Authored Books:</strong> Has written extensive biographical compositions on Sri Mahaperiyava published via trusted publishers like Vikatan, Giri Trading, and Thirisakthi.</li>
                </ul>

                <h4>Eminent Titles Conferred</h4>
                <p>
                    In recognition of his unwavering dedication to religious propagation and heritage arts, he was conferred the title <strong>"Bhakthi Prachara Mani"</strong> directly by the Sri Kanchi Shankaracharya. He has additionally received titles including <i>"Pravachana Shiromani"</i>, <i>"Kathammrutha Vakgeesar"</i>, and <i>"Vedavyasa Seva Rathnamani"</i>.
                </p>
            </div>
        </div>
    </div>

    <div id="acknowledgementModal" class="about-modal-overlay" onclick="toggleAcknowledgementModal(false)">
        <div class="about-modal-box" onclick="event.stopPropagation()">
            <div class="modal-header-bar">
                <h3>Platform Acknowledgement</h3>
                <button class="modal-close-btn" onclick="toggleAcknowledgementModal(false)">&times;</button>
            </div>
            <div class="modal-scrollable-body">
                <p style="font-weight: 600; font-size: 1.05rem; line-height: 1.6; color: var(--deep-terracotta);">
                    We heartfully thank all the Periava Devotees and Institutions who have given their consent to share their Video links in this website.
                </p>

                <div style="background-color: #FFF6EC; border-left: 4px solid var(--gold-accent); padding: 12px 15px; font-size: 0.95rem; line-height: 1.5; color: #555; margin: 15px 0;">
                    <strong>Disclaimer:</strong> <a href="http://www.ganesasarma.com" target="_blank" style="color:var(--deep-terracotta); text-decoration:none; font-weight:600;">www.ganesasarma.com</a> does not host any media files in its server. Site just points to the links of Media shared in different platforms.
                </div>

                <h4 style="margin-top: 20px; color: var(--dark-brown);">Videos Points Links to the Following Youtube Channels</h4>

                <div id="modalChannelsGrid" class="modal-channels-grid">
                </div>
            </div>
        </div>
    </div>

    <div id="accoladesModal" class="about-modal-overlay" onclick="toggleAccoladesModal(false)">
        <div class="about-modal-box large-variant" onclick="event.stopPropagation()">
            <div class="modal-header-bar">
                <h3>Accolades & Honors Gallery</h3>
                <button class="modal-close-btn" onclick="toggleAccoladesModal(false)">&times;</button>
            </div>
            <div class="modal-scrollable-body">
                <p style="margin-top: 0; color: #555; font-style: italic; border-bottom: 1px solid #FFE5B4; padding-bottom: 10px;">
                    A collection of professional awards, presentations, sacred certificates, and honors conferred upon Bhakthi Prachara Mani Shri Ganesa Sarma during his decades of devotional service. (Click any image to view full resolution text).
                </p>

                <div class="accolades-gallery-stack">
                    <div id="landscapeGalleryRow" class="accolades-group-row landscape-layout"></div>
                    <div id="portraitGalleryRow" class="accolades-group-row"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="pressModal" class="about-modal-overlay" onclick="togglePressModal(false)">
        <div class="about-modal-box large-variant" onclick="event.stopPropagation()">
            <div class="modal-header-bar">
                <h3>Press Media Coverages & Write-ups</h3>
                <button class="modal-close-btn" onclick="togglePressModal(false)">&times;</button>
            </div>
            <div class="modal-scrollable-body">
                <p style="margin-top: 0; color: #555; font-style: italic; border-bottom: 1px solid #FFE5B4; padding-bottom: 10px;">
                    Featured news columns, review prints, editorial write-ups, and structural press logs reviewing the spiritual lectures and public services of Shri Ganesa Sarma. (Click any image to view full resolution text).
                </p>

                <div class="accolades-gallery-stack">
                    <div id="pressLandscapeRow" class="accolades-group-row landscape-layout"></div>
                    <div id="pressPortraitRow" class="accolades-group-row"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="booksModal" class="about-modal-overlay" onclick="toggleBooksModal(false)">
        <div class="about-modal-box large-variant" onclick="event.stopPropagation()">
            <div class="modal-header-bar">
                <h3>Authored Books & Publications</h3>
                <button class="modal-close-btn" onclick="toggleBooksModal(false)">&times;</button>
            </div>
            <div class="modal-scrollable-body">
                <p style="margin-top: 0; color: #555; font-style: italic; border-bottom: 1px solid #FFE5B4; padding-bottom: 10px;">
                    Biographical literature compositions, sacred records, and published text covers compiled and written by Shri Ganesa Sarma. (Click any image to view full resolution text).
                </p>

                <div class="accolades-gallery-stack">
                    <div id="booksLandscapeRow" class="accolades-group-row landscape-layout"></div>
                    <div id="booksPortraitRow" class="accolades-group-row"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="galleryModal" class="about-modal-overlay" onclick="toggleGalleryModal(false)">
        <div class="about-modal-box large-variant" onclick="event.stopPropagation()">
            <div class="modal-header-bar">
                <h3>Spiritual Photo Gallery</h3>
                <button class="modal-close-btn" onclick="toggleGalleryModal(false)">&times;</button>
            </div>
            <div class="modal-scrollable-body">
                <p style="margin-top: 0; color: #555; font-style: italic; border-bottom: 1px solid #FFE5B4; padding-bottom: 10px;">
                    Historical moments, divine events, and archival photos of Shri Ganesa Sarma during public assemblies and spiritual journeys. (Click any image to view full resolution text).
                </p>

                <div class="accolades-gallery-stack">
                    <div id="galleryLandscapeRow" class="accolades-group-row landscape-layout"></div>
                    <div id="galleryPortraitRow" class="accolades-group-row"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="imageLightboxModal" class="lightbox-modal-overlay" onclick="launchFullscreenImageLightbox(false)">
        <div class="lightbox-modal-box" onclick="event.stopPropagation()">
            <div class="lightbox-top-actions">
                <button class="lightbox-close-x" onclick="launchFullscreenImageLightbox(false)">&times;</button>
            </div>
            <div class="lightbox-image-viewport">
                <img id="lightboxTargetViewImage" src="" alt="Full resolution document preview panel">
            </div>
            <div class="lightbox-bottom-actions">
                <button class="lightbox-btn-ok" onclick="launchFullscreenImageLightbox(false)">OK / Close Window</button>
            </div>
        </div>
    </div>

    <footer class="main-footer">
        <p>© Shri Ganesa Sarma Official Devotional Archive. All Rights Reserved.</p>
        <p style="font-size: 0.78rem; color: #AAA; margin-top: 5px;">Mylai Maha Periyava Anusham Trust Archives & Spiritual Heritage Record Systems Preserved.</p>
    </footer>

    <script>
        let SANGEETHADHWANI_VIDEO_POOL = [];
        const SANGEETHADHWANI_DEFAULT_VIDEO_ID = "107shIDK18w";

        function toggleAboutModal(show) {
            const modal = document.getElementById('aboutModal');
            modal.classList.toggle('visible', show);
        }

        function toggleAcknowledgementModal(show) {
            const modal = document.getElementById('acknowledgementModal');
            modal.classList.toggle('visible', show);
        }

        function toggleAccoladesModal(show) {
            const modal = document.getElementById('accoladesModal');
            modal.classList.toggle('visible', show);
            if (show) {
                initializeDynamicAccoladesPipeline();
            }
        }

        function togglePressModal(show) {
            const modal = document.getElementById('pressModal');
            modal.classList.toggle('visible', show);
            if (show) {
                initializeDynamicPressPipeline();
            }
        }

        function toggleBooksModal(show) {
            const modal = document.getElementById('booksModal');
            modal.classList.toggle('visible', show);
            if (show) {
                initializeDynamicBooksPipeline();
            }
        }

        function toggleGalleryModal(show) {
            const modal = document.getElementById('galleryModal');
            modal.classList.toggle('visible', show);
            if (show) {
                initializeDynamicGalleryPipeline();
            }
        }

        // TRIGGER FOR THE FULL RESOLUTION DISMISSABLE POPUP VIEWPORT
        function launchFullscreenImageLightbox(show, imgSrc = '') {
            const lightbox = document.getElementById('imageLightboxModal');
            const lightboxImg = document.getElementById('lightboxTargetViewImage');

            if (show) {
                lightboxImg.src = imgSrc;
                lightbox.classList.add('visible');
            } else {
                lightbox.classList.remove('visible');
                setTimeout(() => { lightboxImg.src = ''; }, 250);
            }
        }

        // ACCELERATED REAL-TIME SHORTCUT RUNTIME CONTROLLERS
        // ACCELERATED REAL-TIME SHORTCUT RUNTIME CONTROLLERS
        function loadLivePlaylistShortcuts() {
            const parentContainer = document.getElementById('DivVarious');
            const subTitleDisplay = document.getElementById('DivVidTitle2');

            parentContainer.innerHTML = '';

            const btnToday = document.createElement("button");
            btnToday.className = "quick-access-btn";
            btnToday.innerHTML = "Today's Uploads<br/>Loading...";
            btnToday.onclick = function () {
                const targetUrl = "https://www.youtube.com/embed/?listType=playlist&list=PLqL9BgTHGJW510IK-40Ow986urrwTZJli&index=2";
                document.getElementById('mainVideoPlayer').src = targetUrl;
                document.getElementById('descVideoTitle').textContent = "Today's Uploads";
                subTitleDisplay.innerText = "[Select the required episode from the playlist icon on the video window]";
                subTitleDisplay.style.display = "block";
                clearSelectionHighlights();

                // Smooth scroll up to video player panel
                const videoTargetContainer = document.querySelector('.video-player-center');
                if (videoTargetContainer) {
                    videoTargetContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            };
            parentContainer.appendChild(btnToday);

            const btnUpcoming = document.createElement("button");
            btnUpcoming.className = "quick-access-btn";
            btnUpcoming.innerHTML = "Upcoming Program<br/>Loading...";
            btnUpcoming.onclick = function () {
                const targetUrl = "https://www.youtube.com/embed/?list=PLqL9BgTHGJW510IK-40Ow986urrwTZJli";
                document.getElementById('mainVideoPlayer').src = targetUrl;
                document.getElementById('descVideoTitle').textContent = "Upcoming Program";
                subTitleDisplay.style.display = "none";
                clearSelectionHighlights();

                // Smooth scroll up to video player panel
                const videoTargetContainer = document.querySelector('.video-player-center');
                if (videoTargetContainer) {
                    videoTargetContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            };
            parentContainer.appendChild(btnUpcoming);

            const btnUpanyasam = document.createElement("button");
            btnUpanyasam.className = "quick-access-btn";
            btnUpanyasam.innerHTML = "Upcoming Upanyasam<br/>Loading...";
            btnUpanyasam.onclick = function () {
                const targetUrl = "https://www.youtube.com/embed/?listType=playlist&list=PLqL9BgTHGJW510IK-40Ow986urrwTZJli&index=5";
                document.getElementById('mainVideoPlayer').src = targetUrl;
                document.getElementById('descVideoTitle').textContent = "Upcoming Upanyasam";
                subTitleDisplay.style.display = "none";
                clearSelectionHighlights();

                // Smooth scroll up to video player panel
                const videoTargetContainer = document.querySelector('.video-player-center');
                if (videoTargetContainer) {
                    videoTargetContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            };
            parentContainer.appendChild(btnUpanyasam);

            // DETACHED DATA FETCH OPERATIONS PIPELINE
            let xhr = new XMLHttpRequest();
            xhr.open('get', 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2C+id&playlistId=PLqL9BgTHGJW510IK-40Ow986urrwTZJli&key=AIzaSyBbT6iuMW2vmsF7kdFwFQyWJ1EHeT3q_Dg');
            xhr.send();
            xhr.responseType = 'text';

            xhr.onload = function () {
                try {
                    let textPayload = xhr.response;
                    let Titles = textPayload.split('"title":');

                    var subtitle = Titles[5].split(",");
                    var subtitle2 = Titles[1].split(",");
                    var subtitle3 = Titles[2].split(",");

                    btnUpanyasam.innerHTML = "Upcoming Upanyasam <br />" + subtitle[0].slice(2, -1);
                    btnUpcoming.innerHTML = "Upcoming Program <br />" + subtitle2[0].slice(2, -1);
                    btnToday.innerHTML = "Today's Uploads <br />" + subtitle3[0].slice(2, -1);
                } catch (e) {
                    btnToday.innerHTML = "Today's Uploads <br /> view Playlist Items";
                    btnUpcoming.innerHTML = "Upcoming Program <br /> view Playlist Items";
                    btnUpanyasam.innerHTML = "Upcoming Upanyasam <br /> view Playlist Items";
                }
            };
        }

        function clearSelectionHighlights() {
            const scrollBox = document.getElementById('registryScrollBox');
            const allRows = scrollBox.querySelectorAll('.video-selection-row');
            allRows.forEach(row => row.classList.remove('active'));
            document.getElementById('metaDate').textContent = "Live Stream / Playlist Sequence";
            document.getElementById('metaSource').textContent = "Youtube API Live Pipeline";
        }

        // DE-COUPLED TEXT FILE BUFFER INTEGRATION LAYER
        async function fetchDynamicSpecialAnnouncement() {
            const textFilePath = 'Essentials/special.txt';
            const bannerElement = document.getElementById('dynamicSpecialBanner');

            try {
                const response = await fetch(textFilePath + '?_cb=' + new Date().getTime());
                if (!response.ok) throw new Error("HTTP response error");
                const rawTextContents = await response.text();

                const linesArray = rawTextContents.split(/\r?\n/);
                let htmlOutput = '';

                linesArray.forEach(lineItem => {
                    const cleanLine = lineItem.trim();
                    if (cleanLine !== "") {
                        htmlOutput += `<span class="announcement-line">${cleanLine}</span>`;
                    }
                });

                if (htmlOutput !== '') {
                    bannerElement.innerHTML = htmlOutput;
                }
            } catch (error) {
                console.log("Local display notice running.");
            }
        }

        // FETCH JSON REGISTRY PARSING PIPELINE
        async function loadVideoDatabasePayload() {
            const registryTargetUrl = 'Essentials/video.json';

            try {
                const response = await fetch(registryTargetUrl + '?_cb=' + new Date().getTime());
                if (!response.ok) {
                    throw new Error(`HTTP data fallback execution required.`);
                }

                SANGEETHADHWANI_VIDEO_POOL = await response.json();
                finalizeUIRender();

            } catch (error) {
                console.warn("Local sandbox access redirection sequence initialized.");
                if (typeof SANGEETHADHWANI_VIDEO_POOL === 'undefined' || SANGEETHADHWANI_VIDEO_POOL.length === 0) {
                    fetch(registryTargetUrl)
                        .then(res => res.json())
                        .then(data => {
                            SANGEETHADHWANI_VIDEO_POOL = data;
                            finalizeUIRender();
                        })
                        .catch(() => {
                            SANGEETHADHWANI_VIDEO_POOL = [
                                { "id": "107shIDK18w", "title": "Maha Periyava Mahimai Pravachanam Series", "date": "2024-09-15", "source": "Periyava Kuralaga Ganesa Sarma" },
                                { "id": "9FdCvU_SWGQ", "title": "மன அழுக்கு போகனும்னா", "date": "2024-09-08", "source": "SRI SANKARA TV" },
                                { "id": "qCinWMngdMo", "title": "பெரியவா", "date": "2024-09-01", "source": "SRI SANKARA TV" }
                            ];
                            finalizeUIRender();
                        });
                } else {
                    finalizeUIRender();
                }
            }
        }

        function finalizeUIRender() {
            populateFilterControls();
            populateModalAcknowledgementChannels();

            // Dynamic Counter Update: Updates the badge with exact live array length safely
            const countDisplay = document.getElementById('videoCountDisplay');
            if (countDisplay && SANGEETHADHWANI_VIDEO_POOL) {
                countDisplay.textContent = `Total Videos: ${SANGEETHADHWANI_VIDEO_POOL.length}`;
            }

            let initialDefaultSelection = SANGEETHADHWANI_VIDEO_POOL.find(v => v.id === SANGEETHADHWANI_DEFAULT_VIDEO_ID);

            if (!initialDefaultSelection) {
                initialDefaultSelection = {
                    id: SANGEETHADHWANI_DEFAULT_VIDEO_ID,
                    title: "Default Pravachanam Feature",
                    date: "Archive",
                    source: "Periyava Kuralaga Ganesa Sarma"
                };
            }

            launchVideoTarget(initialDefaultSelection);
            renderVideoSelectionList(SANGEETHADHWANI_VIDEO_POOL);
        }

        function populateFilterControls() {
            const dropdown = document.getElementById('channelFilterDropdown');
            dropdown.innerHTML = '<option value="">All Streaming Channels / Sources</option>';

            const uniqueSourcesSet = new Set();
            SANGEETHADHWANI_VIDEO_POOL.forEach(video => {
                if (video.source && video.source.trim() !== "") {
                    uniqueSourcesSet.add(video.source.trim());
                }
            });

            Array.from(uniqueSourcesSet).sort().forEach(sourceName => {
                const opt = document.createElement('option');
                opt.value = sourceName;
                opt.textContent = sourceName;
                dropdown.appendChild(opt);
            });
        }

        // PROGRAMMATIC PIPELINE POPULATION FOR THE ACKNOWLEDGEMENT MODAL
        function populateModalAcknowledgementChannels() {
            const channelsGrid = document.getElementById('modalChannelsGrid');
            channelsGrid.innerHTML = '';

            const uniqueChannelsSet = new Set();
            SANGEETHADHWANI_VIDEO_POOL.forEach(video => {
                if (video.source && video.source.trim() !== "") {
                    uniqueChannelsSet.add(video.source.trim());
                }
            });

            if (uniqueChannelsSet.size === 0) {
                ["Periyava Kuralaga Ganesa Sarma", "Gems of Ganesa Sarma", "SRI SANKARA TV", "Periyava Puranam"].forEach(ch => uniqueChannelsSet.add(ch));
            }

            Array.from(uniqueChannelsSet).sort().forEach(channelName => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'modal-channel-item';
                itemDiv.textContent = channelName;
                channelsGrid.appendChild(itemDiv);
            });
        }

        // DYNAMIC BOUNDS TESTING ENGINE FOR ACCOLADES SELECTION (A01 - A99)
        let isAccoladesInitialized = false;
        function initializeDynamicAccoladesPipeline() {
            if (isAccoladesInitialized) return;

            const landscapeBox = document.getElementById('landscapeGalleryRow');
            const portraitBox = document.getElementById('portraitGalleryRow');

            landscapeBox.innerHTML = '';
            portraitBox.innerHTML = '';

            for (let indexValue = 1; indexValue <= 99; indexValue++) {
                let doubleDigitString = indexValue < 10 ? '0' + indexValue : '' + indexValue;
                let targetImageFileUrl = `Essentials/Images/A${doubleDigitString}.jpg`;

                let hiddenPreloaderImg = new Image();
                hiddenPreloaderImg.src = targetImageFileUrl;

                hiddenPreloaderImg.onload = function () {
                    const cardLayoutElement = document.createElement('div');
                    cardLayoutElement.className = 'accolade-image-card';
                    cardLayoutElement.onclick = function () {
                        launchFullscreenImageLightbox(true, targetImageFileUrl);
                    };

                    const renderingDomImage = document.createElement('img');
                    renderingDomImage.src = targetImageFileUrl;
                    renderingDomImage.alt = `Award Certificate A${doubleDigitString}`;
                    cardLayoutElement.appendChild(renderingDomImage);

                    if (hiddenPreloaderImg.width > hiddenPreloaderImg.height) {
                        landscapeBox.appendChild(cardLayoutElement);
                    } else {
                        portraitBox.appendChild(cardLayoutElement);
                    }
                };
                hiddenPreloaderImg.onerror = function () { };
            }
            isAccoladesInitialized = true;
        }

        // DYNAMIC BOUNDS TESTING ENGINE FOR PRESS CLIPPINGS SELECTION (P01 - P99)
        let isPressInitialized = false;
        function initializeDynamicPressPipeline() {
            if (isPressInitialized) return;

            const pressLandscapeBox = document.getElementById('pressLandscapeRow');
            const pressPortraitBox = document.getElementById('pressPortraitRow');

            pressLandscapeBox.innerHTML = '';
            pressPortraitBox.innerHTML = '';

            for (let indexValue = 1; indexValue <= 99; indexValue++) {
                let doubleDigitString = indexValue < 10 ? '0' + indexValue : '' + indexValue;
                let targetImageFileUrl = `Essentials/Images/P${doubleDigitString}.jpg`;

                let hiddenPreloaderImg = new Image();
                hiddenPreloaderImg.src = targetImageFileUrl;

                hiddenPreloaderImg.onload = function () {
                    const cardLayoutElement = document.createElement('div');
                    cardLayoutElement.className = 'accolade-image-card';
                    cardLayoutElement.onclick = function () {
                        launchFullscreenImageLightbox(true, targetImageFileUrl);
                    };

                    const renderingDomImage = document.createElement('img');
                    renderingDomImage.src = targetImageFileUrl;
                    renderingDomImage.alt = `Press Writeup P${doubleDigitString}`;
                    cardLayoutElement.appendChild(renderingDomImage);

                    if (hiddenPreloaderImg.width > hiddenPreloaderImg.height) {
                        pressLandscapeBox.appendChild(cardLayoutElement);
                    } else {
                        pressPortraitBox.appendChild(cardLayoutElement);
                    }
                };
                hiddenPreloaderImg.onerror = function () { };
            }
            isPressInitialized = true;
        }

        // DYNAMIC BOUNDS TESTING ENGINE FOR AUTHORED BOOKS SELECTION (B01 - B99)
        let isBooksInitialized = false;
        function initializeDynamicBooksPipeline() {
            if (isBooksInitialized) return;

            const booksLandscapeBox = document.getElementById('booksLandscapeRow');
            const booksPortraitBox = document.getElementById('booksPortraitRow');

            booksLandscapeBox.innerHTML = '';
            booksPortraitBox.innerHTML = '';

            for (let indexValue = 1; indexValue <= 99; indexValue++) {
                let doubleDigitString = indexValue < 10 ? '0' + indexValue : '' + indexValue;
                let targetImageFileUrl = `Essentials/Images/B${doubleDigitString}.jpg`;

                let hiddenPreloaderImg = new Image();
                hiddenPreloaderImg.src = targetImageFileUrl;

                hiddenPreloaderImg.onload = function () {
                    const cardLayoutElement = document.createElement('div');
                    cardLayoutElement.className = 'accolade-image-card';
                    cardLayoutElement.onclick = function () {
                        launchFullscreenImageLightbox(true, targetImageFileUrl);
                    };

                    const renderingDomImage = document.createElement('img');
                    renderingDomImage.src = targetImageFileUrl;
                    renderingDomImage.alt = `Book Cover B${doubleDigitString}`;
                    cardLayoutElement.appendChild(renderingDomImage);

                    if (hiddenPreloaderImg.width > hiddenPreloaderImg.height) {
                        booksLandscapeBox.appendChild(cardLayoutElement);
                    } else {
                        booksPortraitBox.appendChild(cardLayoutElement);
                    }
                };
                hiddenPreloaderImg.onerror = function () { };
            }
            isBooksInitialized = true;
        }

        // DYNAMIC BOUNDS TESTING ENGINE FOR ARCHIVAL PHOTO GALLERY (gs01 - gs99)
        let isGalleryInitialized = false;
        function initializeDynamicGalleryPipeline() {
            if (isGalleryInitialized) return;

            const galleryLandscapeBox = document.getElementById('galleryLandscapeRow');
            const galleryPortraitBox = document.getElementById('galleryPortraitRow');

            galleryLandscapeBox.innerHTML = '';
            galleryPortraitBox.innerHTML = '';

            for (let indexValue = 1; indexValue <= 99; indexValue++) {
                let doubleDigitString = indexValue < 10 ? '0' + indexValue : '' + indexValue;
                let targetImageFileUrl = `Essentials/Images/gs${doubleDigitString}.jpg`;

                let hiddenPreloaderImg = new Image();
                hiddenPreloaderImg.src = targetImageFileUrl;

                hiddenPreloaderImg.onload = function () {
                    const cardLayoutElement = document.createElement('div');
                    cardLayoutElement.className = 'accolade-image-card';
                    cardLayoutElement.onclick = function () {
                        launchFullscreenImageLightbox(true, targetImageFileUrl);
                    };

                    const renderingDomImage = document.createElement('img');
                    renderingDomImage.src = targetImageFileUrl;
                    renderingDomImage.alt = `Gallery Photo gs${doubleDigitString}`;
                    cardLayoutElement.appendChild(renderingDomImage);

                    if (hiddenPreloaderImg.width > hiddenPreloaderImg.height) {
                        galleryLandscapeBox.appendChild(cardLayoutElement);
                    } else {
                        galleryPortraitBox.appendChild(cardLayoutElement);
                    }
                };
                hiddenPreloaderImg.onerror = function () { };
            }
            isGalleryInitialized = true;
        }

        function renderVideoSelectionList(videosArray) {
            const scrollBox = document.getElementById('registryScrollBox');
            scrollBox.innerHTML = '';

            if (videosArray.length === 0) {
                scrollBox.innerHTML = '<div style="padding:15px; text-align:center; color:#888; font-size:0.85rem;">No files match your search criteria.</div>';
                return;
            }

            const currentActivePlayerId = getActiveVideoId();

            videosArray.forEach(videoItem => {
                const rowElement = document.createElement('div');
                rowElement.className = 'video-selection-row';
                if (videoItem.id === currentActivePlayerId) {
                    rowElement.classList.add('active');
                }

                rowElement.innerHTML = `${videoItem.title} [${videoItem.date || 'N/A'}] <span style="font-style:italic; opacity:0.8; font-size:0.8rem; display:block; margin-top:3px;">(Video Courtesy : Youtube Channel : ${videoItem.source || 'Unknown'})</span>`;

                rowElement.onclick = function () {
                    document.getElementById('DivVidTitle2').style.display = "none";
                    const allRows = scrollBox.querySelectorAll('.video-selection-row');
                    allRows.forEach(row => row.classList.remove('active'));

                    rowElement.classList.add('active');
                    launchVideoTarget(videoItem);
                };

                scrollBox.appendChild(rowElement);
            });
        }

        function filterVideoRegistry() {
            const searchFieldString = document.getElementById('videoSearchInput').value.toLowerCase().trim();
            const sourceDropdownFilter = document.getElementById('channelFilterDropdown').value;
            const individualKeywordsList = searchFieldString.split(',').map(kw => kw.trim()).filter(kw => kw !== "");

            const filteredResults = SANGEETHADHWANI_VIDEO_POOL.filter(video => {
                if (sourceDropdownFilter !== "" && video.source !== sourceDropdownFilter) {
                    return false;
                }
                if (individualKeywordsList.length === 0) return true;

                const searchableAggregatedText = `${video.title} ${video.date || ''} ${video.source || ''}`.toLowerCase();
                return individualKeywordsList.every(keyword => searchableAggregatedText.includes(keyword));
            });

            renderVideoSelectionList(filteredResults);
        }

        function getActiveVideoId() {
            const playerIframe = document.getElementById('mainVideoPlayer');
            if (!playerIframe.src) return '';
            const matchingPattern = playerIframe.src.match(/\/embed\/([a-zA-Z0-9_-]{11})/);
            return matchingPattern ? matchingPattern[1] : '';
        }

        function launchVideoTarget(videoObject) {
            const playerIframe = document.getElementById('mainVideoPlayer');
            playerIframe.src = `https://www.youtube.com/embed/${videoObject.id}?rel=0&modestbranding=1&playsinline=1`;

            document.getElementById('descVideoTitle').textContent = videoObject.title;
            document.getElementById('metaDate').textContent = videoObject.date || 'N/A';
            document.getElementById('metaSource').textContent = videoObject.source || 'Unknown Channel Source';

            // SKIP auto-scroll ONLY if it is the default launch video
            if (videoObject.id !== '107shIDK18w') {
                const videoTargetContainer = document.querySelector('.video-player-center');
                if (videoTargetContainer) {
                    videoTargetContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }
        }

        window.onload = function () {
            fetchDynamicSpecialAnnouncement();
            loadVideoDatabasePayload();
            loadLivePlaylistShortcuts();
        };
    </script>


    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <!-- hitwebcounter Code START -->
    <a href="https://www.hitwebcounter.com" target="_blank">
        <center>
            <img src="https://hitwebcounter.com/counter/counter.php?page=7749412&style=0001&nbdigits=5&type=page&initCount=4500" title="Free Counter" Alt="web counter" border="0" />
        </center>
    </a>

</body>
</html>