// Beliefs — "Our vision & mission" + values.
// Mirrors home/layout-364, with brand-accent bars + tinted icon badges to match
// the "What makes us different" treatment.

const VALUE_ACCENTS = [
  { soft: "var(--kl-plum-lightest)",    icon: "var(--kl-plum)" },
  { soft: "var(--kl-sun-lightest)",     icon: "var(--kl-sun-dark)" },
  { soft: "var(--kl-leaf-lightest)",    icon: "var(--kl-leaf-dark)" },
  { soft: "var(--kl-gray-nurse-light)", icon: "var(--kl-gray-nurse-darker)" },
];

function Beliefs() {
  const { go } = useRoute();
  const cards = [
    {
      bar: "var(--kl-plum)", soft: "var(--kl-plum-lightest)", icon: "var(--kl-plum)",
      glyph: "diversity_4", title: "Our vision",
      body: [
        "To be a leading occupational therapy practice who works with communities to create positive change for children.",
        "A place where those who are eager to learn can develop and grow in their understanding, awareness and practice through a clear therapy model.",
      ],
    },
    {
      bar: "var(--kl-leaf)", soft: "var(--kl-leaf-lightest)", icon: "var(--kl-leaf-dark)",
      glyph: "support", title: "Our mission",
      body: [
        "We build awareness and promote inclusivity through a strengths-based, collaborative approach.",
        "We deliver knowledge and best practice across all Kid Link services, from direct therapy and parent coaching to clinician education, school support and organisational consulting.",
      ],
    },
  ];

  const values = [
    { icon: "verified",     label: "Trust" },
    { icon: "fingerprint",  label: "Authenticity" },
    { icon: "balance",      label: "Integrity" },
    { icon: "diversity_3",  label: "Connection" },
    { icon: "bolt",         label: "Courage" },
  ];

  return (
    <Section scheme="scheme-2">
      <SectionHeader
        title="Our vision and mission"
      />

      <div className="kl-cols-2" style={{ gap: 32 }}>
        {cards.map((c) => (
          <Card key={c.title} style={{ display: "flex", flexDirection: "column" }}>
            <div style={{ padding: 48 }}>
              <div style={{
                width: 64, height: 64, borderRadius: 18,
                background: c.soft, display: "inline-flex",
                alignItems: "center", justifyContent: "center", marginBottom: 24,
              }}>
                <MIcon name={c.glyph} size={34} color={c.icon} />
              </div>
              <h3 style={{ fontSize: "var(--kl-text-h3)", marginBottom: 24, lineHeight: 1.15 }}>{c.title}</h3>
              {c.body.map((p, i) => (
                <p key={i} style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, marginBottom: i < c.body.length - 1 ? 16 : 0 }}>{p}</p>
              ))}
            </div>
          </Card>
        ))}
      </div>

      {/* Our values */}
      <div style={{ marginTop: 64 }}>
        <p className="kl-eyebrow" style={{ textAlign: "center", display: "block", marginBottom: 24 }}>Our values</p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "center" }}>
          {values.map((v, i) => {
            const a = VALUE_ACCENTS[i % VALUE_ACCENTS.length];
            return (
              <div
                key={v.label}
                style={{
                  flex: "1 1 150px", maxWidth: 200,
                  display: "flex", flexDirection: "column", alignItems: "center", gap: 14,
                  padding: "28px 16px",
                  background: "var(--kl-card-bg)",
                  border: "var(--kl-card-border)",
                  borderRadius: "var(--kl-radius-card)",
                  boxShadow: "var(--kl-card-shadow)",
                }}
              >
                <div style={{
                  width: 52, height: 52, borderRadius: 14,
                  background: a.soft, display: "inline-flex",
                  alignItems: "center", justifyContent: "center",
                }}>
                  <MIcon name={v.icon} size={26} color={a.icon} />
                </div>
                <span style={{ fontFamily: "var(--kl-font-display)", fontWeight: 600, fontSize: "var(--kl-text-h6)" }}>{v.label}</span>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 40, display: "flex", justifyContent: "center", gap: 16 }}>
          <Button variant="primary" iconRight={<ChevronRight />} onClick={() => go("team")}>Meet the team behind Kid Link</Button>
        </div>
      </div>
    </Section>
  );
}

window.Beliefs = Beliefs;