/* LSQ — Prova social: carrossel automático de depoimentos */
const testimonialsData = [
  {
    photo: 'imgs/depo-eduardo-araujo.jpg',
    quote: T(
      'O Lucas já esteve com a gente em entregas estratégicas e concorrências importantes, daquelas que exigem senioridade, talento, velocidade e muita assertividade. É um profissional completo, criativo, estratégico, objetivo e, acima de tudo, alguém em quem a gente confia quando o desafio é grande.',
      'Lucas has worked with us on strategic deliveries and important pitches — the kind that demand seniority, talent, speed and sharp judgment. He is a complete professional: creative, strategic, objective and, above all, someone we trust when the challenge is big.'
    ),
    name: 'Eduardo Araújo',
    role: T('co-CEO da ', 'co-CEO at '),
    company: 'Komuh',
    companyUrl: 'https://komuh.com/',
  },
  {
    photo: 'imgs/depo-joao-marcelo.jpg',
    quote: T(
      'Lucas atuou em grandes projetos para clientes importantes da Komuh. Ele tem uma capacidade singular de aliar pensamento criativo, pluralidade de referências e visão estratégica. Um parceiro de longa data que sempre vou contar pra potencializar entregas e resultados.',
      'Lucas has worked on major projects for important Komuh clients. He has a singular ability to combine creative thinking, a broad range of references and strategic vision. A long-time partner I will always count on to boost deliveries and results.'
    ),
    name: 'João Marcelo',
    role: T('Head de Criação da ', 'Head of Creative at '),
    company: 'Komuh',
    companyUrl: 'https://komuh.com/',
  },
  {
    photo: 'imgs/depo-tiago-wilke.jpg',
    quote: T(
      'O Lucas conduziu toda a construção da marca MedCifra: identidade visual, logo, site e estratégia de lançamento, incluindo o VSL. Senioridade, visão estratégica e execução rápida em um só profissional. Parceiro indispensável para quem quer transformar um projeto em marca.',
      'Lucas led the entire construction of the MedCifra brand: visual identity, logo, website and launch strategy, including the VSL. Seniority, strategic vision and fast execution in a single professional. An indispensable partner for anyone looking to turn a project into a brand.'
    ),
    name: 'Tiago Wilke',
    role: T('Fundador da ', 'Founder of '),
    company: 'MedCifra',
    companyUrl: 'https://medcifra.com/',
  },
  {
    photo: 'imgs/depo-daniel-calazans.jpg',
    focal: '50% 12%',
    zoom: 1.6,
    quote: T(
      'Lucas criou nossa identidade visual e nossa papelaria. Um excelente profissional. Com sua experiência em estratégia de branding, captou exatamente o que queríamos enquanto escritório de advocacia relativamente jovem: transmitir uma imagem com credibilidade e contemporaneidade na medida certa.',
      'Lucas created our visual identity and stationery. An excellent professional. With his experience in branding strategy, he captured exactly what we wanted as a relatively young law firm: to convey an image with just the right balance of credibility and contemporaneity.'
    ),
    name: 'Daniel Calazans',
    role: T('Sócio-fundador do ', 'Founding Partner at '),
    company: 'Calazans, Queiroz e Machado Advogados',
    companyUrl: 'https://cqaa.com.br/',
  },
];

