<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <!-- Bootstrap CSS (via CDN) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <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=Montserrat+Alternates&family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Righteous&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#561C24">
  <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=Atomic+Age&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="icons/logo.png" type="image/x-icon">
  <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=Andika:ital,wght@0,400;0,700;1,400;1,700&family=Atomic+Age&family=Encode+Sans+SC:wght@100..900&family=Outfit:wght@100..900&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
  <title>Thugil Creation Contact Us</title>
 </head>
 <body>
  <div class="upper-nav">
   <div class="text-slider">
    <div class="text-item" id="text1">Where Silk Meets Style</div>
    <div class="text-item" id="text2">Crafting Silk, Creating Beauty</div>
    <div class="text-item" id="text3">Luxury in Every Thread</div>
   </div>
   <!-- Left and right navigation buttons using Font Awesome icons -->
   <button class="nav-button prev" onclick="moveSlide('prev')">
    <i class="fa fa-chevron-left"></i>
   </button>
   <button class="nav-button next" onclick="moveSlide('next')">
    <i class="fa fa-chevron-right"></i>
   </button>
  </div>
  <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
   <div class="container-fluid">
    <!-- Wrapper for Logo and Toggle Button -->
    <div class="navbar-header">
     <!-- Navbar Toggler for mobile responsiveness -->
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" id="navbar-toggler">
        <i class="fa-solid fa-bars" style="color: #E8D8C4;"></i>
     </button>
     <!-- Company Logo and Name on the left -->
     <a class="navbar-brand" href="index.html">
      <img src="icons/logo.png" alt="Thugil Creation Logo" style="width: 40px; height: auto; margin-right: 10px;"> Thugil Creation </a>
    </div>
    <!-- Navbar Links and Dropdowns -->
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
     <ul class="navbar-nav">
      <li class="nav-item">
       <a class="nav-link active" aria-current="page" href="index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="thugil-creation-membership.html">Membership</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="thugil-creation.html">Purchase</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </div>
  </nav>
  <!-- Banner Section -->
  <div class="banner">
   <img src="img/IMG_0313.JPG" alt="Image 1" class="active">
   <img src="img/IMG_0301.JPG" alt="Image 2" >
   <img src="img/IMG_0306.JPG" alt="Image 3">
   <img src="img/IMG_0299.JPG" alt="Image 4">
  </div>
  <!-- About Section (Description of the site) -->
  <div class="about-section">
   <h2>About Our Saree Designs</h2>
   <p> Welcome to our platform, where we offer a wide range of unique saree designs that can be used for creating custom sarees. Whether you're looking for intricate traditional patterns or contemporary designs, we have a design for every occasion. Our collection includes a variety of styles, from Kanjivaram to Gadwal, and everything in between, making it easy to find the perfect design for your custom saree. Explore our designs today and create a saree that's truly yours! </p>
  </div>
  <!-- Contact Form Section -->
  <div class="contact-section">
   <div class="col contact-info">
    <h2>Contact Information</h2>
    <p>
     <strong>Email:</strong> thugilcreation@gmail.com
    </p>
    <p>
     <strong>Phone:</strong> (+91) 9994266271, 8838008499
    </p>
    <p>
     <strong>Address:</strong> Kondalampatty, Salem-Tamil Nadu
    </p>
  
    <div class="reviews-container">
     <div class="review-card active">
      <div>
       <h3>Raghavan</h3>
       <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
       </div>
       <p>"The saree designs here are absolutely beautiful. I loved the variety and the ease of customizing my saree!"</p>
      </div>
     </div>
     <div class="review-card">
      <div>
       <h3>Siddharth</h3>
       <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
       </div>
       <p>"I found the perfect design for my wedding saree. The quality and designs are top-notch!"</p>
      </div>
     </div>
     <div class="review-card">
      <div>
       <h3>Vignesh</h3>
       <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
        <i class="fas fa-star-half-alt"></i>
       </div>
       <p>"A fantastic selection of traditional and modern saree designs. Highly recommend for anyone looking to create something unique."</p>
      </div>
     </div>
    </div>
   </div>
   <div class="col contact-form">
    <h2>Get in Touch</h2>
    <form id="contact-form">
     <input type="text" id="name" placeholder="Your Name" required>
     <input type="email" id="email" placeholder="Your Email" required>
     <textarea id="message" placeholder="Your Message" rows="5" required></textarea>
     <button type="submit">Send Message</button>
    </form>
   </div>
  </div>

  <div class="container text-center mt-5 mb-5">
    <div class="tutor mb-5" style="position: relative;">
        <video id="introVideo" width="100%" height="auto" loop muted>
            <!-- Local video source -->
            <source src="videos/intro.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        
        <!-- Explore Button -->
        <a href="" target="_blank" 
           style="position: absolute; bottom: 20px; right: 20px; padding: 10px 20px; background-color: #561C24; color: #fff; text-decoration: none; border-radius: 5px;">
           On the Way!
        </a>
    </div>
