// Contact page — simple grid: email, office, mailing address, collaborate.

function ContactPage() {
  return (
    <>
      <SiteNav active="contact" />
      <section className="contact">
        <span className="eyebrow">§ Contact</span>
        <h1>Get in touch.</h1>
        <p className="contact__lede">
          For collaboration, prospective students, or media inquiries —
          email Dr. Yan directly. We try to respond within a week.
        </p>

        <div className="contact-block">
          <div className="contact-block__label">Email</div>
          <div className="contact-block__body">
            <p><a href="mailto:yyan15@uoguelph.ca">yyan15@uoguelph.ca</a></p>
            <p style={{ color: 'var(--ink-mute)', fontSize: 15 }}>
              For grad-student applications, mention your background and what
              about the lab's work caught your attention.
            </p>
          </div>
        </div>

        <div className="contact-block">
          <div className="contact-block__label">GitHub</div>
          <div className="contact-block__body">
            <p><a href="https://github.com/orgs/LabBioAI">github.com/LabBioAI</a></p>
            <p style={{ color: 'var(--ink-mute)', fontSize: 15 }}>
              Code and data from the lab's projects.
            </p>
          </div>
        </div>

        <div className="contact-block">
          <div className="contact-block__label">Where</div>
          <div className="contact-block__body">
            <p>School of Computer Science</p>
            <p>University of Guelph</p>
          </div>
        </div>

        <div className="contact-block">
          <div className="contact-block__label">Collaborate</div>
          <div className="contact-block__body">
            <p>
              We work with agricultural, clinical, and policy partners on
              applied AI projects. If you have a problem in mind, tell us about
              it — even early ideas welcome.
            </p>
            <p style={{ marginTop: 16 }}>
              <a href="mailto:yyan15@uoguelph.ca?subject=Lab collaboration">Start a conversation →</a>
            </p>
          </div>
        </div>
      </section>
      <SiteFooter />
    </>
  );
}

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