import { useState, useEffect, useRef } from 'react'

const REVIEWS = [
  {
    name: 'Daniele Araujo Guedes',
    photo: 'https://lh3.googleusercontent.com/a-/ALV-UjVJd2Ua1wXTV64K01pYDOmPJU8yLmiW5LujsKCTw4a_9VTXMLn3=w40-h40-c-rp-mo-br100',
    text: 'Fomos no Buenas em um domingo, fomos muito bem recebidas. O garçom Alexandre foi bastante simpático e nos deu diversas recomendações. Pedimos um Nhoque da Nona e uma Milanesa Buenos Aires, ambos bem servidos e apetitosos. Os dadinhos de mandioca são servidos com uma geleia que combina muito. Para finalizar, cheesecake de frutas vermelhas maravilhosa. Com certeza voltaremos.',
  },
  {
    name: 'Isabelle Madureiro',
    photo: 'https://lh3.googleusercontent.com/a-/ALV-UjWXBjSYK7_uga6XMf4Smmjysb-183uefgUv8jN64b0CSMmL-Qga=w40-h40-c-rp-mo-br100',
    text: 'Ambiente acolhedor, atendimento de primeira e garçons super atenciosos. Fui com meu marido e uma amiga e fomos super bem atendidos! Preço de acordo com o oferecido. E o melhor: o espaço Pet Friendly é dentro do restaurante. Meu pet também jantou no local — tem cardápio pet food e adorou!! Voltaremos mais vezes!',
  },
  {
    name: 'Alle nud',
    photo: 'https://lh3.googleusercontent.com/a/ACg8ocKHwktLzf3n2jKQMyjKf2_cNu0jwZihEjA7k2vx8qWHPOVYYA=w40-h40-c-rp-mo-br100',
    text: 'Serviço ótimo, atenciosos, sempre prontos — perfeito! Comi lasanha de carne bem temperada, com queijo na medida certa. Caipirinha de frutas vermelhas muito boa, chopp delicioso. Ambiente muito bonito, com detalhes em cada canto. Quando voltar para esta cidade, certeza que volto.',
  },
  {
    name: 'Isabela Fernandes',
    photo: '',
    text: 'Experiência incrível! A massa fresca é de outro nível — macia, saborosa e servida na hora certa. O ambiente tem uma atmosfera aconchegante perfeita para um jantar especial. Voltei três vezes em um mês, não consigo parar.',
  },
  {
    name: 'Jose Oswaldo Longuini',
    photo: 'https://lh3.googleusercontent.com/a/ACg8ocKLZEOwoSr6W1FC4aYmFV7E7pO-qyU0QW3cV3iaUGDbaDmZGw=w40-h40-c-rp-mo-br100',
    text: 'Excelente! Comida boa e ótimo atendimento — fomos atendidos muito bem pela Millena. Combinação perfeita de cortes nobres e massas frescas. Recomendo a qualquer pessoa que queira uma refeição de qualidade.',
  },
  {
    name: 'Simone Zanon',
    photo: 'https://lh3.googleusercontent.com/a/ACg8ocI4xCj00Fx72wdHSi295Us4w5lehrlifqNkOg-uGhyer8j0-Q=w40-h40-c-rp-mo-br100',
    text: 'Comida, ambiente e atendimento excelente. Recomendo.',
  },
  {
    name: 'Carlos Eduardo Ribeiro',
    photo: '',
    text: 'Um dos melhores restaurantes de São Bernardo! A combinação de carnes argentinas com massas italianas é única. O risoto estava no ponto perfeito e o filé era macio como manteiga. Atendimento impecável do início ao fim.',
  },
  {
    name: 'Reis Angel',
    photo: 'https://lh3.googleusercontent.com/a/ACg8ocJOcWTzZI0ZZ_EQRz43nh5nhLIWswprYm_m0SGzQhps4bmpRQ=w40-h40-c-rp-mo-ba4-br100',
    text: 'Comida deliciosa. Pet friendly — adoro que meu dog pode vir junto! O ambiente é charmoso e a equipe sempre simpática. Fui várias vezes e a qualidade é sempre constante.',
  },
  {
    name: 'Patricia Moreira',
    photo: '',
    text: 'Que lugar lindo e gostoso! Fui no aniversário do meu marido e foi uma noite perfeita. O tiramisu de sobremesa foi o ponto alto — cremoso e com sabor autêntico. O espaço tem uma decoração linda, muito instagramável.',
  },
  {
    name: 'Carlito Sampaio Góes',
    photo: 'https://lh3.googleusercontent.com/a-/ALV-UjW17BtxcS64UnECREsa01EPvJghhaf_U1hKUabb4169SxGBywkg=w40-h40-c-rp-mo-ba4-br100',
    text: 'Lugar agradável e boa comida. Atendimento gentil e ambiente aconchegante. O prato de massas estava delicioso e chegou quentinho. Recomendo para um almoço ou jantar tranquilo com a família.',
  },
]

