app.js

document.addEventListener("DOMContentLoaded", () => {
  const t = window.t

  if (typeof t === "undefined") {
    console.error("[v0] Translations not loaded")
    return
  }

  // Custom Cursor
  const cursor = document.getElementById("custom-cursor")
  let mouseX = 0,
    mouseY = 0
  let cursorX = 0,
    cursorY = 0

  document.addEventListener("mousemove", (e) => {
    mouseX = e.clientX
    mouseY = e.clientY
    cursor.classList.add("active")
  })

  function animateCursor() {
    cursorX += (mouseX - cursorX) * 0.15
    cursorY += (mouseY - cursorY) * 0.15
    cursor.style.left = cursorX + "px"
    cursor.style.top = cursorY + "px"
    requestAnimationFrame(animateCursor)
  }
  animateCursor()

  // Cursor hover effects
  document.querySelectorAll("button, a").forEach((el) => {
    el.addEventListener("mouseenter", () => cursor.classList.add("hover"))
    el.addEventListener("mouseleave", () => cursor.classList.remove("hover"))
  })

  // Scroll functionality
  const scrollContainer = document.getElementById("scroll-container")
  let currentSection = 0
  let touchStartY = 0
  let touchStartX = 0

  function scrollToSection(index) {
    const sectionWidth = window.innerWidth
    scrollContainer.scrollTo({
      left: sectionWidth * index,
      behavior: "smooth",
    })
    currentSection = index
  }

  // Scroll buttons
  document.querySelectorAll("[data-scroll-to]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const target = Number.parseInt(btn.getAttribute("data-scroll-to"))
      scrollToSection(target)
    })
  })

  // Touch navigation
  scrollContainer.addEventListener(
    "touchstart",
    (e) => {
      touchStartY = e.touches[0].clientY
      touchStartX = e.touches[0].clientX
    },
    { passive: true },
  )

  scrollContainer.addEventListener(
    "touchend",
    (e) => {
      const touchEndY = e.changedTouches[0].clientY
      const touchEndX = e.changedTouches[0].clientX
      const deltaY = touchStartY - touchEndY
      const deltaX = touchStartX - touchEndX

      if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50) {
        if (deltaY > 0 && currentSection < 4) {
          scrollToSection(currentSection + 1)
        } else if (deltaY < 0 && currentSection > 0) {
          scrollToSection(currentSection - 1)
        }
      }
    },
    { passive: true },
  )

  // Wheel navigation
  scrollContainer.addEventListener(
    "wheel",
    (e) => {
      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
        e.preventDefault()
        scrollContainer.scrollBy({ left: e.deltaY, behavior: "instant" })

        const sectionWidth = window.innerWidth
        const newSection = Math.round(scrollContainer.scrollLeft / sectionWidth)
        if (newSection !== currentSection) {
          currentSection = newSection
        }
      }
    },
    { passive: false },
  )

  // Scroll tracking
  scrollContainer.addEventListener(
    "scroll",
    () => {
      const sectionWidth = window.innerWidth
      const newSection = Math.round(scrollContainer.scrollLeft / sectionWidth)
      if (newSection !== currentSection && newSection >= 0 && newSection <= 4) {
        currentSection = newSection
      }
    },
    { passive: true },
  )

  // Intersection Observer for reveal animations
  const observerOptions = {
    root: null,
    threshold: 0.3,
    rootMargin: "0px",
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible")
      }
    })
  }, observerOptions)

  document.querySelectorAll(".reveal-left, .reveal-right, .reveal-top, .reveal-bottom").forEach((el) => {
    observer.observe(el)
  })

  // Populate content
  document.getElementById("hero-title").textContent = t.hero.title
  document.getElementById("hero-description").textContent = t.hero.description
  document.getElementById("cta-primary").textContent = t.hero.cta_primary
  document.getElementById("scroll-hint").textContent = t.hero.scroll_hint
  document.getElementById("scroll-hint-work").textContent = t.hero.scroll_hint
  document.getElementById("scroll-hint-services").textContent = t.hero.scroll_hint
  document.getElementById("scroll-hint-about").textContent = t.hero.scroll_hint

  // Work section
  document.getElementById("work-heading").textContent = t.work.heading
  document.getElementById("work-subtitle").textContent = t.work.subtitle

  // Skills section
  const skillsGrid = document.getElementById("skills-grid")
  t.work.skills.forEach((skill, i) => {
    const card = document.createElement("div")
    card.className = "skill-card reveal-bottom"
    card.style.transitionDelay = `${i * 100}ms`
    card.innerHTML = `
      <div class="skill-header">
        <h3 class="skill-name">${skill.name}</h3>
        <span class="skill-level">${skill.level}</span>
      </div>
      <p class="skill-description">${skill.description}</p>
      <div class="skill-accent"></div>
    `
    skillsGrid.appendChild(card)
    observer.observe(card)
  })

  // Services section
  document.getElementById("services-heading").textContent = t.services.heading
  document.getElementById("services-subtitle").textContent = t.services.subtitle

  const servicesGrid = document.getElementById("services-grid")
  const directions = ["top", "right", "left", "bottom"]
  t.services.items.forEach((service, i) => {
    const card = document.createElement("div")
    card.className = `service-card reveal-${directions[i]}`
    card.style.transitionDelay = `${i * 150}ms`
    card.innerHTML = `
      <div class="service-header">
        <div class="service-line"></div>
        <span class="service-number">0${i + 1}</span>
      </div>
      <h3 class="service-title">${service.title}</h3>
      <p class="service-description">${service.description}</p>
    `
    servicesGrid.appendChild(card)
    observer.observe(card)
  })

  // About section
  document.getElementById("about-heading").textContent = t.about.heading
  document.getElementById("about-description1").textContent = t.about.description1
  document.getElementById("about-description2").textContent = t.about.description2

  const statsList = document.getElementById("stats-list")
  t.about.stats.forEach((stat, i) => {
    const direction = ["right", "left", "right"][i]
    const item = document.createElement("div")
    item.className = `stat-item reveal-${direction}`
    item.style.transitionDelay = `${300 + i * 150}ms`
    item.innerHTML = `
      <div class="stat-value">${stat.value}</div>
      <div>
        <div class="stat-label">${stat.label}</div>
        <div class="stat-sublabel">${stat.sublabel}</div>
      </div>
    `
    statsList.appendChild(item)
    observer.observe(item)
  })


  document.getElementById("about-cta-secondary").textContent = t.about.cta_secondary

  // Contact section
  document.getElementById("contact-heading").textContent = t.contact.heading
  document.getElementById("contact-subtitle").textContent = t.contact.subtitle
  document.getElementById("contact-email-label").textContent = t.contact.email_label
  document.getElementById("contact-phone-label").textContent = t.contact.phone_label
  document.getElementById("contact-location-label").textContent = t.contact.location_label
  document.getElementById("contact-email").textContent = t.contact.email
  document.getElementById("contact-phone").textContent = t.contact.phone
  document.getElementById("contact-location").textContent = t.contact.location


  document.getElementById("form-name-label").textContent = t.contact.form.name_label
  document.getElementById("form-name").placeholder = t.contact.form.name_placeholder
  document.getElementById("form-email-label").textContent = t.contact.form.email_label
  document.getElementById("form-email").placeholder = t.contact.form.email_placeholder
  document.getElementById("form-message-label").textContent = t.contact.form.message_label
  document.getElementById("form-message").placeholder = t.contact.form.message_placeholder
  document.getElementById("form-submit").textContent = t.contact.form.submit

  // Form submission
  document.getElementById("contact-form").addEventListener("submit", async (e) => {
    e.preventDefault()
    const submitBtn = document.getElementById("form-submit")
    const successMsg = document.getElementById("form-success")

    submitBtn.textContent = t.contact.form.submitting
    submitBtn.disabled = true

    await new Promise((resolve) => setTimeout(resolve, 1500))

    submitBtn.textContent = t.contact.form.submit
    submitBtn.disabled = false

    document.getElementById("contact-form").reset()
    successMsg.textContent = t.contact.form.success
    successMsg.classList.add("show")

    setTimeout(() => {
      successMsg.classList.remove("show")
    }, 5000)
  })

  // Button actions
  document.getElementById("cta-primary").addEventListener("click", () => {
    scrollToSection(4) // Navigate to contact section
  })

  document.getElementById("about-cta-secondary").addEventListener("click", () => {
    scrollToSection(4)
  })

  // Load animation
  setTimeout(() => {
    document.querySelector(".shader-background").classList.add("loaded")
    document.querySelector(".main-container").classList.add("loaded")
  }, 100)
})