/* global React, Reveal */
const { useRef, useEffect } = React;

const TESTIMONIALS = [
  { name: "Giovanna", text: "Realizei o procedimento de preenchimento labial com a Dra. Fernanda e todo o atendimento foi excepcional. O procedimento foi completamente indolor, o resultado imediato ficou ótimo e com o passar dos dias só foi melhorando, ficou natural exatamente como eu pedi. O acompanhamento pós realização foi muito bom também fazendo com que a experiência como um todo tenha sido perfeita." },
  { name: "Cynthia", text: "Amei o atendimento da Dra Fernanda, profissional competente, querida, atenciosa, realizou o procedimento com todo cuidado, voltado às minhas queixas e o resultado ficou maravilhoso e natural." },
  { name: "Lucilene", text: "Eu me senti rejuvenescendo vários anos e melhorou muito minha autoestima e refletiu de forma das pessoas perceberem que eu estava diferente mas não identificarem exatamente o que pois foram vários procedimentos de forma natural e leve que deu um plus grande. E o atendimento foi muito humanizado e personalizado me deixando a vontade. Eu agradeço e recomendo." },
];

function Depoimentos({ speed = 80 }) {
  const wrapRef = useRef(null);
  const isDraggingRef = useRef(false);
  const isHoveringRef = useRef(false);
  const dragState = useRef({ startX: 0, scrollLeft: 0 });

  // useEffect 1: roda APENAS UMA VEZ na montagem
  useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;

    let rafId;
    let lastTime = performance.now();
    const pixelsPerSecond = 30;

    const initPos = () => {
      const oneSetWidth = wrap.scrollWidth / 3;
      wrap.scrollLeft = oneSetWidth;
    };
    setTimeout(initPos, 100);

    const handleScroll = () => {
      const oneSetWidth = wrap.scrollWidth / 3;
      if (wrap.scrollLeft >= oneSetWidth * 2) {
        wrap.scrollLeft -= oneSetWidth;
      } else if (wrap.scrollLeft <= 0) {
        wrap.scrollLeft += oneSetWidth;
      }
    };

    const handleMouseEnter = () => { isHoveringRef.current = true; };
    const handleMouseLeaveLocal = () => { isHoveringRef.current = false; };

    const animate = (now) => {
      const delta = (now - lastTime) / 1000;
      lastTime = now;
      if (!isDraggingRef.current && !isHoveringRef.current) {
        wrap.scrollLeft += pixelsPerSecond * delta;
      }
      rafId = requestAnimationFrame(animate);
    };

    wrap.addEventListener('scroll', handleScroll, { passive: true });
    wrap.addEventListener('mouseenter', handleMouseEnter);
    wrap.addEventListener('mouseleave', handleMouseLeaveLocal);
    rafId = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(rafId);
      wrap.removeEventListener('scroll', handleScroll);
      wrap.removeEventListener('mouseenter', handleMouseEnter);
      wrap.removeEventListener('mouseleave', handleMouseLeaveLocal);
    };
  }, []); // <-- array vazio: roda apenas na montagem

  // Drag handlers - usam refs em vez de state
  const handleMouseDown = (e) => {
    isDraggingRef.current = true;
    wrapRef.current.classList.add('dragging');
    dragState.current.startX = e.pageX - wrapRef.current.offsetLeft;
    dragState.current.scrollLeft = wrapRef.current.scrollLeft;
  };
  const stopDragging = () => {
    isDraggingRef.current = false;
    if (wrapRef.current) wrapRef.current.classList.remove('dragging');
  };
  const handleMouseMove = (e) => {
    if (!isDraggingRef.current) return;
    e.preventDefault();
    const x = e.pageX - wrapRef.current.offsetLeft;
    const walk = (x - dragState.current.startX) * 1.5;
    wrapRef.current.scrollLeft = dragState.current.scrollLeft - walk;
  };

  // Triplica para garantir loop suave
  const items = [...TESTIMONIALS, ...TESTIMONIALS, ...TESTIMONIALS];

  return (
    <section className="testimonials" data-screen-label="05 Depoimentos">
      <div className="container">
        <div className="tm-header">
          <Reveal>
            <span className="overline">— Depoimentos —</span>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="tm-title">O que minhas <em>pacientes</em> dizem.</h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="tm-sub">Histórias reais de transformação e autoestima.</p>
          </Reveal>
        </div>
      </div>
      <Reveal delay={3}>
        <div
          className="tm-track-wrap"
          ref={wrapRef}
          onMouseDown={handleMouseDown}
          onMouseLeave={stopDragging}
          onMouseUp={stopDragging}
          onMouseMove={handleMouseMove}
        >
          <div className="tm-track">
            {items.map((t, i) => (
              <div className="tm-card" key={i}>
                <div className="tm-quote-mark">"</div>
                <p className="tm-text">{t.text}</p>
                <div className="tm-foot">
                  <span className="tm-name">— {t.name}</span>
                  <span className="tm-stars">★ ★ ★ ★ ★</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

window.Depoimentos = Depoimentos;