---
const groups = [
  {
    title: 'Board Certified Behavioral Analysts & Psychologists',
    members: [
      ['team-rula-diab.webp', 'Rula Diab, BCBA, LBA, M.Ed', 'Clinical Director'],
      ['team-jennifer-espinoza.webp', 'Jennifer Espinoza, MAOL/ABA', 'Clinical BCBA'],
      ['team-timirah-clay.webp', 'Timirah Clay, M.Psy/ABA', 'Clinical BCBA']
    ]
  },
  {
    title: 'Clinical Support',
    members: [
      ['team-carol-harrington.webp', 'Carol Harrington, A.A. Spec. Ed.', 'Clinical Manager'],
      ['team-rachel-crosby.webp', 'Rachel Crosby', 'Clinical Administrator'],
      ['team-jennifer-bonefont.webp', 'Jennifer Bonefont, B.A. Psy', 'Clinical Client Advocate Supervisor']
    ]
  },
  {
    title: 'Clinical Case Supervisors',
    members: [['team-rachael-sanchez.webp', 'Rachael Sanchez, BS, M Psy/ABA', 'Clinical Supervisor']]
  },
  {
    title: 'Clinical Education Specialists',
    members: [['team-mahima-bedi.webp', 'Mahima Bedi', 'Clinical Instructor']]
  },
  {
    title: 'ABA Clinic Management',
    members: [
      ['team-mariah-marley.webp', 'Mariah Marley', 'Claims Billing'],
      ['team-eney-garcia.webp', 'Eney Garcia, BA', 'Accounts Billing'],
      ['team-ayah-shahbander.webp', 'Ayah Shahbander', 'Human Resources'],
      ['team-barbara-samanich.webp', 'Barbara Samanich, BFA', 'Creative Marketing Developer']
    ]
  }
];
---
<article class="team-page">
  <section class="team-intro container-narrow">
    <h2>Our Clinical Team</h2>
    <p class="script-label">Arizona Institute for Autism<br />Scottsdale, Arizona</p>
    <p>AIA's clinical team consists of experienced professionals and paraprofessionals as well as Board Certified Behavior Analysts (BCBA) and Psychologists who have diverse experience and expertise.</p>
  </section>
  {groups.map((group) => (
    <section class="team-group container">
      <h2>{group.title}</h2>
      <div class="team-grid">
        {group.members.map(([image, name, role]) => (
          <article class="team-member">
            <img src={`/assets/images/${image}`} alt={name} loading="lazy" />
            <h3>{name}</h3>
            <p>{role}</p>
          </article>
        ))}
      </div>
    </section>
  ))}
  <section class="team-careers">
    <div class="container-narrow">
      <p class="script-label">Join the AIA Team!</p>
      <h2>Employment Opportunities</h2>
      <p>Apply online to join the AIA team! At the Arizona Institute for Autism (AIA) we are on a mission to improve special education and strengthen communities throughout Arizona.</p>
      <p>Our talented and passionate employees are a critical piece to the high-quality ABA therapy we provide along with our commitment to behavioral health, school solutions, and community outreach.</p>
      <a class="button" href="/careers">View Open Positions</a>
    </div>
  </section>
</article>

<style>
  .team-intro { padding-block: 4rem; text-align: center; }
  .team-intro .script-label { font-size: 1.8rem; }
  .team-group { padding-block: 2rem 4rem; text-align: center; }
  .team-group > h2 { margin: 0 auto 2.5rem; max-width: 760px; }
  .team-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; }
  .team-member img { aspect-ratio: 1 / 1.08; border: 5px solid var(--color-primary-dark); border-radius: 15px; object-fit: cover; width: 100%; }
  .team-member h3 { font-size: 1.1rem; margin-bottom: .25rem; }
  .team-member p { margin: 0; }
  .team-careers { background: var(--color-tint); padding-block: 5rem; text-align: center; }
  @media (max-width: 950px) {
    .team-grid { grid-template-columns: 1fr; }
  }
  @media (min-width: 761px) and (max-width: 1050px) {
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
</style>