</div>
  
   </div>
  <div class="payment mt-0 mb-0">
    <div class="payment-marquee">
        <img src="icons/google-pay-icon.png" alt="Google Pay" class="payment-logo">
        <img src="icons/paytm-icon.png" alt="Paytm" class="payment-logo">
        <img src="icons/phonepe-icon.png" alt="PhonePe" class="payment-logo">
        <img src="icons/razorpay-icon.png" alt="Google Pay" class="payment-logo">
       </div>
  </div>
  <footer class="footer">
    <div class="footer-content">
        <div class="footer-column">
            <h3>About Us</h3>
            <p>At Thugil Creations, we specialize in creating exquisite, handwoven silk sarees that blend timeless tradition with modern elegance.</p>
        </div>
        <div class="footer-column">
            <h3>Quick Links</h3>
            <ul>
              <li><a href="index.html" class="nav-link">Home</a></li>
              <li><a href="thugil-creation.html" class="nav-link">Purchases</a></li>
              <li><a href="#" class="nav-link">Contact</a></li>
              <li><a href="privacy-policy.html" class="nav-link">Privacy Policy</a></li> <!-- Added link -->
              <li><a href="thugilcreation-Policy.html" class="nav-link">Terms & Conditions</a></li> <!-- Added link -->
            </ul>
        </div>
        <div class="footer-column mb-2">
            <h3>Contact Information</h3>
            <p>Email: thugilcreation@gmail.com</p>
            <p>Phone: +91 8838008499 <span style="margin-left: 1%;"></span> +91 9994266271 </p>
            <p>Address: Kondalampatty,Salem-Tamil Nadu</p>
            <div class="social-links">
              <a href="https://www.facebook.com/thugilcreation29" target="_blank">
                <i class="fab fa-facebook-f" style="color: #6D2932;"></i>
              </a>
              <a href="https://www.youtube.com/@THUGILCREATION" target="_blank">
                <i class="fa-brands fa-youtube" style="color: #6D2932;"></i>
              </a>
              <a href="https://www.instagram.com/thugil_creation29/?next=%2F" target="_blank">
                <i class="fab fa-instagram" style="color: #6D2932;"></i>
              </a>
            </div>
            
        </div>
    </div>

   
      
    <div class="footer-bottom">
        <p>&copy; 2024 Thugil Creation. All Rights Reserved.</p>
    </div>
