// AboutBlock — text-led intro block.
// Used for Clinicians §15 (About) and Educators §6 (About) sitemap entries.

function AboutBlock({ scheme = "scheme-2", eyebrow = "About Kid Link", title, body, image, showActions = true }) {
  return (
    <Section scheme={scheme}>
      <div className={image ? "kl-split" : ""} style={{ display: image ? undefined : "block", gap: 96, alignItems: "center" }}>
        <div style={{ maxWidth: 560 }}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.1 }}>{title}</h2>
          {body.map((p, i) => (
            <p key={i} style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6, marginBottom: 20, maxWidth: "60ch" }}>{p}</p>
          ))}
          {showActions && (
            <div style={{ marginTop: 24, display: "flex", gap: 16, alignItems: "center" }}>
              <Button variant="alternate">About us</Button>
              <Button variant="link" iconRight={<ChevronRight />}>Meet the team</Button>
            </div>
          )}
        </div>
        {image && (
          <img src={image} alt="" style={{ width: "100%", aspectRatio: "4 / 3", objectFit: "cover", display: "block" }} />
        )}
      </div>
    </Section>
  );
}

window.AboutBlock = AboutBlock;