// ===== AVALIAÇÕES =====
function Reviews() {
  const reviews = [
    { name: 'Alice E.', date: '2026', text: 'A Nubelle é uma clínica muito aconchegante, atendimento de excelência e os resultados são incríveis. Indico de olhos fechados!' },
    { name: 'Susana S.', date: '2026', text: 'Todo o medo de laser foi embora. Equipe acolhedora, ambiente impecável e protocolo que faz sentido para mim.' },
    { name: 'Mariana C.', date: '2026', text: 'Saí da Consulta Estratégica entendendo o meu rosto pela primeira vez. A equipe não vendeu nada, explicou tudo com clareza.' },
    { name: 'Letícia A.', date: '2026', text: 'Resultado natural, sem cara de feito. Foi exatamente o que eu pedi e o que entregaram.' },
    { name: 'Patrícia O.', date: '2026', text: 'Atendimento de outro nível. Nunca me senti tão bem cuidada em uma clínica em Salvador.' },
  ];
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % reviews.length), 6000);
    return () => clearInterval(t);
  }, []);
  const r = reviews[idx];

  return (
    <section id="avaliacoes" className="relative overflow-hidden py-24 md:py-32" style={{ background: C.ink, color: C.cream }}>
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 50% 0%, rgba(255,139,122,0.1) 0%, transparent 60%)`
      }}></div>

      <div className="relative max-w-[1100px] mx-auto px-5 md:px-8 text-center">
        <div className="flex items-center justify-center gap-2 mb-6">
          <span className="flex gap-0.5">
            {[1,2,3,4,5].map(i => <Star key={i} />)}
          </span>
          <span className="text-sm" style={{ color: 'rgba(244,237,227,0.7)' }}>150+ avaliações</span>
        </div>

        <h2 className="font-display mx-auto max-w-3xl" style={{ fontSize: 'clamp(30px, 4vw, 52px)', lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.025em' }}>
          5 estrelas no Google. <br /><em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>Cada uma real, cada uma merecida.</em>
        </h2>
        <p className="mt-5 text-lg" style={{ color: 'rgba(244,237,227,0.65)' }}>
          150+ avaliações verificadas no Google, escritas por pacientes reais que viveram a experiência Nubelle.
        </p>

        <div className="mt-10">
          <a href="https://www.google.com/search?q=nubelle+salvador" target="_blank" rel="noopener" className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.25em] font-semibold transition hover:opacity-80" style={{ color: C.neon }}>
            Ver todas as avaliações no Google →
          </a>
        </div>

        {/* card */}
        <div className="mt-16 max-w-2xl mx-auto p-8 md:p-10 rounded-[28px] text-left relative" style={{ background: C.cream, color: C.ink, border: `1px solid ${C.bone}` }}>
          <div className="absolute top-6 right-6">
            <svg width="22" height="22" viewBox="0 0 24 24"><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-.99.66-2.26 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A10.997 10.997 0 0 0 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.18A10.997 10.997 0 0 0 1 12c0 1.77.42 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>
          <span className="flex gap-0.5 mb-4">
            {[1,2,3,4,5].map(i => <span key={i} style={{ color: '#F4B400', fontSize: 18 }}>★</span>)}
          </span>
          <p className="font-display italic" style={{ fontSize: 20, lineHeight: 1.45, fontWeight: 500, letterSpacing: '-0.01em' }}>
            "{r.text}"
          </p>
          <div className="mt-7 flex items-center gap-3">
            <div className="w-10 h-10 rounded-full flex items-center justify-center font-display" style={{ background: C.coral, color: C.ink, fontWeight: 700 }}>
              {r.name[0]}
            </div>
            <div>
              <div className="font-display" style={{ fontWeight: 700, fontSize: 14 }}>{r.name}</div>
              <div className="text-xs opacity-60">Google · {r.date}</div>
            </div>
          </div>
        </div>

        {/* dots */}
        <div className="mt-8 flex justify-center gap-2">
          {reviews.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} className="transition-all rounded-full" style={{
              width: i === idx ? 24 : 6, height: 6,
              background: i === idx ? C.neon : 'rgba(244,237,227,0.25)'
            }}></button>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reviews });
