const TESTIMONIALS = [
  { name: 'Otávio Villas Boas', role: 'Desenvolvedor .NET', linkedin: 'linkedin.com/in/otaviovillasboassimoncinicarmanini', github: 'github.com/otaviovb', quote: 'Sou mentorado pelo Marcelo há quase dois anos e suas análises críticas, dicas construtivas e sugestões direcionadas foram extremamente importantes para minha construção profissional.', slotId: 'testimonial-otavio' },
  { name: 'Paolo Fullone', role: 'Engenheiro de Software', linkedin: 'linkedin.com/in/paolofullone', github: 'github.com/paolofullone', quote: 'Trabalhei com Marcelo em uma squad e me impressionou seu domínio do .NET e outras tecnologias. Excelente profissional, sempre disposto a compartilhar conhecimento.', slotId: 'testimonial-paolo' },
  { name: 'João Vitor Garcia', role: 'Desenvolvedor de Software', linkedin: 'linkedin.com/in/joao-garcia-vitor', github: null, quote: 'Simplesmente inspirador. Marcelo é a pessoa mais técnica, e com mais didática para explicar, que já encontrei no mercado de trabalho.', slotId: 'testimonial-joao' },
  { name: 'Luiz Gustavo Lopes', role: 'Desenvolvedor Backend', linkedin: 'linkedin.com/in/luiz-gustavo-lopes-04664993', github: 'github.com/GustavoALopes', quote: 'Participar da mentoria tem sido uma experiência transformadora. Aprendi a aplicar ferramentas como Grafana e Prometheus de forma significativa no contexto empresarial.', slotId: 'testimonial-luiz' },
  { name: 'André Barreto', role: 'Engenheiro de Software Sênior', linkedin: 'linkedin.com/in/andre-barreto-68494727', github: 'github.com/amourabarreto', quote: 'Participo do canal MarceloCastelo.IO e acho incrível o nível de debate. Os temas são abordados e explicados com uma clareza impressionante.', slotId: 'testimonial-andre' },
  { name: 'Thalison Monteiro', role: 'Desenvolvedor de Software', linkedin: 'linkedin.com/in/thalison-monteiro-701a57215', github: 'github.com/thalison1998', quote: 'O Marcelo abriu meus olhos sobre questões que eu pensava serem irrelevantes, mas que são a base para um bom programador. O melhor professor com quem já tive contato.', slotId: 'testimonial-thalison' },
];

function TestimonialCard({ name, role, linkedin, github, quote, slotId }) {
  const { BrandIcon } = window.MarceloCasteloIODesignSystem_5e00d7;
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 14, boxShadow: 'var(--shadow-sm)', height: '100%', boxSizing: 'border-box' }}>
      <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, lineHeight: 'var(--leading-relaxed)', color: 'var(--text-primary)' }}>"{quote}"</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto' }}>
        <div style={{ width: 44, height: 44, borderRadius: '50%', flexShrink: 0 }}><image-slot id={slotId} shape="circle" placeholder="Foto"></image-slot></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>{name}</span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)' }}>{role}</span>
        </div>
        <div style={{ display: 'flex', gap: 8, marginLeft: 'auto' }}>
          <a href={'https://' + linkedin} title="LinkedIn" style={{ color: 'var(--text-muted)', display: 'flex' }}><BrandIcon name="linkedin" size={16} /></a>
          {github && <a href={'https://' + github} title="GitHub" style={{ color: 'var(--text-muted)', display: 'flex' }}><BrandIcon name="github" size={16} /></a>}
        </div>
      </div>
    </div>
  );
}

function LinkedInGlyph() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="20" height="20" rx="3" fill="none" stroke="currentColor" strokeWidth="2"/><line x1="7" y1="10" x2="7" y2="17" stroke="currentColor" strokeWidth="2"/><circle cx="7" cy="7" r="1.2" fill="currentColor"/><line x1="12" y1="17" x2="12" y2="12" stroke="currentColor" strokeWidth="2"/><path d="M12 13.5c0-1.5 1-2.5 2.5-2.5s2.5 1 2.5 2.5V17" fill="none" stroke="currentColor" strokeWidth="2"/></svg>;
}
function TestimonialsSection() {
  const trackRef = React.useRef(null);
  const xRef = React.useRef(0);
  const [paused, setPaused] = React.useState(false);
  const half = React.useRef(0);
  React.useEffect(() => {
    let raf;
    const step = () => {
      if (!paused && trackRef.current) {
        half.current = trackRef.current.scrollWidth / 2;
        xRef.current -= 0.6;
        if (Math.abs(xRef.current) >= half.current) xRef.current = 0;
        trackRef.current.style.transform = `translateX(${xRef.current}px)`;
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [paused]);
  const nudge = (dir) => {
    setPaused(true);
    xRef.current += dir * -360;
    if (xRef.current > 0) xRef.current -= half.current;
    if (Math.abs(xRef.current) >= half.current) xRef.current = 0;
    if (trackRef.current) trackRef.current.style.transform = `translateX(${xRef.current}px)`;
  };
  const loop = [...TESTIMONIALS, ...TESTIMONIALS];
  return (
    <section style={{ padding: 'var(--space-8) 0', background: 'var(--surface-sunken)', overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 var(--space-7)', marginBottom: 'var(--space-6)' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: 'var(--text-primary)', margin: 0 }}>O que dizem os mentorados</h2>
        <div style={{ display: 'flex', gap: 8 }}>
          <button onClick={() => nudge(-1)} aria-label="Anterior" style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid var(--border-default)', background: 'var(--surface-card)', color: 'var(--text-primary)', cursor: 'pointer', fontSize: 16 }}>‹</button>
          <button onClick={() => nudge(1)} aria-label="Próximo" style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid var(--border-default)', background: 'var(--surface-card)', color: 'var(--text-primary)', cursor: 'pointer', fontSize: 16 }}>›</button>
        </div>
      </div>
      <div style={{ overflow: 'hidden' }} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
        <div ref={trackRef} style={{ display: 'flex', gap: 'var(--space-5)', width: 'max-content', padding: '0 var(--space-7)', willChange: 'transform' }}>
          {loop.map((t, i) => <div key={t.name + i} style={{ width: 340, flexShrink: 0 }}><TestimonialCard {...t} /></div>)}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { TestimonialsSection });