document.addEventListener("DOMContentLoaded", function () {
  // Select all buttons that open the modal
  const openModals = document.querySelectorAll(".open-modal");

  // Main modal elements
  const modalComponent = document.querySelector(".form-modal_component");
  const modalMain = document.querySelector(".form-modal_main");
  const modalClose = document.querySelector(".form-modal_close");
  const modalOverlay = document.querySelector(".form-modal_overlay");
  const modalHeading = document.querySelector(".heading-style-h2.is-modal");
  const modalForm = document.querySelector(".form_component");

  // Class to be added
  const variantClass = "w-variant-d4ad5f46-3fcd-49e3-ae12-31434c44344d";

  // Function to open the modal
  function openModal() {
    modalComponent?.classList.add(variantClass);
    modalMain?.classList.add(variantClass);
    modalClose?.classList.add(variantClass);
    modalOverlay?.classList.add(variantClass);
    modalHeading?.classList.add(variantClass);
    modalForm?.classList.add(variantClass);
  }

  // Function to close the modal
  function closeModal() {
    modalComponent?.classList.remove(variantClass);
    modalMain?.classList.remove(variantClass);
    modalClose?.classList.remove(variantClass);
    modalOverlay?.classList.remove(variantClass);
    modalHeading?.classList.remove(variantClass);
    modalForm?.classList.remove(variantClass);
  }

  // Add click event to all .open-modal buttons
  openModals.forEach((btn) => {
    btn.addEventListener("click", openModal);
  });

  // Events to close the modal
  modalClose?.addEventListener("click", closeModal);
  modalOverlay?.addEventListener("click", closeModal);
});