script.js

// ==========================================
// WANDERLY - JAVASCRIPT
// ==========================================


// ==========================================
// 1. MOBILE MENU
// ==========================================

const mobileMenuBtn = document.getElementById("mobile-menu-btn");
const mobileMenu = document.getElementById("mobile-menu");

mobileMenuBtn.addEventListener("click", () => {
  mobileMenu.classList.toggle("hidden");
});


// Mobile menu link click করলে menu বন্ধ হবে
const mobileLinks = document.querySelectorAll(".mobile-link");

mobileLinks.forEach((link) => {
  link.addEventListener("click", () => {
    mobileMenu.classList.add("hidden");
  });
});


// ==========================================
// 2. DARK MODE
// ==========================================

const themeToggle = document.getElementById("theme-toggle");
const themeToggleMobile = document.getElementById("theme-toggle-mobile");


// আগে user dark mode select করেছিল কিনা check
const savedTheme = localStorage.getItem("wanderly-theme");

if (savedTheme === "dark") {
  document.documentElement.classList.add("dark");
}


// Theme icon update করার function
function updateThemeIcon() {
  const isDarkMode =
    document.documentElement.classList.contains("dark");

  if (themeToggle) {
    themeToggle.textContent = isDarkMode ? "☀️" : "🌙";
  }

  if (themeToggleMobile) {
    themeToggleMobile.textContent = isDarkMode ? "☀️" : "🌙";
  }
}


// প্রথমবার icon set
updateThemeIcon();


// Desktop dark mode button
themeToggle.addEventListener("click", () => {
  document.documentElement.classList.toggle("dark");

  const isDarkMode =
    document.documentElement.classList.contains("dark");

  localStorage.setItem(
    "wanderly-theme",
    isDarkMode ? "dark" : "light"
  );

  updateThemeIcon();
});


// Mobile dark mode button
themeToggleMobile.addEventListener("click", () => {
  document.documentElement.classList.toggle("dark");

  const isDarkMode =
    document.documentElement.classList.contains("dark");

  localStorage.setItem(
    "wanderly-theme",
    isDarkMode ? "dark" : "light"
  );

  updateThemeIcon();
});


// ==========================================
// 3. DESTINATION SEARCH
// ==========================================

const searchInput =
  document.getElementById("destination-search");

const destinationCards =
  document.querySelectorAll(".destination-card");


searchInput.addEventListener("input", () => {

  const searchText =
    searchInput.value.toLowerCase().trim();


  destinationCards.forEach((card) => {

    const destinationName =
      card.dataset.name.toLowerCase();


    if (destinationName.includes(searchText)) {

      card.classList.remove("hidden");

    } else {

      card.classList.add("hidden");

    }

  });

});


// ==========================================
// 4. FAVORITE BUTTON
// ==========================================

const favoriteButtons =
  document.querySelectorAll(".favorite-btn");


let favorites = JSON.parse(
  localStorage.getItem("wanderly-favorites") || "[]"
);


favoriteButtons.forEach((button) => {

  const card =
    button.closest(".destination-card");

  const destinationName =
    card.dataset.name;


  // আগে favorite করা থাকলে heart filled থাকবে
  if (favorites.includes(destinationName)) {

    button.textContent = "♥";

  } else {

    button.textContent = "♡";

  }


  // Button click
  button.addEventListener("click", () => {

    if (favorites.includes(destinationName)) {

      // Favorite থেকে remove
      favorites = favorites.filter(
        (name) => name !== destinationName
      );

      button.textContent = "♡";

    } else {

      // Favorite এ add
      favorites.push(destinationName);

      button.textContent = "♥";

    }


    // Browser storage এ save
    localStorage.setItem(
      "wanderly-favorites",
      JSON.stringify(favorites)
    );

  });

});


// ==========================================
// 5. NEWSLETTER
// ==========================================

const newsletterForm =
  document.getElementById("newsletter-form");


newsletterForm.addEventListener("submit", (event) => {

  // Page reload বন্ধ
  event.preventDefault();


  const emailInput =
    newsletterForm.querySelector("input[type='email']");


  const email =
    emailInput.value.trim();


  if (email === "") {

    alert("Please enter your email address.");

    return;

  }


  alert(
    "Thank you for subscribing to Wanderly!"
  );


  // Form clear
  newsletterForm.reset();

});


// ==========================================
// 6. BOOK NOW BUTTON
// ==========================================

const bookButtons =
  document.querySelectorAll(".book-now");


bookButtons.forEach((button) => {

  button.addEventListener("click", () => {

    alert(
      "Booking feature is coming soon!"
    );

  });

});


// ==========================================
// 7. SMOOTH SCROLL
// ==========================================

const navLinks =
  document.querySelectorAll('a[href^="#"]');


navLinks.forEach((link) => {

  link.addEventListener("click", (event) => {

    const targetId =
      link.getAttribute("href");


    if (
      !targetId ||
      targetId === "#"
    ) {
      return;
    }


    const target =
      document.querySelector(targetId);


    if (target) {

      event.preventDefault();


      target.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });

    }

  });

});


// ==========================================
// 8. CONSOLE MESSAGE
// ==========================================

console.log(
  "🌍 Wanderly website loaded successfully!"
);