const getInitials = (name) => {
  const parts = name.replace(/^(Prof\.|Dr\.)\s+/, "").split(/\s+/);
  return (parts[0][0] + (parts[parts.length-1][0] || "")).toUpperCase();
};

const MemberCard = ({ p }) => {
  const [broken, setBroken] = React.useState(false);
  const usePhoto = p.photo && !broken;
  return (
  <article className="member reveal" data-role={p.role} data-area={p.area}>
    <span className="member-role">{p.role}</span>
    <div className="member-photo">
      {usePhoto
        ? <img src={p.photo} alt={p.name} onError={() => setBroken(true)} loading="lazy"/>
        : <Character area={p.area} initials={getInitials(p.name)}/>}
    </div>
    <h4 className="member-name">
      {p.url
        ? <a href={p.url} target="_blank" rel="noreferrer">{p.name}</a>
        : p.name}
    </h4>
    <div className="member-title">{p.title}</div>
    <div className="member-tags">
      {p.interests.slice(0,3).map(t => <span key={t} className="member-tag">{t}</span>)}
    </div>
    <div className="member-area-bar" />
    {p.url && (
      <a className="member-link" href={p.url} target="_blank" rel="noreferrer" aria-label={`${p.name} profile`}>
        <Icon name="external" size={14}/>
      </a>
    )}
  </article>
  );
};

const People = () => (
  <section className="section" id="people">
    <div className="section-head">
      <span className="section-eyebrow">Villagers · /people</span>
      <Cli path="people" cmd="who --pi --staff --students" flags=" | sort -by=role"/>
      <h2 className="section-title">Meet the <em style={{fontStyle:"italic",color:"var(--mint-deep)"}}>island crew</em></h2>
      <p className="section-sub">Principal investigators, staff, and students — each tending their own patch of research on the island.</p>
    </div>
    <div className="people-grid">
      {window.PEOPLE.map((p, i) => <MemberCard key={i} p={p} />)}
    </div>

    <div className="alumni-wrap">
      <div className="alumni-card" data-alumni="phd">
        <h4>PhD Alumni</h4>
        <ul className="alumni-list">
          {window.ALUMNI_PHD.map((a,i) => (
            <li key={i}>
              <span className="nm">{a.name}</span>
              <span className="pos">· {a.pos}</span>
              {a.year && <span className="yr">{a.year}</span>}
            </li>
          ))}
        </ul>
      </div>
      <div className="alumni-card" data-alumni="other">
        <h4>Other Alumni</h4>
        <ul className="alumni-list">
          {window.ALUMNI_OTHER.map((a,i) => (
            <li key={i}>
              <span className="nm">{a.name}</span>
              <span className="pos">· {a.pos}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  </section>
);
window.People = People;