// Phone mockups — real PWA screenshots inside a brand iPhone frame.

const PhoneFrame = ({ src, alt, lg = false, statusTime = "9:41" }) => (
  <div className={"phone phone-real" + (lg ? " lg" : "")}>
    <div className="phone-screen">
      <div className="phone-notch"></div>
      <img className="phone-shot" src={src} alt={alt} loading="lazy" />
      <div className="phone-home"></div>
    </div>
  </div>
);

const ScreenHome    = () => <PhoneFrame src="assets/screens/home.jpeg"   alt="Главная — рейтинг, события, быстрые действия" />;
const ScreenEvent   = () => <PhoneFrame src="assets/screens/event.jpeg"  alt="Карточка события — пляжный теннис" />;
const ScreenMap     = () => <PhoneFrame src="assets/screens/courts.jpeg" alt="Площадки и карта" />;
const ScreenRating  = () => <PhoneFrame src="assets/screens/rating.jpeg" alt="Рейтинг ELO — игроки города" />;
const ScreenBracket = () => <PhoneFrame src="assets/screens/event.jpeg"  alt="Турнир — событие" />;

const HeroPhone = () => <ScreenHome />;

Object.assign(window, {
  PhoneFrame, ScreenHome, ScreenEvent, ScreenMap, ScreenRating, ScreenBracket, HeroPhone
});