<script>
document.addEventListener('DOMContentLoaded', function() {
  // Container raiz do componente (SVG + textos)
  const container = document.getElementById('curved-loop-container');
  if (!container) return;

  // ======== PROPRIEDADES (lidas dos atributos data-*) ========
  // Texto que será repetido ao longo do caminho
  const marqueeText = container.dataset.text || '';

  // Velocidade base do movimento (px por "tick" normalizado) — EDITA AQUI via data-speed
  let speed = parseFloat(container.dataset.speed) || 2; // Pixels por segundo (ajustado com um fator mais abaixo)

  // Intensidade da curvatura (altera o ponto de controle da curva Bézier)
  const curveAmount = parseFloat(container.dataset.curve) || 400;

  // Direção inicial do movimento ('left' | 'right')
  const direction = container.dataset.direction || 'left';

  // Habilita interação de arrastar para mudar offset/direção
  const interactive = container.dataset.interactive !== 'false';

  // Classe opcional para estilizar o <text> visível (usa data-classname)
  const className = container.dataset.classname || '';

  if (!marqueeText) return;

  // ======== PREPARO DO TEXTO ========
  // Garante um espaço não separável no fim para evitar "colagens" ao duplicar
  const hasTrailing = /\s|\u00A0$/.test(marqueeText);
  const text = (hasTrailing ? marqueeText.replace(/\s+$/, '') : marqueeText) + '\u00A0';

  // ======== ELEMENTOS DO SVG ========
  const measureText = container.querySelector('#measure-text'); // usado só para medir largura
  const curvedText = container.querySelector('#curved-text');   // <text> visível
  const textPath = container.querySelector('#text-path');       // <textPath> ligado ao caminho
  const path = container.querySelector('#curve-path');          // <path> da curva

  // ======== VARIÁVEIS DE ESTADO ========
  let spacing = 0;           // comprimento (px) do bloco "text" medido
  let offset = 0;            // deslocamento atual do startOffset
  let isReady = false;       // flag de “pronto para animar”
  let animationFrame = null; // id do requestAnimationFrame
  let isDragging = false;    // se o usuário está arrastando no momento
  let lastX = 0;             // posição X anterior no arraste
  let currentDirection = direction; // direção dinâmica (muda após arraste)
  let velocity = 0;          // velocidade do arraste (usada só para inferir direção final)
  let lastTime = performance.now(); // referência de tempo para animação baseada em tempo

  // Aplica classe custom ao <text> principal (para estilização via CSS)
  if (className) {
    curvedText.classList.add(className);
  }

  // ======== ATUALIZA A CURVA COM BASE EM curveAmount ========
  // O ponto de controle (Q) sobe/desce conforme curveAmount
  // EDITA AQUI: Se quiser mudar o caminho base, altere estas coordenadas
  const pathD = `M-100,40 Q500,${40 + curveAmount} 1540,40`;
  path.setAttribute('d', pathD);

  // ======== COMPRIMENTO APROXIMADO DO CAMINHO ========
  // Usado para decidir quantas repetições do texto precisamos colocar
  // EDITA AQUI: Se mudar o viewBox/path, este número pode mudar
  const PATH_LENGTH = 1800;

  // Mede o comprimento “em pixels” do texto (para saber quando repetir)
  function measureTextLength() {
    measureText.textContent = text;
    if (measureText.getComputedTextLength) {
      spacing = measureText.getComputedTextLength();
    } else {
      // Fallback aproximado (caso raro): multiplica por um fator médio de largura por char
      spacing = text.length * 18; // EDITA AQUI: ajuste este fator conforme a fonte usada
    }
    return spacing > 0 ? spacing : 100; // evita zero (que quebraria o loop)
  }

  // Duplica o texto o suficiente para cobrir o caminho e permitir looping sem “buracos”
  function getTotalText() {
    if (spacing <= 0) return text;
    const repeats = Math.ceil(PATH_LENGTH / spacing) + 3; // +3 para sobreposição/segurança
    return Array(repeats).fill(text).join('');
  }

  // ======== INICIALIZAÇÃO ========
  function init() {
    spacing = measureTextLength();
    if (spacing <= 0) {
      // Se a fonte ainda não carregou, tenta de novo (Elementor/webfonts podem atrasar)
      setTimeout(init, 50);
      return;
    }

    // Offset inicial: começa “um bloco” à esquerda para entrar deslizando
    offset = -spacing;
    textPath.setAttribute('startOffset', offset + 'px');
    textPath.textContent = getTotalText();
    isReady = true;
    container.style.visibility = 'visible';

    // Inicia a animação
    startAnimation();
  }

  // ======== LOOP DE ANIMAÇÃO (baseado em tempo, independente de FPS) ========
  function animate(currentTime) {
    if (!isDragging && isReady && textPath) {
      const elapsed = (currentTime - lastTime) / 1000; // segundos desde o último frame

      // Converte "speed" em deslocamento por frame usando elapsed
      // O multiplicador 60 dá uma “sensação base” de 60fps — EDITA AQUI (fator de sensibilidade)
      const delta = (currentDirection === 'right' ? speed : -speed) * elapsed * 60;

      let newOffset = offset + delta;

      // ======== WRAP CONTÍNUO ========
      // Quando o offset passa de um bloco de texto, reaplicamos o excedente
      const wrapPoint = spacing;
      if (newOffset <= -wrapPoint) {
        newOffset += wrapPoint;
      } else if (newOffset > 0) {
        newOffset -= wrapPoint;
      }

      textPath.setAttribute('startOffset', newOffset + 'px');
      offset = newOffset;
    }
    lastTime = currentTime;
    animationFrame = requestAnimationFrame(animate);
  }

  function startAnimation() {
    if (animationFrame) cancelAnimationFrame(animationFrame);
    lastTime = performance.now();
    animationFrame = requestAnimationFrame(animate);
  }

  // ======== INTERAÇÃO: ARRASTAR PARA MUDAR OFFSET/DIREÇÃO ========
  function onPointerDown(e) {
    if (!interactive) return;
    isDragging = true;
    lastX = e.clientX;
    velocity = 0;
    container.setPointerCapture(e.pointerId);
    container.classList.add('grabbing');
    container.classList.remove('grab');
    // Pausa a animação automática durante o arraste
    if (animationFrame) cancelAnimationFrame(animationFrame);
  }

  function onPointerMove(e) {
    if (!interactive || !isDragging || !textPath) return;
    const dx = e.clientX - lastX;
    lastX = e.clientX;
    velocity = dx; // usado apenas para inferir direção ao soltar

    let newOffset = offset + dx;

    // Wrap durante o arraste (mesma lógica do auto)
    const wrapPoint = spacing;
    if (newOffset <= -wrapPoint) {
      newOffset += wrapPoint;
    } else if (newOffset > 0) {
      newOffset -= wrapPoint;
    }

    textPath.setAttribute('startOffset', newOffset + 'px');
    offset = newOffset;
  }

  function endDrag() {
    if (!interactive) return;
    isDragging = false;

    // Direção pós-arraste baseada no “sinal” da última velocidade
    currentDirection = velocity > 0 ? 'right' : 'left';

    container.classList.remove('grabbing');
    if (interactive) container.classList.add('grab');

    // Retoma a animação automática com a nova direção
    startAnimation();
  }

  // ======== EVENTOS PRINCIPAIS (Pointer Events) ========
  if (interactive) {
    container.addEventListener('pointerdown', onPointerDown);
    container.addEventListener('pointermove', onPointerMove);
    container.addEventListener('pointerup', endDrag);
    container.addEventListener('pointerleave', endDrag);
    container.classList.add('grab'); // Cursor “mão” quando interativo
  }

  // ======== FALLBACK Mouse/Touch (para navegadores antigos) ========
  // Observação: tocamos nas mesmas funções, só adaptando o clientX
  const fallbackDown = (e) => {
    if (e.type === 'touchstart') e = { clientX: e.touches[0].clientX, pointerId: 0 };
    onPointerDown(e);
  };
  const fallbackUp = (e) => { if (e.type === 'touchend') velocity = 0; endDrag(); };

  container.addEventListener('mousedown', fallbackDown);
  container.addEventListener('mousemove', onPointerMove);
  container.addEventListener('mouseup', fallbackUp);
  container.addEventListener('mouseleave', endDrag);
  container.addEventListener('touchstart', fallbackDown, { passive: false });
  container.addEventListener('touchmove', onPointerMove, { passive: false });
  container.addEventListener('touchend', fallbackUp);

  // ======== CLEANUP quando o container for removido do DOM ========
  const observer = new MutationObserver(() => {
    if (!container.parentNode) {
      if (animationFrame) cancelAnimationFrame(animationFrame);
    }
  });
  observer.observe(container, { childList: true, subtree: true });

  // ======== DELAY DE INIT ========
  // Pequeno atraso ajuda quando fontes Web/Elementor ainda estão carregando
  // EDITA AQUI: se o texto aparecer tarde ou cedo, ajuste este delay
  setTimeout(init, 100);
});
</script>