/* ==========================================================
   My Predictions -- standalone page
   Route: #/my-predictions
   Uses MyPredictions component from dashboard.jsx (window global).
   ========================================================== */

function MyPredictionsPage() {
  return (
    <main>
      <InnerPageBanner />
      <PageBand
        eyebrow="Your campaign picks"
        title={<>My<br />Predictions</>}
        sub="Enter your number to see all bills, picks, and results."
      />
      <div style={{ maxWidth: 860, margin: '0 auto', padding: '32px 22px 32px' }}>
        <MyPredictions />
      </div>

      {/* Mobile-only sub-hero banner -- 390x80, full width, auto height */}
      <img
        src="/assets/images/mobile-sub-banner.gif"
        alt="SunFront World Cup Foari 2026"
        className="mobile-sub-banner"
        style={{ width: '100%', height: 'auto' }}
      />

      {/* Prize banner */}
      <CampaignBanner
        className="product-banner-section"
        src="/assets/images/product-banner.png"
        alt="Grand Prize MVR 50,000 + 39 Matchday Winners"
        bg="var(--grey-50)"
      />
    </main>
  );
}

Object.assign(window, { MyPredictionsPage });