/* Phone mockups. PNGs in /scraps already include the device chrome,
   so PhoneFrame is just a sizing + tilt wrapper. */

const PhoneFrame = ({ children, tilt = 0, w = 230, scale = 1 }) => (
  <div style={{
    width: w,
    transform: `rotate(${tilt}deg) scale(${scale})`,
    transformOrigin: 'center bottom',
    flexShrink: 0,
    filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.18)) drop-shadow(0 8px 18px rgba(0,0,0,0.12))',
  }}>
    {children}
  </div>
);

const imgStyle = { width: '100%', height: 'auto', display: 'block' };

const makeScreen = (src, alt) => () => (
  <img src={src} alt={alt} style={imgStyle} draggable={false} />
);

const ScreenHome      = makeScreen('scraps/Daily%20tasks.png',         'Daily tasks');
const ScreenLibrary   = makeScreen('scraps/Fitness%20Library%203.png', 'Fitness library');
const ScreenCall      = makeScreen('scraps/Seminar%202.png',           'Seminar');
const ScreenCommunity = makeScreen('scraps/Community-2.png',           'Community');
const ScreenBooking   = makeScreen('scraps/booking.png',               'Booking');

window.PhoneFrame = PhoneFrame;
window.PhoneScreens = { ScreenHome, ScreenLibrary, ScreenCall, ScreenCommunity, ScreenBooking };