// components-testimonials.jsx — Depoimentos section

function Stars() {
  return (
    <span style={{ display: 'inline-flex', gap: 2 }} aria-label="5 estrelas">
      {[0,1,2,3,4].map((i) => (
        <svg key={i} width="12" height="12" viewBox="0 0 12 12" fill="#FF2070" aria-hidden>
          <path d="M6 0.5l1.5 3.5 3.8.4-2.9 2.6.9 3.7L6 8.7 2.7 10.7l.9-3.7L.7 4.4l3.8-.4z"/>
        </svg>
      ))}
    </span>
  );
}

function TestimonialCard({ initial, name, age, text }) {
  return (
    <div style={{
      background: 'var(--surface)',
      border: '1px solid var(--border)',
      borderRadius: 12,
      padding: 16,
      marginBottom: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 40, height: 40, borderRadius: '50%',
          background: '#2A2A2A',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Outfit', fontWeight: 600, fontSize: 16, color: '#FF2070',
          flexShrink: 0,
        }}>
          {initial}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 500, color: '#fff' }}>
            {name} <span style={{ color: 'var(--muted)', fontWeight: 400, fontSize: 12 }}>· {age}</span>
          </div>
        </div>
        <Stars />
      </div>
      <p style={{
        margin: '10px 0 0',
        fontSize: 13, lineHeight: 1.5,
        color: 'var(--body-text)',
      }}>"{text}"</p>
    </div>
  );
}

function Testimonials() {
  const items = [
    { initial: 'L', name: 'Lucas M.', age: 28, text: 'Vale cada centavo. A Gaby responde mesmo, não é igual essas que cobram caro e somem.' },
    { initial: 'P', name: 'Pedro R.', age: 31, text: 'Gostosa demais, posta direto e sem censura. Nunca me arrependi.' },
    { initial: 'F', name: 'Felipe T.', age: 24, text: 'Pagamento foi discreto, nem aparece nome de modelo na fatura. Recomendo demais.' },
    { initial: 'D', name: 'Diego A.', age: 35, text: 'Já tô há 3 meses e não consigo cancelar haha. Vicia.' },
  ];
  return (
    <section className="section" style={{ paddingTop: 32, paddingBottom: 32 }}>
      <h2 className="section__title section__title--center">O que estão dizendo</h2>
      <div>
        {items.map((it, i) => <TestimonialCard key={i} {...it} />)}
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });
