// Section 2 — Social proof bar on ink, with a hover-pausing marquee.
function SocialProof() {
  const names = ["Le'Âme", 'Priscila Lima', 'Lumina Belle', 'Mônica Vertuan', 'Atelier Rosa',
    'Studio Vértice', 'Bottega Sal', 'Núoro Spa', 'Dra. Helena Prado', 'Casa Vinco'];
  const row = [...names, ...names];
  return (
    <section style={{ background: 'var(--ink)', color: '#fff', padding: '26px 0', position: 'relative', zIndex: 2 }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, flexWrap: 'wrap', textAlign: 'center' }}>
        <span style={{ fontSize: 15, color: '#cdded7' }}>
          <strong style={{ color: '#fff', fontWeight: 600 }}>10 clínicas em Água Verde</strong> já no ar com a Vitrini
        </span>
        <Dot /><span style={{ fontSize: 14, color: '#9fb3ab' }}>5,0★ médio</span>
        <Dot /><span style={{ fontSize: 14, color: '#9fb3ab' }}>Domínio próprio</span>
        <Dot /><span style={{ fontSize: 14, color: '#9fb3ab' }}>48h</span>
      </div>
      <div style={{ marginTop: 22, overflow: 'hidden', borderTop: '1px solid rgba(255,255,255,.1)', paddingTop: 22 }}
        onMouseEnter={e => { const t = e.currentTarget.querySelector('.marquee-track'); if (t) t.style.animationPlayState = 'paused'; }}
        onMouseLeave={e => { const t = e.currentTarget.querySelector('.marquee-track'); if (t) t.style.animationPlayState = 'running'; }}>
        <div className="marquee-track" style={{ display: 'flex', width: 'max-content', animation: 'mq 28s linear infinite' }}>
          {row.map((n, i) => (
            <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 34, paddingRight: 34 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 21, fontWeight: 500, color: '#e7efec', opacity: .85, whiteSpace: 'nowrap', letterSpacing: '-.01em' }}>{n}</span>
              <span style={{ color: 'var(--brand-300)', opacity: .6 }}>•</span>
            </span>
          ))}
        </div>
      </div>
      <style>{`@keyframes mq { to { transform: translateX(-50%); } }`}</style>
    </section>
  );
}

function Dot() { return <span style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--brand-300)', opacity: .7 }} />; }

window.SocialProof = SocialProof;