const Testimonials = () => {
  const quotes = [
    {
      q: 'Em três meses parei de descobrir que um projeto deu prejuízo só na hora do imposto. Agora vejo desvio de margem na semana em que ele acontece.',
      name: 'Camila Yoshida',
      role: 'Sócia · Yoshida + Penteado Arquitetura',
      stat: { v: '+42%', l: 'Margem em 6 meses' },
    },
    {
      q: 'Antes era planilha pra tudo. Hoje meu sócio criativo continua com lápis e papel — mas a parte financeira virou um diagrama claro.',
      name: 'Renato Salles',
      role: 'Diretor financeiro · Estúdio Salles & Coelho',
      stat: { v: '14h', l: 'economizadas/semana' },
    },
    {
      q: 'O ArchPlan entende que cobrar honorários é uma conversa, não uma fatura. A régua de cobrança mantém o tom certo com cada cliente.',
      name: 'Luísa Penteado',
      role: 'Co-fundadora · Yoshida + Penteado',
      stat: { v: '92%', l: 'no prazo' },
    },
  ];

  return (
    <section className="relative py-32 md:py-48 border-t" style={{ borderColor: 'var(--rule)', background: 'var(--bg-deep)' }} data-screen-label="05 Testimonials">
      <div className="max-w-[1400px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-x-6">
          <div className="col-span-12 md:col-span-7">
            <SectionHeader
              index="05"
              label="Depoimentos · Sheet 05"
              title={<>O que dizem os <em className="italic font-serif" style={{ color: 'var(--sepia)' }}>colegas</em>.</>}
            />
          </div>
        </div>

        <div className="mt-20 space-y-px" style={{ background: 'var(--rule-strong)' }}>
          {quotes.map((q, i) => (
            <Quote key={i} {...q} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
};

const Quote = ({ q, name, role, stat, index }) => {
  const [ref, inView] = useReveal({ threshold: 0.2 });
  return (
    <article
      ref={ref}
      className="grid grid-cols-12 gap-x-6 p-10 md:p-16 transition-all"
      style={{
        background: 'var(--bg)',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(30px)',
        transitionDuration: '1000ms',
        transitionDelay: `${index * 120}ms`,
      }}
    >
      <div className="col-span-12 md:col-span-2">
        <DimLabel>/ {String(index + 1).padStart(2, '0')}</DimLabel>
      </div>
      <blockquote className="col-span-12 md:col-span-7">
        <p className="font-serif italic font-light text-3xl md:text-4xl tracking-tight leading-snug">
          “{q}”
        </p>
        <footer className="mt-8 flex items-center gap-4">
          <div className="w-10 h-10 rounded-full flex items-center justify-center font-mono text-xs" style={{ background: 'var(--mist)' }}>
            {name.split(' ').map(n => n[0]).slice(0,2).join('')}
          </div>
          <div>
            <div className="text-base">{name}</div>
            <div className="font-mono text-[10px] uppercase tracking-wider2" style={{ color: 'var(--stone)' }}>{role}</div>
          </div>
        </footer>
      </blockquote>
      <div className="col-span-12 md:col-span-3 md:text-right mt-8 md:mt-0">
        <div className="font-serif font-light tracking-tightest text-5xl md:text-6xl" style={{ color: 'var(--sepia)' }}>{stat.v}</div>
        <DimLabel>{stat.l}</DimLabel>
      </div>
    </article>
  );
};

window.Testimonials = Testimonials;