// IconStrip — Parents §3 / Educators §3.
// Horizontal "facts" strip of icon-badge cards with a one-line label.
// Each card gets a subtle rotating brand accent on its icon badge.

const ICONSTRIP_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 IconStrip({ scheme = "scheme-2", items }) {
  return (
    <Section scheme={scheme} style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className={`kl-cols-${items.length}`} style={{ gap: 24 }}>
        {items.map((it, i) => {
          const a = ICONSTRIP_ACCENTS[i % ICONSTRIP_ACCENTS.length];
          return (
            <div key={it.h} style={{
              display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 16,
              padding: 24,
              background: "var(--kl-card-bg)",
              border: "var(--kl-card-border)",
              borderRadius: "var(--kl-radius-card)",
              boxShadow: "var(--kl-card-shadow)",
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: 16,
                background: a.soft, display: "inline-flex",
                alignItems: "center", justifyContent: "center",
              }}>
                <MIcon name={it.icon} size={28} color={a.icon} />
              </div>
              <div>
                <p style={{ fontFamily: "var(--kl-font-display)", fontWeight: 500, fontSize: "var(--kl-text-h6)", marginBottom: 4 }}>
                  {it.h}
                </p>
                {it.b && <p style={{ fontSize: "var(--kl-text-small)", color: "var(--kl-fg-2)" }}>{it.b}</p>}
              </div>
            </div>
          );
        })}
      </div>
    </Section>
  );
}

window.IconStrip = IconStrip;