/* Meet the team — portrait grid with bios + languages spoken */
function Team() {
  const people = [
    {
      img: 'assets/images/team-lead.png',
      name: 'Dr. Elizabeth Jordan',
      cred: 'MD, CCFP',
      role: 'Family physician · Clinic lead',
      bio: 'Elizabeth founded Tidewell after a decade in busy Vancouver walk-in and family practice. She believes the hardest part of health care should be the diagnosis, not the door. Outside the clinic, she is usually on the seawall with a very slow dog.',
    },
    {
      img: 'assets/images/team-2.png',
      name: 'Dr. Samuel Prind',
      cred: 'MD, CCFP',
      role: 'Family physician',
      bio: 'Sam looks after families across every age, with a soft spot for the chaos of a good pediatric afternoon. He is known for explaining things in plain language, twice if needed.',
    },
    {
      img: 'assets/images/team-lindqvist.png',
      name: 'Dr. Astrid Lindqvist',
      cred: 'MD, CCFP',
      role: 'Family physician',
      bio: 'Astrid sees patients of every age and has a steady hand with same-day visits. She is happiest when a quick walk-in turns into a long-term relationship.',
    },
    {
      img: 'assets/images/team-haddad.png',
      name: 'Dr. Layla Haddad',
      cred: 'MD, CCFP',
      role: 'Family physician · Women\u2019s health',
      bio: 'Layla focuses on women\u2019s and sexual health alongside general family practice. She makes space for the questions people often save until the end of a visit.',
    },
    {
      img: 'assets/images/team-chen.png',
      name: 'Dr. David Chen',
      cred: 'MD, CCFP',
      role: 'Family physician · Chronic care',
      bio: 'David coordinates ongoing care for diabetes, blood pressure, and thyroid concerns. He believes good follow-up is the quiet half of good medicine.',
    },
    {
      img: 'assets/images/team-rojas.png',
      name: 'Mateo Rojas',
      cred: 'RN, NP',
      role: 'Nurse practitioner',
      bio: 'Mateo runs same-day and virtual visits, and keeps in-office procedures simple and calm. He explains the plan plainly before you leave.',
    },
    {
      img: 'assets/images/team-nurse.png',
      name: 'Alison Tyler',
      cred: 'RN, NP',
      role: 'Nurse practitioner',
      bio: 'Alison handles same-day visits, chronic-condition follow-ups, and women\u2019s health. She is the reason your appointment runs on time and your questions get answered.',
    },
    {
      img: 'assets/images/team-coordinator.png',
      name: 'Daniel Reyes',
      cred: '',
      role: 'Clinic coordinator',
      bio: 'Daniel keeps the front of house calm and the schedule honest. If you booked online, he is the one making sure you are seen when promised.',
    },
  ];
  const langs = ['English', 'Cantonese', 'Mandarin', 'Tagalog', 'Punjabi', 'Spanish'];
  return (
    <Section bg="var(--paper)" id="team">
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 48 }}>
          <div style={{ maxWidth: 640 }}>
            <Overline style={{ marginBottom: 14 }}>Meet the team</Overline>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 40, lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--ink-900)', margin: '0 0 16px' }}>The people in your corner</h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, lineHeight: 1.6, color: 'var(--ink-500)', margin: 0 }}>A small, steady team you will actually recognise on your next visit.</p>
          </div>
          <IllusTag>Sample clinicians</IllusTag>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {people.map((p) => (
            <div key={p.name}>
              <div style={{ aspectRatio: '4/5', borderRadius: 'var(--r-lg)', background: `url(${p.img}) center/cover`, boxShadow: 'var(--shadow-sm)' }}></div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 21, color: 'var(--ink-900)', margin: '18px 0 2px', letterSpacing: '-0.01em' }}>
                {p.name}{p.cred && <span style={{ fontSize: 14, color: 'var(--ink-400)', fontFamily: 'var(--font-sans)', fontWeight: 600 }}>, {p.cred}</span>}
              </h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: 600, color: 'var(--teal-700)', margin: '0 0 10px' }}>{p.role}</p>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--ink-500)', margin: 0 }}>{p.bio}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', borderTop: '1px solid var(--line)', paddingTop: 28 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 700, color: 'var(--ink-900)' }}>
            <Icon name="languages" size={19} color="var(--teal-700)" /> Languages spoken
          </span>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {langs.map((l) => <Chip key={l} variant="sand">{l}</Chip>)}
          </div>
        </div>
      </Container>
    </Section>
  );
}
window.Team = Team;