document.addEventListener("DOMContentLoaded", function () {

  let el = document.querySelector('div.slider')


  const leafContainer = document.createElement("div");
  leafContainer.id = "leaves";
  el.appendChild(leafContainer);

  const windContainer = document.createElement("div");
  windContainer.id = "wind";
  el.appendChild(windContainer);

  const leafIcons = ["🍂", "🍁", "🍃", "🧸","🍃", "🍎"];
  const maxLeaves = 20;
  let amount = 0;
  let windDirection = 1;
  let windStrength = 0;

  function randomSwing(t) {
    const amplitudes = [1, 0.5, 0.8];
    const frequencies = [2, 3, 1.5];
    const phaseShifts = [0, Math.PI / 2, Math.PI];
    let result = 0;
    for (let i = 0; i < amplitudes.length; i++) {
      result += amplitudes[i] * Math.sin(frequencies[i] * t + phaseShifts[i]);
    }
    return result;
  }

  function createLeaf() {
    if (amount <= maxLeaves) {
      const leaf = document.createElement("div");
      leaf.className = "leaf";
      leaf.innerHTML = leafIcons[Math.floor(Math.random() * leafIcons.length)];

      const size = Math.random() * 25 + 20;
      leaf.style.fontSize = `${size}px`;

      const startPosition = Math.random() * window.innerWidth;
      leaf.style.left = `${startPosition}px`;
      leaf.style.top = `-20px`;

      // Assign a random depth layer (1-3) for parallax effect
      const depthLayer = Math.floor(Math.random() * 3) + 1;
      leaf.dataset.depth = depthLayer;

      leafContainer.appendChild(leaf);
      amount++;
      animateLeaf(leaf);
    }
  }

  function animateLeaf(leaf) {
    const depthLayer = parseInt(leaf.dataset.depth);
    const speed = (Math.random() * 2 + 1) * (4 - depthLayer); // Faster for lower depth layers
    const amplitude = Math.random() * 20 + 10;
    const frequency = Math.random() * 0.1 + 0.05;
    const phase = Math.random() * Math.PI * 2;

    function moveLeaf(t) {
      const currentTop = parseFloat(getComputedStyle(leaf).top);
      const currentLeft = parseFloat(getComputedStyle(leaf).left);

      // Apply parallax effect: different speeds based on depth layer
      leaf.style.top = `${currentTop + speed}px`;
      leaf.style.transform = `rotate3d(1, 1, 0, ${(currentTop / 2) % 360}deg)`;

      const sideToSide = randomSwing(t + phase) + windStrength * windDirection;
      leaf.style.left = `${currentLeft + sideToSide}px`;

      if (currentTop > window.innerHeight) {
        amount--;
        leaf.remove();
      } else {
        requestAnimationFrame((timestamp) => moveLeaf(timestamp / 1000));
      }
    }

    requestAnimationFrame((timestamp) => moveLeaf(timestamp / 1000));
  }

  function createWindGust(windDirection) {
    const gust = document.createElement("div");
    const size = Math.random() * 30 + 30;
    gust.className = `wind-gust ${windDirection === -1 ? 'left' : 'right'}`;
    gust.style.width = `${size}px`;
    gust.style.height = `5px`;
    gust.style.left = `${Math.random() * window.innerWidth}px`;
    gust.style.top = `${Math.random() * window.innerHeight}px`;
    gust.style.opacity = 0.5;

    windContainer.appendChild(gust);
    setTimeout(() => gust.remove(), 1000);
  }

  function easeWindStrength(start, end, duration) {
    const startTime = performance.now();

    function updateWindStrength(currentTime) {
      const elapsedTime = currentTime - startTime;
      const progress = Math.min(elapsedTime / duration, 1);
      windStrength = start + (end - start) * progress;

      if (progress < 1) {
        requestAnimationFrame(updateWindStrength);
      }
    }

    requestAnimationFrame(updateWindStrength);
  }

  function triggerWindBurst() {
    windDirection = Math.random() > 0.5 ? 1 : -1;
    easeWindStrength(0, Math.random() * 5 + 5, 1500);
    for (let i = 0; i < 40; i++) {
      setTimeout(() => createWindGust(windDirection), i * 50+100);
    }

    setTimeout(() => easeWindStrength(windStrength, 0, 2000), 3000);
  }

  function createLeafFall() {
    setInterval(createLeaf, 500);
    setInterval(triggerWindBurst, 7000);
  }

  createLeafFall();
});