;(function () {
/* HomeScreen — refactored to compose the new home/* sections.
   Stack: Hero → PortfolioCard → ServiceGrid → TopTraded → TopMovers
        → FeaturedCards → PerfWidget → EditWidgetsPill */

function HomeScreen({ onLeveraged, onLearnMore }) {
  return (
    <div
      style={styles.scroll}
    >
      <div style={styles.content}>
        {/* Top overscroll cushion — absolutely positioned ABOVE the contentContainer
           (top:-1000) with the page-top color (teal). Sits behind everything in
           normal scroll (off-screen above); becomes visible during pull-down
           overscroll, painting the exposed area teal to match the Hero. The
           ScrollView's own backgroundColor (colors.bg = grey) handles bottom
           overscroll separately so each end matches its adjacent content. */}
        <div style={styles.topCushion}/>
        <Hero onLearnMore={onLearnMore}/>
        <div style={styles.body}>
          <PortfolioCard/>
          <ServiceGrid onLeveraged={onLeveraged}/>
          <PromoBanner/>
          <TopTraded/>
          <TopMovers/>
          <FeaturedCards/>
          <PerfWidget/>
          <EditWidgetsPill/>
        </div>
      </div>
    </div>
  );
}

const styles = {
  scroll: {
    flex: 1,
    // Bottom overscroll bg — matches the body card grey at the bottom of the
    // page. The TOP overscroll color is provided by the topCushion view inside
    // contentContainer.
    backgroundColor: colors.bg,
    overflowY: 'auto',
    WebkitOverflowScrolling: 'touch',
    scrollbarWidth: 'none',
    width: '100%',
    height: '100%',
  },
  content: {
    paddingBottom: '200px',
    backgroundColor: colors.bg,
    position: 'relative',
  },
  topCushion: {
    position: 'absolute',
    top: '-1000px',
    left: 0,
    right: 0,
    height: '1000px',
    backgroundColor: '#00AFAB', // matches Hero's top-left start color
    pointerEvents: 'none',
  },
  body: {
    backgroundColor: colors.bg,
    marginTop: '-20px',
    paddingTop: '18px',
    paddingLeft: '20px',
    paddingRight: '20px',
    paddingBottom: '12px',
    borderTopLeftRadius: '18px',
    borderTopRightRadius: '18px',
    display: 'flex',
    flexDirection: 'column',
    gap: '14px',
    /* CSS stacking fix (no RN equivalent): the Hero's q+ photo is
       position:absolute and bleeds ≈76px below Hero into this body's area.
       Without explicit positioning, this static block paints UNDER the
       Hero's positioned children — hiding "Total Portfolio Value" and the
       big dollar amount. position:relative + zIndex:1 lifts body's stacking
       layer above the photo so the PortfolioCard reads correctly. RN's
       flex layout paints in DOM order regardless of position, so the RN
       version doesn't need this. */
    position: 'relative',
    zIndex: 1,
  },
};

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