/* global React, Sparkle, Icon */
const { useState, useEffect } = React;

const TESTIMONIALS = [
  {
    name: 'Camila R.',
    where: 'Cliente desde 2024',
    service: 'Esmalteria · Unhas em gel',
    quote: 'O lugar mais aconchegante que já fui em Maceió. As meninas têm uma técnica impressionante e a unha em gel dura tranquilamente 4 semanas. Já indiquei pra todas as minhas amigas.',
    rating: 5,
  },
  {
    name: 'Larissa M.',
    where: 'Cliente desde 2023',
    service: 'Design de sobrancelhas',
    quote: 'Encontrei o desenho perfeito pra minha cara. A Refinada me ouviu antes de começar — saí de lá com vontade de tirar foto. Recomendo de olhos fechados.',
    rating: 5,
  },
  {
    name: 'Patrícia S.',
    where: 'Cliente desde 2022',
    service: 'Massagem relaxante',
    quote: 'Saio de cada sessão como nova. O atendimento é cuidadoso do começo ao fim, ambiente impecável, equipe atenciosa. Virou o presente que dou pra mim mesma todo mês.',
    rating: 5,
  },
  {
    name: 'Juliana A.',
    where: 'Cliente desde 2025',
    service: 'Podologia + spa',
    quote: 'Sempre tive medo de podologia. Aqui, vieram explicando cada passo, com calma. Sai com os pés impecáveis e a sensação de ter sido bem cuidada. Voltei na semana seguinte.',
    rating: 5,
  },
  {
    name: 'Fernanda C.',
    where: 'Cliente desde 2024',
    service: 'Cabelo · Escova + hidratação',
    quote: 'A escova dura dias e o cabelo fica sedoso como nunca. O programa de fidelidade é maravilhoso — já ganhei dois tratamentos cortesia.',
    rating: 5,
  },
];

function Testimonials() {
  const [idx, setIdx] = useState(0);
  const count = TESTIMONIALS.length;
  const go = (n) => setIdx((n + count) % count);

  useEffect(() => {
    const i = setInterval(() => setIdx(prev => (prev + 1) % count), 7000);
    return () => clearInterval(i);
  }, [count]);

  return (
    <section id="depoimentos" style={tStyles.section}>
      <div className="container">
        <div className="section-head">
          <span className="kicker">Depoimentos</span>
          <h2 style={{ color: 'var(--rb-creme)' }}>O que dizem nossas clientes</h2>
          <p style={{ color: 'rgba(255,247,240,0.72)' }}>Histórias reais, voz de quem voltou — porque cuidado de verdade se sente, e se conta.</p>
        </div>

        <div style={tStyles.deckWrap}>
          <div style={{ ...tStyles.deck, transform: `translateX(-${idx * 100}%)` }}>
            {TESTIMONIALS.map((t, i) => (
              <article key={i} style={tStyles.card}>
                <div style={{ display: 'flex', gap: 4 }}>
                  {Array.from({ length: t.rating }).map((_, k) => (
                    <Icon key={k} name="star" size={16} color="var(--rb-rose)" stroke={0}/>
                  ))}
                </div>
                <blockquote style={tStyles.quote}>"{t.quote}"</blockquote>
                <div style={tStyles.sig}>
                  <div style={tStyles.avatar}>{t.name.split(' ').map(w => w[0]).slice(0,2).join('')}</div>
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <span style={tStyles.name}>{t.name}</span>
                    <span style={tStyles.where}>{t.where} · {t.service}</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>

        <div style={tStyles.controls}>
          <button onClick={() => go(idx - 1)} style={tStyles.navBtn} aria-label="Anterior"><Icon name="arrowLeft" size={18} color="var(--rb-creme)"/></button>
          <div style={tStyles.dots}>
            {TESTIMONIALS.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} style={{
                width: i === idx ? 24 : 6, height: 6, borderRadius: 999,
                background: i === idx ? 'var(--rb-rose)' : 'rgba(255,247,240,0.3)',
                border: 0, cursor: 'pointer',
                transition: 'all 280ms var(--ease-refined)',
              }} aria-label={`Depoimento ${i + 1}`}/>
            ))}
          </div>
          <button onClick={() => go(idx + 1)} style={tStyles.navBtn} aria-label="Próximo"><Icon name="arrowRight" size={18} color="var(--rb-creme)"/></button>
        </div>
      </div>
    </section>
  );
}

const tStyles = {
  section: { background: 'var(--rb-espresso)', padding: 'var(--section-pad) var(--page-pad)' },
  deckWrap: { overflow: 'hidden', maxWidth: 800, margin: '0 auto' },
  deck: { display: 'flex', transition: 'transform 520ms var(--ease-refined)' },
  card: {
    flex: '0 0 100%',
    background: 'rgba(255,247,240,0.04)',
    border: '1px solid rgba(231,201,187,0.2)',
    borderRadius: 18,
    padding: 'clamp(28px, 4vw, 48px)',
    display: 'flex', flexDirection: 'column', gap: 20,
  },
  quote: {
    fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
    fontSize: 'clamp(20px, 2.4vw, 28px)',
    lineHeight: 1.4, color: 'var(--rb-creme)',
    margin: 0, textWrap: 'pretty',
  },
  sig: { display: 'flex', alignItems: 'center', gap: 16, marginTop: 8 },
  avatar: {
    width: 48, height: 48, borderRadius: 999,
    background: 'var(--rb-blush)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--rb-espresso)',
  },
  name: { fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--rb-creme)' },
  where: { fontFamily: 'var(--font-sans)', fontSize: 12, color: 'rgba(255,247,240,0.6)', letterSpacing: '0.06em' },
  controls: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, marginTop: 32 },
  navBtn: {
    width: 44, height: 44, borderRadius: 999,
    background: 'transparent',
    border: '1px solid rgba(231,201,187,0.3)',
    color: 'var(--rb-creme)', cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    transition: 'background 220ms var(--ease-refined)',
  },
  dots: { display: 'flex', gap: 8, alignItems: 'center' },
};

Object.assign(window, { Testimonials });