const testStyles = {
  section: { background: 'var(--bg)' },
  header: { textAlign: 'center', marginBottom: 'clamp(32px, 6vw, 56px)', maxWidth: 720, margin: '0 auto clamp(32px, 6vw, 56px)' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--grid-gap, 22px)' },
  card: {
    background: 'white', borderRadius: 18, padding: 'var(--card-pad, 26px)',
    border: '1px solid var(--silver-100)',
    display: 'flex', flexDirection: 'column', gap: 14,
    position: 'relative',
  },
  stars: { display: 'flex', gap: 2 },
  quote: { fontSize: 15, color: 'var(--navy-800)', lineHeight: 1.55, fontWeight: 500 },
  person: { display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto', paddingTop: 8 },
  avatar: {
    width: 44, height: 44, borderRadius: 50,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'white', fontWeight: 800, fontFamily: 'Archivo', fontSize: 16,
  },
  name: { fontWeight: 700, color: 'var(--navy-800)', fontSize: 15 },
  role: { fontSize: 13, color: 'var(--silver-500)' },
  serviceTag: {
    display: 'inline-flex', alignSelf: 'flex-start',
    padding: '4px 10px', borderRadius: 999,
    background: 'rgba(30,58,111,.08)', color: 'var(--navy-700)',
    fontSize: 12, fontWeight: 600,
  },
};

const testimonials = [
  {
    initial: 'M', color: ['#1E3A6F', '#3D63A8'],
    name: 'Márcia Oliveira', role: 'Aposentada • Maricá',
    quote: 'Achei que ia precisar comprar um notebook novo porque o meu estava travando tudo. Eles identificaram o gargalo, explicaram a solução e fizeram o upgrade. Agora parece que comprei novo!',
    tag: 'Upgrade de notebook',
  },
  {
    initial: 'R', color: ['#14264A', '#2A4D8F'],
    name: 'Roberto Campos', role: 'Comerciante • Araçatiba',
    quote: 'Meu computador da loja travou no meio do expediente e eles foram no mesmo dia. Em duas horas estava tudo funcionando. Salvou meu dia, atendimento sério.',
    tag: 'Atendimento a empresa',
  },
  {
    initial: 'A', color: ['#1E3A6F', '#5B6778'],
    name: 'Ana Paula Ferraz', role: 'Professora • Itaipuaçu',
    quote: 'Tinha medo de perder as fotos dos meus netos. Eles fizeram o backup antes de mexer no sistema, mostraram onde tudo ficou salvo e só depois continuaram o serviço.',
    tag: 'Backup e formatação',
  },
];

function Testimonials() {
  return (
    <section style={testStyles.section} id="depoimentos">
      <div className="container">
        <div style={testStyles.header}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot"></span>
            Quem já foi atendido
          </div>
          <h2 className="t-h2" style={{ marginBottom: 14 }}>Problemas resolvidos com método</h2>
          <p className="t-lead">
            Casos de atendimento técnico, diagnóstico e solução aplicada pela PiterTech.
          </p>
        </div>
        <div className="test-grid" style={testStyles.grid}>
          {testimonials.map((t, i) => (
            <div key={i} style={testStyles.card}>
              <div style={testStyles.stars}>
                {[1,2,3,4,5].map(n => <IconStar key={n} size={18} />)}
              </div>
              <span style={testStyles.serviceTag}>{t.tag}</span>
              <div style={testStyles.quote}>"{t.quote}"</div>
              <div style={testStyles.person}>
                <div style={{ ...testStyles.avatar, background: `linear-gradient(135deg, ${t.color[0]}, ${t.color[1]})` }}>
                  {t.initial}
                </div>
                <div>
                  <div style={testStyles.name}>{t.name}</div>
                  <div style={testStyles.role}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{``}</style>
    </section>
  );
}

Object.assign(window, { Testimonials });