function RecursicaBlock() {
  const content = (typeof window !== "undefined" && window.__BX_CONTENT && window.__BX_CONTENT["banner-recursica"]) || {};
  const title = content.title;
  const body = content.body;
  const ctaUrl = content.ctaUrl;
  const ctaLabel = content.ctaLabel;

  return (
    <section className="vrect-recursica" id="recursica">
      <div className="vr-rec-eyebrow-row">
        <span className="recursica-logo-inline" aria-label="Recursica"></span>
      </div>
      <div className="vr-rec-body">
        {title && (
          typeof title === "string" ? (
            <h2 dangerouslySetInnerHTML={{ __html: title }} />
          ) : (
            <h2>{title}</h2>
          )
        )}
        <div className="vr-rec-right">
          {body && (
            typeof body === "string" ? (
              <p dangerouslySetInnerHTML={{ __html: body }} />
            ) : (
              <p>{body}</p>
            )
          )}
          {ctaUrl && ctaLabel && (
            <div className="vr-rec-actions">
              <a href={ctaUrl} target="_blank" rel="noopener" className="vr-rec-cta">
                {typeof ctaLabel === "string" ? (
                  <span dangerouslySetInnerHTML={{ __html: ctaLabel }} />
                ) : (
                  <span>{ctaLabel}</span>
                )}
              </a>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function CozyBlock() {
  const content = (typeof window !== "undefined" && window.__BX_CONTENT && window.__BX_CONTENT["banner-cozy"]) || {};
  const title = content.title;
  const body = content.body;
  const ctaUrl = content.ctaUrl;
  const ctaLabel = content.ctaLabel;

  return (
    <section className="vrect-cozy" id="cozy">
      <div className="cozy-shapes" aria-hidden="true">
        <div className="cs-shape cs-jacks-a"></div>
        <div className="cs-shape cs-triangles-a"></div>
        <div className="cs-shape cs-circle"></div>
        <div className="cs-shape cs-squiggle"></div>
      </div>
      <div className="vr-rec-eyebrow-row cozy-eyebrow-row">
        <div className="vr-rec-eyebrow cozy-eyebrow">
          <span className="cozy-logo-inline" aria-label="Cozy"></span>
        </div>
      </div>
      <div className="vr-rec-body">
        {title && (
          typeof title === "string" ? (
            <h2 dangerouslySetInnerHTML={{ __html: title }} />
          ) : (
            <h2>{title}</h2>
          )
        )}
        <div className="vr-rec-right">
          {body && (
            typeof body === "string" ? (
              <p dangerouslySetInnerHTML={{ __html: body }} />
            ) : (
              <p>{body}</p>
            )
          )}
          {ctaUrl && ctaLabel && (
            <div className="vr-rec-actions">
              <a href={ctaUrl} target="_blank" rel="noopener" className="vr-rec-cta cozy">
                {typeof ctaLabel === "string" ? (
                  <span dangerouslySetInnerHTML={{ __html: ctaLabel }} />
                ) : (
                  <span>{ctaLabel}</span>
                )}
              </a>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { RecursicaBlock, CozyBlock });