const DS = window.TKAlMuhajirinDesignSystem_2c6d31;
const WA = "https://wa.me/6281200000000?text=Assalamualaikum%2C%20saya%20ingin%20bertanya%20soal%20PPDB";

function Container({ children, narrow = false, style }) {
  return (
    <div style={{ width: "100%", maxWidth: narrow ? "var(--container-narrow)" : "var(--container)", margin: "0 auto", padding: "0 var(--gutter)", boxSizing: "border-box", ...style }}>
      {children}
    </div>
  );
}

function Section({ children, tone = "cream", id, style }) {
  const bg = { cream: "var(--bg-page)", tint: "var(--green-050)", brand: "var(--green-500)", sunken: "var(--cream-100)" }[tone];
  return (
    <section id={id} className="kit-sec" style={{ background: bg, ...style }}>
      <Container>{children}</Container>
    </section>
  );
}

/** Sticky mobile WhatsApp bar — the site has exactly one goal. */
function WaBar() {
  const { Button, Icon } = DS;
  return (
    <div className="wa-bar">
      <Button block size="lg" href={WA} icon={<Icon name="message-circle" size={20} />}>Tanya PPDB via WhatsApp</Button>
    </div>
  );
}

Object.assign(window, { DS, WA, Container, Section, WaBar });