<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Contact Us | MyTestApp</title>
                <link rel="stylesheet" href="https://www.mytestapp.me/main.css">
                    <link rel="icon" href="https://staticcdn.mytestapp.me/Containers/images/favicon.ico">
                        <style>
                            .contact-form-container {
                                max-width: 600px;
                                margin: 50px auto;
                                background: #0d1117;
                                padding: 20px;
                                border-radius: 15px;
                                box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
                            }
                            
                            .contact-form-container h2 {
                                text-align: center;
                                color: #58a6ff;
                                margin-bottom: 20px;
                                font-size: 2rem;
                            }
                            
                            .contact-form-container form {
                                display: flex;
                                flex-direction: column;
                            }
                            
                            .contact-form-container label {
                                margin-bottom: 10px;
                                font-size: 1.1rem;
                                color: #c9d1d9;
                            }
                            
                            .light-mode .contact-form-container label {
                                color: black;
                            }
                            
                            .contact-form-container input,
                            .contact-form-container textarea {
                                background: #161b22;
                                color: #c9d1d9;
                                border: 1px solid #58a6ff;
                                padding: 10px;
                                border-radius: 5px;
                                margin-bottom: 20px;
                                font-size: 1rem;
                                outline: none;
                                transition: border-color 0.3s;
                                resize: none;
                            }
                            
                            .contact-form-container input:focus,
                            .contact-form-container textarea:focus {
                                border-color: #1f6feb;
                            }
                            
                            .contact-form-container button {
                                padding: 10px 20px;
                                background: #58a6ff;
                                color: #fff;
                                border: none;
                                border-radius: 5px;
                                font-size: 1rem;
                                cursor: pointer;
                                transition: background 0.3s, transform 0.2s;
                            }
                            
                            .contact-form-container button:hover {
                                background: #1f6feb;
                                transform: scale(1.05);
                            }
                            
                            .contact-form-container button:active {
                                transform: scale(0.95);
                            }
                            
                            .light-mode .contact-form-container {
                                        background: #ffffff;
                                        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
                                    }

                                    .light-mode .contact-form-container h2 {
                                        color: #0077cc;
                                    }

                                    .light-mode .contact-form-container input,
                                    .light-mode .contact-form-container textarea {
                                        background: #f9f9f9;
                                        color: #333;
                                        border: 1px solid #0077cc;
                                    }

                                    .light-mode .contact-form-container button {
                                        background: #0077cc;
                                    }

                                    .light-mode .contact-form-container button:hover {
                                        background: #005fa3;
                                    }
                        </style>
                        <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
                        <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>
    </head>
    <body>
        <header>
            <nav>
                <!-- Desktop menu -->
                <ul class="desktop-menu">
                    <a href="index.html"><img style="width: 48px; height: 48px;" src="https://www.mytestapp.me/mytestapp.png"></a>
                    <div class="spacer"></div>
                    <a href="../index.html"><div class="logo">MyTestApp Support</div></a>
                    <li><a href="../policies.html">Policies</a></li>
                    <li><a href="../privacy-and-safety.html">Safety</a></li>
                    <li><a href="../tips-and-solutions.html">Tips</a></li>
                    <li><a href="../other-information.html">Other</a></li>
                    <li><a href="../other/contact.html">Contact</a></li>
                    <li><a href="https://www.mytestapp.me/download.html">Download</a></li>
                    <div class="theme-switch">
                        <input type="checkbox" id="theme-toggle">
                            <label for="theme-toggle" class="theme-toggle-label">
                                <span class="sun">☀️</span>
                                <span class="moon">🌙</span>
                            </label>
                    </div>
                </ul>
                
                <!-- Mobile menu -->
                <div class="mobile-logo-menu-button">
                    <ul>
                        <a href="index.html"><img style="width: 48px; height: 48px;" src="https://www.mytestapp.me/mytestapp.png"></a>
                        <div class="spacer"></div>
                        <a href="../index.html"><div class="logo">MyTestApp</div></a>
                        <div class="spacer"></div>
                        <button class="mobile-menu-button" style="margin-bottom: 5px;" aria-label="Open menu">&#9776;</button>
                        <div class="theme-switch">
                            <input type="checkbox" id="theme-toggle-mobile">
                                <label for="theme-toggle-mobile" class="theme-toggle-label">
                                    <span class="sun">☀️</span>
                                    <span class="moon">🌙</span>
                                </label>
                        </div>
                        <div class="mobile-menu">
                            <li><a href="../policies.html">Policies</a></li>
                            <li><a href="../privacy-and-safety.html">Safety</a></li>
                            <li><a href="../tips-and-solutions.html">Tips</a></li>
                            <li><a href="../other-information.html">Other</a></li>
                            <li><a href="../other/contact.html">Contact</a></li>
                            <li><a href="https://www.mytestapp.me/download.html">Download</a></li>
                        </div>
                    </ul>
                </div>
            </nav>
        </header>
        <section id="contactFormSection">
            <div class="contact-form-container">
                <h2>Contact Us</h2>
                <form id="contactForm">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" placeholder="Enter your name" required>
                        
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" placeholder="Enter your email" required>
                            
                            <label for="message">Message</label>
                            <textarea id="message" name="message" rows="5" placeholder="Write your message here..." required></textarea>
                            
                            <button type="submit">Send Message</button>
                        </form>
            </div>
        </section>
        
        <footer>
            <div class="footer-content">
                <p>&copy; 2025 Impact Tiling Group Pty Ltd. All rights reserved.</p>
                <ul class="footer-links">
                    <li><a href="../policies.html">Policies</a></li>
                    <li><a href="../privacy-and-safety.html">Safety</a></li>
                    <li><a href="../tips-and-solutions.html">Tips</a></li>
                    <li><a href="../other-information.html">Other</a></li>
                    <li><a href="../other/contact.html">Contact</a></li>
                    <li><a href="https://www.mytestapp.me/download.html">Download</a></li>
                </ul>
            </div>
        </footer>
        
        <script>
            // Firebase configuration
            const firebaseConfig = {
                apiKey: "AIzaSyA8XSAYhkPKAKiIUTpRc9092TGTAxhaIXg",
                authDomain: "https://mytestapp-support.firebaseapp.com",
                projectId: "mytestapp-support",
                storageBucket: "https://mytestapp-support.appspot.com",
                messagingSenderId: "599888575843",
                appId: "1:599888575843:web:ffd66fc04dc35393306756"
            };
            
            // Initialize Firebase
            const app = firebase.initializeApp(firebaseConfig);
            const db = firebase.firestore();
            
            document.getElementById('contactForm').addEventListener('submit', async (e) => {
                e.preventDefault();
                
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const message = document.getElementById('message').value;
                
                try {
                    await db.collection('contacts').add({
                        name: name,
                        email: email,
                        message: message,
                        timestamp: firebase.firestore.FieldValue.serverTimestamp()
                    });
                    
                    alert('Message sent successfully!');
                    e.target.reset(); // Reset the form
                } catch (error) {
                    console.error('Error sending message: ', error);
                    alert('Failed to send the message. Please try again later.');
                }
            });
            
            document.addEventListener('DOMContentLoaded', function() {
                const themeToggleDesktop = document.getElementById('theme-toggle');
                const themeToggleMobile = document.getElementById('theme-toggle-mobile');
                const body = document.body;
                
                function setTheme(isDarkMode) {
                    if (isDarkMode) {
                        body.classList.add('dark-mode');
                        body.classList.remove('light-mode');
                        localStorage.setItem('theme', 'dark-mode');
                    } else {
                        body.classList.add('light-mode');
                        body.classList.remove('dark-mode');
                        localStorage.setItem('theme', 'light-mode');
                    }
                    themeToggleDesktop.checked = isDarkMode;
                    themeToggleMobile.checked = isDarkMode;
                }
                
                const savedTheme = localStorage.getItem('theme');
                const isDarkMode = savedTheme ? savedTheme === 'dark-mode' : true;
                
                setTheme(isDarkMode);
                
                themeToggleDesktop.addEventListener('change', function() {
                    setTheme(themeToggleDesktop.checked);
                });
                
                themeToggleMobile.addEventListener('change', function() {
                    setTheme(themeToggleMobile.checked);
                });
                
                const mobileMenuButton = document.querySelector('.mobile-menu-button');
                const mobileMenu = document.querySelector('.mobile-menu');
                
                mobileMenuButton.addEventListener('click', function() {
                    mobileMenu.classList.toggle('active');
                    mobileMenuButton.classList.toggle('active');
                    
                    if (mobileMenuButton.classList.contains('active')) {
                        mobileMenuButton.innerHTML = '✖';
                    } else {
                        mobileMenuButton.innerHTML = '&#9776;';
                    }
                });
            });
        </script>
        <script>
            window.embeddedChatbotConfig = {
                chatbotId: "YqFutgWaAXNFn4h2QVInM",
                domain: "www.chatbase.co"
            }
        </script>
        <script
            src="https://www.chatbase.co/embed.min.js"
            chatbotId="YqFutgWaAXNFn4h2QVInM"
            domain="www.chatbase.co"
            defer>
        </script>
    </body>
</html>