// AudienceList — "Kid Link serves parents, clinicians, educators, organisations"
// Mirrors layout-298 / layout-302 split block with left lockup + 4-cell grid.

function AudienceList() {
  const { go } = useRoute();
  const audiences = [
    { id: "parents",       icon: "diversity_4",     title: "For parents",       body: "Support your child's development with evidence-based strategies and professional guidance." },
    { id: "clinicians",    icon: "medical_services",title: "For clinicians",    body: "Access tools and resources to enhance your occupational therapy practice daily." },
    { id: "educators",     icon: "school",          title: "For educators",     body: "Implement inclusive strategies that help all students thrive in your classroom." },
    { id: "organisations", icon: "handshake",       title: "For organisations", body: "Build capacity across your team with comprehensive training and implementation support." },
  ];

  return (
    <Section scheme="scheme-2">
      <div className="kl-split" style={{ gap: 64 }}>
        {/* Left — lockup */}
        <div>
          <p style={{ fontWeight: 600, fontSize: "var(--kl-text-regular)", marginBottom: 20 }}>Audiences</p>
          <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, maxWidth: "12ch" }}>
            Kid Link serves parents, clinicians, educators, and organisations
          </h2>
          <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, marginBottom: 32, maxWidth: "32ch" }}>
            Kid Link meets you where you are, whether you're navigating your child's therapy journey, refining clinical practice, building classroom inclusion, or scaling occupational therapy across your organisation.
          </p>
          <div style={{ display: "flex", gap: 16 }}>
            <Button variant="alternate" onClick={() => go("parents")}>Learn</Button>
            <Button variant="link" iconRight={<ChevronRight />}>Explore</Button>
          </div>
        </div>

        {/* Right — 2x2 audience grid */}
        <div className="kl-cols-2" style={{ gap: 48, paddingTop: 8 }}>
          {audiences.map((a) => (
            <div key={a.id} role="button" onClick={() => go(a.id)} style={{ cursor: "pointer" }}>
              <div style={{ marginBottom: 24 }}>
                <MIcon name={a.icon} size={48} />
              </div>
              <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 16 }}>{a.title}</h3>
              <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55, maxWidth: "32ch" }}>{a.body}</p>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

window.AudienceList = AudienceList;