// Testimonials — 3 quote cards with avatar monograms
const Testimonial = ({ quote, name, meta, initial }) => (
  <article className="testimonial">
    <p className="testimonial__quote">"{quote}"</p>
    <div className="testimonial__author">
      <div className="testimonial__avatar">{initial}</div>
      <div>
        <span className="testimonial__name">{name}</span>
        <span className="testimonial__meta">{meta}</span>
      </div>
    </div>
  </article>
);

const Testimonios = () => {
  return (
    <section className="section testimonios" id="pacientes">
      <div className="container">
        <div className="testimonios__head">
          <div>
            <span className="eyebrow-mark">Pacientes</span>
            <h2>Historias de gente que decidió cuidarse.</h2>
          </div>
        </div>

        <div className="testimonios__grid">
          <Testimonial
            quote="Me explicaron todo con calma. Por primera vez sentí que mi médico tenía tiempo para mí."
            name="Mariana R."
            meta="Paciente desde 2023 · San Juan"
            initial="M"
          />
          <Testimonial
            quote="La telemedicina me salvó. Pude consultar desde el trabajo y tener mi receta en quince minutos."
            name="Carlos D."
            meta="Telemedicina · Bayamón"
            initial="C"
          />
          <Testimonial
            quote="No es solo una clínica — es un equipo que te escucha. Eso cambió cómo vivo mi salud."
            name="Lourdes V."
            meta="Medicina preventiva · Caguas"
            initial="L"
          />
        </div>
      </div>
    </section>
  );
};

window.Testimonios = Testimonios;
window.Testimonial = Testimonial;