</footer>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <script>
   // JavaScript to automatically change images with fading effect
   let currentIndex = 0;
   const images = document.querySelectorAll('.banner img');

   function changeImage() {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % images.length; // Loop back to first image
    images[currentIndex].classList.add('active');
   }
   setInterval(changeImage, 4000); // Change image every 4 seconds
   // JavaScript for automatic review carousel with fade effect
   let reviewIndex = 0;
   const reviews = document.querySelectorAll('.review-card');

   function changeReview() {
    reviews[reviewIndex].classList.remove('active');
    reviewIndex = (reviewIndex + 1) % reviews.length; // Loop back to first review
    reviews[reviewIndex].classList.add('active');
   }
   setInterval(changeReview, 4000); // Change review every 4 seconds
  </script>
  <!-- Bootstrap JS and Popper.js (via CDN) -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <script>
   // Get the toggle button and the icons container
   const toggleButton = document.getElementById('navbar-toggler');
   const navbarIcons = document.getElementById('navbar-icons');
   // Add event listener to the toggle button to hide/show the icons
   toggleButton.addEventListener('click', function() {
    navbarIcons.classList.toggle('d-none'); // Toggle the d-none class to hide/show
   });
   let currentSlide = 0;
   const slides = document.querySelectorAll('.text-item');
   const totalSlides = slides.length;

   function showSlide(index) {
    const slider = document.querySelector('.text-slider');
    slider.style.transform = `translateX(-${index * 100}%)`;
   }

   function moveSlide(direction) {
    if (direction === 'next') {
     currentSlide = (currentSlide + 1) % totalSlides; // Loop to first slide after last
    } else if (direction === 'prev') {
     currentSlide = (currentSlide - 1 + totalSlides) % totalSlides; // Loop to last slide before first
    }
    showSlide(currentSlide);
   }

   function autoSlide() {
    currentSlide = (currentSlide + 1) % totalSlides;
    showSlide(currentSlide);
   }
   // Auto slide every 3 seconds
   setInterval(autoSlide, 3000);
   // Initial display of first slide
   showSlide(currentSlide);
   // Disable zooming with JavaScript
   document.addEventListener('wheel', function(e) {
    if (e.ctrlKey || e.metaKey) {
     e.preventDefault();
    }
   }, {
    passive: false
   });
   // Disable pinch to zoom on touch devices
   document.addEventListener('touchstart', function(e) {
    if (e.touches.length > 1) {
     e.preventDefault();
    }
   }, {
    passive: false
   });
  </script>
  <script type="module">
   // Import Firebase modules
   import {
    initializeApp
   } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
   import {
    getDatabase,
    ref,
    set
   } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-database.js";
   // Firebase configuration
   const firebaseConfig = {
    apiKey: "AIzaSyBa2JROkkVR6GWboFZJT2G5NMycYa9zRJ8",
    authDomain: "thugilcreations.firebaseapp.com",
    projectId: "thugilcreations",
    storageBucket: "thugilcreations.firebasestorage.app",
    messagingSenderId: "621636941555",
    appId: "1:621636941555:web:9648e3188471af8a2fe986"
   };
   // Initialize Firebase
   const app = initializeApp(firebaseConfig);
   const database = getDatabase(app);
   // Ensure DOM is fully loaded before accessing the form
   document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('contact-form');
    // Check if the form exists
    if (form) {
     form.addEventListener('submit', function(event) {
      event.preventDefault(); // Prevent form from submitting the default way
      // Get values from the form fields
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const message = document.getElementById('message').value;
      // Validation (you can extend this further)
      if (name && email && message) {
       // Fetch the user UID from localStorage
       const userUID = localStorage.getItem('userUID');
       if (!userUID) {
        // If there's no userUID, redirect to the signup page and store the current page URL
        localStorage.setItem('redirectTo', window.location.href); // Save the current page URL
        window.location.href = 'signup.html'; // Redirect to signup page
        return;
       }
       // Reference to the 'messages' node in Firebase Realtime Database, stored under the user's UID
       const messagesRef = ref(database, 'users/' + userUID + '/messages/' + Date.now()); // Use timestamp as unique key
       // Prepare the data object to save
       const messageData = {
        name: name,
        email: email,
        message: message,
        timestamp: Date.now() // Optional: add timestamp for when the message was submitted
       };
       // Save data to Firebase
       set(messagesRef, messageData).then(() => {
        form.reset(); // Optionally reset the form
       }).catch((error) => {
        console.error('Error sending message: ', error);
        alert('Failed to send message. Please try again later.');
       });
      } else {
       alert('Please fill in all fields.');
      }
     });
    } else {
     console.error('Form element with id "contact-form" not found.');
    }
   });
  </script>
  <script>
   // Wait for the page to load and then trigger the download after 5 seconds
   window.onload = function() {
    setTimeout(function() {
     // Retrieve product info from localStorage
     const productData = localStorage.getItem('downloadProduct');
     if (productData) {
      const product = JSON.parse(productData); // Retrieve product from localStorage
      // Proceed with the download
      const imageUrlToDownload = product.originalImageUrl || product.imageUrl; // Use the original image URL
      const link = document.createElement('a');
      link.href = imageUrlToDownload; // Image URL to download
      link.download = product.name + '.jpg'; // You can adjust the file extension based on the image type
      link.click(); // Trigger the download
      // Clear the items from localStorage after download
      localStorage.removeItem('downloadProduct');
      // Optionally close the window after download
      window.close(); // Close the contact page (optional)
     }
    }, 5000); // Wait 5 seconds before allowing the download
   };
   window.addEventListener('load', function() {
    var video = document.getElementById('introVideo');
    var tutorContainer = document.querySelector('.tutor');
    // Play the video once it comes into view and user has unmuted
    var observer = new IntersectionObserver(function(entries) {
     entries.forEach(entry => {
      if (entry.isIntersecting) {
       // The video is in the viewport, start playing
       video.play();
       // Only play audio if unmuted
       if (!video.muted) {
        video.play(); // Resume audio play if unmuted
       }
       // Add ambient light effect when video plays
       tutorContainer.classList.add('playing');
      } else {
       // Pause the video if it's out of the viewport
       video.pause();
       // Remove ambient light effect when video pauses
       tutorContainer.classList.remove('playing');
      }
     });
    }, {
     threshold: 0.5 // Trigger when 50% of the video is in view
    });
    // Observe the video element
    observer.observe(video);
    // Toggle mute/unmute when the video is clicked
    video.addEventListener('click', function() {
     video.muted = !video.muted; // Toggle the muted state
     if (!video.muted) {
      video.play(); // Ensure the audio is played when unmuted
     }
    });
   });

  </script>
 </body>
</html>