// AudiencePanel — sitemap §4–§7. Stacked feature panels, one per audience.
// Each panel: eyebrow + h3 + body + 4-item icon list + CTA, paired with a photo.
// Mirrors home/layout-121 / layout-298 / layout-302 from the Relume export.

function AudiencePanel({ scheme = "scheme-2", reverse = false, eyebrow, title, body, items, image, ctaLabel = "Learn more", onCta, onExplore, exploreLabel = "Explore" }) {
  const left = (
    <div style={{ maxWidth: 540 }}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <h2 style={{ fontSize: "var(--kl-text-h3)", marginBottom: 24, lineHeight: 1.15 }}>{title}</h2>
      <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, marginBottom: 32 }}>{body}</p>
      <ul className="kl-cols-2" style={{ listStyle: "none", padding: 0, margin: 0, marginBottom: 32, gap: 16 }}>
        {items.map((it) => (
          <li key={it.h} style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
            <MIcon name={it.icon} size={24} />
            <div>
              <p style={{ fontWeight: 600, fontSize: "var(--kl-text-regular)", marginBottom: 2 }}>{it.h}</p>
              {it.b && <p style={{ fontSize: "var(--kl-text-small)", color: "var(--kl-fg-2)", lineHeight: 1.5 }}>{it.b}</p>}
            </div>
          </li>
        ))}
      </ul>
      <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
        {ctaLabel && <Button variant="alternate" onClick={onCta}>{ctaLabel}</Button>}
        {/* Sole CTA → make it a prominent primary button; otherwise a quiet link. */}
        <Button variant={ctaLabel ? "link" : "primary"} iconRight={<ChevronRight />} onClick={onExplore}>{exploreLabel}</Button>
      </div>
    </div>
  );
  const right = (
    <div>
      <img src={image} alt="" style={{ width: "100%", height: 480, objectFit: "cover", display: "block", borderRadius: "var(--kl-radius-card-lg)", boxShadow: "var(--kl-card-shadow)" }} />
    </div>
  );

  return (
    <Section scheme={scheme}>
      <div className="kl-split" style={{ gap: 80, alignItems: "center" }}>
        {reverse ? right : left}
        {reverse ? left : right}
      </div>
    </Section>
  );
}

window.AudiencePanel = AudiencePanel;