<?php
// Include config to get BASE_URL
require_once __DIR__ . '/../config.php'; // Adjust path if config.php is in parent folder

// Include loading screen safely
$loadingScreenPath = __DIR__ . '/../loading_screen.php';
if (file_exists($loadingScreenPath)) {
    include $loadingScreenPath;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r); t.async=1; t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "uckhbj2p34");
    </script>

    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LGW6WETHKV"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-LGW6WETHKV');
    </script>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swarnavahini - Sri Lanka’s Leading TV Channel</title>
    <meta name="description" content="Swarnavahini is a leading Sri Lankan TV channel offering popular teledramas such as Jahuta, Pirimi Lamayi, Maa, Hiripoda Wassa, Sinto, Daskon, Rata Pawula, and Pablo.">
    <meta name="keywords" content="Swarnavahini, Sri Lankan TV, teledramas, live TV, news">
    <meta name="author" content="Swarnavahini">
    <meta name="robots" content="index, follow">

    <link rel="icon" type="image/x-icon" href="<?php echo BASE_URL; ?>Uploads/logo.png">
    <link rel="stylesheet" href="<?php echo BASE_URL; ?>css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo BASE_URL; ?>css/custom.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="canonical" href="<?php echo BASE_URL . ltrim($_SERVER['REQUEST_URI'], '/'); ?>">

    <style>
    /* Mobile Navbar */
    @media (max-width: 991.98px) {
        .custom-navbar-collapse {
            position: fixed;
            top: 0;
            right: -100%;
            width: 250px;
            height: 100vh;
            z-index: 1050;
            transition: right 0.3s ease;
            display: flex;
            flex-direction: column;
            padding: 20px;
            background: #1A237E;
            border-radius: 10px 0px 30px 0px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            color: #fff;
        }
        .custom-navbar-collapse.show { right: 0; }
        .custom-navbar-nav {
            flex-direction: column;
            gap: 15px;
            margin-top: 20px;
        }
        .custom-navbar-nav .nav-link {
            color: #fec009;
            transition: color 0.3s ease;
        }
        .custom-navbar-nav .nav-link:hover { color: #ffffff; }
        body.custom-nav-open { overflow: hidden; }
        #customNavbarToggler { display: block; }
    }

    @media (min-width: 992px) {
        #customNavbarToggler { display: none; }
    }

    /* Hamburger design */
    #customNavbarToggler {
        border: none;
        background: none;
        position: relative;
        width: 30px;
        height: 22px;
        cursor: pointer;
        z-index: 1060;
    }
    #customNavbarToggler span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #fec009;
        border-radius: 2px;
        opacity: 1;
        left: 0;
        transition: all 0.3s ease;
    }
    #customNavbarToggler span:nth-child(1) { top: 0; }
    #customNavbarToggler span:nth-child(2) { top: 9px; }
    #customNavbarToggler span:nth-child(3) { top: 18px; }

    #customNavbarToggler.active span:nth-child(1) { transform: rotate(45deg); top: 9px; }
    #customNavbarToggler.active span:nth-child(2) { opacity: 0; }
    #customNavbarToggler.active span:nth-child(3) { transform: rotate(-45deg); top: 9px; }

    /* STAR POPPING EFFECT */
    @keyframes starPopAnimation {
        0% { transform: scale(1); text-shadow: 0 0 0px rgba(255, 215, 0, 0); }
        50% { transform: scale(1.15); color: #fff; text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700; }
        100% { transform: scale(1); text-shadow: 0 0 0px rgba(255, 215, 0, 0); }
    }
    .nav-link.star-pop {
        color: #FFD700 !important;
        font-weight: bold;
        display: inline-block;
        animation: starPopAnimation 1.5s infinite ease-in-out;
    }
    .nav-link.star-pop:hover {
        animation-play-state: paused;
        transform: scale(1.2);
        text-shadow: 0 0 15px #FFD700;
    }
    
        /* =========================================
       SWINGING VESAK LANTERNS 
       ========================================= */
    .floating-lantern {
        position: fixed; 
        top: 0;
        width: 150px;
        z-index: 99999; 
        pointer-events: none; 
        transform-origin: top center;
        animation: swingAnimation 3s ease-in-out infinite alternate;
        filter: drop-shadow(0px 10px 15px rgba(255, 215, 0, 0.4));
    }

    .lantern-left { left: 5%; }
    
    .lantern-right { 
        right: 5%; 
        animation-delay: -1.5s; 
    }

    @keyframes swingAnimation {
        0% { transform: rotate(12deg); }
        100% { transform: rotate(-12deg); }
    }

    /* Mobile view */
    @media (max-width: 150px) {
        .floating-lantern { width: 55px; }
        .lantern-left { left: 2%; }
        .lantern-right { right: 2%; }
    }
    </style>
</head>
<body>
    
    

    
<!--    <img src="<?php echo BASE_URL; ?>Uploads/vesak_lantern.png" class="floating-lantern lantern-left" alt="Vesak Lantern Left">-->
<!--<img src="<?php echo BASE_URL; ?>Uploads/vesak_lantern.png" class="floating-lantern lantern-right" alt="Vesak Lantern Right">-->

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="<?php echo BASE_URL; ?>index.php">
            <img src="<?php echo BASE_URL; ?>Uploads/logo.png" alt="TV Channel Logo" style="height: 50px;">
        </a>

        <div class="d-none d-lg-flex justify-content-end">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>index.php">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/teledramas.php">Teledramas</a></li>
                <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/programmes.php">Programmes</a></li>
                                <!--<li class="nav-item"><a class="nav-link" href="https://vesak.swarnavahini.lk/" target="_blank">දක්ෂිණා ප්‍රභා</a></li>-->
                <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/events.php">Events</a></li>
                <!--<li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/tharurayak.php">Tharu Rayak 2026</a></li>-->
                <!--<li class="nav-item">-->
                <!--    <a class="nav-link star-pop" href="<?php echo BASE_URL; ?>pages/awurudu.php">Awurudu 2026</a>-->
                <!--</li>-->
                <li class="nav-item"><a class="nav-link" href="https://liveatsrilanka.lk/" target="_blank">News</a></li>

                <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/contact_form_with_map.php">Contact</a></li>
                <li class="nav-item">
                    <a href="<?php echo BASE_URL; ?>pages/live.php" class="live-button">
                        <span class="live-circle"></span> LIVE
                    </a>
                </li>
            </ul>
        </div>

        <button id="customNavbarToggler" class="d-lg-none" aria-label="Toggle navigation">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</nav>

<div class="custom-navbar-collapse d-lg-none" id="customNavbarCollapse">
    <ul class="navbar-nav custom-navbar-nav">
        <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>index.php">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/teledramas.php">Teledramas</a></li>
        <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/programmes.php">Programmes</a></li>
        <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/events.php">Events</a></li>
        <!--<li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/tharurayak.php">Tharu Rayak 2026</a></li>-->
        <!--<li class="nav-item">-->
        <!--    <a class="nav-link star-pop" href="<?php echo BASE_URL; ?>pages/awurudu.php">Awurudu 2026</a>-->
        <!--</li>-->
        <li class="nav-item"><a class="nav-link" href="https://liveatsrilanka.lk/" target="_blank">News</a></li>
        <li class="nav-item"><a class="nav-link" href="<?php echo BASE_URL; ?>pages/contact_form_with_map.php">Contact</a></li>
        <li class="nav-item">
            <a href="<?php echo BASE_URL; ?>pages/live.php" class="live-button">
                <span class="live-circle"></span> LIVE
            </a>
        </li>
    </ul>
</div>

<script src="<?php echo BASE_URL; ?>js/bootstrap.bundle.min.js"></script>

<script>
const toggler = document.getElementById('customNavbarToggler');
const collapse = document.getElementById('customNavbarCollapse');

toggler.addEventListener('click', () => {
    collapse.classList.toggle('show');
    toggler.classList.toggle('active');
    document.body.classList.toggle('custom-nav-open');
});

document.addEventListener('click', (e) => {
    if (!collapse.contains(e.target) && !toggler.contains(e.target)) {
        collapse.classList.remove('show');
        toggler.classList.remove('active');
        document.body.classList.remove('custom-nav-open');
    }
});
</script>

</body>
</html>