{months[month]} {isAr ? toAr(year) : year}
{daysShort.map((d, i) => (
{d}
))}
{cells.map((d, i) => {
if (!d) return
;
const past = d < today;
const selectedIn = isSame(d, checkIn);
const selectedOut = isSame(d, checkOut);
const between = isBetween(d);
const selected = selectedIn || selectedOut;
return (
);
})}
);
}
function BookingSheet({ item, lang, currency = 'EGP', onClose, onConfirm }) {
const isAr = lang === 'ar';
const unitNightly = (item.unit_en || '/night').includes('night');
const today = new Date(); today.setHours(0,0,0,0);
const [checkIn, setCheckIn] = React.useState(() => { const d = new Date(today); d.setDate(d.getDate() + 7); return d; });
const [checkOut, setCheckOut] = React.useState(() => { const d = new Date(today); d.setDate(d.getDate() + 12); return d; });
const [showCal, setShowCal] = React.useState(false);
const [adults, setAdults] = React.useState(2);
const [children, setChildren] = React.useState(0);
const nights = (checkIn && checkOut)
? Math.max(1, Math.round((checkOut - checkIn) / 86400000))
: 1;
const units = unitNightly ? nights : (adults + children);
const sub = item.price * units;
const total = sub;
return (
e.stopPropagation()} style={{
width: '100%', background: BC.paper,
borderTopLeftRadius: BR.xl, borderTopRightRadius: BR.xl,
maxHeight: '86%', overflow: 'auto', direction: isAr ? 'rtl' : 'ltr',
animation: 'raya-fadein 0.3s cubic-bezier(.2,.7,.3,1) both',
}}>
{/* grip */}
{isAr ? 'تأكيد الحجز' : 'Confirm your stay'}
{/* item summary */}
{isAr ? item.title_ar : item.title_en}
{/* dates */}
{showCal &&
}
{/* guests: adults + children */}
{isAr ? 'بالغين' : 'Adults'}
{isAr ? '١٣ سنة أو أكبر' : 'Ages 13 or above'}
{isAr ? 'أطفال' : 'Children'}
{isAr ? 'أقل من ١٣ سنة' : 'Under 13'}
{/* pricing breakdown */}
{isAr
? `${window.RAYA_CURRENCY.formatPrice(item.price, currency)} × ${toAr(units)}`
: `${window.RAYA_CURRENCY.formatPrice(item.price, currency)} × ${units} ${unitNightly ? (units === 1 ? 'night' : 'nights') : (units === 1 ? 'guest' : 'guests')}`}
{window.RAYA_CURRENCY.formatPrice(sub, currency)}
{isAr ? 'الإجمالي' : 'Total'}
{window.RAYA_CURRENCY.formatPrice(total, currency)}
{isAr ? 'السعر النهائي شامل كل الرسوم' : 'Final price, all fees included'}
onConfirm({
id: 'b' + Date.now(), item,
dates: fmtDateRange(checkIn, checkOut, isAr),
checkIn, checkOut, nights,
guests: adults + children, adults, children, total,
})}>
{isAr ? 'تأكيد الحجز' : 'Confirm & pay'}
{isAr
? `إلغاء مجاني خلال ${toAr(BCFG.booking.cancelWindow)} ساعة`
: `Free cancellation within ${BCFG.booking.cancelWindow} hours`}
);
}
function BookingSuccess({ lang, onClose }) {
const isAr = lang === 'ar';
return (
{isAr ? 'تم الحجز!' : 'You\'re booked!'}
{isAr ? 'تم إرسال التفاصيل على إيميلك' : 'We\'ve sent the details to your email.'}
{isAr ? 'شوف الحجز' : 'View booking'}
);
}
function LoginScreen({ lang = 'ar', onClose, onSignIn }) {
const isAr = lang === 'ar';
const [step, setStep] = React.useState('phone');
const [name, setName] = React.useState('');
const [phone, setPhone] = React.useState('');
const [otp, setOtp] = React.useState('');
const [error, setError] = React.useState('');
const phoneOk = /^\+?\d{7,15}$/.test(phone.replace(/\s/g, ''));
const otpOk = otp.replace(/\s/g, '').length === 4;
const nameOk = name.trim().length >= 2;
const submitPhone = (e) => {
e?.preventDefault?.();
if (!phoneOk) { setError(isAr ? 'رقم الموبايل مش صح' : 'Enter a valid mobile number'); return; }
setError('');
setStep('otp');
};
const submitOtp = (e) => {
e?.preventDefault?.();
if (!otpOk) { setError(isAr ? 'كود التأكيد لازم يكون ٤ أرقام' : 'OTP must be 4 digits'); return; }
setError('');
setStep('name');
};
const submitName = (e) => {
e?.preventDefault?.();
if (!nameOk) { setError(isAr ? 'اكتب اسمك بالكامل' : 'Please enter your full name'); return; }
setError('');
onSignIn({
name: name.trim(),
phone: phone.trim(),
tier: isAr ? 'ذهبي' : 'Gold',
trips: 0, saved: 0, rating: 5.0,
});
};
const inputBase = {
width: '100%', padding: '13px 16px', borderRadius: BR.md,
border: `1px solid ${BC.ink10}`, background: BC.white,
fontFamily: isAr ? BF.bodyAr : BF.bodyEn,
fontSize: 15, color: BC.ink, outline: 'none',
textAlign: isAr ? 'right' : 'left',
direction: isAr ? 'rtl' : 'ltr',
boxSizing: 'border-box',
};
return (
e.stopPropagation()} style={{
width: '100%', background: BC.paper,
borderTopLeftRadius: BR.xl, borderTopRightRadius: BR.xl,
padding: '12px 22px 30px',
direction: isAr ? 'rtl' : 'ltr',
animation: 'raya-fadein 0.3s cubic-bezier(.2,.7,.3,1) both',
}}>
{step === 'phone' && (
)}
{step === 'otp' && (
)}
{step === 'name' && (
)}
{isAr ? 'باستخدامك للتطبيق أنت بتوافق على شروط الاستخدام وسياسة الخصوصية' : 'By continuing, you agree to our Terms and Privacy Policy.'}
);
}
function SplashScreen({ lang = 'ar' }) {
const isAr = lang === 'ar';
return (
{[0, 1, 2].map(i => (
))}
{isAr ? 'رفاهية على شواطئ مصر' : 'Luxury on Egypt\u2019s shores'}
);
}
Object.assign(window, { BookingsScreen, FavoritesScreen, ProfileScreen, BookingSheet, BookingSuccess, SplashScreen, LoginScreen });