<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixify</title>

    <style>

        :root {
         --primary-color: #007bff;
         --secondary-color: #6c757d;
         --background-color: #ffffff;
         --text-color: #343a40;
        }

        /* General page styling */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            /* display: flex;
            justify-content: flex-start;
            align-items: flex-start; */
            background-color: #1ED760;
            height: 100%;
            overflow-y: hidden;
        }

        /* Main container aligned to top left */
        .main-container {
            min-width: 1020px;
            width: 100%;
            height: 100%;
        }

        .banner {
            width: 100%;
            justify-content: left;
            margin: auto;
            display: flex;
            flex-wrap:  nowrap;
        }

        .banner-fade {
            width: 100%;
            justify-content: left;
            margin: auto;
            display: flex;
            flex-wrap:  nowrap;
            position:absolute;
            top:60px;
            background-color: #ffffff;
            height: 20px;
            z-index: 2;
            box-shadow: 0px 15px 10px 5px white;
        }

        /* Logo container styling */
        .logo-container {
            width: 150px;
            min-width: 150px;
            height: 50px;
            justify-content: center;
            align-items: center;
            text-align: center;
            display: inline-block;
        }
        
         /* Tabs container aligned to top-left horizontally */
        .tabs-container {
            width: 800px;
            background-color: #1ED760;
            padding: 0 1% 0 0;
            border-bottom: 1px solid #ddd;
            /* white-space: nowrap; */
            z-index: 1;
            display: inline-block;
        }

        .flex-space {
            width: 100%;
            height: 60px;
            background-color: #1ED760;
            border-bottom: 1px solid #ddd;
            align-items: right;
            justify-content: right;
            text-align: right;
            display: inline-block;
        }

        .info-container {
            width: 180px;
            height: 30px;
            z-index: 6px;
            font-size: 1em;
            font-weight: bold;
            display: inline-block;
            padding: 0 1% 0 0;
            border-bottom: 1px solid #ddd;
            text-align: center;
            justify-content: center;
            align-items: center;
            padding-top: 30px;
            margin: 0;
        }

        .tabs {
            display: flex;
            justify-content: start;
            gap: 10px;
        }

        /* Overlapping tabs styling */
        .tab {
            min-width: 160px;
            width: 20%;
            max-width: 200px;
            height: 40px;
            padding: 10px 20px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.7);
            color: rgba(7, 187, 71, 0.7);
            border: none;
            border-radius: 20px;
            font-size: 1em;
            font-weight: bold;
            text-transform: uppercase;
            transition: all 0.3s ease;
            position: relative;
            top: 20px;
        }

        /* Hover effect */
        .tab:hover {
            transform: translateY(-2px);
        }

        /* Active tab styling */
        .tab.active {
            background: rgb(255, 255, 255);
            color: #07BB47;
        }

        .info {
            color: white;
            font-size: 1em;
            text-decoration: none;
            text-align: center;
            justify-content: center;
            align-items: center;
            padding: 10px;
            cursor: pointer;
        }

        .info:hover {
            color: #d9ffe6;
        }

        #content-area {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            overflow-y: hidden;
            z-index: 4;
        }

    </style>


    <!-- Dialogflow Messenger Styles -->
    <link rel="stylesheet" href="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/themes/df-messenger-default.css">
    <script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>

<body>
    <div class="main-container">
        <div>
            <embed src="static/images/StarHubLogo.svg" alt="StarHubLogo"; 
                   style="height: 95%; z-index: 3; position: absolute; 
                   top: 15px; right: 20px; opacity:0.05; pointer-events: none;">
        </div>

        <div class="banner-fade">
        </div>

        <div class="banner">
            <!-- SVG Logo at Upper Left -->
            <div class="logo-container">
                <embed src="static/images/FixifyText.svg" alt="FixifyLogo" style="height: 2em; position: absolute; top: 23px; left: 30px;" />
            </div>

            <!-- Tabs Navigation at Upper Left with Overlapping Style -->
            <div class="tabs-container">
                <div class="tabs">
                    <div class="tab active" onclick="loadTabContent('starhub_tv', this)">Entertainment</div>
                    <div class="tab" onclick="loadTabContent('broadband', this)">Broadband</div>
                    <div class="tab" onclick="loadTabContent('mobile', this)">Mobile</div>
                    <!-- <div class="tab" onclick="loadTabContent('user', this)">User</div> -->
                </div>
            </div>

            <div class="flex-space">
                <div class ="info-container">
                    <a class="info" onclick="loadInfoPage('about_us')">About Us</a>
                    <a class="info" onclick="loadInfoPage('help')">Help</a>
                </div>
            </div>
        </div>

        <!-- Content Area Positioned to the Right of Tabs -->
        <div id="content-area">
            <h2></h2>
        </div>
    </div>

    <script>

        function loadInfoPage(pageName){
            // Remove the active class from all tabs
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));

            // Clear previous content, including the Dialogflow widget if it exists
            document.getElementById('content-area').innerHTML = '';

            switch(pageName){
                case 'about_us':
                    loadTabHTML('aboutus.html');
                    break;
                case 'help':
                    loadTabHTML('help.html');
                    break;
            }
        }


        // Function to load tab content dynamically
        function loadTabContent(tab, tabElement) {
            // Remove the active class from all tabs
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            tabElement.classList.add('active');

            // Clear previous content, including the Dialogflow widget if it exists
            document.getElementById('content-area').innerHTML = '';

            // Load content based on the selected tab
            if (tab === 'starhub_tv') {
                loadTabHTML('dialogflow.html');
            } else if (tab === 'broadband') {
                loadTabHTML('workinprogress.html');
            } else if (tab === 'mobile') {
                loadTabHTML('workinprogress.html');
            } else if (tab === 'user') {
                loadTabHTML('workinprogress.html');
            }
        }

        // Function to load the corresponding HTML content
        function loadTabHTML(fileName) {
            fetch(fileName)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.text();
                })
                .then(html => {
                    document.getElementById('content-area').innerHTML = html;
                })
                .catch(error => {
                    console.error('Error loading HTML file:', error);
                    document.getElementById('content-area').innerHTML = '<p>Sorry, there was an error loading the content.</p>';
                });
        }
        // Set initial content on load
        window.onload = function() {
            loadTabHTML('dialogflow.html'); // Load StarHub TV+ content on page load
        };
    </script>

</body>
</html>