/* Praise.jsx — lead quote + supporting card, each with a reviewer photo */

function Praise() {
  const { t } = useI18n();
  return (
    <section className="section dark" id="praise">
      <div className="container">
        <div className="section-thread" aria-hidden="true"></div>
        <h2>{t('praise.mark')}</h2>
        <div className="praise-grid">
          <article className="praise-card lead">
            <div className="praise-thread" aria-hidden="true"></div>
            <p className="quote">{rich(t('praise.q1'))}</p>
            <div className="praise-by">
              <image-slot id="praise-resnick" class="praise-photo" shape="circle" placeholder="Photo" src="assets/photos/mitchel-resnick.jpg"></image-slot>
              <cite>
                <b>{t('praise.c1Name')}</b> · {rich(t('praise.c1Role'))}
              </cite>
            </div>
          </article>
          <article className="praise-card">
            <div className="praise-thread" aria-hidden="true"></div>
            <p className="quote">{rich(t('praise.q2'))}</p>
            <div className="praise-by">
              <image-slot id="praise-thanapornsangsuth" class="praise-photo" shape="circle" placeholder="Photo" src="assets/photos/sawaros-thanapornsangsuth.png"></image-slot>
              <cite>
                <b>{t('praise.c2Name')}</b> · {rich(t('praise.c2Role'))}
              </cite>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

window.Praise = Praise;