const Testimonials = () => {
  const tm = L('testimonials');
  const meta = [
    { name:'Mariana Tobias', avatar:'#FF6B9D' },
    { name:'Rafael Oka',     avatar:'#0EA3FF' },
    { name:'Camila Sasaki',  avatar:'#FFB547' },
  ];
  const items = tm.items.map((it, i) => ({ ...it, ...meta[i] }));

  return (
    <section className="section-pad">
      <div className="container">
        <div className="reveal" style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', flexWrap:'wrap', gap:24, marginBottom:54 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom:14 }}>{tm.eyebrow}</div>
            <h2 className="display" style={{ fontSize:'clamp(36px, 4.4vw, 56px)', margin:0, maxWidth:680 }}>
              {tm.h2a}<br/>
              {tm.h2b} <span className="serif" style={{ color:'var(--green)' }}>{tm.word}</span>.
            </h2>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:14, color:'var(--ink-2)' }}>
            <div style={{ display:'flex', gap:2, color:'#FFD66B' }}>
              {[1,2,3,4,5].map(i => <Icon key={i} name="star" size={18}/>)}
            </div>
            <div style={{ fontSize:14 }}>
              <strong style={{ color:'var(--ink)' }}>4.9/5</strong> · 312 {tm.reviews}
            </div>
          </div>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20 }} className="tm-grid">
          {items.map((t, i) => (
            <div key={i} className="card reveal" style={{
              transitionDelay: `${i * 100}ms`,
              padding:'30px 28px', display:'flex', flexDirection:'column', gap:22, position:'relative'
            }}>
              <svg width="28" height="22" viewBox="0 0 28 22" fill="var(--green)" opacity="0.4">
                <path d="M0 22V12C0 5.4 4 1 11 0v4c-3 1-5 3.5-5 7h5v11H0zm16 0V12c0-6.6 4-11 11-12v4c-3 1-5 3.5-5 7h5v11H16z"/>
              </svg>
              <p style={{ margin:0, fontSize:16, lineHeight:1.55, color:'var(--ink)', flex:1, fontWeight:400 }}>
                {t.quote}
              </p>
              <div style={{
                padding:'10px 12px', borderRadius:10,
                background:'rgba(0,228,122,0.08)', border:'1px solid rgba(0,228,122,0.2)',
                fontSize:12.5, color:'var(--green)', display:'flex', alignItems:'center', gap:8,
                fontFamily:"'Geist Mono',monospace"
              }}>
                <Icon name="trend" size={13}/> {t.metric}
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:12, paddingTop:12, borderTop:'1px solid var(--line)' }}>
                <div style={{
                  width:38, height:38, borderRadius:'50%',
                  background:`linear-gradient(135deg, ${t.avatar}, rgba(0,0,0,0.5))`,
                  display:'grid', placeItems:'center', color:'#fff', fontWeight:600, fontSize:14
                }}>
                  {t.name.split(' ').map(n => n[0]).slice(0,2).join('')}
                </div>
                <div>
                  <div style={{ fontSize:14, fontWeight:500 }}>{t.name}</div>
                  <div style={{ fontSize:12, color:'var(--ink-3)' }}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) { .tm-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

window.Testimonials = Testimonials;