function MainComponent() { const [currentView, setCurrentView] = React.useState("landing"); // 'landing', 'date-picker', or 'availability' const [friendName, setFriendName] = React.useState(""); const [selectedTimeZone, setSelectedTimeZone] = React.useState("America/New_York"); const [selectedDates, setSelectedDates] = React.useState([]); const [currentMonth, setCurrentMonth] = React.useState(new Date()); const [currentSlideIndex, setCurrentSlideIndex] = React.useState(0); const [timeSlots, setTimeSlots] = React.useState({}); const [showTimePicker, setShowTimePicker] = React.useState(false); const [timePickerField, setTimePickerField] = React.useState(null); const [timePickerDate, setTimePickerDate] = React.useState(null); // Time zones list const timeZones = [ "America/New_York", "America/Chicago", "America/Denver", "America/Los_Angeles", "America/Anchorage", "Pacific/Honolulu", "Europe/London", "Europe/Paris", "Asia/Tokyo", "Australia/Sydney" ]; // Parse time input (e.g., "5pm", "17:30", "5:30 PM") const parseTime = (timeStr)=>{ if (!timeStr) return null; const cleanTime = timeStr.toLowerCase().replace(/\s/g, ""); let hours, minutes; if (cleanTime.includes("pm") || cleanTime.includes("am")) { const isPM = cleanTime.includes("pm"); const timeOnly1 = cleanTime.replace(/[ap]m/, ""); if (timeOnly1.includes(":")) { [hours, minutes] = timeOnly1.split(":").map(Number); } else { hours = parseInt(timeOnly1); minutes = 0; } if (isPM && hours !== 12) hours += 12; if (!isPM && hours === 12) hours = 0; } else { if (timeOnly.includes(":")) { [hours, minutes] = timeOnly.split(":").map(Number); } else { hours = parseInt(timeOnly); minutes = 0; } } return { hours, minutes }; }; // Format time for display const formatTime = (hours, minutes)=>{ const period = hours >= 12 ? "PM" : "AM"; const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours; return `${displayHours}:${minutes.toString().padStart(2, "0")} ${period}`; }; // Calculate duration between two times const calculateDuration = (startTime, endTime)=>{ if (!startTime || !endTime) return ""; const start = parseTime(startTime); const end = parseTime(endTime); if (!start || !end) return ""; let startMinutes = start.hours * 60 + start.minutes; let endMinutes = end.hours * 60 + end.minutes; if (endMinutes <= startMinutes) endMinutes += 24 * 60; // Next day const diffMinutes = endMinutes - startMinutes; const hours = Math.floor(diffMinutes / 60); const minutes = diffMinutes % 60; return `(${hours}h ${minutes}m)`; }; // Calendar functions const getDaysInMonth = (date)=>{ const year = date.getFullYear(); const month = date.getMonth(); const firstDay = new Date(year, month, 1); const lastDay = new Date(year, month + 1, 0); const daysInMonth = lastDay.getDate(); const startingDayOfWeek = firstDay.getDay(); const days = []; // Add empty cells for days before the first day of the month for(let i = 0; i < startingDayOfWeek; i++){ days.push(null); } // Add all days of the month for(let day = 1; day <= daysInMonth; day++){ days.push(new Date(year, month, day)); } return days; }; const isDateSelected = (date)=>{ return selectedDates.some((selectedDate)=>selectedDate.toDateString() === date.toDateString()); }; const toggleDate = (date)=>{ if (isDateSelected(date)) { setSelectedDates((prev)=>prev.filter((d)=>d.toDateString() !== date.toDateString())); // Remove time slots for this date setTimeSlots((prev)=>{ const newSlots = { ...prev }; delete newSlots[date.toDateString()]; return newSlots; }); } else { setSelectedDates((prev)=>[ ...prev, date ].sort((a, b)=>a - b)); } }; const goToToday = ()=>{ setCurrentMonth(new Date()); }; const nextMonth = ()=>{ setCurrentMonth((prev)=>new Date(prev.getFullYear(), prev.getMonth() + 1, 1)); }; const prevMonth = ()=>{ setCurrentMonth((prev)=>new Date(prev.getFullYear(), prev.getMonth() - 1, 1)); }; // Time slot management const updateTimeSlot = (date, field, value)=>{ const dateKey = date.toDateString(); setTimeSlots((prev)=>({ ...prev, [dateKey]: { ...prev[dateKey], [field]: value } })); }; const removeDate = (dateToRemove)=>{ setSelectedDates((prev)=>prev.filter((d)=>d.toDateString() !== dateToRemove.toDateString())); setTimeSlots((prev)=>{ const newSlots = { ...prev }; delete newSlots[dateToRemove.toDateString()]; return newSlots; }); if (currentSlideIndex >= selectedDates.length - 1) { setCurrentSlideIndex(Math.max(0, selectedDates.length - 2)); } }; // Get all valid time slots for summary const getValidTimeSlots = ()=>{ const validSlots = []; selectedDates.forEach((date)=>{ const dateKey = date.toDateString(); const slot = timeSlots[dateKey]; if (slot && slot.startTime && slot.endTime) { validSlots.push({ date, startTime: slot.startTime, endTime: slot.endTime, duration: calculateDuration(slot.startTime, slot.endTime) }); } }); return validSlots.sort((a, b)=>a.date - b.date); }; // Navigation functions const goToAvailability = ()=>{ setCurrentView("availability"); setCurrentSlideIndex(0); }; const goBackToDates = ()=>{ setCurrentView("date-picker"); }; // Time picker component const TimePicker = ({ onSelect, onClose })=>{ const [selectedHour, setSelectedHour] = React.useState(12); const [selectedMinute, setSelectedMinute] = React.useState(0); const [isPM, setIsPM] = React.useState(true); const [isDragging, setIsDragging] = React.useState(null); const clockRef = React.useRef(null); // Convert 12-hour to 24-hour format const get24Hour = ()=>{ if (selectedHour === 12) { return isPM ? 12 : 0; } return isPM ? selectedHour + 12 : selectedHour; }; // Get angle for hour hand (30 degrees per hour) const getHourAngle = ()=>{ return selectedHour % 12 * 30 + selectedMinute * 0.5 - 90; }; // Get angle for minute hand (6 degrees per minute) const getMinuteAngle = ()=>{ return selectedMinute * 6 - 90; }; // Handle clock interaction const handleClockInteraction = (e, type)=>{ if (!clockRef.current) return; const rect = clockRef.current.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const clientX = e.clientX || e.touches && e.touches[0]?.clientX; const clientY = e.clientY || e.touches && e.touches[0]?.clientY; if (!clientX || !clientY) return; const angle = Math.atan2(clientY - centerY, clientX - centerX); const degrees = (angle * 180 / Math.PI + 90 + 360) % 360; if (type === "hour") { const hour = Math.round(degrees / 30) % 12; setSelectedHour(hour === 0 ? 12 : hour); } else if (type === "minute") { const minute = Math.round(degrees / 6) % 60; setSelectedMinute(minute); } }; const handleMouseDown = (e, type)=>{ setIsDragging(type); handleClockInteraction(e, type); }; const handleMouseMove = (e)=>{ if (isDragging) { handleClockInteraction(e, isDragging); } }; const handleMouseUp = ()=>{ setIsDragging(null); }; React.useEffect(()=>{ if (isDragging) { document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); document.addEventListener("touchmove", handleMouseMove); document.addEventListener("touchend", handleMouseUp); return ()=>{ document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener("touchmove", handleMouseMove); document.removeEventListener("touchend", handleMouseUp); }; } }, [ isDragging ]); const handleConfirm = ()=>{ const timeStr = formatTime(get24Hour(), selectedMinute); onSelect(timeStr); onClose(); }; const handleTimeInputChange = (value)=>{ const parsed = parseTime(value); if (parsed) { const hour12 = parsed.hours === 0 ? 12 : parsed.hours > 12 ? parsed.hours - 12 : parsed.hours; setSelectedHour(hour12); setSelectedMinute(parsed.minutes); setIsPM(parsed.hours >= 12); } }; const currentTimeString = formatTime(get24Hour(), selectedMinute); return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 312, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl p-6 w-96", __source: { fileName: "", lineNumber: 313, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4 text-center", __source: { fileName: "", lineNumber: 314, columnNumber: 11 }, __self: this }, "Select Time"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 319, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: currentTimeString, onChange: (e)=>handleTimeInputChange(e.target.value), placeholder: "e.g., 5pm, 17:30", className: "w-full p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-300 text-center text-lg font-semibold", __source: { fileName: "", lineNumber: 320, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 330, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 331, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { ref: clockRef, width: "200", height: "200", className: "border-2 border-gray-200 rounded-full bg-white", style: { userSelect: "none" }, __source: { fileName: "", lineNumber: 332, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "100", cy: "100", r: "98", fill: "white", stroke: "#e5e7eb", strokeWidth: "2", __source: { fileName: "", lineNumber: 340, columnNumber: 17 }, __self: this }), Array.from({ length: 12 }, (_, i)=>{ const angle = (i * 30 - 90) * Math.PI / 180; const x1 = 100 + 85 * Math.cos(angle); const y1 = 100 + 85 * Math.sin(angle); const x2 = 100 + 75 * Math.cos(angle); const y2 = 100 + 75 * Math.sin(angle); return /*#__PURE__*/ React.createElement("line", { key: i, x1: x1, y1: y1, x2: x2, y2: y2, stroke: "#6b7280", strokeWidth: "2", __source: { fileName: "", lineNumber: 357, columnNumber: 21 }, __self: this }); }), Array.from({ length: 12 }, (_, i)=>{ const hour = i === 0 ? 12 : i; const angle = (i * 30 - 90) * Math.PI / 180; const x = 100 + 65 * Math.cos(angle); const y = 100 + 65 * Math.sin(angle); return /*#__PURE__*/ React.createElement("text", { key: i, x: x, y: y, textAnchor: "middle", dominantBaseline: "middle", className: "text-sm font-semibold fill-gray-700", __source: { fileName: "", lineNumber: 376, columnNumber: 21 }, __self: this }, hour); }), Array.from({ length: 60 }, (_, i)=>{ if (i % 5 !== 0) { const angle = (i * 6 - 90) * Math.PI / 180; const x1 = 100 + 90 * Math.cos(angle); const y1 = 100 + 90 * Math.sin(angle); const x2 = 100 + 85 * Math.cos(angle); const y2 = 100 + 85 * Math.sin(angle); return /*#__PURE__*/ React.createElement("line", { key: i, x1: x1, y1: y1, x2: x2, y2: y2, stroke: "#d1d5db", strokeWidth: "1", __source: { fileName: "", lineNumber: 398, columnNumber: 23 }, __self: this }); } return null; }), /*#__PURE__*/ React.createElement("line", { x1: "100", y1: "100", x2: 100 + 50 * Math.cos(getHourAngle() * Math.PI / 180), y2: 100 + 50 * Math.sin(getHourAngle() * Math.PI / 180), stroke: "#374151", strokeWidth: "4", strokeLinecap: "round", style: { cursor: "pointer" }, onMouseDown: (e)=>handleMouseDown(e, "hour"), onTouchStart: (e)=>handleMouseDown(e, "hour"), __source: { fileName: "", lineNumber: 413, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "100", y1: "100", x2: 100 + 70 * Math.cos(getMinuteAngle() * Math.PI / 180), y2: 100 + 70 * Math.sin(getMinuteAngle() * Math.PI / 180), stroke: "#7c3aed", strokeWidth: "3", strokeLinecap: "round", style: { cursor: "pointer" }, onMouseDown: (e)=>handleMouseDown(e, "minute"), onTouchStart: (e)=>handleMouseDown(e, "minute"), __source: { fileName: "", lineNumber: 427, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "100", cy: "100", r: "6", fill: "#374151", __source: { fileName: "", lineNumber: 441, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 447, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 rounded-lg p-1 flex", __source: { fileName: "", lineNumber: 448, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsPM(false), className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${!isPM ? "bg-white text-gray-900 shadow-sm" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 449, columnNumber: 15 }, __self: this }, "AM"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsPM(true), className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${isPM ? "bg-white text-gray-900 shadow-sm" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 457, columnNumber: 15 }, __self: this }, "PM"))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 468, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "flex-1 py-2 px-4 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 469, columnNumber: 13 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { onClick: handleConfirm, className: "flex-1 py-2 px-4 bg-purple-300 text-white rounded-lg", __source: { fileName: "", lineNumber: 475, columnNumber: 13 }, __self: this }, "Confirm")))); }; if (currentView === "landing") { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white flex flex-col items-center justify-center p-4 font-inter", __source: { fileName: "", lineNumber: 489, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center max-w-md", __source: { fileName: "", lineNumber: 490, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 491, columnNumber: 11 }, __self: this }, "hangtime", /*#__PURE__*/ React.createElement("span", { className: "text-purple-300", __source: { fileName: "", lineNumber: 492, columnNumber: 21 }, __self: this }, ".")), /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl text-gray-600 mb-2", __source: { fileName: "", lineNumber: 494, columnNumber: 11 }, __self: this }, "Find a time to hang out"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 mb-8", __source: { fileName: "", lineNumber: 497, columnNumber: 11 }, __self: this }, "Effortlessly"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentView("date-picker"), className: "bg-purple-300 text-white px-8 py-4 rounded-2xl text-lg font-semibold hover:bg-purple-400 transition-colors", __source: { fileName: "", lineNumber: 498, columnNumber: 11 }, __self: this }, "🎉 Start Scheduling"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400 mt-4", __source: { fileName: "", lineNumber: 504, columnNumber: 11 }, __self: this }, "No sign-up required"))); } if (currentView === "date-picker") { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white font-inter", __source: { fileName: "", lineNumber: 512, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-100", __source: { fileName: "", lineNumber: 514, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 515, columnNumber: 11 }, __self: this }, "hangtime", /*#__PURE__*/ React.createElement("span", { className: "text-purple-300", __source: { fileName: "", lineNumber: 516, columnNumber: 21 }, __self: this }, "."))), /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 520, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-4 mb-6", __source: { fileName: "", lineNumber: 522, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 523, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 524, columnNumber: 15 }, __self: this }, "Friend's name"), /*#__PURE__*/ React.createElement("input", { type: "text", value: friendName, onChange: (e)=>setFriendName(e.target.value), placeholder: "Enter your friend's name", className: "w-full p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-300", __source: { fileName: "", lineNumber: 527, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 535, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 536, columnNumber: 15 }, __self: this }, "Your timezone"), /*#__PURE__*/ React.createElement("select", { value: selectedTimeZone, onChange: (e)=>setSelectedTimeZone(e.target.value), className: "w-full p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-300", __source: { fileName: "", lineNumber: 539, columnNumber: 15 }, __self: this }, timeZones.map((tz)=>/*#__PURE__*/ React.createElement("option", { key: tz, value: tz, __source: { fileName: "", lineNumber: 545, columnNumber: 19 }, __self: this }, tz.replace("_", " ")))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-2xl p-6 mb-6", __source: { fileName: "", lineNumber: 554, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 555, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: prevMonth, className: "p-2 hover:bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 556, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-left", __source: { fileName: "", lineNumber: 560, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 562, columnNumber: 15 }, __self: this }, currentMonth.toLocaleDateString("en-US", { month: "long", year: "numeric" })), /*#__PURE__*/ React.createElement("button", { onClick: nextMonth, className: "p-2 hover:bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 568, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-right", __source: { fileName: "", lineNumber: 572, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: goToToday, className: "mb-4 text-sm text-purple-600 hover:text-purple-800", __source: { fileName: "", lineNumber: 576, columnNumber: 13 }, __self: this }, "Go to Today"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-1 mb-2", __source: { fileName: "", lineNumber: 583, columnNumber: 13 }, __self: this }, [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ].map((day)=>/*#__PURE__*/ React.createElement("div", { key: day, className: "text-center text-sm font-medium text-gray-500 p-2", __source: { fileName: "", lineNumber: 585, columnNumber: 17 }, __self: this }, day))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-1", __source: { fileName: "", lineNumber: 594, columnNumber: 13 }, __self: this }, getDaysInMonth(currentMonth).map((date, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "aspect-square", __source: { fileName: "", lineNumber: 596, columnNumber: 17 }, __self: this }, date && /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleDate(date), className: `w-full h-full rounded-lg text-sm font-medium transition-colors ${isDateSelected(date) ? "bg-purple-300 text-white" : "hover:bg-gray-200 text-gray-700"}`, __source: { fileName: "", lineNumber: 598, columnNumber: 21 }, __self: this }, date.getDate())))))), /*#__PURE__*/ React.createElement("div", { className: "sticky bottom-0 bg-white border-t border-gray-200 p-4", __source: { fileName: "", lineNumber: 616, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 617, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: goToAvailability, disabled: selectedDates.length === 0, className: `w-full py-4 rounded-xl font-semibold text-lg transition-colors ${selectedDates.length > 0 ? "bg-purple-300 text-white hover:bg-purple-400" : "bg-gray-200 text-gray-400 cursor-not-allowed"}`, __source: { fileName: "", lineNumber: 618, columnNumber: 13 }, __self: this }, "Next: Set Availability (", selectedDates.length, " ", selectedDates.length === 1 ? "date" : "dates", ")")))); } // Availability view const validSlots = getValidTimeSlots(); const currentDate = selectedDates[currentSlideIndex]; const currentSlot = currentDate ? timeSlots[currentDate.toDateString()] || {} : {}; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white font-inter", __source: { fileName: "", lineNumber: 644, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-100 flex justify-between items-center", __source: { fileName: "", lineNumber: 646, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 647, columnNumber: 9 }, __self: this }, "hangtime", /*#__PURE__*/ React.createElement("span", { className: "text-purple-300", __source: { fileName: "", lineNumber: 648, columnNumber: 19 }, __self: this }, ".")), /*#__PURE__*/ React.createElement("button", { onClick: goBackToDates, className: "text-purple-600 hover:text-purple-800 text-sm", __source: { fileName: "", lineNumber: 650, columnNumber: 9 }, __self: this }, "← Back to dates")), /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 658, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-2xl p-6 mb-6", __source: { fileName: "", lineNumber: 660, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 661, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 662, columnNumber: 13 }, __self: this }, "Set your availability"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 663, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentSlideIndex(Math.max(0, currentSlideIndex - 1)), disabled: currentSlideIndex === 0, className: "p-2 hover:bg-gray-200 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 664, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-left", __source: { fileName: "", lineNumber: 671, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 px-2 py-2", __source: { fileName: "", lineNumber: 673, columnNumber: 15 }, __self: this }, currentSlideIndex + 1, " of ", selectedDates.length), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentSlideIndex(Math.min(selectedDates.length - 1, currentSlideIndex + 1)), disabled: currentSlideIndex === selectedDates.length - 1, className: "p-2 hover:bg-gray-200 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 676, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-right", __source: { fileName: "", lineNumber: 685, columnNumber: 17 }, __self: this })))), currentDate && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-4", __source: { fileName: "", lineNumber: 691, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 692, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold", __source: { fileName: "", lineNumber: 693, columnNumber: 17 }, __self: this }, currentDate.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }))), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 702, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 703, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 704, columnNumber: 19 }, __self: this }, "Start time"), /*#__PURE__*/ React.createElement("input", { type: "text", value: currentSlot.startTime || "", onChange: (e)=>updateTimeSlot(currentDate, "startTime", e.target.value), onClick: ()=>{ setTimePickerField("startTime"); setTimePickerDate(currentDate); setShowTimePicker(true); }, placeholder: "e.g., 5pm, 17:30", className: "w-full p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-300", __source: { fileName: "", lineNumber: 707, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 722, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 723, columnNumber: 19 }, __self: this }, "End time"), /*#__PURE__*/ React.createElement("input", { type: "text", value: currentSlot.endTime || "", onChange: (e)=>updateTimeSlot(currentDate, "endTime", e.target.value), onClick: ()=>{ setTimePickerField("endTime"); setTimePickerDate(currentDate); setShowTimePicker(true); }, placeholder: "e.g., 9pm, 21:00", className: "w-full p-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-300", __source: { fileName: "", lineNumber: 726, columnNumber: 19 }, __self: this }))), currentSlot.startTime && currentSlot.endTime && /*#__PURE__*/ React.createElement("div", { className: "mt-3 text-sm text-gray-600", __source: { fileName: "", lineNumber: 744, columnNumber: 17 }, __self: this }, "Duration:", " ", calculateDuration(currentSlot.startTime, currentSlot.endTime))))), /*#__PURE__*/ React.createElement("div", { className: "sticky bottom-0 bg-white border-t border-gray-200 p-4", __source: { fileName: "", lineNumber: 758, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 759, columnNumber: 9 }, __self: this }, validSlots.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 761, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 762, columnNumber: 15 }, __self: this }, "Your availability:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 763, columnNumber: 15 }, __self: this }, validSlots.map((slot, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 765, columnNumber: 19 }, __self: this }, slot.date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }), ": ", slot.startTime, " - ", slot.endTime, " ", slot.duration)))), /*#__PURE__*/ React.createElement("button", { disabled: validSlots.length === 0, className: `w-full py-4 rounded-xl font-semibold text-lg transition-colors ${validSlots.length > 0 ? "bg-purple-300 text-white hover:bg-purple-400" : "bg-gray-200 text-gray-400 cursor-not-allowed"}`, __source: { fileName: "", lineNumber: 778, columnNumber: 11 }, __self: this }, friendName ? `Invite ${friendName}` : "Invite Friend"))), showTimePicker && /*#__PURE__*/ React.createElement(TimePicker, { onSelect: (time)=>{ updateTimeSlot(timePickerDate, timePickerField, time); }, onClose: ()=>{ setShowTimePicker(false); setTimePickerField(null); setTimePickerDate(null); }, __source: { fileName: "", lineNumber: 793, columnNumber: 9 }, __self: this })); }

hangtime.

Find a time to hang out