/* Phone mockup — renders real app screenshots inside an iPhone bezel.
   client: ClientExploreScreen01 (front) + ReelsViewerScreen02 (back)
   artist: ArtistHomeScreen01 (front) + ArtistBookingsScreen01 (back) */

const PHONE_SCREENSHOTS = {
  client: [
    '/manus-storage/pasted_file_Xfn06q_image_e691f568.webp',
    '/manus-storage/pasted_file_QspfrN_image_42fa5d61.webp',
  ],
  artist: [
    'https://files.manuscdn.com/user_upload_by_module/session_file/115182585/gObwFugwQmsVyuMb.jpg',
    'https://files.manuscdn.com/user_upload_by_module/session_file/115182585/kaoYNyUoFXdGzeZi.jpg',
  ],
};

function PhoneMockup({ role, lang, screenshotIndex }) {
  const shots = PHONE_SCREENSHOTS[role] || PHONE_SCREENSHOTS.client;
  const idx = (screenshotIndex !== undefined ? screenshotIndex : 0) % shots.length;
  const src = shots[idx];

  return (
    <div className="phone-mockup" style={{ padding: 0, overflow: 'hidden' }}>
      {/* Screenshot fills the full bezel — no notch, no white gap */}
      <div className="scrn" style={{
        padding: 0,
        overflow: 'hidden',
        background: '#fff',
        position: 'absolute',
        top: 0, left: 0, right: 0, bottom: 0,
        borderRadius: 'inherit',
      }}>
        <img
          src={src}
          alt=""
          style={{
            position: 'absolute',
            top: 0, left: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'top center',
            display: 'block',
            borderRadius: 'inherit',
          }}
        />
      </div>
    </div>
  );
}

window.PhoneMockup = PhoneMockup;