;(function () {
/* FeaturedCards — TSLA and NFLX side-by-side. Both cards subscribe to
   the trade store via useSymbol so price + change tick in lock-step
   with the trade page's instrument list. TSLA has a live dummy feed
   (300ms ticks); NFLX shows its static seed (matches the trade page
   exactly — there's no separate hardcoded value for the home). */

const FeaturedCard = ({ kind, ticker, name }) => {
  const sym = window.useSymbol(ticker);
  const bid = sym ? sym.bid : 0;
  const change = sym ? sym.change : 0;
  const up = change >= 0;
  /* Reuse the global formatPrice so non-forex stays at 2 decimals
     (matches the trade page). */
  const priceText = sym ? window.formatPrice(bid, sym) : '—';
  /* Approx absolute price delta for the secondary line — change% × bid
     gives a believable dollar swing without needing a real "open"
     baseline. Sign tracks the % so the +/− stays consistent. */
  const absDelta = Math.abs(bid * change / 100);
  const changeText = (up ? '+' : '−') + absDelta.toFixed(2)
    + ' (' + (up ? '+' : '−') + Math.abs(change).toFixed(2) + '%)';
  return (
    <Card style={styles.card} padding={{ horizontal: 16, vertical: 16 }}>
      <div style={styles.header}>
        <AssetMark kind={kind} size={36} />
        <div>
          <div style={styles.ticker}>{ticker}</div>
          <div style={styles.name}>{name}</div>
        </div>
      </div>
      <div style={styles.price}>{priceText}</div>
      <div style={{ ...styles.change, color: up ? colors.green : colors.red }}>{changeText}</div>
    </Card>
  );
};

const FeaturedCards = () => (
  <div style={styles.row}>
    <FeaturedCard kind="tesla"   ticker="TSLA" name="Tesla Inc" />
    <FeaturedCard kind="netflix" ticker="NFLX" name="Netflix"   />
  </div>
);

const styles = {
  row: {
    display: 'flex',
    flexDirection: 'row',
    gap: '12px',
  },
  card: {
    flex: 1,
  },
  header: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '10px',
  },
  ticker: {
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '16px',
    color: colors.ink,
  },
  name: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '11px',
    color: colors.muted2,
  },
  price: {
    marginTop: '10px',
    fontFamily: 'Inter',
    fontSize: '28px',
    fontWeight: 700,
    color: colors.ink,
    letterSpacing: '-0.5px',
    fontVariantNumeric: 'tabular-nums',
  },
  change: {
    fontFamily: 'Inter',
    fontSize: '12px',
    fontWeight: 600,
    fontVariantNumeric: 'tabular-nums',
  },
};

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