script.js

// Custom cursor
const cursor = document.getElementById("cursor")
const cursorBlur = document.getElementById("cursor-blur")

document.addEventListener("mousemove", (e) => {
  cursor.style.left = e.clientX + "px"
  cursor.style.top = e.clientY + "px"
  cursorBlur.style.left = e.clientX - 200 + "px"
  cursorBlur.style.top = e.clientY - 200 + "px"
})

// Theme toggle
const themeToggle = document.getElementById("theme-toggle-checkbox")
const body = document.body

themeToggle.addEventListener("change", () => {
  body.classList.toggle("dark-theme")
})

// Mobile menu toggle
const burger = document.querySelector(".burger")
const nav = document.querySelector(".nav-links")
const navLinks = document.querySelectorAll(".nav-links li")

burger.addEventListener("click", () => {
  nav.classList.toggle("nav-active")

  navLinks.forEach((link, index) => {
    if (link.style.animation) {
      link.style.animation = ""
    } else {
      link.style.animation = navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s
    }
  })

  burger.classList.toggle("toggle")
})

// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener("click", function (e) {
    e.preventDefault()
    document.querySelector(this.getAttribute("href")).scrollIntoView({
      behavior: "smooth",
    })
  })
})

// Parallax effect
window.addEventListener("scroll", () => {
  const parallaxElements = document.querySelectorAll(".parallax-section")
  parallaxElements.forEach((element) => {
    const speed = element.dataset.speed || 0.5
    element.style.backgroundPositionY = -(window.pageYOffset * speed) + "px"
  })
})

// Package slider
const slider = document.querySelector(".package-slider")
const prevBtn = document.querySelector(".prev-btn")
const nextBtn = document.querySelector(".next-btn")

prevBtn.addEventListener("click", () => {
  slider.scrollBy({ left: -300, behavior: "smooth" })
})

nextBtn.addEventListener("click", () => {
  slider.scrollBy({ left: 300, behavior: "smooth" })
})

// Form submission
const form = document.getElementById("contact-form")
form.addEventListener("submit", (e) => {
  e.preventDefault()
  // Here you would typically send the form data to a server
  alert("Thank you for your message! We will get back to you soon.")
  form.reset()
})

// Intersection Observer for fade-in animations
const faders = document.querySelectorAll(".fade-in")
const appearOptions = {
  threshold: 0.5,
  rootMargin: "0px 0px -100px 0px",
}

const appearOnScroll = new IntersectionObserver((entries, appearOnScroll) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      return
    } else {
      entry.target.classList.add("appear")
      appearOnScroll.unobserve(entry.target)
    }
  })
}, appearOptions)

faders.forEach((fader) => {
  appearOnScroll.observe(fader)
})

// 3D Background
import * as THREE from "three" // Import THREE.js library

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer({ alpha: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const geometry = new THREE.TorusGeometry(10, 3, 16, 100)
const material = new THREE.MeshBasicMaterial({ color: 0xff6b6b, wireframe: true })
const torus = new THREE.Mesh(geometry, material)
scene.add(torus)

camera.position.z = 30

function animate() {
  requestAnimationFrame(animate)
  torus.rotation.x += 0.01
  torus.rotation.y += 0.005
  renderer.render(scene, camera)
}
animate()

// Handle window resize
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})