// Hero phone mockups — static PNG renders of the App Redesign Final screens.
// (HomeFinal, RoundFinal, TournV4 in redesign/final.jsx + redesign/tournaments.jsx)
//
// Captured at full 402×874 native resolution then stitched, so they stay
// sharp when displayed at the landing's smaller phone sizes (180–280 wide).
// PhoneShell renders them as <img> via the `image` prop — bypasses the
// React scale-transform that was making everything blurry.

const SCREEN_HOME  = 'assets/screens/home.png';
const SCREEN_ROUND = 'assets/screens/round.png';
const SCREEN_TOURN = 'assets/screens/tourn.png';

function HeroHome() {
  return null; // placeholder — not used. PNG passed directly below.
}

// These exports are still needed by sections-top/bottom which import them
// as React components; we shim them as image-rendering helpers so the
// existing call-sites keep working.
function makeImg(src, alt) {
  return function() {
    return <img src={src} alt={alt} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }}/>;
  };
}

Object.assign(window, {
  HeroHome:        makeImg(SCREEN_HOME,  'Home — live round, hero'),
  HeroLeaderboard: makeImg(SCREEN_ROUND, 'Round play — leaderboard with press offer'),
  HeroSettle:      makeImg(SCREEN_TOURN, 'Summer Series tournament'),
  // also expose raw paths so callers that prefer PhoneShell's `image` prop
  // can use them directly (sharper than the React wrapper).
  SCREEN_HOME, SCREEN_ROUND, SCREEN_TOURN,
});