/* CTABanner.jsx — full-width gradient call-to-action before the footer. */
function CTABanner({ variant, headline, primaryLabel, secondaryLabel, onPrimary, onSecondary }) {
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });
  return (
    <section className="int-section" style={{ paddingTop: 0 }}>
      <div className="int-container">
        <div className={"int-cta " + variant + (headline ? "" : " no-headline")}>
          <span className="deco deco-1" aria-hidden="true"></span>
          <span className="deco deco-2" aria-hidden="true"></span>
          {headline && <h2>{headline}</h2>}
          <div className="actions">
            {primaryLabel && (
              <button className="btn btn-fill" onClick={onPrimary}>
                {primaryLabel}
                <i data-lucide="arrow-right"></i>
              </button>
            )}
            {secondaryLabel && (
              <button className="btn btn-ghost" onClick={onSecondary}>
                <span style={{ color: "var(--hl-teal-300)" }}>✦</span>
                {secondaryLabel}
              </button>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CTABanner });