;(function () {
/* Hero — 360px tall section with teal gradient + Q+ photo + welcome copy.
   Height tuned so the gap between the "Learn more" button and the first body
   card is comfortable (≈ 50-60px). Body overlap stays at marginTop:−20.
   Photo positioning (asset 999×1575, aspect ≈ 0.634):
   - Q+ wordmark sits at H-center 0.7527 / V-center 0.5870 of the image.
   - Photo width = full screen width; height = SCREEN_W × 1575/999 ≈ 619.
   - Image top is computed so Q+'s vertical center lands exactly at HERO_H/2.
         PHOTO_IMG_TOP = HERO_H/2 − PHOTO_H × Q_Y_FRACTION
     For W=393, HERO_H=360: PHOTO_IMG_TOP ≈ 180 − 619 × 0.5870 ≈ −183.
   - Image extends ≈ 183px ABOVE Hero (overscroll bleed) and ≈ 257px BELOW
     Hero (hidden behind the body card's marginTop:−20 overlap). */

const HERO_H = 360;


const IMG_W = 999;
const IMG_H = 1575;

const Q_Y_FRACTION = 0.5870; // Q+ vertical center in source asset

const EquitiWordmark = ({ width, height, color }) => (
  <svg width={width} height={height} viewBox="-2 10.9 211 64.4" style={{ color }}>
    <g>
      <path fill="currentColor" d="M198.6,16.2h9.6c0.8,0,1.4,0.6,1.4,1.4v39.8c0,0.8-0.6,1.4-1.4,1.4h-9.6c-0.8,0-1.4-0.6-1.4-1.4V17.5
		C197.2,16.8,197.8,16.2,198.6,16.2"/>
      <path fill="currentColor" d="M142.6,16.2h9.6c0.8,0,1.4,0.6,1.4,1.4v39.8c0,0.8-0.6,1.4-1.4,1.4h-9.6c-0.8,0-1.4-0.6-1.4-1.4V17.5
		C141.2,16.8,141.8,16.2,142.6,16.2"/>
      <path fill="currentColor" d="M180,27.3h9.2c0.8,0,1.4-0.6,1.4-1.4v-8.4c0-0.8-0.6-1.4-1.4-1.4h-27.6c-0.8,0-1.4,0.6-1.4,1.4V26
		c0,0.8,0.6,1.4,1.4,1.4h6v16.3c0,0,0,0.1,0,0.1c0.3,9,7.6,15.3,16.6,15.3h4.9c0.7,0,1.3-0.5,1.3-1.2c0,0,0,0,0,0v-0.2v-7.6v-1.2
		c0-0.8-0.6-1.4-1.4-1.4h-3c0,0,0,0,0,0c-0.1,0-0.2,0-0.2,0c-3.1,0-5.6-2.4-6-5.4v-1.3V27.3z"/>
      <path fill="currentColor" d="M134.5,17.4c0-0.7-0.6-1.2-1.2-1.2h-9.9c-0.7,0-1.2,0.6-1.2,1.2l0,29.4c-3.6,2.2-6.9,2.1-6.9,2.1
		c-6,0-6-5.8-6-5.8V17.5c0-0.8-0.6-1.4-1.4-1.4h-9.6c-0.8,0-1.4,0.6-1.4,1.4v24.8c0,0,0,0.1,0,0.1c0.1,4.4,1.9,8.4,4.7,11.4
		c0.5,0.7,1.3,1.3,2.1,1.9c2.8,2.1,6.4,3.4,10.2,3.4c0.5,0,1.9,0,2.1,0c0,0,0,0,0,0c5.7-0.1,10.8-1.1,15.3-2.9
		c2.6-1.1,3.2-2,3.2-4.7V17.4z"/>
      <path fill="currentColor" d="M45.9,31.5c-0.2-9.2-7.8-16.6-17-16.6h-5.3c-9.3,0-16.8,7.4-17,16.6h0v10.6c0,9.4,7.6,17.1,17.1,17.1h2.6v0
		c8.8,0,14.7-2.6,17.9-7.6c1.2-2.1,0.8-3.8-1.3-4.8l-4-2c-2.4-1.2-3.4-0.9-4.7,1.1C32.4,48,30,49,26.5,49c-0.1,0-0.2,0-0.3,0v0h-1.3
		c-6,0-6-5.8-6-5.8v-1.5h22.8c2.9,0,4.3-1.4,4.3-4.1L45.9,31.5L45.9,31.5z M33.5,32.7H18.9V31c0,0,0.1-5.8,6-5.8h2.6
		c6,0,6,5.8,6,5.8V32.7z"/>
      <path fill="currentColor" d="M87,17.9c-2.1-0.9-8.2-2.7-14.8-2.9v10.1h2.5c1.7,0,3,1.4,3,3v17.6c0,1.7-1.4,3.1-3,3.1h-2.5
		c0,0,0,10.3,0,10.3c1.8,0,4.2-0.2,5.6-0.7v11.5c0,0.8,0.6,1.4,1.4,1.4h9.6c0.8,0,1.4-0.6,1.4-1.4V26.8v-4.2
		C90.2,19.9,89.6,18.9,87,17.9"/>
      <path fill="currentColor" d="M68,48.8c-1.7,0-3-1.4-3-3V28.2c0-1.7,1.4-3,3-3h2.5V14.9h-0.9c-9.3,0-16.8,7.4-17,16.6h0v10.6
		c0,9.4,7.6,17.1,17.1,17.1c0.1,0,0.4,0,0.9,0c0,0,0-10.4,0-10.4H68z"/>
    </g>
  </svg>
);

const Bell = ({ width, height, color }) => (
  <svg width={width} height={height} viewBox="0 0 40 40" fill="none" style={{ color }}>
    <path d="M17.3542 29C18.0593 29.6224 18.9856 30 20 30C21.0145 30 21.9407 29.6224 22.6458 29M26 16C26 14.4087 25.3679 12.8826 24.2427 11.7574C23.1174 10.6321 21.5913 10 20 10C18.4087 10 16.8826 10.6321 15.7574 11.7574C14.6322 12.8826 14 14.4087 14 16C14 19.0902 13.2205 21.206 12.3497 22.6054C11.6151 23.7859 11.2479 24.3761 11.2613 24.5408C11.2763 24.7231 11.3149 24.7926 11.4618 24.9016C11.5945 25 12.1926 25 13.3889 25H26.6112C27.8074 25 28.4056 25 28.5382 24.9016C28.6852 24.7926 28.7238 24.7231 28.7387 24.5408C28.7522 24.3761 28.3849 23.7859 27.6504 22.6054C26.7795 21.206 26 19.0902 26 16Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    <circle cx="26" cy="14" r="4.5" fill="#F04438"/>
  </svg>
);

const UserIcon = ({ width, height, color }) => (
  <svg width={width} height={height} viewBox="0 0 24 24" fill="none" style={{ color }}>
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Hero = ({ onLearnMore }) => {
  const SCREEN_W = DEVICE_WIDTH;
  const PHOTO_H = (SCREEN_W * IMG_H) / IMG_W;
  const PHOTO_IMG_TOP = HERO_H / 2 - PHOTO_H * Q_Y_FRACTION;
  /* On mobile iOS PWA the .app-frame extends UP into the safe-area-top
     zone, so the Hero's top edge sits ABOVE the visible viewport. To
     keep the Q+ image visually centered in the VISIBLE portion of the
     Hero, shift PHOTO_IMG_TOP down by env(safe-area-inset-top). */
  const photoImgStyle = {
    position: 'absolute',
    left: 0,
    top: `calc(${PHOTO_IMG_TOP}px + env(safe-area-inset-top, 0px))`,
    width: '100%',
    height: `${PHOTO_H}px`,
    objectFit: 'cover',
  };

  return (
    <div style={styles.hero}>
      {/* L1 — base teal gradient */}
      <div
        style={{
          position: 'absolute',
          top: 0, left: 0, right: 0, bottom: 0,
          // 115deg — start at top-left, end roughly down-right
          background: 'linear-gradient(115deg, #00AFAB 0%, #1FCBC2 70%, #88E5E0 100%)',
        }}
      />
      {/* L2 — Q+ photo. Direct child (no inner clip wrapper) so its upper
         portion can extend ABOVE Hero into the ScrollView's overscroll area. */}
      <img
        src="superapp/img/hero-q-plus.png"
        style={photoImgStyle}
        alt=""
      />

      {/* Top bar */}
      <div style={styles.topBar}>
        <EquitiWordmark width={79} height={24} color="#fff" />
        <div style={styles.topRight}>
          {/* Both icons sized so the visible artwork is the SAME ~20px wide
             inside the 40px circles, matching despite different intrinsic
             padding in their viewBoxes:
               bell.svg  viewBox 40, art at x=10–30 (50% of canvas) → render 40
               user.svg  viewBox 24, art at x=3–21 (~75% of canvas) → render 26 */}
          {/* Icons rendered white against the dark Hero background. The
             circle itself is unified across all pages by the white-tint
             layer inside HeaderIconBtn — see that component. */}
          <HeaderIconBtn badge>
            <Bell width={40} height={40} color="#fff" />
          </HeaderIconBtn>
          <HeaderIconBtn>
            <UserIcon width={26} height={26} color="#fff" />
          </HeaderIconBtn>
        </div>
      </div>

      {/* Hero copy */}
      <div style={styles.copy}>
        <div style={styles.welcomePill}>
          <span style={styles.welcomeText}>Equiti +</span>
        </div>
        <div style={styles.title}>Trade smarter.</div>
        <div style={styles.sub}>Get a 7 day free trial on your first deposit</div>
        <button
          onClick={onLearnMore}
          style={{
            border: 'none', background: 'transparent', padding: 0, margin: 0,
            cursor: 'pointer', font: 'inherit', color: 'inherit', textAlign: 'inherit',
            ...styles.depositBtn,
          }}
        >
          <span style={styles.depositText}>Learn more</span>
        </button>
      </div>
    </div>
  );
};

const styles = {
  hero: {
    width: '100%',
    /* Hero height = HERO_H + env(safe-area-inset-top) on mobile, so the
       inner content (topBar at 54+env, copy at 108+env) fits without
       overflowing past the bottom into .body's marginTop:-20 + zIndex:1
       overlap. Non-mobile: env() = 0, height stays HERO_H. */
    height: `calc(${HERO_H}px + env(safe-area-inset-top, 0px))`,
    /* overflow:'visible' (default) so the photo can bleed above Hero into
       the ScrollView's overscroll area. The L1 base gradient uses absoluteFill
       — it stays clipped to Hero's bounds and does not follow the photo up. */
    position: 'relative',
  },
  topBar: {
    position: 'absolute',
    left: 0,
    right: 0,
    /* 54px below the safe-area boundary — on iOS PWA the hero extends up
       under the status bar, so the equiti logo + icons shift down by
       env(safe-area-inset-top) to stay below the system status text. */
    top: 'calc(54px + env(safe-area-inset-top, 0px))',
    paddingLeft: '20px',
    paddingRight: '20px',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  topRight: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '10px',
  },
  copy: {
    position: 'absolute',
    left: '20px',
    /* Same env shift as topBar so welcome pill + "Trade smarter" sit
       below the iOS status bar on PWA. */
    top: 'calc(108px + env(safe-area-inset-top, 0px))',
    width: '230px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
  },
  welcomePill: {
    alignSelf: 'flex-start',
    paddingLeft: '11px',
    paddingRight: '11px',
    /* Slightly larger pill (20×11) gives the badge a touch more
       presence without bumping the font (still 10px). justifyContent:
       center pins the text horizontally too — the glyph would
       otherwise sit visually slightly left of centre due to Gilroy's
       right-leaning side bearings. */
    height: '20px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0E1420',
    borderRadius: '20px',
  },
  welcomeText: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '10px',
    /* Larger lineHeight (12 vs 10) keeps the descender + ascender
       bands inside the 20px pill, so the glyph sits centred via
       flex without needing vertical padding tricks. */
    lineHeight: '12px',
    color: '#fff',
    textAlign: 'center',
  },
  title: {
    marginTop: '14px',
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '36px',
    lineHeight: '40px',
    color: '#fff',
    letterSpacing: '-0.7px',
  },
  sub: {
    marginTop: '8px',
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '13px',
    lineHeight: '18px',
    color: '#fff',
    maxWidth: '200px',
  },
  depositBtn: {
    marginTop: '14px',
    alignSelf: 'flex-start',
    paddingLeft: '18px',
    paddingRight: '18px',
    paddingTop: '8px',
    paddingBottom: '8px',
    height: '34px',
    backgroundColor: '#0E1420',
    borderRadius: '42px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  depositText: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '13px',
    color: '#fff',
  },
};

Object.assign(window, { Hero, EquitiWordmark });
})();