// script.js - Converted from React components to vanilla JavaScript

// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Initialize all animations and interactions
    initNavbar();
    initHeroAnimations();
    initScrollAnimations();
    initSmoothScrolling();
    initWhatsAppButton();
    initMobileMenu();
    initFadeInElements();
    new Swiper('.mySwiper', {
        slidesPerView: 2,
        spaceBetween: 20,
        loop: true,
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
        breakpoints: {
        768: {
            slidesPerView: 3,
        },
        1024: {
            slidesPerView: 5,
        },
        },
    });

    document.getElementById("mobileMenuBtn").addEventListener("click", function() {
        document.getElementById("mobileMenu").classList.toggle("hidden");
    });

    const lightbox = GLightbox({
        selector: '.glightbox'
    });

    document.querySelectorAll('[id^="carousel-"]').forEach((carousel) => {
        let images = carousel.querySelectorAll('.carousel-image');
        let dots = carousel.querySelectorAll('.dot');
        let current = 0;

        function showSlide(index) {
            images.forEach((img, i) => {
                img.classList.toggle('opacity-100', i === index);
                img.classList.toggle('z-10', i === index);
                img.classList.toggle('opacity-0', i !== index);
                img.classList.toggle('z-0', i !== index);
            });
            dots.forEach((dot, i) => {
                dot.classList.toggle('bg-white', i === index);
                dot.classList.toggle('bg-white/50', i !== index);
            });
            current = index;
        }

        carousel.querySelector('.prev').addEventListener('click', () => {
            let newIndex = (current - 1 + images.length) % images.length;
            showSlide(newIndex);
        });

        carousel.querySelector('.next').addEventListener('click', () => {
            let newIndex = (current + 1) % images.length;
            showSlide(newIndex);
        });

        dots.forEach((dot, i) => {
            dot.addEventListener('click', () => showSlide(i));
        });
    });
});

function sendMail(event) {
    event.preventDefault();

    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();
    const subject = document.getElementById("subject").value.trim();
    const message = document.getElementById("message").value.trim();

    const to = document.getElementById("mail_to").value.trim();
    const mailSubject = encodeURIComponent(subject || "Contact Form Submission");
    const mailBody = encodeURIComponent(
        `${name}\n${email}\n\n${message}`
    );

    window.location.href = `mailto:${to}?subject=${mailSubject}&body=${mailBody}`;
}

function toggleSubMenu() {
    const subMenu = document.getElementById("aboutSubMenu");
    subMenu.classList.toggle("hidden");
}

// Navbar functionality
function initNavbar() {
  const navbar = document.querySelector('.navbar');

  // Handle navbar scroll effect
  function handleScroll() {
    if (window.scrollY > 50) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
  }

  window.addEventListener('scroll', handleScroll);
  // Initial check
  handleScroll();
}

// Mobile menu toggle
function initMobileMenu() {
  const mobileMenuButton = document.querySelector('.md\\:hidden button');
  const mobileMenu = document.querySelector('.md\\:hidden.bg-white');

  if (mobileMenuButton && mobileMenu) {
    mobileMenuButton.addEventListener('click', function() {
      if (mobileMenu.style.display === 'none' || mobileMenu.style.display === '') {
        mobileMenu.style.display = 'block';

        // Add animation
        mobileMenu.style.opacity = '0';
        mobileMenu.style.height = '0';

        setTimeout(() => {
          mobileMenu.style.transition = 'opacity 0.3s ease, height 0.3s ease';
          mobileMenu.style.opacity = '1';
          mobileMenu.style.height = 'auto';
        }, 10);
      } else {
        mobileMenu.style.opacity = '0';
        mobileMenu.style.height = '0';

        setTimeout(() => {
          mobileMenu.style.display = 'none';
        }, 300);
      }
    });
  }
}

