// Testimonials — quotes from veterinarians using DrVet.app

const Testimonials = () => {
  const items = [
    {
      q: 'Antes perdía 4 de cada 10 tutores después del primer control. DrVet.app me devolvió el seguimiento que mi recepción no daba abasto para hacer.',
      a: 'Dra. Marina Cifuentes', r: 'Directora · Clínica VetSur', city: 'Santiago, CL'
    },
    {
      q: 'El AI Scribe me regresó el contacto visual con el tutor. Dejé de mirar el teclado durante la consulta — y mis pacientes lo notan.',
      a: 'Dr. Tomás Rivera', r: 'Médico clínico · PawCare', city: 'CDMX, MX'
    },
    {
      q: 'Pasamos de cobrar el 70% al 96% de las ventas porque el charge capture ya no se nos olvida en el papel.',
      a: 'Carolina Mendoza', r: 'Frontdesk · ClíniK9', city: 'Lima, PE'
    },
  ];
  return (
    <section style={{ padding:'140px 0', background:'var(--bg-2)', borderBottom:'1px solid var(--line-2)' }}>
      <div className="container">
        <SectionTag num="06" label="La voz del campo" style={{ marginBottom:28 }}/>
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20
        }} className="t-grid">
          {items.map((it,i) => (
            <figure key={i} style={{
              margin:0, background:'#fff', border:'1px solid var(--line)',
              borderRadius:14, padding:'32px 28px',
              display:'flex', flexDirection:'column', minHeight: 360
            }}>
              <div className="serif" style={{
                fontSize:48, lineHeight:0.4, color:'var(--accent)', height:30, fontWeight:400
              }}>“</div>
              <blockquote className="serif" style={{
                margin:'10px 0 0', fontSize:22, lineHeight:1.3, fontWeight:400,
                letterSpacing:'-0.005em', color:'var(--ink)', textWrap:'pretty', flex:1
              }}>{it.q}</blockquote>
              <figcaption style={{
                marginTop: 24, paddingTop:18, borderTop:'1px solid var(--line-2)',
                display:'flex', alignItems:'center', gap:12
              }}>
                <div style={{
                  width:40, height:40, borderRadius:99, background:'var(--accent-soft)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  color:'#7A4A28', fontFamily:"'Newsreader', serif", fontSize:18, fontStyle:'italic'
                }}>{it.a.split(' ').slice(-2,-1)[0][0]}{it.a.split(' ').slice(-1)[0][0]}</div>
                <div>
                  <div style={{ fontSize:13, fontWeight:600 }}>{it.a}</div>
                  <div style={{ fontSize:11.5, color:'var(--muted)' }}>{it.r} · {it.city}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px){ .t-grid { grid-template-columns: 1fr 1fr !important; } .t-grid > figure:nth-child(3){ grid-column: 1 / -1; } }
        @media (max-width: 640px){ .t-grid { grid-template-columns: 1fr !important; } .t-grid > figure:nth-child(3){ grid-column: auto; } }
      `}</style>
    </section>
  );
};

window.Testimonials = Testimonials;