function Testimonials() {
  const { isMobile } = useViewport();
  const [idx, setIdx] = React.useState(0);
  const [fade, setFade] = React.useState(true);
  const timerRef = React.useRef(null);
  const n = testimonialsData.length;

  const go = React.useCallback((next) => {
    if (n < 2) return;
    setFade(false);
    setTimeout(() => {
      setIdx(i => (next + n) % n);
      setFade(true);
    }, 320);
  }, [n]);

  const resetTimer = React.useCallback(() => {
    if (timerRef.current) clearInterval(timerRef.current);
    if (n < 2) return;
    timerRef.current = setInterval(() => {
      setFade(false);
      setTimeout(() => { setIdx(i => (i + 1) % n); setFade(true); }, 320);
    }, 10000);
  }, [n]);

  React.useEffect(() => { resetTimer(); return () => timerRef.current && clearInterval(timerRef.current); }, [resetTimer]);

  const t = testimonialsData[idx];
  const canNav = n > 1;
  const arrowStyle = {
    width: 44, height: 44, borderRadius: '50%', border: '1px solid #DDD9D4',
    background: 'transparent', color: canNav ? '#1D1D1B' : '#C0BFBB',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: 16, cursor: canNav ? 'pointer' : 'default',
    transition: 'background 200ms, border-color 200ms', flexShrink: 0,
  };
  const hoverOn = e => { if (canNav) { e.currentTarget.style.background = '#1D1D1B'; e.currentTarget.style.color = '#F6F3F0'; e.currentTarget.style.borderColor = '#1D1D1B'; } };
  const hoverOff = e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = canNav ? '#1D1D1B' : '#C0BFBB'; e.currentTarget.style.borderColor = '#DDD9D4'; };

  return (
    <section id="depoimentos" style={{ background: '#F6F3F0', padding: isMobile ? '0 20px 32px' : '0 56px 50px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div data-reveal style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          borderTop: '1px solid #DDD9D4', paddingTop: 20, marginBottom: isMobile ? 48 : 72,
        }}>
          <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13, color: '#9A9A97', letterSpacing: '.12em', textTransform: 'uppercase' }}>{T('Depoimentos', 'Testimonials')}</span>
          <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13, color: '#9A9A97', letterSpacing: '.08em' }}>{String(idx + 1).padStart(2, '0')} / {String(n).padStart(2, '0')}</span>
        </div>

        <div data-reveal="fade" style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 16 : 48 }}>
          {!isMobile && (
            <button aria-label={T('Anterior', 'Previous')} style={arrowStyle} onMouseEnter={hoverOn} onMouseLeave={hoverOff}
              onClick={() => { go(idx - 1); resetTimer(); }}>←</button>
          )}

          <div style={{
            flex: 1, display: 'flex', flexDirection: isMobile ? 'column' : 'row',
            alignItems: 'center', gap: isMobile ? 28 : 64,
            opacity: fade ? 1 : 0, transform: fade ? 'none' : 'translateY(10px)',
            transition: 'opacity 320ms ease, transform 320ms ease',
          }}>
            <div style={{
              width: isMobile ? 120 : 180, height: isMobile ? 120 : 180,
              borderRadius: '50%', overflow: 'hidden', flexShrink: 0,
            }}>
              <img src={AP(t.photo)} alt={t.name} style={{
                width: '100%', height: '100%', objectFit: 'cover',
                objectPosition: t.focal || 'center',
                transform: t.zoom ? 'scale(' + t.zoom + ')' : 'none',
                transformOrigin: t.focal || 'center',
                filter: 'grayscale(1)', display: 'block',
              }}/>
            </div>
            <div style={{ textAlign: isMobile ? 'center' : 'left' }}>
              <p style={{
                fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400,
                fontSize: isMobile ? 16 : 20, lineHeight: 1.7, color: '#1D1D1B',
                margin: '0 0 24px', maxWidth: 720, textWrap: 'pretty',
              }}>“{t.quote}”</p>
              <p style={{
                fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700,
                fontSize: 13, letterSpacing: '.08em', textTransform: 'uppercase',
                color: '#1D1D1B', margin: '0 0 4px',
              }}>{t.name}</p>
              <p style={{
                fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400,
                fontSize: 13, color: '#9A9A97', margin: 0,
              }}>{t.role}{t.companyUrl ? <a href={t.companyUrl} target="_blank" rel="noopener" style={{ color: '#9A9A97', textDecoration: 'underline', textUnderlineOffset: 3, transition: 'color 150ms' }}
                onMouseEnter={e=>e.currentTarget.style.color='#1D1D1B'}
                onMouseLeave={e=>e.currentTarget.style.color='#9A9A97'}>{t.company}</a> : t.company}</p>
            </div>
          </div>

          {!isMobile && (
            <button aria-label={T('Próximo', 'Next')} style={arrowStyle} onMouseEnter={hoverOn} onMouseLeave={hoverOff}
              onClick={() => { go(idx + 1); resetTimer(); }}>→</button>
          )}
        </div>

        {isMobile && (
          <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginTop: 28 }}>
            <button aria-label={T('Anterior', 'Previous')} style={arrowStyle} onClick={() => { go(idx - 1); resetTimer(); }}>←</button>
            <button aria-label={T('Próximo', 'Next')} style={arrowStyle} onClick={() => { go(idx + 1); resetTimer(); }}>→</button>
          </div>
        )}

      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });