/* Authors.jsx — two-up bio cards with photos */

function AuthorCard({ slotId, name, role, bio, photo }) {
  return (
    <article className="author-card">
      <image-slot
        id={slotId}
        class="author-photo"
        shape="circle"
        placeholder="Drop photo"
        {...(photo ? { src: photo } : {})}
      ></image-slot>
      <h3 className="author-name">{name}</h3>
      <p className="author-role">{role}</p>
      <p className="author-bio">{bio}</p>
    </article>
  );
}

function Authors() {
  const { t } = useI18n();
  return (
    <section className="section" id="authors">
      <div className="container">
        <div className="section-thread" aria-hidden="true"></div>
        <h2>{t('authors.heading')}</h2>
        <div className="authors-grid">
          <AuthorCard
            slotId="author-blikstein"
            photo="assets/photos/paulo-blikstein.jpg"
            name={t('authors.a1Name')}
            role={t('authors.a1Role')}
            bio={t('authors.a1Bio')}
          />
          <AuthorCard
            slotId="author-fields"
            photo="assets/photos/deborah-fields.jpg"
            name={t('authors.a2Name')}
            role={t('authors.a2Role')}
            bio={t('authors.a2Bio')}
          />
        </div>
      </div>
    </section>
  );
}

window.Authors = Authors;
window.AuthorCard = AuthorCard;