// Hero section animations
function initHeroAnimations() {
  // Create floating petals animation (converted from Hero.tsx)
  const heroSection = document.querySelector('.hero-section');

  if (heroSection) {
    // Create floating petals animation
    const createPetal = () => {
      const petal = document.createElement('div');
      petal.classList.add('petal');

      // Randomize petal properties
      const size = Math.random() * 15 + 10;
      const posX = Math.random() * window.innerWidth;
      const delay = Math.random() * 5;
      const duration = Math.random() * 10 + 10;
      const rotation = Math.random() * 360;

      // Set petal styles
      petal.style.width = `${size}px`;
      petal.style.height = `${size}px`;
      petal.style.left = `${posX}px`;
      petal.style.top = '-20px';
      petal.style.backgroundColor = 'var(--blush-pink)';
      petal.style.borderRadius = '50% 0 50% 0';
      petal.style.transform = `rotate(${rotation}deg)`;
      petal.style.opacity = '0.7';
      petal.style.position = 'absolute';
      petal.style.pointerEvents = 'none';

      heroSection.appendChild(petal);

      // Animate petal falling using GSAP-like animation with vanilla JS
      const startTime = Date.now();
      const endY = window.innerHeight + 100;
      const endX = posX + (Math.random() * 200 - 100);
      const endRotation = rotation + Math.random() * 360;

      function animatePetal() {
        const currentTime = Date.now();
        const elapsed = (currentTime - startTime) / 1000; // seconds

        if (elapsed < duration) {
          const progress = elapsed / duration;
          const easeProgress = easeInOut(progress);

          const currentY = endY * easeProgress;
          const currentX = posX + (endX - posX) * easeProgress;
          const currentRotation = rotation + (endRotation - rotation) * easeProgress;
          const currentOpacity = 0.7 * (1 - easeProgress);

          petal.style.transform = `translate(${currentX - posX}px, ${currentY}px) rotate(${currentRotation}deg)`;
          petal.style.opacity = currentOpacity.toString();

          requestAnimationFrame(animatePetal);
        } else {
          petal.remove();
          createPetal();
        }
      }

      // Start animation after delay
      setTimeout(() => {
        requestAnimationFrame(animatePetal);
      }, delay * 1000);
    };

    // Create initial petals
    for (let i = 0; i < 15; i++) {
      setTimeout(() => createPetal(), i * 300);
    }
  }

  // Animate hero content
  const heroContent = document.querySelector('.hero-section .text-center.md\\:text-left');
  if (heroContent) {
    heroContent.style.opacity = '0';
    heroContent.style.transform = 'translateX(-50px)';

    setTimeout(() => {
      heroContent.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
      heroContent.style.opacity = '1';
      heroContent.style.transform = 'translateX(0)';
    }, 100);
  }

  // Animate hero image
  const heroImage = document.querySelector('.hero-section .floating');
  if (heroImage) {
    heroImage.style.opacity = '0';
    heroImage.style.transform = 'translateY(50px)';

    setTimeout(() => {
      heroImage.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
      heroImage.style.opacity = '1';
      heroImage.style.transform = 'translateY(0)';
    }, 300);
  }

  // Animate decorative elements
  const decorativeElements = document.querySelectorAll('.hero-section .absolute.rounded-full:not(.floating)');
  decorativeElements.forEach((element, index) => {
    element.style.opacity = '0';

    setTimeout(() => {
      element.style.transition = 'opacity 1s ease';
      element.style.opacity = index === 0 ? '0.6' : '0.4';
    }, 800 + (index * 200));
  });
}

// Scroll animations for sections
function initScrollAnimations() {
  const sections = document.querySelectorAll('section');

  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  };

  const sectionObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const section = entry.target;
        const fadeElements = section.querySelectorAll('.fade-in:not(.animated)');

        fadeElements.forEach((element, index) => {
          setTimeout(() => {
            element.classList.add('animated');
            element.style.opacity = '0';
            element.style.transform = 'translateY(20px)';

            setTimeout(() => {
              element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
              element.style.opacity = '1';
              element.style.transform = 'translateY(0)';
            }, 50);
          }, index * 100);
        });
      }
    });
  }, observerOptions);

  sections.forEach(section => {
    sectionObserver.observe(section);
  });
}

// Smooth scrolling for anchor links
function initSmoothScrolling() {
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();

      const targetId = this.getAttribute('href');
      const targetElement = document.querySelector(targetId);

      if (targetElement) {
        const offsetTop = targetElement.getBoundingClientRect().top + window.pageYOffset - 70;

        window.scrollTo({
          top: offsetTop,
          behavior: 'smooth'
        });

        // Close mobile menu if open
        const mobileMenu = document.querySelector('.md\\:hidden.bg-white');
        if (mobileMenu && mobileMenu.style.display === 'block') {
          mobileMenu.style.display = 'none';
        }
      }
    });
  });
}

// WhatsApp button animation
function initWhatsAppButton() {
  const whatsappButton = document.querySelector('.whatsapp-float');

  if (whatsappButton) {
    whatsappButton.addEventListener('mouseenter', () => {
      whatsappButton.style.transform = 'scale(1.1)';
    });

    whatsappButton.addEventListener('mouseleave', () => {
      whatsappButton.style.transform = 'scale(1)';
    });
  }
}

// Initialize fade-in elements
function initFadeInElements() {
  const fadeElements = document.querySelectorAll('.fade-in');

  fadeElements.forEach((element, index) => {
    element.style.opacity = '0';
    element.style.transform = 'translateY(20px)';

    setTimeout(() => {
      element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
      element.style.opacity = '1';
      element.style.transform = 'translateY(0)';
    }, 100 + (index * 100));
  });
}

// Utility functions
function easeInOut(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}