// TeamPage — "Meet the team". Photo + name + role for every team member.
// Each card shows a short bio teaser; clicking opens a modal with the full bio,
// so the grid never reflows. Members without a headshot fall back to initials.

function TeamPhoto({ m, accent, style }) {
  const initials = m.name.split(" ").map((w) => w[0]).slice(0, 2).join("");
  if (m.image) {
    // Photos in /team are pre-cropped to a consistent face scale, placement and
    // brightness (normalised offline), so a plain cover fill keeps them uniform.
    return (
      <img
        className="kl-team-photo"
        src={`../../assets/images/team/${m.image}`}
        alt={m.name}
        loading="lazy"
        decoding="async"
        style={{ objectFit: "cover", objectPosition: "center", display: "block", borderRadius: "var(--kl-radius-card)", background: accent.bg, ...style }}
      />
    );
  }
  return (
    <div aria-label={`${m.name} placeholder photo`} style={{ borderRadius: "var(--kl-radius-card)", background: accent.bg, display: "grid", placeItems: "center", ...style }}>
      <span style={{ fontFamily: "var(--kl-font-display)", fontWeight: "var(--kl-weight-emphasis)", fontSize: "2.6rem", color: accent.fg, letterSpacing: "0.02em" }}>{initials}</span>
    </div>
  );
}

function TeamMemberCard({ m, accent, onOpen }) {
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onOpen}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpen(); } }}
      style={{ display: "flex", flexDirection: "column", cursor: "pointer", textAlign: "left", minWidth: 0 }}
    >
      <TeamPhoto m={m} accent={accent} style={{ width: "100%", aspectRatio: "1 / 1", marginBottom: 16 }} />
      <h3 className="kl-team-name" style={{ fontSize: "var(--kl-text-h5)", marginBottom: 4 }}>{m.name}</h3>
      <p className="kl-team-role" style={{ fontWeight: 600, fontSize: "var(--kl-text-small)", color: "var(--kl-plum)", marginBottom: 12 }}>{m.role}</p>
      <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, color: "var(--kl-fg-2)", marginBottom: 12, display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: 3, overflow: "hidden" }}>{m.bio}</p>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--kl-plum)", fontWeight: 600, fontSize: "var(--kl-text-small)", marginTop: "auto" }}>
        Read more
        <MIcon name="arrow_forward" size={16} color="var(--kl-plum)" />
      </span>
    </div>
  );
}

function TeamBioModal({ m, accent, enquire, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [onClose]);

  if (!m) return null;
  return (
    <div
      className="kl-modal"
      onClick={onClose}
      style={{ position: "fixed", inset: 0, zIndex: 1000, background: "rgba(36, 24, 40, 0.55)", display: "grid", placeItems: "center", padding: 24 }}
    >
      <div
        className="kl-modal__card"
        role="dialog"
        aria-modal="true"
        aria-label={`${m.name}, ${m.role}`}
        onClick={(e) => e.stopPropagation()}
        style={{ position: "relative", background: "var(--kl-white)", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)", maxWidth: 560, width: "100%", maxHeight: "85vh", overflowY: "auto", padding: 32 }}
      >
        <button
          type="button"
          onClick={onClose}
          aria-label="Close"
          style={{ position: "absolute", top: 16, right: 16, width: 36, height: 36, borderRadius: "50%", border: "none", background: "var(--kl-gray-nurse-lightest, #f1eef2)", cursor: "pointer", display: "grid", placeItems: "center" }}
        >
          <MIcon name="close" size={20} color="var(--kl-fg-1)" />
        </button>
        <div style={{ display: "flex", gap: 20, alignItems: "center", marginBottom: 24, paddingRight: 40 }}>
          <TeamPhoto m={m} accent={accent} style={{ width: 88, height: 88, flexShrink: 0 }} />
          <div>
            <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 4 }}>{m.name}</h3>
            <p style={{ fontWeight: 600, fontSize: "var(--kl-text-small)", color: "var(--kl-plum)" }}>{m.role}</p>
          </div>
        </div>
        <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, color: "var(--kl-fg-2)" }}>{m.bio}</p>
        {/* Turn interest in a therapist into an enquiry — the form arrives pre-filled. */}
        {enquire && <div style={{ marginTop: 28 }}>
          <Button
            variant="primary"
            iconRight={<ChevronRight />}
            onClick={() => {
              if (window.klTrack) window.klTrack("team_enquiry_click", { member: m.name });
              onClose();
              scrollToContact(`I'd like to enquire about working with ${m.name}.`);
            }}
          >
            Enquire about working with {m.name.split(" ")[0]}
          </Button>
        </div>}
      </div>
    </div>
  );
}

