// DifferentiatorSplit — "What makes us different" / contextual differentiator block.
// Header paragraph, then a card grid of points, then a single action.

const DIFFERENTIATOR_DEFAULTS = {
  eyebrow: "What makes us different",
  title: "Clinical depth, paired with lived experience",
  body: "Kid Link sits at the intersection of paediatric OT expertise and family-side lived experience. Every clinician on our team has worked across clinic, school, and community settings — and stays curious about what works.",
  points: [
    { h: "Neurodiversity-affirming", b: "Strengths-led practice. We build around how a child's mind already works." },
    { h: "Family-centred",           b: "We listen first, plan with you, and stay in dialogue across the journey." },
  ],
  primaryLabel: "About us",
  secondaryLabel: "Read our approach",
  onPrimary: undefined,
  onSecondary: undefined,
  scheme: "scheme-2",
};

// Rotating brand accents for the cards variant — each card gets a distinct colour.
const DIFFERENTIATOR_ACCENTS = [
  { bar: "var(--kl-plum)",            soft: "var(--kl-plum-lightest)",    icon: "var(--kl-plum)" },
  { bar: "var(--kl-sun)",             soft: "var(--kl-sun-lightest)",     icon: "var(--kl-sun-dark)" },
  { bar: "var(--kl-leaf)",            soft: "var(--kl-leaf-lightest)",    icon: "var(--kl-leaf-dark)" },
  { bar: "var(--kl-gray-nurse-dark)", soft: "var(--kl-gray-nurse-light)", icon: "var(--kl-gray-nurse-darker)" },
];

function DifferentiatorSplit(props) {
  const {
    eyebrow, title, body, points,
    primaryLabel, secondaryLabel, onPrimary, onSecondary,
    scheme,
  } = { ...DIFFERENTIATOR_DEFAULTS, ...props };

  const actions = (
    <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
      {primaryLabel && <Button variant="alternate" onClick={onPrimary}>{primaryLabel}</Button>}
      {secondaryLabel && <Button variant="link" iconRight={<ChevronRight />} onClick={onSecondary}>{secondaryLabel}</Button>}
    </div>
  );

  return (
    <Section scheme={scheme}>
      <div style={{ maxWidth: 760, marginBottom: 56 }}>
        {eyebrow && <p style={{ fontWeight: 600, marginBottom: 16 }}>{eyebrow}</p>}
        <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24, lineHeight: 1.1 }}>{title}</h2>
        <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.6 }}>{body}</p>
      </div>
      <div className={`kl-cols-${points.length >= 4 ? 4 : 3}`} style={{ gap: 32, marginBottom: 48 }}>
        {points.map((pt, i) => {
          const a = DIFFERENTIATOR_ACCENTS[i % DIFFERENTIATOR_ACCENTS.length];
          return (
            <Card key={pt.h} style={{ display: "flex", flexDirection: "column" }}>
              <div style={{ padding: 32 }}>
                {pt.icon && (
                  <div style={{
                    width: 56, height: 56, borderRadius: 16,
                    background: a.soft, display: "inline-flex",
                    alignItems: "center", justifyContent: "center", marginBottom: 20,
                  }}>
                    <MIcon name={pt.icon} size={28} color={a.icon} />
                  </div>
                )}
                <h3 style={{ fontSize: "var(--kl-text-h5)", marginBottom: 12 }}>{pt.h}</h3>
                <p style={{ fontSize: "var(--kl-text-regular)", lineHeight: 1.55 }}>{pt.b}</p>
              </div>
            </Card>
          );
        })}
      </div>
      {actions}
    </Section>
  );
}

window.DifferentiatorSplit = DifferentiatorSplit;