const STARS = (
  <span className="gr-stars">
    {[...Array(5)].map((_, i) => (
      <svg key={i} viewBox="0 0 20 20" fill="#F4B400" width="14" height="14">
        <path d="M10 1l2.39 4.84L18 6.74l-4 3.9.94 5.5L10 13.4l-4.93 2.74.94-5.5-4-3.9 5.6-.9z" />
      </svg>
    ))}
  </span>
)

const VISIBLE = 3

function initials(name) {
  return name.split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase()
}

const COLORS = ['#c05b52', '#6a352c', '#b5655f', '#8a4a3c', '#d4786f']

export default function GoogleReviews() {
  const [idx, setIdx] = useState(0)
  const [animDir, setAnimDir] = useState(null)
  const timerRef = useRef(null)

  const total = REVIEWS.length
  const maxIdx = total - VISIBLE

  function goTo(next, dir) {
    const clamped = Math.max(0, Math.min(next, maxIdx))
    if (clamped === idx) return
    setAnimDir(dir)
    setIdx(clamped)
    setTimeout(() => setAnimDir(null), 350)
  }

  function resetTimer() {
    clearInterval(timerRef.current)
    timerRef.current = setInterval(() => {
      setIdx(prev => {
        const next = prev + 1
        return next > maxIdx ? 0 : next
      })
    }, 6000)
  }

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

  const visible = REVIEWS.slice(idx, idx + VISIBLE)

  return (
    <section className="gr-section">
      <div className="gr-inner">
        <div className="gr-cards">
          {visible.map((r, i) => (
            <div key={idx + i} className={`gr-card${animDir ? ` gr-card--${animDir}` : ''}`}>
              <div className="gr-card-top">
                <div className="gr-avatar">
                  {r.photo
                    ? <img src={r.photo} alt={r.name} width={40} height={40} />
                    : <span style={{ background: COLORS[(idx + i) % COLORS.length] }}>{initials(r.name)}</span>
                  }
                </div>
                <div className="gr-meta">
                  <strong className="gr-name">{r.name}</strong>
                  {STARS}
                </div>
                <svg className="gr-google-logo" viewBox="0 0 24 24" width="20" height="20">
                  <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                  <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                  <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
                  <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                </svg>
              </div>
              <p className="gr-text">{r.text}</p>
            </div>
          ))}
        </div>

        <div className="gr-nav">
          <button
            className="gr-arrow gr-arrow--prev"
            onClick={() => { goTo(idx - 1, 'left'); resetTimer() }}
            disabled={idx === 0}
            aria-label="Anterior"
          >
            <svg viewBox="0 0 24 24" width="20" height="20"><path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>

          <div className="gr-dots">
            {Array.from({ length: maxIdx + 1 }).map((_, i) => (
              <button
                key={i}
                className={`gr-dot${i === idx ? ' gr-dot--active' : ''}`}
                onClick={() => { goTo(i, i > idx ? 'right' : 'left'); resetTimer() }}
                aria-label={`Ir para ${i + 1}`}
              />
            ))}
          </div>

          <button
            className="gr-arrow gr-arrow--next"
            onClick={() => { goTo(idx + 1, 'right'); resetTimer() }}
            disabled={idx === maxIdx}
            aria-label="Próximo"
          >
            <svg viewBox="0 0 24 24" width="20" height="20"><path d="M9 18l6-6-6-6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
    </section>
  )
}
