document.addEventListener('DOMContentLoaded', function () {
  // Création des éléments pour les cercles
  const outerCircle = document.createElement('div');
  const innerCircle = document.createElement('div');

  // Ajout des classes pour le style
  outerCircle.classList.add('pointer-outer');
  innerCircle.classList.add('pointer-inner');

  // Ajout au DOM
  document.body.appendChild(outerCircle);
  document.body.appendChild(innerCircle);

  // Ajout des styles CSS
  const style = document.createElement('style');
  style.innerHTML = `
    .pointer-outer {
      position: fixed;
      width: 40px;
      height: 40px;
      border: 2px solid #000;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 9999;
      transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
    }

    .pointer-inner {
      position: fixed;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 10000;
      mix-blend-mode: difference;
      transition: transform 0.05s ease;
    }

    body {
      cursor: none;
    }

    a, button, [role="button"], input, textarea, select {
      cursor: none;
    }
  `;
  document.head.appendChild(style);

  // Variables pour stocker les positions
  let mouseX = 0, mouseY = 0;
  let outerX = 0, outerY = 0;
  let hoveringLink = false;
  let hoveredElement = null;

  // Facteur de retard (0-1) - plus la valeur est basse, plus le délai est important
  const delay = 0.15;

  // Fonction pour actualiser la position du cercle interne
  function updateInnerPosition(e) {
    const {clientX, clientY} = e;
    mouseX = clientX;
    mouseY = clientY;

    // Mise à jour immédiate du cercle interne
    innerCircle.style.left = `${mouseX}px`;
    innerCircle.style.top = `${mouseY}px`;
  }

  // Fonction d'animation pour le cercle externe avec délai
  function animateOuterCircle() {
    if (!hoveringLink) {
      // Mode normal: suivre la souris avec délai
      outerX += (mouseX - outerX) * delay;
      outerY += (mouseY - outerY) * delay;

      outerCircle.style.left = `${outerX}px`;
      outerCircle.style.top = `${outerY}px`;
    } else if (hoveredElement) {
      // Mode survol de lien: rester centré sur le lien
      const rect = hoveredElement.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;

      outerCircle.style.left = `${centerX}px`;
      outerCircle.style.top = `${centerY}px`;
    }

    requestAnimationFrame(animateOuterCircle);
  }

  // Démarrer l'animation
  animateOuterCircle();

  // Écoute des mouvements de souris
  document.addEventListener('mousemove', updateInnerPosition);

  // Effet sur éléments interactifs normaux (boutons, inputs, etc.)
  document.querySelectorAll('button, [role="button"], input, textarea, select').forEach(el => {
    el.addEventListener('mouseenter', () => {
      outerCircle.style.transform = 'translate(-50%, -50%) scale(1.5)';
      innerCircle.style.transform = 'translate(-50%, -50%) scale(1.2)';
    });

    el.addEventListener('mouseleave', () => {
      outerCircle.style.transform = 'translate(-50%, -50%) scale(1)';
      innerCircle.style.transform = 'translate(-50%, -50%) scale(1)';
    });
  });

  // Effet spécial pour les liens
  document.querySelectorAll('a').forEach(el => {
    el.addEventListener('mouseenter', () => {
      hoveringLink = true;
      hoveredElement = el;

      const rect = el.getBoundingClientRect();
      const padding = 10; // Marge autour du lien

      // Adapter à la forme rectangulaire du lien avec padding
      outerCircle.style.width = `${rect.width + padding * 2}px`;
      outerCircle.style.height = `${rect.height + padding * 2}px`;
      outerCircle.style.borderRadius = '12px'; // Coins arrondis
      innerCircle.style.transform = 'translate(-50%, -50%) scale(1.2)';
    });

    el.addEventListener('mouseleave', () => {
      hoveringLink = false;
      hoveredElement = null;

      // Réinitialiser la taille et forme du cercle extérieur
      outerCircle.style.width = '40px';
      outerCircle.style.height = '40px';
      outerCircle.style.borderRadius = '50%'; // Revenir à un cercle
      innerCircle.style.transform = 'translate(-50%, -50%) scale(1)';
    });
  });

  // Effet au clic
  document.addEventListener('mousedown', () => {
    if (hoveringLink) {
      outerCircle.style.transform = 'translate(-50%, -50%) scale(0.95)';
    } else {
      outerCircle.style.transform = 'translate(-50%, -50%) scale(0.9)';
    }
    innerCircle.style.transform = 'translate(-50%, -50%) scale(0.9)';
  });

  document.addEventListener('mouseup', () => {
    if (!hoveringLink) {
      outerCircle.style.transform = 'translate(-50%, -50%) scale(1)';
    } else {
      outerCircle.style.transform = 'translate(-50%, -50%) scale(1)';
    }
    innerCircle.style.transform = 'translate(-50%, -50%) scale(1)';
  });
});