function TeamPage() {
  const [active, setActive] = useState(null);
  const accents = [
    { bg: "var(--kl-plum-lightest)", fg: "var(--kl-plum)" },
    { bg: "var(--kl-leaf-lightest)", fg: "var(--kl-leaf-darker)" },
    { bg: "var(--kl-sun-lightest)",  fg: "var(--kl-sun-dark)" },
  ];

  const therapists = [
    {
      name: "Jackie Sikic", role: "Director",
      image: "Jackie.JPG",
      bio: "Jackie founded Kid Link with the goal of creating a welcoming, supportive environment where team culture is a priority and families receive consistent, extraordinary service. She is passionate about partnering with educational settings and organisations that prioritise inclusion and child-centred support, and loves mentoring other OTs to help them become exceptional therapists. Jackie has extensive experience across non-government organisations, hospitals, schools and private practice. She holds a Bachelor of Occupational Therapy from Deakin University and is endorsed by OT Australia to practice within the Medicare Better Access to Mental Health program.",
    },
    {
      name: "Caitlyn Cowie", role: "Clinical Lead Occupational Therapist",
      image: "Cowie.JPG",
      bio: "Caitlyn is passionate about supporting families to feel confident and competent in helping their child across all environments through sharing knowledge, ideas and strategies. She understands that no single approach suits every family, and aims to provide flexible, fun and family-centred therapy that focuses on wellbeing and independence. Caitlyn holds a Bachelor of Occupational Therapy (Honours) from Monash University and is endorsed by OT Australia to practice within the Medicare Better Access to Mental Health program.",
    },
    {
      name: "Danni Gheorghe", role: "Senior Occupational Therapist",
      image: "Danni.JPG",
      bio: "Danni is passionate about collaborating with children, young people and their families to support greater independence and fulfilment in daily life. She strives to empower clients and their families to become experts in problem solving and managing their own challenges, working towards meaningful and lasting outcomes. Danni holds an undergraduate degree in Applied Sciences (Psychology) from Deakin University and a Masters in Occupational Therapy Practice from Monash University, with a special interest in paediatrics. She is endorsed by OT Australia to practice within the Medicare Better Access to Mental Health program.",
    },
    {
      name: "Mikayla Heaton", role: "Senior Occupational Therapist",
      image: "Mikayla.JPG",
      bio: "Mikayla is passionate about giving children and teens the best opportunity to develop and flourish as independent individuals. She tailors sessions to each family's needs, interests and skill levels, taking a strengths-based and evidence-informed approach, and aims to make therapy both fun and functional so that skills transfer to the home to maximise outcomes. Mikayla holds a Bachelor of Occupational Therapy (Honours) from Monash University and is endorsed by OT Australia to practice within the Medicare Better Access to Mental Health program.",
    },
    {
      name: "Caitlin Smith", role: "Senior Occupational Therapist",
      image: "Caitlin%20Smith.JPG",
      bio: "Caitlin is passionate about supporting children and young people to reach their potential within their daily activities. She provides family-centred education and individual skill development in a tailored, collaborative and engaging way, empowering clients and families to build confidence and independence at home and in the community. Caitlin holds a Bachelor of Health Science and a Master of Occupational Therapy Practice from La Trobe University, with a special interest in paediatrics, and is endorsed by OT Australia to practice within the Medicare Better Access to Mental Health program.",
    },
    {
      name: "Caity Waters", role: "Senior Occupational Therapist",
      image: "Caity.JPG",
      bio: "Caity is passionate about working collaboratively with children and their families to develop and achieve their unique goals in a fun, supportive and engaging way. She uses a strengths-based and family-centred approach, recognising each person's individual interests, abilities and potential to support participation, wellbeing and confidence in daily life. Caity holds a Bachelor of Arts (Psychology) and a Master of Occupational Therapy from Monash University, with a particular focus on paediatric practice.",
    },
    {
      name: "Josh White", role: "Senior Occupational Therapist",
      image: "Josh.JPG",
      bio: "Josh is passionate about helping children reach their potential within a trusting, fun and collaborative therapy environment. He understands the importance of a holistic approach when working with families, supporting each child's independence and development across all domains to foster learning within the family dynamic. Josh holds a Bachelor of Occupational Therapy from Australian Catholic University, has a special interest in paediatrics, and is endorsed by OT Australia to practice within the Medicare Better Access to Mental Health program.",
    },
    {
      name: "Alyssa Armytage", role: "Occupational Therapist",
      image: "Alyssa.JPG",
      bio: "Alyssa embraces individual differences and diversity, and believes every child deserves to feel included and have fun in their sessions. She is passionate about empowering families and supporting children to achieve their goals through meaningful, strengths-based therapy that builds on each child's unique abilities and interests. Alyssa holds a Bachelor of Occupational Therapy from Australian Catholic University.",
    },
    {
      name: "Georgia Cassell-Ashton", role: "Occupational Therapist",
      image: "Georgia.JPG",
      bio: "Georgia is passionate about working together with children and families to build a collaborative relationship that supports the development of skills, joy and opportunity. She strives to create an engaging, safe and exciting environment for family-centred practice that supports goal achievement and the exploration of each child's interests. Georgia holds a Bachelor of Occupational Therapy (Honours) from Monash University.",
    },
    {
      name: "Dayna Chea", role: "Occupational Therapist",
      image: "Dayna.JPG",
      bio: "Dayna recognises the importance of a collaborative and strengths-based approach to therapy, which she reflects through creating a fun, trusting and nurturing environment. She loves working closely with families to tailor therapy to their specific goals, empowering them to take ownership of their therapy journey and achieve meaningful outcomes. Dayna holds a Bachelor of Occupational Therapy (Honours) from Monash University.",
    },
    {
      name: "Maddie Kearsley", role: "Occupational Therapist",
      image: "Maddie.JPG",
      bio: "Maddie enjoys empowering children and understands the importance of providing an engaging, positive and trusting environment to help them reach their potential. She is passionate about using a family-centred and strengths-based approach to support children and their families to build skills and achieve the outcomes that matter most to them. Maddie holds a Bachelor of Occupational Therapy from Australian Catholic University.",
    },
    {
      name: "Keely Larsen", role: "Occupational Therapist",
      image: "Keely.JPG",
      bio: "Keely is passionate about using a strengths-based and collaborative approach to empower children and families to engage in the daily activities that matter to them. She loves learning about clients' interests and hobbies and incorporating them into sessions, aiming to create a safe, nurturing, and engaging environment to achieve meaningful outcomes. Keely holds a Bachelor of Occupational Therapy (Honours) from Monash University.",
    },
    {
      name: "Gabriel Mello", role: "Occupational Therapist",
      image: "Gabs.JPG",
      bio: "Gabs is passionate about empowering young people to increase their independence and achieve their goals through an individualised, family-centred and fun approach. He enjoys learning about each client's interests, hobbies and passions and integrating them into sessions, and values building trusting, warm and approachable relationships with the families he works alongside. Gabs holds a Double Bachelor of Education (Secondary Teaching) and Fine Art and a Master of Occupational Therapy.",
    },
    {
      name: "Emily Milner", role: "Occupational Therapist",
      image: "Emily.JPG",
      bio: "Emily is passionate about supporting young people to reach their full potential, become more independent and thrive. She understands the importance of working alongside families to empower them with the skills they need to achieve their goals, and always adopts a strengths-based approach grounded in current evidence within a safe, fun and trusting therapeutic environment. Emily holds a Bachelor of Occupational Therapy (Honours) from Monash University.",
    },
    {
      name: "Celina Matlock", role: "Occupational Therapist",
      image: "Celina.JPG",
      bio: "Celina has a Bachelor of Occupational Therapy from Australian Catholic University (ACU) and joined the Kid Link team in 2026. Celina strives to create collaborative, safe and engaging environments in which children are supported to develop skills that facilitate engagement and joy. Celina is passionate about therapeutic relationships built on trust, warmth and openness, and prioritises a family-centred care approach to work towards goal achievement.",
    },
    {
      name: "Jessie Williams", role: "Occupational Therapist",
      image: "Jessie.JPG",
      bio: "Jessie has a Bachelor of Occupational Therapy from Australian Catholic University (ACU) and began working at Kid Link in 2026. Jessie is passionate about collaboratively working alongside children and their families to support participation in their everyday meaningful activities. Jessie is committed to creating an engaging, supportive and motivating environment where children are encouraged to build independence, gain confidence and achieve the goals that are most important to them.",
    },
  ];

  const support = [
    {
      name: "Chelsea Rice", role: "Practice Manager",
      image: "Chelsea.JPG",
      bio: "Chelsea is dedicated to optimising operations through effective policies and procedures, and ensuring a safe and efficient environment for both staff and families. With a firm belief in the power of teamwork, she values feedback from the Kid Link community, as your thoughts and suggestions play a crucial role in continually improving our services. Chelsea brings extensive allied health experience to her role as Practice Manager.",
    },
    {
      name: "Rachel Burke", role: "Family Liaison Coordinator",
      image: "Rachael.JPG",
      bio: "Rachel fosters positive interactions with children and families, helping to create a welcoming space where children can thrive. She combines her teaching background with her liaison role to effectively connect families with the OT team, supporting them at every stage of their Kid Link journey and ensuring families feel heard and supported. Rachel brings valuable experience from many years teaching in Early Childhood and Adult Education.",
    },
    {
      name: "Eliza Evans", role: "Family Liaison Coordinator",
      image: "Eliza.JPG",
      bio: "Eliza plays a key role in the smooth running of our front desk and administrative functions. With a passion for creating a warm and organised environment, she is dedicated to providing exceptional support to both families and staff, helping to set the tone for a positive experience from the moment families walk through the door.",
    },
    {
      name: "Zoe Jenkins", role: "Family Liaison Coordinator",
      image: "Zoe.JPG",
      bio: "Zoe is currently studying a Bachelor of Primary Education, which steers her passion for working with and supporting families. Zoe uses this passion to ensure experiences at Kid Link reflect positive interactions with professionals who truly care. Zoe comes with administration experience in other allied health sectors which helps influence her ability to support families. Zoe dedicates herself to creating welcoming environments where communication is clear and seamless.",
    },
    {
      name: "Michael Daniels", role: "Digital Learning Coordinator",
      image: "Michael.JPG",
      bio: "Michael works behind the scenes across Kid Link's operations, systems, and digital presence, helping the team spend more time doing what they do best: supporting kids and families.",
    },
  ];

  return (
    <>
      <Hero
        eyebrow="Our team"
        title={<>Meet the <span style={{ color: "var(--kl-sun)" }}>Kid Link</span> team</>}
        body="An experienced group of occupational therapists and support staff who put families and children at the centre of everything we do, across therapy, education and consulting."
        image="../../assets/images/team-photo.jpg"
        imageFocus="50% 12%"
        primaryLabel="Enquire Now"
      />

      <Section scheme="scheme-2">
        <SectionHeader
          eyebrow="Our team"
          title="The people behind Kid Link"
          lede="Our therapists are led by our director and clinical lead, supported by senior and graduate occupational therapists, our practice manager, and our family liaison coordinators. Click any team member to read their bio."
        />
        <div className="kl-cols-4 kl-team-grid" style={{ gap: 32, alignItems: "stretch" }}>
          {therapists.map((m, i) => {
            const accent = accents[i % accents.length];
            return <TeamMemberCard key={m.name} m={m} accent={accent} onOpen={() => setActive({ m, accent, enquire: true })} />;
          })}
        </div>
      </Section>

      <Section scheme="scheme-1">
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>Practice and family support</Eyebrow>
          <h2 style={{ fontSize: "var(--kl-text-h2)", marginTop: 12, lineHeight: 1.15 }}>The team keeping everything running</h2>
        </div>
        <div className="kl-cols-4 kl-team-grid" style={{ gap: 32, alignItems: "stretch" }}>
          {support.map((m, i) => {
            const accent = accents[i % accents.length];
            return <TeamMemberCard key={m.name} m={m} accent={accent} onOpen={() => setActive({ m, accent })} />;
          })}
        </div>
      </Section>

      <Contact
        showBooking={false}
        intro="Want to work with our team or have a question? Send us a message and our admin team will respond within 1-2 business days."
      />

      {active && <TeamBioModal m={active.m} accent={active.accent} enquire={active.enquire} onClose={() => setActive(null)} />}
    </>
  );
}

window.TeamPage = TeamPage;
