// Teaching page — courses taught, project supervision, and interactive class activities.

function TeachingHero() {
  return (
    <section className="page-hero">
      <span className="eyebrow">§ Teaching</span>
      <h1>Teaching.</h1>
      <p>
        Courses in data structures, bioinformatics, and applied AI at the
        University of Guelph, with an emphasis on active learning in large
        classes and interdisciplinary projects.
      </p>
    </section>
  );
}

function CourseList({ eyebrow, title, courses }) {
  return (
    <section className="alumni">
      <span className="eyebrow">{eyebrow}</span>
      <h2 style={{ marginTop: 16 }}>{title}</h2>
      <ul className="alumni-list">
        {courses.map(c => (
          <li key={c.code + c.title} className="alumni-item">
            <span className="alumni-item__name">{c.code ? `${c.code} · ${c.title}` : c.title}</span>
            <span className="alumni-item__role">{c.level}<br />{c.terms}</span>
            <span className="alumni-item__proj">
              {c.note}
              {(c.links || []).map(l => (
                <a key={l.href} className="course-link" href={l.href}>{l.label} →</a>
              ))}
            </span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function Activities() {
  const items = window.LAB.TEACHING.activities;
  if (items.length === 0) return null;
  return (
    <section className="alumni">
      <span className="eyebrow">§ In class</span>
      <h2 style={{ marginTop: 16 }}>Class activities</h2>
      <ul className="alumni-list">
        {items.map(a => (
          <li key={a.href} className="alumni-item">
            <a className="alumni-item__name" href={a.href}>{a.title} →</a>
            <span className="alumni-item__role">{a.course}</span>
            <span className="alumni-item__proj">{a.blurb}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function TeachingPage() {
  const T = window.LAB.TEACHING;
  return (
    <>
      <SiteNav active="teaching" />
      <TeachingHero />
      <Activities />
      <CourseList eyebrow="§ University of Guelph" title="Courses" courses={T.current} />
      <CourseList eyebrow="§ Earlier" title="Thompson Rivers University & University of Saskatchewan" courses={T.earlier} />
      <section className="alumni">
        <span className="eyebrow">§ Projects</span>
        <h2 style={{ marginTop: 16 }}>Project supervision</h2>
        <p style={{ color: 'var(--ink-soft)', maxWidth: '64ch', fontSize: 17 }}>{T.projects}</p>
      </section>
      <SiteFooter />
    </>
  );
}

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