function Testimonials() {
  const t = [
    { name: 'Jessica M.', loc: 'Portland, OR', img: 'jessica.webp', q: 'Three failed attempts. I almost gave up. This one worked exactly like the instructions said. My first loaf had an actual ear. I cried. I couldn\'t believe it.' },
    { name: 'Michael R.', loc: 'Boulder, CO', img: 'michael.webp', q: 'My kids think baking with 288-year-old yeast is the coolest thing ever. During one baking sesh, we named our starter "Grandma Edna."' },
    { name: 'David L.', loc: 'Seattle, WA', img: 'david.webp', q: 'Was spending $12 per loaf at the bakery. Saved over $400 by baking my own. And mine\'s better.' },
    { name: 'Amanda K.', loc: 'Austin, TX', img: 'amanda.webp', q: 'I forgot to feed it for two weeks. It came right back to life. This is the starter for people who don\'t have their lives together.' },
  ];
  return (
    <section className="tst">
      <style>{`
        .tst { padding: 80px var(--gutter); }
        .tst-head { text-align: center; max-width: 720px; margin: 0 auto 56px; display: flex; flex-direction: column; gap: 14px; }
        .tst-head h2 { max-width: 24ch; margin: 0 auto; }
        .tst-head p { font-size: 15px; line-height: 1.6; color: var(--color-text-muted); margin: 0 auto; max-width: 56ch; }
        .tst-grid { display: grid; gap: 32px 28px; grid-template-columns: 1fr; max-width: 1080px; margin: 0 auto; }
        @media (min-width: 720px) { .tst-grid { grid-template-columns: 1fr 1fr; gap: 40px 48px; } }
        .tst-card { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
        .tst-avatar { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--color-line-soft); }
        .tst-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .tst-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--color-text); max-width: 38ch; }
        .tst-name { font-family: var(--font-display); font-weight: 500; font-size: 14px; }
        .tst-loc { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.04em; }
      `}</style>
      <div className="tst-head">
        <h2>What do bakers say after they try our starter?</h2>
        <p>Customers often get faster confidence and fewer failed attempts thanks to clear activation steps and a predictable rise. Several highlight the emotional payoff — an actual ear, a crackly crust, and the "I made this" moment.</p>
      </div>
      <div className="tst-grid">
        {t.map(p => (
          <div className="tst-card" key={p.name}>
            <div className="tst-avatar"><img src={(window.__photoMap && window.__photoMap[p.img]) || `/assets/photos/${p.img}`} alt={p.name} /></div>
            <div className="tst-quote">"{p.q}"</div>
            <div>
              <div className="tst-name">{p.name}</div>
              <div className="tst-loc">{p.loc}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;