// CliniciansPage — sitemap.md §Clinicians (18 sections). Supervision, courses, community.

function CliniciansPage() {
  const { go } = useRoute();
  return (
    <>
      {/* §2 Hero */}
      <Hero
        eyebrow="OCCUPATIONAL THERAPISTS AND CLINICIANS"
        title={<>Courses and supervision to <span style={{ color: "var(--kl-sun)" }}>grow</span> your practice</>}
        body="Kid Link supports OTs at every stage of their career, from new graduates starting in paediatrics to experienced clinicians needing support with advanced areas of practice and leadership."
        image="../../assets/images/clinicians-hero.jpg"
        imageFocus="62% 35%"
        primaryLabel="Book Supervision"
        onPrimary={() => window.open(SPLOSE_SUPERVISION_URL, "_blank", "noopener,noreferrer")}
        secondaryLabel="Explore our courses"
        onSecondary={() => {
          const el = document.getElementById("education");
          if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
        }}
      />

      {/* §3 4 offer cards */}
      <Section scheme="scheme-2">
        <SectionHeader
          eyebrow="What we offer"
          title="Four ways to grow your practice"
          lede="Pick one or pair them. Each pathway is built around how busy clinicians actually learn."
        />
        <div className="kl-cols-4" style={{ gap: 32 }}>
          {[
            {
              accent: "var(--kl-plum)", soft: "var(--kl-plum-lightest)",
              label: "Supervision", title: "Clinical Supervision", href: "#supervision",
              body: "Reflective supervision with senior OTs, shaped to your career stage.",
              tags: ["Reflective practice", "Senior OT supervisors", "Every career stage"],
            },
            {
              accent: "var(--kl-leaf-dark)", soft: "var(--kl-leaf-lightest)",
              label: "Community", title: "OT Link Community", href: "#ot-link",
              body: "Peer connection, resources, and practitioner updates for paediatric OTs.",
              tags: ["Peer connection", "Resource library", "Supervision options"],
            },
            {
              accent: "var(--kl-sun-dark)", soft: "var(--kl-sun-lightest)",
              label: "Education", title: "Online Courses", href: "#education",
              body: "Webinars and self-paced modules with CPD hours.",
              tags: ["Webinars", "Self-paced", "CPD hours"],
            },
            {
              accent: "var(--kl-gray-nurse-darker)", soft: "var(--kl-gray-nurse-light)",
              label: "Mentoring", title: "Business Mentoring", href: "#mentoring",
              body: "Build, scale, or refine your private practice.",
              tags: ["Start up", "Scale", "Refine"],
            },
          ].map((c) => (
            <Card key={c.title} style={{ padding: 32, display: "flex", flexDirection: "column" }}>
              <span style={{ color: c.accent, fontWeight: 800, fontSize: "0.72rem", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 12 }}>{c.label}</span>
              <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 16 }}>{c.title}</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, marginBottom: 24 }}>{c.body}</p>
              <div style={{ marginTop: "auto", paddingTop: 20, borderTop: "1px solid var(--kl-border)", display: "flex", flexDirection: "column", gap: 12 }}>
                {c.tags.map((t) => (
                  <div key={t} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span style={{ flexShrink: 0, width: 24, height: 24, borderRadius: 8, background: c.soft, display: "grid", placeItems: "center" }}>
                      <MIcon name="check" size={15} color={c.accent} />
                    </span>
                    <span style={{ fontSize: "0.92rem", fontWeight: 600, color: "var(--kl-fg-1)" }}>{t}</span>
                  </div>
                ))}
              </div>
              <a href={c.href} className="kl-btn kl-btn--primary" style={{ marginTop: 20, alignSelf: "flex-start", padding: "0.8rem 1.6rem" }}>{c.cta || "Learn more"}</a>
            </Card>
          ))}
        </div>
      </Section>


      {/* §5 Clinical Supervision — intro + who it is for */}
      <Section scheme="scheme-1" id="supervision">
        <div className="kl-split" style={{ gap: 80, alignItems: "center" }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow>Clinical Supervision</Eyebrow>
            <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.15 }}>Clinical supervision with senior OTs</h2>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 28 }}>
              Kid Link's external supervision service is designed to support your growth across professional, clinical, organisational, and personal goals - wherever you are in your career. You will work with a senior Kid Link OT to deepen your knowledge, build your skills, and develop the reflective practice that transforms the way you work. Supervision is delivered via Zoom and is available to OTs across Australia.
            </p>
            <Button variant="primary" iconRight={<ChevronRight />} onClick={() => window.open(SPLOSE_SUPERVISION_URL, "_blank", "noopener,noreferrer")}>Book Supervision</Button>
          </div>
          <img
            src="../../assets/images/clinicians1.jpg"
            alt=""
            style={{ width: "100%", height: 480, objectFit: "cover", display: "block", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)" }}
          />
        </div>

        <div style={{ marginTop: 80 }}>
          <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 32, textAlign: "center" }}>Who it is for</h3>
          <div className="kl-cols-4" style={{ gap: 24 }}>
            {[
              { i: "school",     b: "New graduates entering paediatric practice" },
              { i: "menu_book",  b: "OTs moving into or upskilling within paediatrics" },
              { i: "psychology", b: "Experienced OTs seeking to develop in advanced areas of practice" },
              { i: "groups",     b: "Clinicians seeking a structured, reflective, supervisory relationship" },
            ].map((c) => (
              <Card key={c.b} style={{ background: "var(--kl-white)", padding: 28, display: "flex", flexDirection: "column", gap: 16 }}>
                <MIcon name={c.i} size={32} />
                <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.5 }}>{c.b}</p>
              </Card>
            ))}
          </div>
        </div>
      </Section>

      {/* §6 Supervision can cover — Four Pillars interactive wheel */}
      <PillarWheel />

      {/* §6b Our supervisors */}
      <Section scheme="scheme-1">
        <div className="kl-split" style={{ gap: 80, alignItems: "stretch" }}>
          <div style={{ maxWidth: 520 }}>
            <Eyebrow>Our supervisors</Eyebrow>
            <h2 style={{ fontSize: "var(--kl-text-h3)", marginBottom: 24, lineHeight: 1.15 }}>Senior therapists who meet our internal criteria</h2>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 28 }}>
              All Kid Link supervisors are senior therapists who have demonstrated advanced clinical capability and met our internal performance criteria before joining the supervision team. All Kid Link supervisors have:
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {[
                "Better Access to Mental Health endorsement",
                "Extensive experience across paediatric OT practice areas",
                "Experience supervising students and early career OTs",
                "Demonstrated leadership and interpersonal skills",
                "Developed and presented professional development content",
              ].map((b) => (
                <li key={b} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "12px 0", borderBottom: "1px solid var(--kl-border)", fontSize: "var(--kl-text-regular)", lineHeight: 1.5 }}>
                  <MIcon name="check_circle" size={20} color="var(--kl-plum)" />
                  {b}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ display: "flex", flexDirection: "column" }}>
            <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 6 }}>Meet the supervision team</h3>
            <p style={{ fontSize: "var(--kl-text-small)", color: "var(--kl-fg-2)", marginBottom: 20 }}>Senior paediatric OTs who have done the work and stayed curious.</p>
            <div style={{ flex: 1, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gridAutoRows: "1fr", gap: 16 }}>
              {[
                { n: "Caitlyn Cowie",   r: "Clinical Lead Occupational Therapist" },
                { n: "Danni Gheorghe",  r: "Senior Occupational Therapist" },
                { n: "Caitlin Smith",   r: "Senior Occupational Therapist", img: "Caitlin Smith.JPG" },
                { n: "Josh White",      r: "Senior Occupational Therapist" },
                { n: "Mikayla Heaton",  r: "Senior Occupational Therapist" },
                { n: "Caitlin Waters",  r: "Senior Occupational Therapist" },
              ].map((p) => (
                <Card key={p.n} style={{ background: "var(--kl-white)", padding: "14px 16px", display: "flex", alignItems: "center", gap: 14 }}>
                  <div style={{ width: 96, height: 96, borderRadius: 999, overflow: "hidden", flexShrink: 0, background: "var(--kl-plum-lightest)" }}>
                    <img
                      src={`../../assets/images/${p.img || p.n + ".jpg"}`}
                      alt={p.n}
                      style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", transform: p.zoom ? `scale(${p.zoom})` : "none", transformOrigin: "center top" }}
                    />
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <p style={{ fontWeight: 600, fontSize: "var(--kl-text-regular)" }}>{p.n}</p>
                    <p style={{ fontSize: "var(--kl-text-small)", color: "var(--kl-fg-2)" }}>{p.r}</p>
                  </div>
                </Card>
              ))}
            </div>
            <div style={{ marginTop: 20 }}>
              <Button variant="link" iconRight={<ChevronRight />} onClick={() => go("team")}>Meet the full Kid Link team</Button>
            </div>
          </div>
        </div>
      </Section>

      {/* §7 OT Link — subscription community */}
      <Section scheme="scheme-2" id="ot-link">
        <div className="kl-split" style={{ gap: 80, alignItems: "center" }}>
          <img
            src="../../assets/images/clinicians2.jpg"
            alt=""
            style={{ width: "100%", height: 480, objectFit: "cover", display: "block", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)" }}
          />
          <div style={{ maxWidth: 540 }}>
            <Eyebrow>Subscription Community</Eyebrow>
            <h2 style={{ marginBottom: 24, lineHeight: 1.15 }}>
              <img src="../../assets/logos/OT-Link-Logo-CMYK-Primary.png" alt="OT Link" style={{ height: 56, width: "auto", maxWidth: "100%", display: "block" }} />
            </h2>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 20 }}>
              OT Link is Kid Link's subscription community for occupational therapists who want more than just CPD. It's a place to connect, learn, ask questions without judgement, and keep growing alongside like-minded OTs.
            </p>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 28 }}>
              All memberships include access to the OT Link Community and the PD Booster Course Library, with group and individual supervision membership options also available. Whether you are looking for peer connection, structured learning, or a combination of both, OT Link is built around what OTs actually need in practice.
            </p>
            <Button variant="primary" iconRight={<ChevronRight />} onClick={() => window.open("https://www.kidlinkeducation.com.au/bundles/ot-link-memberships", "_blank", "noopener,noreferrer")}>Join OT Link</Button>
          </div>
        </div>

        <div style={{ marginTop: 80 }}>
          <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 32, textAlign: "center" }}>Features</h3>
          <div className="kl-cols-4" style={{ gap: 24 }}>
            {[
              { i: "forum",     h: "Daily Q&A with Senior OTs",        b: "Ask questions and get practical answers from Kid Link senior OTs, without judgement." },
              { i: "school",    h: "Monthly 1-Hour PD Boosters",       b: "Regular live learning sessions covering timely and clinically relevant topics." },
              { i: "groups",    h: "Group and Individual Supervision", b: "Supervision membership options available for those wanting structured, ongoing support." },
              { i: "sell",      h: "Discounts to Other Content",       b: "Members receive discounts across Kid Link Education courses and other content." },
            ].map((c) => (
              <Card key={c.h} style={{ background: "var(--kl-card-bg)", padding: 28, display: "flex", flexDirection: "column" }}>
                <div style={{ marginBottom: 16 }}><MIcon name={c.i} size={32} /></div>
                <h4 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 10, lineHeight: 1.2 }}>{c.h}</h4>
                <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.5 }}>{c.b}</p>
              </Card>
            ))}
          </div>
        </div>

        {/* Membership pricing — shown here so clicking through to Kid Link
            Education is a confirmation, not a discovery. */}
        <div style={{ marginTop: 64 }}>
          <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 32, textAlign: "center" }}>Membership pricing</h3>
          <div className="kl-cols-3" style={{ gap: 24, maxWidth: 880, marginInline: "auto" }}>
            {[
              { name: "Access Basics", price: 49 },
              { name: "Advanced", price: 139 },
              { name: "Unlimited", price: 379 },
            ].map((t) => (
              <Card key={t.name} style={{
                background: "var(--kl-card-bg)", padding: 28, textAlign: "center",
                display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
              }}>
                <h4 style={{ fontSize: "var(--kl-text-h5)", lineHeight: 1.2 }}>{t.name}</h4>
                <p style={{ fontFamily: "var(--kl-font-display)", fontWeight: 700, fontSize: "2rem", color: "var(--kl-fg-1)" }}>
                  ${t.price}<span style={{ fontSize: "var(--kl-text-small)", fontWeight: 600, color: "var(--kl-fg-2)" }}> /month</span>
                </p>
                <a
                  href="https://www.kidlinkeducation.com.au/bundles/ot-link-memberships"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ marginTop: 10, fontWeight: 600, fontSize: "var(--kl-text-small)", color: "var(--kl-plum)", textDecoration: "underline", textUnderlineOffset: "0.2em" }}
                >
                  See what's included
                </a>
              </Card>
            ))}
          </div>
          <p style={{ textAlign: "center", fontSize: "var(--kl-text-small)", color: "var(--kl-fg-2)", marginTop: 20 }}>
            All tiers include the OT Link Community and PD Booster Course Library. Full inclusions and sign-up at Kid Link Education.
          </p>
        </div>
      </Section>

      {/* §8 Kid Link Education */}
      <Section scheme="scheme-2" id="education">
        <img
          src="../../assets/logos/KL-Education-Logo-CMYK-Primary.png"
          alt="Kid Link Education"
          style={{ height: 60, width: "auto", maxWidth: "80%", display: "block", margin: "0 auto 24px" }}
        />
        <SectionHeader
          title="Evidence-informed learning, built by experienced occupational therapists"
          lede="Following extensive experience supporting families, collaborating with teachers, and training occupational therapists, we are sharing what we know. Kid Link Education offers online courses and live webinars developed and presented by our experienced team. Practical, high-quality professional learning you can apply straight away."
          innerMax="56rem"
        />
        <div className="kl-cols-3" style={{ gap: 32, marginBottom: 56 }}>
          {[
            { i: "play_circle",     accent: "var(--kl-plum)",      soft: "var(--kl-plum-lightest)", h: "Online Courses for Clinicians",            b: "Self-paced, evidence-informed courses covering paediatric OT practice areas, from sensory processing and emotional regulation to PDA and anxiety. Access immediately and learn at a pace that suits your schedule. PD certificates included." },
            { i: "videocam",        accent: "var(--kl-leaf-darker)", soft: "var(--kl-leaf-lightest)", h: "Live Webinars",                            b: "Join our team for interactive, live professional development sessions. Webinars cover timely and clinically relevant topics, with the opportunity to ask questions and engage directly with our presenting therapists. Dates announced via our events page, newsletter, and social media." },
            { i: "family_restroom", accent: "var(--kl-sun-dark)",   soft: "var(--kl-sun-lightest)", h: "Resources for the Families You Work With", b: "Kid Link Education includes a growing library of courses and resources designed for parents and caregivers. As an OT, you can direct the families you work with to evidence-informed content that reinforces therapy goals between sessions." },
          ].map((c) => (
            <Card key={c.h} style={{ background: c.soft, borderTop: `4px solid ${c.accent}`, padding: 32, display: "flex", flexDirection: "column" }}>
              <div style={{ width: 56, height: 56, borderRadius: 16, background: c.accent, display: "grid", placeItems: "center", marginBottom: 20 }}>
                <MIcon name={c.i} size={30} color="#fff" />
              </div>
              <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 12, lineHeight: 1.2, color: c.accent }}>{c.h}</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55 }}>{c.b}</p>
            </Card>
          ))}
        </div>

        {/* Upcoming live webinar callout */}
        <div style={{ marginBottom: 40, background: "var(--kl-leaf-lightest)", borderRadius: "var(--kl-radius-card-lg)", padding: "24px 28px", display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 20 }}>
          <div style={{ display: "flex", gap: 16, alignItems: "flex-start", flex: "1 1 380px" }}>
            <MIcon name="event" size={28} color="var(--kl-leaf-darker)" />
            <div>
              <p style={{ fontWeight: 700, fontSize: "var(--kl-text-medium)", marginBottom: 4 }}>Next live webinar: Kids, Teens, and Digital Tech</p>
              <p style={{ fontSize: "var(--kl-text-regular)", color: "var(--kl-fg-2)" }}>Monday 6 July 2026 · Online · Essentials for clinicians supporting healthy technology use.</p>
            </div>
          </div>
          <a href="https://www.eventbrite.com.au/e/1989626822385?aff=oddtdtcreator" target="_blank" rel="noopener noreferrer" className="kl-btn kl-btn--primary" style={{ flexShrink: 0 }}>
            Register on Eventbrite
            <MIcon name="open_in_new" size={18} color="#fff" />
          </a>
        </div>

        {/* Tech webinar banner */}
        <a href="https://www.eventbrite.com.au/e/1989626822385?aff=oddtdtcreator" target="_blank" rel="noopener noreferrer" style={{ display: "block", maxWidth: 640, margin: "0 auto 40px" }}>
          <img
            src="../../assets/images/events-digital-tech.jpg"
            alt="Kids, Teens, and Digital Tech webinar"
            style={{ width: "100%", height: "auto", display: "block", borderRadius: "var(--kl-radius-card)", boxShadow: "var(--kl-card-shadow)" }}
          />
        </a>

        {/* Primary hand-off to the learning platform — full banner so it can't be
            missed; this is the only path to Kid Link Education from here. */}
        <div style={{
          background: "linear-gradient(135deg, var(--kl-plum) 0%, var(--kl-plum-dark) 100%)",
          borderRadius: "var(--kl-radius-card-lg)",
          boxShadow: "var(--kl-card-shadow)",
          padding: "clamp(28px, 4vw, 48px)",
          color: "#fff",
          display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between",
          gap: 32,
        }}>
          <div style={{ maxWidth: 620 }}>
            <span style={{
              display: "inline-block", color: "var(--kl-sun-light)", fontWeight: 800,
              fontSize: "0.74rem", letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 14,
            }}>Kid Link Education</span>
            <h3 style={{ color: "#fff", fontSize: "var(--kl-text-h3)", lineHeight: 1.12, marginBottom: 14 }}>
              Explore the full course library
            </h3>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.55, color: "rgba(255,255,255,0.9)", maxWidth: "52ch" }}>
              All of our online courses, live webinars and family resources live on our dedicated learning platform. Browse the library and start learning today.
            </p>
          </div>
          <a href="https://kidlinkeducation.com.au" target="_blank" rel="noopener noreferrer" className="kl-btn kl-btn--book">
            Browse courses at Kid Link Education
            <MIcon name="open_in_new" size={18} />
          </a>
        </div>

        <div style={{ position: "relative", left: "50%", marginLeft: "-50vw", width: "100vw", background: "var(--kl-plum)", marginTop: 64, marginBottom: 96 }}>
          <div style={{ maxWidth: "var(--kl-container)", marginInline: "auto", padding: "20px var(--kl-section-px)", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 16 }}>
            {[
              { v: "25+",    l: "courses available" },
              { v: "2,000+", l: "clinicians trained" },
            ].map((s, i) => (
              <div key={s.l} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, textAlign: "center", padding: "0 16px", borderLeft: i === 0 ? "none" : "1px solid rgba(255,255,255,0.22)" }}>
                <p style={{ fontFamily: "var(--kl-font-display)", fontWeight: "var(--kl-weight-emphasis)", fontSize: "2rem", color: "#fff", lineHeight: 1, letterSpacing: "-0.01em" }}>{s.v}</p>
                <p style={{ fontSize: "var(--kl-text-small)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.06em", color: "rgba(255,255,255,0.82)" }}>{s.l}</p>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* §9 Business Mentoring */}
      <Section scheme="scheme-1" id="mentoring">
        <div className="kl-split" style={{ gap: 80, alignItems: "center" }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow>Business Mentoring</Eyebrow>
            <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.15 }}>Create a sustainable, values-driven practice</h2>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 20 }}>
              Business mentoring at Kid Link is provided by Jackie Sikic, director and founder with over 13 years leading Kid Link OT. Jackie is passionate about the connection between exceptional clinical care, a values-led culture, and a sustainable business.
            </p>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 28 }}>
              Mentoring is a practical, honest conversation about where you want to go and what is getting in the way. We take on a small number of clinicians and practice leaders each year, so enquire early. If spots are full, join the waitlist and we'll contact you as places open up.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 20 }}>
              <Button variant="primary" iconRight={<ChevronRight />} onClick={() => scrollToContact("I'm interested in business mentoring.")}>Enquire Now</Button>
              <Button variant="link" iconRight={<ChevronRight />} onClick={() => window.open("https://kid-link-occupational-therapy.splose.com/public-form/5477ab89-80f9-438e-a6a0-928f0e843b86", "_blank", "noopener,noreferrer")}>Join the waitlist</Button>
            </div>
          </div>
          <img
            src="../../assets/images/clinicians3.jpg"
            alt=""
            style={{ width: "100%", height: 480, objectFit: "cover", display: "block", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)" }}
          />
        </div>

        <div style={{ marginTop: 80 }}>
          <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 20 }}>Mentoring is suited to</h3>
          <div className="kl-cols-3" style={{ gap: 24 }}>
            {["Sole traders", "Private practice owners", "Team leaders and senior OTs"].map((b) => (
              <Card key={b} style={{ background: "var(--kl-white)", padding: 28, display: "flex", alignItems: "center", gap: 16 }}>
                <MIcon name="check_circle" size={24} color="var(--kl-plum)" />
                <span style={{ fontSize: "var(--kl-text-regular)", fontWeight: 600 }}>{b}</span>
              </Card>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 56 }}>
          <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 20 }}>Mentoring goal areas</h3>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {["Business growth", "Employee engagement and retention", "Program development", "Career progression", "Diversifying services", "Graduate onboarding", "Positive company culture", "Leadership development"].map((t) => (
              <span key={t} style={{ padding: "8px 16px", borderRadius: 999, fontSize: "0.85rem", fontWeight: 600, background: "var(--kl-gray-nurse-light)", color: "var(--kl-gray-nurse-darker)" }}>{t}</span>
            ))}
          </div>
        </div>
      </Section>

      {/* PiPCast podcast */}
      <Section scheme="scheme-2" id="pipcast">
        <div className="kl-split" style={{ gap: 80, alignItems: "center" }}>
          <img
            src="../../assets/logos/PIP-Cast-Logo-Draft-v3.jpg"
            alt="PiPCast — Perspectives in Paeds"
            style={{ width: "100%", maxWidth: 420, aspectRatio: "1 / 1", objectFit: "cover", display: "block", marginInline: "auto", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)" }}
          />
          <div style={{ maxWidth: 540 }}>
            <Eyebrow>Podcast</Eyebrow>
            <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.15 }}>PiPCast — Perspectives in Paeds</h2>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 20 }}>
              PiPCast is Kid Link's podcast for paediatric occupational therapists and the people who work alongside them. Short, honest conversations on assessment, evidence, and the messy middle of clinical practice.
            </p>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 28 }}>
              Tune in for practical perspectives from Kid Link clinicians and guests, wherever you listen to podcasts.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
              <a
                href="https://open.spotify.com/show/1abK9Ij9eAfBMxWCxhbvIi"
                target="_blank"
                rel="noopener noreferrer"
                className="kl-btn kl-btn--primary"
              >
                Listen on Spotify
                <MIcon name="open_in_new" size={18} color="#fff" />
              </a>
              <a
                href="https://podcasts.apple.com/au/podcast/pip-cast-perspectives-in-paeds/id1804759766"
                target="_blank"
                rel="noopener noreferrer"
                className="kl-btn kl-btn--secondary"
              >
                Listen on Apple Podcasts
                <MIcon name="open_in_new" size={18} />
              </a>
            </div>
          </div>
        </div>
      </Section>

      <MailingListSignup
        scheme="scheme-3"
        group="32"
        heading="Stay connected with Kid Link"
        blurb="Join our mailing list for new webinars and courses, supervision and OT Link updates, and clinical resources. No spam, unsubscribe anytime."
      />

      {/* §14 Contact */}
      <Contact
        title="Ready to connect?"
        intro="Whether you are looking for supervision, want to join OT Link, or are exploring our courses. We would love to hear from you."
        showBooking={false}
      />
    </>
  );
}

window.CliniciansPage = CliniciansPage;