// OrganisationsPage - consulting for organisations, brands, and initiatives.
// Hero, partners, approach, services, previous work, live speaking, contact.

function OrganisationsPage() {
  return (
    <>
      {/* §1 Hero */}
      <Hero
        eyebrow="Consulting for organisations"
        title={<>Clinical expertise to support <span style={{ color: "var(--kl-sun)" }}>real impact</span></>}
        body="Kid Link brings over 13 years of paediatric occupational therapy expertise to organisations, brands, and initiatives that value inclusion and want to support children, families, and neurodivergent communities."
        image="../../assets/images/organisations-hero.jpg"
        imageFocus="62% 30%"
        primaryLabel="Enquire Now"
        secondaryLabel="See Past Projects"
      />

      {/* §2 Organisations we have worked with */}
      <LogoStrip title="Organisations we have worked with" />

      {/* §3 Our approach */}
      <Section scheme="scheme-1">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Our approach</Eyebrow>
          <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.15 }}>Collaboration and co-design at every stage</h2>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 20 }}>
            The strongest work happens when clinical knowledge and lived experience sit alongside each other. Wherever a project allows, we actively seek to co-design with disabled and neurodivergent people and families, not solely as consultees, but as genuine contributors to the work.
          </p>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6 }}>
            This means both drawing on lived experience within Kid Link and subcontracting people who bring that perspective from outside it. Clinical knowledge tells us what the research says. Lived experience tells us what actually works in practice. The two together produce something neither can on their own.
          </p>
        </div>
        <div className="kl-cols-3" style={{ gap: 32 }}>
          {[
            { i: "workspace_premium", c: "var(--kl-plum)",       h: "Experience",            b: "With over 13 years' experience and senior consultants working across a range of areas related to child development and disability inclusion, Kid Link brings deep expertise in paediatric OT practice." },
            { i: "diversity_3",       c: "var(--kl-leaf-dark)",   h: "Holistic consultation", b: "Through co-design and consultation with neurodivergent people, disability consultants, and family advocates who are meaningfully involved from the start, Kid Link grounds its work in lived experience." },
            { i: "verified",          c: "var(--kl-sun-dark)",    h: "Quality results",       b: "Drawing on these diverse perspectives and rigorous practice, Kid Link delivers work that is credible, authentic, and genuinely fit for the communities it serves." },
          ].map((c) => (
            <Card key={c.h} style={{ background: "var(--kl-white)", padding: 32, display: "flex", flexDirection: "column" }}>
              <div style={{ width: 56, height: 56, borderRadius: 16, background: c.c, 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 }}>{c.h}</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, color: "var(--kl-fg-2)" }}>{c.b}</p>
            </Card>
          ))}
        </div>
      </Section>

      {/* §4 What we offer */}
      <Section scheme="scheme-2">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>What we offer</Eyebrow>
          <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.15 }}>Clinical expertise you can build on</h2>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6 }}>
            Whether you are creating a product, developing a resource, building a campaign, or designing a space, the clinical perspective matters. Kid Link's senior clinicians bring evidence-based knowledge across child development, neurodiversity, inclusion, and family-centred practice, translated into practical, real-world outcomes.
          </p>
        </div>

        <div className="kl-cols-2" style={{ gap: 32 }}>
          {[
            {
              i: "accessible", accent: "var(--kl-plum)", soft: "var(--kl-plum-lightest)",
              h: "Accessibility consulting",
              b: "Ensuring your products, spaces, events, and communications are accessible for neurodivergent children and families, not just compliant.",
              bullets: ["Sensory environment design and review", "Calm and sensory space consultation", "Event accessibility planning", "Communication and signage review", "Inclusive design advisory"],
            },
            {
              i: "menu_book", accent: "var(--kl-leaf-darker)", soft: "var(--kl-leaf-lightest)",
              h: "Resource development",
              b: "Clinically grounded resources developed by therapists who work with families and educators every day.",
              bullets: ["Social stories and visual supports", "Parent and caregiver guides", "Educator and school resources", "Accessible print and digital content"],
            },
            {
              i: "record_voice_over", accent: "var(--kl-sun-dark)", soft: "var(--kl-sun-lightest)",
              h: "Expert interviews and media",
              b: "Our therapists are articulate, camera-confident, and skilled at translating complex clinical knowledge into language that resonates with broad audiences.",
              bullets: ["Filmed interviews and spokesperson content", "Podcast and media appearances", "Written expert commentary and quotes", "Clinical review of scripts and messaging"],
            },
            {
              i: "campaign", accent: "var(--kl-plum)", soft: "var(--kl-plum-lightest)",
              h: "Content collaboration",
              b: "We partner with brands whose values align with ours, creating content that is clinically credible and useful for families and educators. We are selective about the partnerships we take on.",
              bullets: ["Campaign and ad content", "Social media content creation", "Sponsored educational content", "Product review and endorsement", "Blog, newsletter, and long-form collaboration"],
            },
            {
              i: "design_services", accent: "var(--kl-leaf-darker)", soft: "var(--kl-leaf-lightest)",
              h: "Space design consultation",
              b: "We advise on the design and setup of sensory and calm spaces within schools, sporting venues, event spaces, and public environments.",
              bullets: ["Sensory space planning and fit-out advisory", "Equipment and material recommendations", "Staff and volunteer briefing guides", "Post-installation review"],
            },
            {
              i: "policy", accent: "var(--kl-sun-dark)", soft: "var(--kl-sun-lightest)",
              h: "Program and policy advisory",
              b: "Supporting education systems, community organisations, and sporting bodies to develop programs and policies that include and support children with diverse needs.",
              bullets: ["Inclusion program development", "Policy review with an OT lens", "Staff training and professional development", "Curriculum and program accessibility review"],
            },
          ].map((c) => (
            <Card key={c.h} style={{ background: "var(--kl-white)", 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-h4)", marginBottom: 12, lineHeight: 1.2 }}>{c.h}</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, color: "var(--kl-fg-2)", marginBottom: 20 }}>{c.b}</p>
              <div style={{ paddingTop: 20, borderTop: "1px solid var(--kl-border)", display: "flex", flexDirection: "column", gap: 12, marginTop: "auto" }}>
                {c.bullets.map((t) => (
                  <div key={t} style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
                    <span style={{ flexShrink: 0, width: 24, height: 24, borderRadius: 8, background: c.soft, display: "grid", placeItems: "center", marginTop: 1 }}>
                      <MIcon name="check" size={15} color={c.accent} />
                    </span>
                    <span style={{ fontSize: "0.92rem", fontWeight: 600, color: "var(--kl-fg-1)", lineHeight: 1.4 }}>{t}</span>
                  </div>
                ))}
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* §5 Previous work */}
      <Section scheme="scheme-1">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Previous work</Eyebrow>
          <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.15 }}>Projects we are proud of</h2>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6 }}>
            From sensory space design at one of Australia's biggest sporting events to filmed content for national health campaigns, here is a snapshot of what we have built alongside some of Australia's leading organisations.
          </p>
        </div>

        <div className="kl-cols-2" style={{ gap: 32 }}>
          {[
            {
              logo: "tennis-australia.svg", org: "Tennis Australia",
              h: "Australian Open Sensory and Calm Spaces",
              b: "Collaborated with Tennis Australia on the development of social stories for the Australian Open, supporting neurodivergent fans to prepare for their experience. Clinical consultation was provided on the design and fit-out of two sensory and calm spaces across the venue.",
              tags: ["Social stories", "Sensory space design", "Venue consultation", "Event accessibility"],
            },
            {
              logo: "amaze.svg", org: "Amaze",
              h: "Filmed Projects Across Key Practice Areas",
              b: "Worked with Amaze, Victoria's peak body for autistic people and their families, across a series of filmed projects covering executive functioning, School Can't, interoception, and emotional regulation. Kid Link therapists have also presented at Amaze's Raising Autistic Girls Webinar, contributing clinical insight to their advocacy work.",
              tags: ["Executive functioning", "School Can't", "Interoception", "Emotional regulation", "Filmed content", "Webinar presentation"],
            },
            {
              logo: "cottons.png", org: "Cottons", darkLogo: true,
              h: "Menstruation and Neurodiversity Project",
              b: "Engaged via Amaze to provide clinical expertise for Cottons' menstruation project, contributing an occupational therapy perspective on supporting autistic girls and young people with diverse needs to understand and navigate menstruation.",
              tags: ["Clinical advisory", "Neurodiversity", "Community content", "Adolescent health"],
            },
            {
              logo: "hp.svg", org: "HP",
              h: "Clinical Content and Filmed Partnership",
              b: "Contributed clinical expertise and on-camera representation to HP's content projects, bringing an occupational therapy perspective to technology, accessibility, and how the right tools support children's learning and participation.",
              tags: ["Filmed content", "Clinical advisory", "Technology and learning"],
            },
            {
              logo: "aspen.png", org: "Aspen Pharmaceuticals",
              h: "Sleep Health Campaign",
              b: "Provided clinical expertise and filmed content for Aspen Pharmaceuticals' sleep health campaign, lending an occupational therapy perspective to communications designed to support children and families experiencing sleep difficulties.",
              tags: ["Filmed content", "Clinical spokesperson", "Sleep health", "Family communications"],
            },
            {
              logo: "department-education-victoria.png", org: "Department of Education",
              h: "School Consultation and Training",
              b: "Supported the Department of Education with clinical consulting, professional development, and resources aimed at improving inclusion and occupational participation for students with diverse needs.",
              tags: ["Professional development", "School consultation", "Inclusion support", "Educator training"],
            },
            {
              logo: "gymnastics-victoria.png", org: "Gymnastics Victoria", darkLogo: true,
              h: "Inclusion and Accessibility Advisory",
              b: "Worked with Gymnastics Victoria to support the development of more inclusive programs and environments for children with diverse needs, bringing an occupational therapy lens to participation, safety, and coaching practice.",
              tags: ["Inclusion programs", "Clinical advisory", "Coaching support"],
            },
          ].map((p) => (
            <Card key={p.org} style={{ background: "var(--kl-white)", padding: 32, display: "flex", flexDirection: "column" }}>
              <div style={{ height: 48, marginBottom: 24, display: "flex", alignItems: "center" }}>
                <img src={`../../assets/logos/${p.logo}`} alt={p.org} loading="lazy" style={{ maxHeight: 44, maxWidth: 170, width: "auto", objectFit: "contain", display: "block", filter: p.darkLogo ? "brightness(0)" : undefined }} />
              </div>
              <span style={{ color: "var(--kl-plum)", fontWeight: 800, fontSize: "0.72rem", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 8 }}>{p.org}</span>
              <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 12, lineHeight: 1.25 }}>{p.h}</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, color: "var(--kl-fg-2)", marginBottom: 20 }}>{p.b}</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: "auto" }}>
                {p.tags.map((t) => (
                  <span key={t} style={{ fontSize: "var(--kl-text-tiny)", fontWeight: 600, color: "var(--kl-plum)", background: "var(--kl-plum-lightest)", borderRadius: 999, padding: "5px 12px" }}>{t}</span>
                ))}
              </div>
              {/* Next step at the moment of proof — lands on the form pre-filled. */}
              <div style={{ marginTop: 20 }}>
                <Button variant="link" iconRight={<ChevronRight />} onClick={() => scrollToContact(`We're interested in a project like your ${p.org} work (${p.h}).`)}>
                  Start a project like this
                </Button>
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* §6 Live speaking */}
      <Section scheme="scheme-3">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Live speaking</Eyebrow>
          <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.15 }}>Professional speakers for conferences, expos, and events</h2>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 20 }}>
            Kid Link therapists are experienced public speakers who bring clinical depth and engaging delivery to every stage. We present across professional conferences, community expos, webinars, and bespoke events, with content tailored to the audience each time.
          </p>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6 }}>
            Presentations draw on current evidence and real-world experience of working alongside thousands of families. Whether the audience is clinicians, educators, parents, or professionals, the content is practical and grounded in what we see in practice every day.
          </p>
        </div>

        <div className="kl-split" style={{ gap: 48, alignItems: "flex-start" }}>
          {/* Speaking formats */}
          <div>
            <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 24 }}>Speaking formats</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              {[
                { i: "campaign",         h: "Keynote presentations", b: "For conferences and major events." },
                { i: "groups",           h: "Panel participation",   b: "Across child development, neurodiversity, and inclusion." },
                { i: "build",            h: "Workshops",             b: "Interactive, skills-based sessions for professional or community audiences." },
                { i: "videocam",         h: "Webinars",              b: "Online presentations and Q&A for national and international audiences." },
              ].map((f) => (
                <Card key={f.h} style={{ background: "var(--kl-white)", padding: 24, display: "flex", gap: 18, alignItems: "flex-start" }}>
                  <div style={{ flexShrink: 0, width: 48, height: 48, borderRadius: 14, background: "var(--kl-plum-lightest)", display: "grid", placeItems: "center" }}>
                    <MIcon name={f.i} size={26} color="var(--kl-plum)" />
                  </div>
                  <div>
                    <h4 style={{ fontSize: "var(--kl-text-h6)", marginBottom: 4 }}>{f.h}</h4>
                    <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.5, color: "var(--kl-fg-2)" }}>{f.b}</p>
                  </div>
                </Card>
              ))}
            </div>
          </div>

          {/* Previous engagements */}
          <div>
            <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 24 }}>Previous speaking engagements</h3>
            <Card style={{ background: "var(--kl-white)", padding: 32 }}>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
                {[
                  "Occupational Therapy Australia, National OT Exchange Conference",
                  "My Spirited Child Expo",
                  "Mental Health Week Conference",
                  "Critical Agendas, Mental Health Seminar",
                  "Amaze, Raising Autistic Girls Webinar",
                  "Paediatric Occupational Therapy Conference Australia",
                  "Kid Link OT, ongoing seminars and workshops program",
                ].map((x) => (
                  <li key={x} style={{ display: "flex", gap: 14, alignItems: "flex-start", fontSize: "var(--kl-text-regular)", lineHeight: 1.5, fontWeight: 600, paddingBottom: 16, borderBottom: "1px solid var(--kl-border)" }}>
                    <span style={{ flexShrink: 0, width: 24, height: 24, borderRadius: 8, background: "var(--kl-sun-lightest)", display: "grid", placeItems: "center", marginTop: 1 }}>
                      <MIcon name="mic" size={15} color="var(--kl-sun-dark)" />
                    </span>
                    {x}
                  </li>
                ))}
              </ul>
            </Card>
          </div>
        </div>
      </Section>

      {/* §7 FAQ */}
      <FAQ
        scheme="scheme-1"
        tabbed
        eyebrow={null}
        lede="Common questions from organisations, brands, and initiatives considering a consulting partnership. If yours isn't here, get in touch and we'll be happy to help."
        categories={ORGANISATIONS_FAQ}
      />

      {/* TODO: add group="<value>" once the Organisations interest-group value is known */}
      <MailingListSignup
        scheme="scheme-1"
        heading="Stay connected with Kid Link"
        blurb="Join our mailing list for new projects and resources, speaking and partnership opportunities, and Kid Link updates. No spam, unsubscribe anytime."
      />

      {/* §8 Work with us */}
      <Contact
        title="Let's talk about what we could build together"
        intro="Whether you have a clear brief or an early idea, we are open to the conversation. We work with organisations whose work benefits children, families, and communities. Capacity is limited and we take on a small number of consulting partnerships each year, so early enquiries are encouraged."
        showBooking={false}
      />
    </>
  );
}

window.OrganisationsPage = OrganisationsPage;
