;(function () {
/* PromoBanner — full-bleed promo SVG aligned to the body's content column.
   The body has paddingHorizontal: 20, so available width = window width - 40.

   Two layering details that took a few iterations to get right:
     1. The wrapper now has an OPAQUE white background. Without it, the
        anti-aliased rounded corners of the SVG let through whatever's
        rendered behind the wrapper — including the box-shadows cast by
        the ServiceGrid tiles directly above. White is a safe base; the
        SVG's gradient fully covers it once painted.
     2. `isolation: isolate` creates a new stacking context, so the lift
        shadow we apply via `filter: drop-shadow` doesn't bleed into
        sibling content above. drop-shadow follows the alpha of the
        rendered SVG (true rounded silhouette) where box-shadow would
        bleed off the rectangle's edge. */

const BODY_PADDING_X = 20; // matches HomeScreen body.paddingHorizontal
const SVG_W = 343;
const SVG_H = 106;

const PromoBanner = () => {
  const W = DEVICE_WIDTH - BODY_PADDING_X * 2;
  const H = (W * SVG_H) / SVG_W;

  return (
    <div style={{ ...styles.wrap, width: `${W}px`, height: `${H}px` }}>
      <img src="superapp/img/promo-banner.svg" width={W} height={H} alt="" style={styles.img} />
    </div>
  );
};

const styles = {
  wrap: {
    /* Solid white blocks any box-shadow falling onto this region from
       above (ServiceGrid tiles cast a 24px-down 28px-blur shadow that
       would otherwise tint the banner's anti-aliased edge through the
       transparent wrapper). The SVG paints its own gradient on top. */
    backgroundColor: '#fff',
    /* Match the SVG's 12px rounded corners so the wrapper itself ends
       at the same silhouette — no white border peek. */
    borderRadius: '12px',
    /* New stacking context — keeps the drop-shadow attached to this
       element rather than blending with sibling shadows. */
    isolation: 'isolate',
    /* drop-shadow follows the SVG's rounded alpha; box-shadow on the
       wrapper would render a square shadow visible at the corners. */
    filter: 'drop-shadow(0px 12px 16px rgba(14, 20, 32, 0.18))',
  },
  img: {
    display: 'block',
    /* SVG already has 12px rounded corners baked in, but stacking the
       border-radius on the img itself means anti-aliased edges blend
       to the wrapper's white instead of to whatever's behind. */
    borderRadius: '12px',
  },
};

Object.assign(window, { PromoBanner });
})();