// Hostelova phone screens — uses actual app screenshots

const ImgScreen = ({ src, alt }) => (
  <div className="phone-screen img-screen">
    <img src={src} alt={alt} draggable={false} />
  </div>
);

const ScreenHome = () => <ImgScreen src="assets/screens/home.jpeg" alt="Hostelova Home" />;
const ScreenDetail = () => <ImgScreen src="assets/screens/detail.jpeg" alt="Hostel Detail" />;
const ScreenBookings = () => <ImgScreen src="assets/screens/bookings.jpeg" alt="My Bookings" />;
const ScreenOwner = () => <ImgScreen src="assets/screens/owner.jpeg" alt="Owner Dashboard" />;
const ScreenOwnerHostels = () => <ImgScreen src="assets/screens/owner-hostels.jpeg" alt="Your Hostels" />;
const ScreenOwnerProfile = () => <ImgScreen src="assets/screens/owner-profile.jpeg" alt="Owner Profile" />;
const ScreenLogin = () => <ImgScreen src="assets/screens/login.jpeg" alt="Hostelova Login" />;
// Explore reuses Home image for now (no dedicated screenshot)
const ScreenExplore = () => <ImgScreen src="assets/screens/home.jpeg" alt="Explore" />;
// Saved reuses Bookings image for now
const ScreenSaved = () => <ImgScreen src="assets/screens/bookings.jpeg" alt="Saved" />;

const PhoneFrame = ({ children, noNotch = true }) => (
  <div className="phone-frame">
    {!noNotch && <div className="phone-notch"></div>}
    <div className="phone-side s1"></div>
    <div className="phone-side s2"></div>
    <div className="phone-side s3"></div>
    <div className="phone-side s4"></div>
    {children}
  </div>
);

Object.assign(window, {
  PhoneFrame,
  ImgScreen,
  ScreenHome, ScreenExplore, ScreenDetail, ScreenBookings,
  ScreenSaved, ScreenOwner, ScreenOwnerHostels, ScreenOwnerProfile, ScreenLogin,
});