// Depoimentos.jsx — avaliações reais do Google
function Stars({ n = 5 }) {
  return (<span className="rev-stars">{Array.from({length:n},(_,i)=>(<span key={i}>{Ic.starFill({width:16,height:16})}</span>))}</span>);
}
function Depoimentos() {
  const colors = ['#C9974D','#B8833F','#caa36b','#a8762f','#d3a45c','#b58a4a'];
  const reviews = [
    {
      n: 'Gislene Muniz', i: 'G', m: 'out. de 2023',
      text: 'Fiquei muito bem bronzeada na Bronze Terê! Michela sempre atenciosa e preocupada com os clientes. É excepcional no que faz. Super recomendo!'
    },
    {
      n: 'Izaquiell', i: 'I', m: 'out. de 2023',
      text: 'Atendimento super simpático e atencioso, local super organizado e bronzeamento perfeito!'
    },
    {
      n: 'Carla Acevedo', i: 'C', m: 'ago. de 2023',
      text: 'O atendimento e resultado do serviço são incríveis. Michele é muito profissional, educada e humana. Amei a experiência!'
    },
    {
      n: 'Carla Neves', i: 'C', m: 'ago. de 2023',
      text: 'Foi maravilhoso, amei o resultado, recomendo muito!'
    },
    {
      n: 'João Silva', i: 'J', m: 'ago. de 2023',
      text: 'Experiência incrível! A proprietária é uma mulher prestativa que faz o melhor bronzeamento da cidade. Super recomendo!'
    },
    {
      n: 'Diaz', i: 'D', m: 'ago. de 2023',
      text: 'Um lugar bonito com uma excelente profissional! Boa acolhida no espaço, atendimento impecável. Voltarei com certeza!'
    },
  ];
  return (
    <section className="section rev" id="depoimentos">
      <div className="wrap">
        <div className="sec-head center">
          <span className="eyebrow center reveal">Depoimentos</span>
          <h2 className="reveal" data-d="1">O que dizem nossas clientes.</h2>
        </div>
        <div className="rev-summary reveal" data-d="1">
          <span className="rev-score">5,0</span>
          <div>
            <Stars n={5} />
            <div className="rev-sub">Avaliações Google — Teresópolis</div>
          </div>
        </div>
        <div className="rev-grid">
          {reviews.map((r, i) => (
            <article className="rev-card reveal" data-d={(i % 3) + 1} key={i}>
              <div className="rev-head">
                <span className="rev-av" style={{ background: colors[i] }}>{r.i}</span>
                <div>
                  <div className="rev-name">{r.n}</div>
                  <div className="rev-meta">{r.m}</div>
                </div>
              </div>
              <Stars n={5} />
              <p className="rev-text">{r.text}</p>
              <div className="rev-g">{Ic.google({width:14,height:14})} Avaliação Google</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Depoimentos });