/* ChapterAuthors.jsx — contributing chapter co-authors.
   Names/bios live in strings.js (coauthors.people, by index); photos and
   image-slot ids stay here. Photos for Arnan, Leah, and Renato come from
   their TLTLab profile pages; replace any photo by dropping an image. */

const CO_AUTHOR_META = [
  { slotId: 'co-author-arnan',  photo: 'https://tltlab.org/wp-content/uploads/2019/03/1659921989426.jpeg' },
  { slotId: 'co-author-nalin',  photo: 'assets/photos/nalin-tutiyaphuengprasert.jpeg' },
  { slotId: 'co-author-luis',   photo: 'assets/photos/luis-morales-navarro.png' },
  { slotId: 'co-author-leah',   photo: 'assets/photos/leah-rosenbaum.jpeg' },
  { slotId: 'co-author-renato', photo: 'https://tltlab.org/wp-content/uploads/2020/09/Main-headshot-500x500.png' },
];

function CoAuthorCard({ slotId, name, photo, bio, chapter }) {
  return (
    <article className="coauthor-card">
      <image-slot
        id={slotId}
        class="coauthor-photo"
        shape="circle"
        placeholder="Drop photo"
        {...(photo ? { src: photo } : {})}
      ></image-slot>
      <p className="coauthor-bio"><b>{name}</b> {bio} <b className="coauthor-credit">{chapter}.</b></p>
    </article>
  );
}

function ChapterAuthors() {
  const { t } = useI18n();
  const people = t('coauthors.people');
  return (
    <section className="section coauthors" id="contributors">
      <div className="container">
        <div className="section-thread" aria-hidden="true"></div>
        <h2>{t('coauthors.heading')}</h2>
        <p className="coauthors-lede">{t('coauthors.lede')}</p>
        <div className="coauthors-grid">
          {people.map((p, i) => (
            <CoAuthorCard
              key={CO_AUTHOR_META[i]?.slotId || p.name}
              {...(CO_AUTHOR_META[i] || {})}
              name={p.name}
              bio={p.bio}
              chapter={p.credit || t('coauthors.credit')}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

window.ChapterAuthors = ChapterAuthors;
window.CoAuthorCard = CoAuthorCard;