// Team page

function TeamHero() {
  return (
    <section className="team-hero">
      <div className="upper-mono" style={{ marginBottom: 16 }}>§ The lab</div>
      <h1 style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(42px, 6vw, 72px)', lineHeight: 1.05, marginBottom: 24 }}>
        Small lab, <em style={{ fontStyle: 'italic', color: 'var(--moss-600)' }}>broad reach</em>.
      </h1>
      <p style={{ maxWidth: '60ch', fontSize: 17, color: 'var(--ink-soft)' }}>
        We're a tightly-knit group spanning computer science, statistics, molecular
        biology, and business analytics — undergraduates through PhDs, working on
        problems that span agriculture, clinics, and policy.
      </p>
    </section>
  );
}

function PI() {
  const yan = window.LAB.PEOPLE.yan;
  return (
    <section className="team-pi" id="yan">
      <div className="team-pi__photo ph ph--moss">PI portrait</div>
      <div className="team-pi__body">
        <div className="upper-mono" style={{ marginBottom: 12, color: 'var(--moss-700)' }}>Principal Investigator</div>
        <div className="team-pi__name serif">{yan.name}</div>
        <div className="team-pi__title">{yan.title}</div>
        <p style={{ fontSize: 16, color: 'var(--ink)', maxWidth: '52ch' }}>{yan.bio}</p>
        <div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
          {yan.links.map(l => (
            <a key={l.label} href={l.href} className="btn btn--ghost" style={{ fontSize: 13, padding: '8px 16px' }}>{l.label}</a>
          ))}
        </div>
      </div>
    </section>
  );
}

function MemberCard({ m }) {
  return (
    <article className="member-card" id={m.id}>
      <div className="member-card__photo">{m.placeholder}</div>
      <div className="member-card__body">
        <div className="member-card__name serif">{m.name}</div>
        <div className="member-card__role">{m.role}</div>
        <div className="member-card__project">{m.project}</div>
        <p className="member-card__bio">{m.bio}</p>
        <div className="member-card__tags">
          {m.themes && m.themes.map(t => <ThemeBadge key={t} theme={t} />)}
          {m.tags && m.tags.map(t => <span key={t} className="tag" style={{ fontSize: 10 }}>{t}</span>)}
        </div>
        {m.links.length > 0 && (
          <div className="member-card__links">
            {m.links.map(l => <a key={l.label} href={l.href}>{l.label}</a>)}
          </div>
        )}
      </div>
    </article>
  );
}

function MembersSection() {
  const members = ['bo', 'elspeth', 'suleman', 'raeein', 'madhurika'].map(id => window.LAB.PEOPLE[id]);
  return (
    <section style={{ padding: '32px 0 80px' }}>
      <div style={{ maxWidth: 'var(--max-w)', margin: '0 auto', padding: '0 var(--pad-x) 32px' }}>
        <div className="upper-mono" style={{ marginBottom: 12 }}>§ Lab members · {members.length}</div>
        <h2 className="serif" style={{ fontSize: 'clamp(28px, 3.5vw, 40px)' }}>Current members</h2>
      </div>
      <div className="member-grid">
        {members.map(m => <MemberCard key={m.id} m={m} />)}
      </div>
    </section>
  );
}

function AlumniSection() {
  return (
    <section style={{ padding: '64px var(--pad-x) 0', maxWidth: 'var(--max-w)', margin: '0 auto' }}>
      <div className="upper-mono" style={{ marginBottom: 12 }}>§ Past members</div>
      <h2 className="serif" style={{ fontSize: 'clamp(28px, 3.5vw, 40px)', marginBottom: 32 }}>Alumni</h2>
      <ul className="alumni-list">
        {window.LAB.ALUMNI.map(a => (
          <li key={a.name} className="alumni-item">
            <span className="alumni-item__name">{a.name}</span>
            <span className="alumni-item__role">{a.role}</span>
            <span className="alumni-item__proj">{a.project}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function JoinUs() {
  return (
    <section className="section">
      <div style={{ background: 'var(--cream-100)', border: '1px solid var(--rule)', padding: 48, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div className="upper-mono" style={{ marginBottom: 12 }}>Join the lab</div>
          <h2 className="serif" style={{ fontSize: 36, lineHeight: 1.1, marginBottom: 16 }}>
            Curious about working with us?
          </h2>
          <p style={{ color: 'var(--ink-soft)', maxWidth: '52ch' }}>
            We welcome inquiries from prospective grad students, undergrads, and
            visiting collaborators. Tell us briefly what excites you about the work
            on this site, and we'll take it from there.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <a href="mailto:yyan15@uoguelph.ca" className="btn btn--primary">Email Dr. Yan →</a>
          <a href="research.html" className="btn btn--ghost">See research first</a>
        </div>
      </div>
    </section>
  );
}

function TeamApp() {
  return (
    <>
      <SiteHeader active="team" />
      <TeamHero />
      <PI />
      <MembersSection />
      <AlumniSection />
      <JoinUs />
      <SiteFooter />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<TeamApp />);