// ParentsPage — full composition per sitemap.md §Parents & Caregivers (11 sections).

function ParentsPage() {
  return (
    <>
      {/* §2 Hero */}
      <Hero
        eyebrow="Parents & Caregivers"
        title={<>Supporting kids to <span style={{ color: "var(--kl-sun)" }}>participate</span> in activities they <span style={{ color: "var(--kl-sun)" }}>want and need</span> to do</>}
        body="At Kid Link, we offer family-centred occupational therapy for children and young people aged 12 months to 18 years. We work alongside you to build your confidence and competence supporting your child on their journey, whilst also working with your child or adolescent to build their capacity and achieve their goals."
        image="../../assets/images/parent%20hero%20image%20chatgpt.jpg"
        imageFocus="58% 40%"
        primaryLabel="Book now"
        onPrimary={() => window.open(SPLOSE_BOOKING_URL, "_blank", "noopener,noreferrer")}
        secondaryLabel="Explore Our Services"
        onSecondary={() => {
          const el = document.getElementById("parent-services");
          if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
        }}
      />

      {/* §3 Facts strip */}
      <IconStrip
        scheme="scheme-3"
        items={[
          { icon: "location_on",      h: "Clinic Location",   b: "Mitcham, VIC" },
          { icon: "videocam",         h: "Telehealth",        b: "Across Australia" },
          { icon: "favorite",         h: "Funding options",   b: "Private, NDIS & Medicare" },
          { icon: "diversity_4",      h: "Ages",              b: "12 months to 18 years" },
        ]}
      />

      {/* §5 Who we work with — 3 stage cards */}
      <Section scheme="scheme-2">
        <SectionHeader
          eyebrow="Who we support"
          title="Our services are tailored to meet children and young people at every stage of development."
          innerMax="52rem"
        />
        <div className="kl-cols-3" style={{ gap: 32 }}>
          {[
            {
              accent: "var(--kl-plum)", soft: "var(--kl-plum-lightest)",
              age: "12 months – 8 years", title: "Early Intervention",
              body: "Early intervention provides support that builds on a child's strengths and what they enjoy. We want to support them to learn, grow, and join in daily activities at home, kinder, school and the community. We work with children from 12 months, offering play-based, neurodiversity-affirming and family-centred therapy that supports children with disabilities, or developmental delays or differences.",
              tags: ["Play", "Social", "Mealtimes", "Sleep", "Toileting", "Motor Skills", "School Readiness", "Routines", "Regulation"],
            },
            {
              accent: "var(--kl-leaf-dark)", soft: "var(--kl-leaf-lightest)",
              age: "9 – 18 years", title: "Children & Adolescents",
              body: "As children get older, the demands placed on them, at school, socially, and at home, often change and increase. We support your child or teen to develop their capacity and self-advocacy skills needed to participate in leisure, self-care, educational and vocational activities. We also advocate for the implementation of supports and adjustments to the environment and tasks to facilitate inclusion and successful participation.",
              tags: ["Executive Function", "Regulation", "Social Participation", "Educational Participation", "Identity", "Self-Advocacy", "Self-Care", "Daily Routines"],
            },
            {
              accent: "var(--kl-sun-dark)", soft: "var(--kl-sun-lightest)",
              age: "18 – 21 years", title: "Young Adults", comingSoon: true,
              body: "Life after school brings exciting opportunities alongside new challenges. This period of transition can be difficult to navigate for many young adults and their families. We're developing a dedicated service for young adults navigating the transition to further education, employment, independent living and community participation.",
              tags: ["Post-Year 12 support", "Transition to Adulthood", "Job Skills", "Further education", "Life Skills", "Self-Care", "Community Access", "Driving"],
            },
          ].map((s) => (
            <Card key={s.title} style={{ padding: 32, display: "flex", flexDirection: "column" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, marginBottom: 12 }}>
                <span style={{ color: s.accent, fontWeight: 800, fontSize: "0.72rem", letterSpacing: "0.12em", textTransform: "uppercase" }}>{s.age}</span>
                {s.comingSoon && (
                  <span style={{ flexShrink: 0, padding: "4px 10px", borderRadius: 999, fontSize: "0.66rem", fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase", background: s.soft, color: s.accent }}>Coming soon</span>
                )}
              </div>
              <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 16 }}>{s.title}</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, marginBottom: 24 }}>{s.body}</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: "auto" }}>
                {s.tags.map((t) => (
                  <span key={t} style={{ padding: "5px 12px", borderRadius: 999, fontSize: "0.8rem", fontWeight: 600, background: s.soft, color: s.accent }}>{t}</span>
                ))}
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* §7 Our services */}
      {[
        {
          soft: "var(--kl-plum-lightest)", accent: "var(--kl-plum)",
          title: "Individual Occupational Therapy",
          body: [
            "At Kid Link, you and your child are central to everything we do. The goals we work toward come from you, the real challenges your child experiences at home, at school, and in daily life. We combine that knowledge with current evidence and your child's strengths to build a therapy program that fits your family.",
            "Therapy is a team effort. This means we check in regularly on progress, involve you in sessions, and make sure you leave each appointment with the tools and confidence to support your child between sessions.",
          ],
          tags: ["Regulation", "Mental health", "Social participation", "Self care", "Independent living skills", "Behaviour", "Executive functioning", "Gross motor skills", "Fine motor skills (incl. handwriting)"],
          img: "../../assets/images/service-individual-ot.jpg",
          book: true,
        },
        {
          soft: "var(--kl-leaf-lightest)", accent: "var(--kl-leaf-dark)",
          title: "Mental Health & Wellbeing",
          body: [
            "Occupational therapy plays a unique role in mental health support and treatment, helping children and young people participate in routines, develop their identity, and build their capacity through a range of best-practice treatment approaches. Endorsed therapists are available under the Medicare Better Access to Mental Health Program and can provide Focussed Psychological Strategies to children with an eligible mental health diagnosis.",
          ],
          tags: ["Anxiety Disorders", "Depression", "Sleep Problems", "Phobic Disorders", "Avoidant/Restrictive Food Intake Disorder", "Hyperkinetic Disorder (ADHD)"],
          img: "../../assets/images/service-mental-health.jpg",
          book: true,
        },
        {
          soft: "var(--kl-sun-lightest)", accent: "var(--kl-sun-dark)",
          title: "Group Programs",
          body: [
            "Group programs offer children the chance to build skills alongside peers in a fun, structured environment. Programs run during school terms and holidays across a range of focus areas. Groups are announced via our events page, emails and social media.",
          ],
          tags: ["Group-based Learning", "Peer Connection", "Self-Advocacy"],
          img: "../../assets/images/service-group-programs.jpg",
        },
        {
          soft: "var(--kl-gray-nurse-light)", accent: "var(--kl-gray-nurse-darker)",
          title: "Parent Workshops",
          body: [
            "Our parent workshops bring together small groups of families to explore topics through learning, reflection and hands-on activities. Facilitated by our therapists, each workshop gives you practical, evidence-based information you can put to use straight away, and the chance to connect with other parents navigating similar experiences. Upcoming workshops are shared via our events page, emails and social media.",
          ],
          tags: ["Parent Support", "Capacity Building", "Knowledge", "Strategies", "Resources"],
          img: "../../assets/images/service-parent-workshops.jpg",
        },
      ].map((s, i) => {
        const reverse = i % 2 === 1;
        const text = (
          <div style={{ maxWidth: 560 }}>
            {i === 0 && <Eyebrow>Our services</Eyebrow>}
            <h2 style={{ fontSize: "var(--kl-text-h3)", marginBottom: 24, lineHeight: 1.15 }}>{s.title}</h2>
            {s.body.map((p, j) => (
              <p key={j} style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 20 }}>{p}</p>
            ))}
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 8 }}>
              {s.tags.map((t) => (
                <span key={t} style={{ padding: "5px 12px", borderRadius: 999, fontSize: "0.8rem", fontWeight: 600, background: s.soft, color: s.accent }}>{t}</span>
              ))}
            </div>
            {/* A next step at the moment of interest, not just in the hero and footer. */}
            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 20, marginTop: 32 }}>
              {s.book ? (
                <Button
                  variant="primary"
                  iconRight={<ChevronRight />}
                  onClick={() => {
                    if (window.klTrack) window.klTrack("book_now_click", { source: s.title });
                    window.open(SPLOSE_BOOKING_URL, "_blank", "noopener,noreferrer");
                  }}
                >
                  Book now
                </Button>
              ) : (
                <Button variant="primary" iconRight={<ChevronRight />} onClick={() => scrollToContact(`I'm interested in ${s.title}.`)}>
                  Enquire Now
                </Button>
              )}
              {s.book && (
                <Button variant="link" iconRight={<ChevronRight />} onClick={() => scrollToContact(`I have a question about ${s.title}.`)}>
                  Ask a question
                </Button>
              )}
            </div>
          </div>
        );
        const img = (
          <img src={s.img} alt="" style={{ width: "100%", height: 480, objectFit: "cover", display: "block", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)" }} />
        );
        return (
          <Section key={s.title} scheme={i % 2 === 0 ? "scheme-3" : "scheme-2"} id={i === 0 ? "parent-services" : undefined}>
            <div className="kl-split" style={{ gap: 80, alignItems: "center" }}>
              {reverse ? img : text}
              {reverse ? text : img}
            </div>
          </Section>
        );
      })}

      {/* §6 Parent coaching */}
      <Section scheme="scheme-3">
        <div className="kl-split" style={{ gap: 80, alignItems: "center" }}>
          <div style={{ maxWidth: 540 }}>
            <Eyebrow>Parent coaching</Eyebrow>
            <h2 style={{ fontSize: "var(--kl-text-h3)", marginBottom: 24, lineHeight: 1.15 }}>You know your child best</h2>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 20 }}>
              You know your child and your home better than anyone. We bring the occupational therapy expertise. Together, we find strategies and supports that fit your family.
            </p>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 28 }}>
              Coaching involves a collaborative two-way conversation where your knowledge and observations shape the goals we work toward and the strategies we try. Whether your sessions are in the clinic or via Telehealth, you will leave feeling more confident and better equipped to support your child day to day. Coaching can be standalone or integrated into your child's existing therapy program.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {["Coaching", "Family Education", "Capacity building", "Parenting Support"].map((t) => (
                <span key={t} style={{ padding: "5px 12px", borderRadius: 999, fontSize: "0.8rem", fontWeight: 600, background: "var(--kl-plum-lightest)", color: "var(--kl-plum)" }}>{t}</span>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <Button variant="primary" iconRight={<ChevronRight />} onClick={() => scrollToContact("I'm interested in Parent Coaching.")}>
                Enquire Now
              </Button>
            </div>
          </div>
          <img
            src="../../assets/images/Parent%20coaching%20image.jpg"
            alt=""
            style={{ width: "100%", height: 480, objectFit: "cover", display: "block", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)" }}
          />
        </div>
      </Section>

      {/* §8 Assessments */}
      <Section scheme="scheme-2">
        <SectionHeader
          title="Assessments"
          lede="Your therapist will utilise a range of assessments (formal and informal) and therapeutic approaches when working with your child to achieve their goals."
        />
        <p style={{ fontWeight: 600, marginBottom: 24 }}>These may include</p>
        <div className="kl-cols-2" style={{ gap: 16 }}>
          {[
            { icon: "school",          label: "Educational observations (within kinder, day care or school)" },
            { icon: "psychology",      label: "Sensory profiles" },
            { icon: "fact_check",      label: "Assessment of function or adaptive behaviours" },
            { icon: "directions_run",  label: "Fine and gross motor skill assessments" },
            { icon: "visibility",      label: "Visual-motor assessments" },
            { icon: "draw",            label: "Handwriting assessments" },
            { icon: "description",     label: "Funding or special consideration assessments" },
          ].map((t, i) => {
            const a = [
              { soft: "var(--kl-plum-lightest)", accent: "var(--kl-plum)" },
              { soft: "var(--kl-leaf-lightest)", accent: "var(--kl-leaf-dark)" },
              { soft: "var(--kl-sun-lightest)", accent: "var(--kl-sun-dark)" },
              { soft: "var(--kl-gray-nurse-light)", accent: "var(--kl-gray-nurse-darker)" },
            ][i % 4];
            return (
              <div key={t.label} style={{
                display: "flex", gap: 16, alignItems: "center",
                padding: "18px 20px",
                background: "var(--kl-card-bg)",
                border: "var(--kl-card-border)",
                borderRadius: "var(--kl-radius-card)",
                boxShadow: "var(--kl-card-shadow)",
              }}>
                <div style={{ flexShrink: 0, width: 46, height: 46, borderRadius: 12, background: a.soft, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <MIcon name={t.icon} size={24} color={a.accent} />
                </div>
                <span style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.4, fontWeight: 500 }}>{t.label}</span>
              </div>
            );
          })}
        </div>

        {/* Once-off callout */}
        <div style={{
          marginTop: 40,
          background: "var(--kl-card-bg-cream)",
          border: "var(--kl-card-border)",
          borderRadius: "var(--kl-radius-card-lg)",
          boxShadow: "var(--kl-card-shadow)",
          padding: "clamp(28px, 4vw, 44px)",
          display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 28,
        }}>
          <div style={{ display: "flex", gap: 20, alignItems: "flex-start", flex: "1 1 460px" }}>
            <div style={{ flexShrink: 0, width: 52, height: 52, borderRadius: 14, background: "var(--kl-sun-lightest)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
              <MIcon name="assignment" size={26} color="var(--kl-sun-dark)" />
            </div>
            <div>
              <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 12 }}>Once-off assessments</h3>
              <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 8 }}>
                A once-off assessment evaluates your child's performance in a specific area (e.g. motor skills or handwriting), and includes a detailed report and recommendations.
              </p>
              <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6 }}>
                Not all assessments are offered as once-off services. If you think you may require an assessment, please contact us.
              </p>
            </div>
          </div>
          <Button variant="primary" onClick={scrollToContact}>Contact us</Button>
        </div>
      </Section>

      {/* §9 Link to Sleep — structured program */}
      <Section scheme="scheme-3">
        <div className="kl-split" style={{ gap: 80, alignItems: "center", marginBottom: 64 }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow>Structured program</Eyebrow>
            <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.1 }}>Link to Sleep</h2>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 16 }}>
              Link to Sleep is our structured 8-session program for children, adolescents and teenagers aged 12 months to 18 years with goals related to sleep. Poor sleep affects everything: behaviour, learning, mood, and family life. This program provides a clear, evidence-informed pathway to better sleep.
            </p>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 16 }}>
              Whether your child has difficulty falling asleep, wakes frequently through the night, or simply does not get enough quality rest, the program is tailored to their individual sleep needs.
            </p>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 28 }}>
              A core focus is caregiver collaboration. We work closely with you to build your confidence and skills so you can lead and maintain the changes at home long after the program ends.
            </p>
            <Button variant="primary" iconRight={<ChevronRight />} onClick={() => window.open("https://sleep.kidlink.net.au", "_blank", "noopener,noreferrer")}>Find out more</Button>
          </div>
          <img
            src="../../assets/images/link-to-sleep-bedtime.webp"
            alt=""
            style={{ width: "100%", height: 480, objectFit: "cover", display: "block", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)" }}
          />
        </div>

        <div className="kl-cols-4" style={{ gap: 32 }}>
          {[
            { title: "Comprehensive Sleep Assessment", body: "We take the time to really get to know your child's sleep, their history, current challenges, and how sleep is affecting daily life at home. We explore the why, not just the what, so we can focus on the right things from day one." },
            { title: "Sleep Action Plan", body: "Together, we build a personalised 6-week sleep plan around your child and family's goals. We make sure you understand the reasoning behind every recommendation." },
            { title: "6 Individualised Therapy Sessions", body: "We provide education, upskill both you and your child where needed, and continue to refine the plan as progress is made. The plan adapts with you, as we know flexibility is key for sustainable change." },
            { title: "60 Minute Sleep Spotlight", body: "A training video you can access from home, at a time that suits you. Covering what good sleep looks like, the stages of sleep, how much your child needs, and practical strategies you can start straight away." },
          ].map((s, i) => (
            <Card key={s.title} style={{ padding: 32, display: "flex", flexDirection: "column" }}>
              <div style={{
                width: 44, height: 44, borderRadius: 999, marginBottom: 20,
                background: "var(--kl-plum)", color: "#fff",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--kl-font-display)", fontWeight: 600, fontSize: 20,
              }}>{i + 1}</div>
              <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 12, lineHeight: 1.2 }}>{s.title}</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55 }}>{s.body}</p>
            </Card>
          ))}
        </div>
      </Section>

      {/* §10 FAQ */}
      <FAQ
        scheme="scheme-2"
        tabbed
        eyebrow={null}
        lede="Please find below answers to our most commonly asked questions. If yours isn't here, please contact us and our Family Liaison Team will be happy to help."
        categories={PARENTS_FAQ}
      />

      {/* Post-FAQ CTA — anyone who read the whole FAQ is a warm lead; give them
          the next step right here instead of making them scroll on. */}
      <Section scheme="scheme-2" style={{ paddingTop: 0 }}>
        <div style={{ textAlign: "center", maxWidth: 620, marginInline: "auto" }}>
          <h2 style={{ fontSize: "var(--kl-text-h3)", marginBottom: 16, lineHeight: 1.15 }}>Ready to get started?</h2>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, color: "var(--kl-fg-2)", marginBottom: 28 }}>
            Book online now, or send us a question and our admin team will respond within 1-2 business days.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", gap: 20 }}>
            <Button
              variant="primary"
              iconRight={<ChevronRight />}
              onClick={() => {
                if (window.klTrack) window.klTrack("book_now_click", { source: "parents_faq" });
                window.open(SPLOSE_BOOKING_URL, "_blank", "noopener,noreferrer");
              }}
            >
              Book now
            </Button>
            <Button variant="link" iconRight={<ChevronRight />} onClick={scrollToContact}>Ask a question</Button>
          </div>
        </div>
      </Section>

      <MailingListSignup
        scheme="scheme-1"
        group="32768"
        heading="Stay connected with Kid Link"
        blurb="Join our mailing list for parenting tips, upcoming events and programs, and Kid Link news. No spam, unsubscribe anytime."
      />

      {/* §11 Contact */}
      <Contact scheme="scheme-3" />
    </>
  );
}

window.ParentsPage = ParentsPage;