/* global React */
function Testimonials() {
  return (
    <section id="testimonials" className="section section--paper2" style={{paddingTop:90, paddingBottom:100, borderTop:'1px solid var(--paper-line)'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth: 720, margin:'0 auto'}}>
          <span className="eyebrow">Construido junto a líderes</span>
          <h2 className="display display-lg" style={{marginTop: 18}}>
            La gente que ya escaló su red.
          </h2>
        </div>

        {/* Logo strip */}
        <div style={{
          marginTop: 56, padding:'30px 0',
          borderTop:'1px solid var(--paper-line)', borderBottom:'1px solid var(--paper-line)',
          display:'flex', justifyContent:'space-around', alignItems:'center', flexWrap:'wrap', gap: '24px 48px',
        }}>
          {['RIMAN', 'ISMERELY', 'ACTIVZ', 'K-BEAUTY', 'NUSKIN MX', 'VIVAMK'].map(n => (
            <span key={n} style={{
              fontFamily:'var(--f-display)', fontWeight:600, letterSpacing:'0.08em',
              fontSize: 18, color:'var(--ink-mute)', opacity: 0.7,
            }}>{n}</span>
          ))}
        </div>

        {/* Testimonial cards */}
        <div style={{marginTop: 64, display:'grid', gridTemplateColumns:'1.2fr 0.9fr 0.9fr', gap: 24}} className="test-grid">
          {/* Featured */}
          <div style={{
            padding: 36, background:'linear-gradient(180deg, #0B0C16, #1A2A8C)', color:'white',
            borderRadius: 22, position:'relative', overflow:'hidden', display:'flex', flexDirection:'column', justifyContent:'space-between',
          }}>
            <div aria-hidden="true" style={{position:'absolute', top:-60, right:-60, width:240, height:240, borderRadius:'50%', background:'radial-gradient(circle, color-mix(in oklab, var(--brand-500) 45%, transparent), transparent 70%)', filter:'blur(40px)'}} />
            <div style={{position:'relative'}}>
              <div style={{fontFamily:'var(--f-display)', fontSize: 60, lineHeight: 1, fontWeight: 600, color:'var(--brand-300)', opacity:0.6}}>"</div>
              <div style={{fontFamily:'var(--f-display)', fontSize: 26, fontWeight: 500, letterSpacing:'-0.01em', lineHeight: 1.25, marginTop:-14}}>
                Activamos 120 nuevas vendedoras en una semana. Antes nos tomaba dos meses. BOBAX automatizó todo lo que veníamos pegando a mano.
              </div>
            </div>
            <div style={{position:'relative', marginTop: 32, display:'flex', alignItems:'center', gap: 14}}>
              <div style={{width:46, height:46, borderRadius:999, background:'linear-gradient(135deg, #F587B2, #B6155E)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--f-display)', fontWeight:600}}>MR</div>
              <div>
                <div style={{fontWeight:600, fontSize:14}}>Mariana R.</div>
                <div style={{fontSize: 12, color:'rgba(255,255,255,0.6)'}}>Líder regional · K-Beauty LATAM</div>
              </div>
            </div>
          </div>

          {/* Two smaller */}
          {SMALL_TESTIMONIALS.map((t, i) => (
            <div key={i} style={{padding: 28, background:'white', border:'1px solid var(--paper-line)', borderRadius: 22, display:'flex', flexDirection:'column'}}>
              <div style={{fontSize: 16, color:'var(--ink-2)', lineHeight: 1.55, flex: 1}}>
                "{t.quote}"
              </div>
              <div style={{marginTop: 22, paddingTop: 18, borderTop:'1px solid var(--paper-line)', display:'flex', alignItems:'center', gap: 12}}>
                <div style={{width: 38, height: 38, borderRadius: 999, background: t.bg, color:'white', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:600, fontFamily:'var(--f-display)', fontSize: 14}}>{t.initials}</div>
                <div>
                  <div style={{fontWeight: 600, fontSize: 14}}>{t.name}</div>
                  <div style={{fontSize: 12, color:'var(--ink-mute)'}}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .test-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

const SMALL_TESTIMONIALS = [
  { quote:'El módulo de Meta Ads es lo que más nos cambió. Antes cada afiliado iba por su cuenta y ahora todo está estructurado.', name:'Luis A.', role:'Coordinador · Ismerely', initials:'LA', bg:'linear-gradient(135deg, #5C72FF, #2238B8)' },
  { quote:'Cargar 300 afiliadas desde Excel y que todas tengan su landing live el mismo día fue magia.', name:'Sofía P.', role:'Líder de red · Activz', initials:'SP', bg:'linear-gradient(135deg, #34D29B, #0FA174)' },
];

window.Testimonials = Testimonials;