;(function () {
/* ServiceGrid — 2x2 grid of service tiles (Leveraged Trading, Physical Gold, Wealth, Shares).
   Each tile: 80px tall, white card body anchored to bottom, optional StatusChip floating on top. */

const IlloLeveraged = 'superapp/img/illo-leveraged.png';
const IlloGold = 'superapp/img/illo-gold.png';
const IlloWealth = 'superapp/img/illo-wealth.png';
const IlloShares = 'superapp/img/illo-shares.png';

/* Title rendered as two text spans: first word stays SemiBold, second word
   drops to Medium so the qualifier reads lighter than the category. */
const ServiceTile = ({ title, Illo, chip, onPress }) => {
  const [first, ...rest] = title.split(' ');
  const second = rest.join(' ');
  return (
    <button
      onClick={onPress}
      style={{
        border: 'none', background: 'transparent', padding: 0, margin: 0,
        cursor: 'pointer', font: 'inherit', color: 'inherit', textAlign: 'inherit',
        ...styles.tile,
      }}
    >
      {chip ? <StatusChip top={0} left={45}>{chip}</StatusChip> : null}
      <div style={styles.body}>
        <span style={styles.title}>
          {first}
          {second ? <span style={styles.titleSecond}>{` ${second}`}</span> : null}
        </span>
        <img
          src={Illo}
          style={{ width: '60px', height: '60px', marginLeft: '-9px', marginRight: '-9px', marginTop: '-9px', marginBottom: '-9px', objectFit: 'contain' }}
          alt=""
        />
      </div>
    </button>
  );
};

const ServiceGrid = ({ onLeveraged, onGold, onWealth, onShares }) => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
      <div style={styles.row}>
        <ServiceTile title="Leveraged Trading" Illo={IlloLeveraged} onPress={onLeveraged} />
        <ServiceTile title="Physical Gold" Illo={IlloGold} chip="New" onPress={onGold} />
      </div>
      <div style={styles.row}>
        <ServiceTile title="Wealth Investments" Illo={IlloWealth} chip="New" onPress={onWealth} />
        <ServiceTile title="Cash Equities" Illo={IlloShares} chip="New" onPress={onShares} />
      </div>
    </div>
  );
};

const styles = {
  row: {
    display: 'flex',
    flexDirection: 'row',
    gap: '12px',
  },
  tile: {
    flex: 1,
    height: '80px',
    position: 'relative',
  },
  body: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: '70px',
    paddingLeft: '16px',
    paddingRight: '16px',
    backgroundColor: '#fff',
    borderRadius: '20px',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: '10px',
    /* Strengthened lg-modal shadow — same boost as Card primitive. */
    boxShadow: '0px 24px 28px rgba(14, 20, 32, 0.16)',
  },
  title: {
    flex: 1,
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '16px',
    lineHeight: '20px',
    color: colors.ink2,
  },
  titleSecond: {
    fontFamily: 'Gilroy',
    fontWeight: 500,
  },
};

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