CS104_Assignment_1/script.js

// Global Tea Emporium - Optimized JavaScript

document.addEventListener("DOMContentLoaded", function () {
  // ===== FAQ ACCORDION =====
  const faqQuestions = document.querySelectorAll(".faq-question");

  faqQuestions.forEach((question) => {
    question.addEventListener("click", function () {
      const answer = this.nextElementSibling;
      const toggle = this.querySelector(".faq-toggle");
      const isExpanded = this.getAttribute("aria-expanded") === "true";

      // Close all other FAQ items
      faqQuestions.forEach((otherQuestion) => {
        if (otherQuestion !== this) {
          const otherAnswer = otherQuestion.nextElementSibling;
          const otherToggle = otherQuestion.querySelector(".faq-toggle");

          otherQuestion.setAttribute("aria-expanded", "false");
          otherAnswer.classList.remove("active");
          otherToggle.classList.remove("active");
        }
      });

      // Toggle current FAQ item
      this.setAttribute("aria-expanded", !isExpanded);
      answer.classList.toggle("active");
      toggle.classList.toggle("active");
    });

    // Add keyboard navigation
    question.addEventListener("keydown", function (e) {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        this.click();
      }
    });
  });

  // ===== IMAGE GALLERY =====
  const galleryImages = [
    {
      src: "images/green-tea-leaves.webp",
      alt: "Premium Green Tea Leaves",
      caption: "Premium Green Tea Leaves - Hand-picked from our finest gardens",
    },
    {
      src: "images/Indian Black Teas.webp",
      alt: "Indian Black Tea Selection",
      caption:
        "Authentic Indian Black Teas - Rich and robust flavors from Assam and Darjeeling",
    },
    {
      src: "images/Oolong Selections.jpg",
      alt: "Oolong Tea Collection",
      caption:
        "Traditional Oolong Selections - Complex flavors from Taiwan and China",
    },
  ];

  const galleryImage = document.getElementById("gallery-image");
  const galleryCaption = document.getElementById("gallery-caption");
  const thumbnails = document.querySelectorAll(".thumbnail");
  let currentIndex = 0;

  if (!galleryImage || !galleryCaption) return;

  // Update gallery display
  function updateGallery(index) {
    currentIndex = index;
    const image = galleryImages[index];
    galleryImage.src = image.src;
    galleryImage.alt = image.alt;
    galleryCaption.textContent = image.caption;

    thumbnails.forEach((thumb, i) => {
      thumb.classList.toggle("active", i === index);
    });
  }

  // Navigation functions
  const nextImage = () =>
    updateGallery((currentIndex + 1) % galleryImages.length);
  const prevImage = () =>
    updateGallery(
      (currentIndex - 1 + galleryImages.length) % galleryImages.length
    );

  // Event listeners
  document.getElementById("next-btn")?.addEventListener("click", nextImage);
  document.getElementById("prev-btn")?.addEventListener("click", prevImage);

  thumbnails.forEach((thumb, index) => {
    thumb.addEventListener("click", () => updateGallery(index));
  });

  // Auto-advance every 10 seconds
  setInterval(nextImage, 10000);

  // ===== CONTACT FORM =====
  const contactForm = document.querySelector(".contact-form");
  if (contactForm) {
    const validateField = (field) => {
      const group = field.closest(".form-group");
      const error = group?.querySelector(".error-message");
      let isValid = true;
      let message = "";

      group?.classList.remove("error", "success");

      if (field.required && !field.value.trim()) {
        isValid = false;
        message = "This field is required.";
      } else if (
        field.type === "email" &&
        field.value &&
        !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value)
      ) {
        isValid = false;
        message = "Please enter a valid email address.";
      } else if (
        field.type === "tel" &&
        field.value &&
        !/^[\d\s\-\+\(\)]+$/.test(field.value)
      ) {
        isValid = false;
        message = "Please enter a valid phone number.";
      }

      if (error) error.textContent = message;
      group?.classList.add(
        isValid && field.value.trim() ? "success" : isValid ? "" : "error"
      );
      return isValid;
    };

    contactForm.querySelectorAll("input, textarea").forEach((field) => {
      field.addEventListener("blur", () => validateField(field));
      field.addEventListener("input", () => {
        if (field.closest(".form-group")?.classList.contains("error")) {
          validateField(field);
        }
      });
    });

    contactForm.addEventListener("submit", (e) => {
      e.preventDefault();
      const fields = contactForm.querySelectorAll("input, textarea");
      const isValid = Array.from(fields).every(validateField);

      if (isValid) {
        const submitBtn = contactForm.querySelector(".submit-btn");
        const originalText = submitBtn.textContent;
        submitBtn.textContent = "Sending...";
        submitBtn.disabled = true;

        setTimeout(() => {
          const formData = new FormData(contactForm);
          const data = Object.fromEntries(formData);
          alert(`Thank you, ${data.name}! We'll contact you at ${data.email}.`);
          contactForm.reset();
          fields.forEach((f) =>
            f.closest(".form-group")?.classList.remove("error", "success")
          );
          submitBtn.textContent = originalText;
          submitBtn.disabled = false;
        }, 2000);
      }
    });
  }

  // ===== HOVER EFFECTS =====
  document
    .querySelectorAll(".services-list li, .value-item, .timeline-item")
    .forEach((item) => {
      item.addEventListener("mouseenter", () => {
        item.style.transform = "translateY(-2px)";
        item.style.transition = "transform 0.3s ease";
      });
      item.addEventListener("mouseleave", () => {
        item.style.transform = "translateY(0)";
      });
    });

  // ===== ACTIVE NAVIGATION =====
  const currentPage = location.pathname.split("/").pop();
  document.querySelectorAll(".main-nav a").forEach((link) => {
    const linkPage = link.getAttribute("href");
    if (
      linkPage === currentPage ||
      (currentPage === "" && linkPage === "index.html")
    ) {
      link.style.backgroundColor = "#daa520";
      link.style.color = "#5d4037";
    }
  });
});