function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, memberActivity, members, openProfile, share, startChat, pickAndUploadPhoto, getImageUrl, uploadImage, saveToPhotos, captureCanvas, pickAndUploadAudio, getAudioUrl, uploadAudio, pickAndUploadVideo, getVideoUrl, uploadVideo, openAuth, ai, getCurrentLocation }) { const appData = isMultiplayer ? sharedData : data; const writePatch = useCallback(function(patch) { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { setData(Object.assign({}, data || {}, patch)); } }, [isMultiplayer, patchSharedData, setData, data]); const memberList = (isMultiplayer && members && (members || []).length > 0) ? members : [{ id: user.id, displayName: user.name || 'You', handle: user.handle, avatarUrl: user.avatarUrl, role: 'owner' }]; var CROWD_LEVELS = { 1: { label: 'Empty', emoji: '🟢', color: '#6B7C5E' }, 2: { label: 'Moderate', emoji: '🟡', color: '#8B6F4E' }, 3: { label: 'Busy', emoji: '🟠', color: '#D4A5A5' }, 4: { label: 'Packed', emoji: '🔴', color: '#B07070' } }; var DEMO_SPOTS = [ { id: 'demo-1', name: 'Fisher Library', address: 'Fisher Library, University of Sydney', desc: 'The classic USYD study spot. 24/7 access for students during exams. Plenty of desks and natural light.', openTime: '00:00', closeTime: '23:59', vibe: { quiet: 4, energy: 3, wifi: 5 }, vibeScore: 4.0, tags: ['library', 'quiet', '24/7'], reviews: [], isDemo: true, crowdLevel: 3, crowdUpdatedAt: Date.now() - 1200000 }, { id: 'demo-2', name: 'Abercrombie Building', address: 'Abercrombie Building (H70), University of Sydney', desc: 'Modern business school building with great facilities, breakout rooms, and an on-site cafe.', openTime: '07:00', closeTime: '22:00', vibe: { quiet: 3, energy: 4, wifi: 5 }, vibeScore: 4.0, tags: ['modern', 'cafe', 'groups'], reviews: [], isDemo: true, crowdLevel: 2, crowdUpdatedAt: Date.now() - 3600000 }, { id: 'demo-3', name: 'Courtyard Restaurant', address: 'Science Rd, University of Sydney NSW 2006', desc: 'Lively atmosphere. Great for relaxed studying with friends over food and coffee.', openTime: '08:00', closeTime: '17:00', vibe: { quiet: 2, energy: 5, wifi: 4 }, vibeScore: 3.7, tags: ['social', 'food', 'outdoor'], reviews: [], isDemo: true, crowdLevel: 4, crowdUpdatedAt: Date.now() - 600000 }, { id: 'demo-4', name: 'Law Library', address: 'New Law Building, Eastern Ave, University of Sydney', desc: 'Intense, quiet focus. Best for deep work. Lots of natural light from the glass structure.', openTime: '08:00', closeTime: '22:00', vibe: { quiet: 5, energy: 2, wifi: 4 }, vibeScore: 3.7, tags: ['silent', 'focus', 'architecture'], reviews: [], isDemo: true, crowdLevel: 1, crowdUpdatedAt: Date.now() - 7200000 } ]; var STUDY_STYLES = [ { id: 'super-early-bird', label: '5AM Club (Super Early)', emoji: '🌅', desc: 'Up before the sun, need coffee ASAP', prefOpen: '06:00', prefClose: '12:00' }, { id: 'early-bird', label: 'Early Bird', emoji: '☀️', desc: 'Up before 8am, love morning light', prefOpen: '08:00', prefClose: '14:00' }, { id: 'night-owl', label: 'Night Owl', emoji: '🦉', desc: 'Peak focus after 8pm', prefOpen: '18:00', prefClose: '02:00' }, { id: 'social-butterfly', label: 'Social Butterfly', emoji: '🦋', desc: 'Study groups & good vibes', prefTag: 'social' }, { id: 'deep-focus', label: 'Deep Focus', emoji: '🧘', desc: 'Silence is golden', prefTag: 'quiet' } ]; var DRINK_PREFS = [ { id: 'latte', label: 'Latte', emoji: '☕', desc: 'Classic and creamy' }, { id: 'flat-white', label: 'Flat White', emoji: '☕', desc: 'Strong & velvety' }, { id: 'cappuccino', label: 'Cappuccino', emoji: '☕', desc: 'Frothy goodness' }, { id: 'mocha', label: 'Mocha', emoji: '🍫', desc: 'Chocolatey & rich' }, { id: 'espresso', label: 'Espresso', emoji: '☕', desc: 'Quick energy hit' }, { id: 'americano', label: 'Americano', emoji: '☕', desc: 'Simple & bold' }, { id: 'macchiato', label: 'Macchiato', emoji: '☕', desc: 'Espresso with a dash of milk' }, { id: 'cortado', label: 'Cortado', emoji: '☕', desc: 'Equal parts coffee & milk' }, { id: 'cold-brew', label: 'Cold Brew', emoji: '🧊', desc: 'Smooth & chilled' }, { id: 'iced-latte', label: 'Iced Latte', emoji: '🧊', desc: 'Cool & creamy' }, { id: 'matcha', label: 'Matcha', emoji: '🍵', desc: 'Earthy & focused' }, { id: 'chai-latte', label: 'Chai Latte', emoji: '🫖', desc: 'Spiced & sweet' }, { id: 'dirty-chai', label: 'Dirty Chai', emoji: '☕', desc: 'Chai with an espresso kick' }, { id: 'hot-chocolate', label: 'Hot Chocolate', emoji: '🍫', desc: 'Cozy & sweet' }, { id: 'tea', label: 'Tea', emoji: '🫖', desc: 'Cozy and calming' }, { id: 'boba', label: 'Bubble Tea', emoji: '🧋', desc: 'Sweet & chewy' }, { id: 'smoothie', label: 'Smoothie', emoji: '🥤', desc: 'Fruity & refreshing' } ]; var spots = useMemo(function() { var saved = appData && Array.isArray(appData.spots) ? appData.spots : []; if ((saved || []).length === 0) return DEMO_SPOTS; var hasReal = (saved || []).some(function(s) { return !s.isDemo; }); if (hasReal) return (saved || []).filter(function(s) { return !s.isDemo; }); return saved; }, [appData]); var studyStyle = (appData && appData.studyStyle) ? appData.studyStyle : null; var drinkPref = (appData && appData.drinkPref) ? appData.drinkPref : null; var [view, setView] = useState('list'); var [selectedSpot, setSelectedSpot] = useState(null); var [showAddForm, setShowAddForm] = useState(false); var [showStylePicker, setShowStylePicker] = useState(false); var [showDrinkPicker, setShowDrinkPicker] = useState(false); var [drinkSearch, setDrinkSearch] = useState(''); var [showLocPicker, setShowLocPicker] = useState(false); var [showMapView, setShowMapView] = useState(false); var [userLocation, setUserLocation] = useState(null); var [loadingLocation, setLoadingLocation] = useState(false); var [spotDistances, setSpotDistances] = useState({}); var savedLocations = (appData && appData.savedLocations) ? appData.savedLocations : { home: '', work: '', other: '' }; var [locHome, setLocHome] = useState(savedLocations.home || ''); var [locWork, setLocWork] = useState(savedLocations.work || ''); var [locOther, setLocOther] = useState(savedLocations.other || ''); function handleSaveLocations() { writePatch({ savedLocations: { home: locHome, work: locWork, other: locOther } }); setShowLocPicker(false); } function haversineDistance(lat1, lon1, lat2, lon2) { var R = 6371; var dLat = (lat2 - lat1) * Math.PI / 180; var dLon = (lon2 - lon1) * Math.PI / 180; var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return R * c; } function estimateWalkTime(km) { return Math.round(km / 5 * 60); } var SPOT_COORDS = { 'demo-1': { lat: -33.8866, lng: 151.1900, label: 'Fisher Library' }, 'demo-2': { lat: -33.8878, lng: 151.1905, label: 'Abercrombie Building' }, 'demo-3': { lat: -33.8862, lng: 151.1873, label: 'Courtyard Restaurant' }, 'demo-4': { lat: -33.8860, lng: 151.1910, label: 'Law Library' } }; function handleGetUserLocation() { if (typeof getCurrentLocation !== 'function') { setUserLocation({ latitude: -33.8868, longitude: 151.1891 }); computeDistances({ latitude: -33.8868, longitude: 151.1891 }); return; } setLoadingLocation(true); getCurrentLocation({ enableHighAccuracy: true, timeout: 10000 }).then(function(loc) { setUserLocation(loc); computeDistances(loc); setLoadingLocation(false); }).catch(function() { setUserLocation({ latitude: -33.8868, longitude: 151.1891 }); computeDistances({ latitude: -33.8868, longitude: 151.1891 }); setLoadingLocation(false); }); } function computeDistances(loc) { var dists = {}; (spots || []).forEach(function(s) { var coords = SPOT_COORDS[s.id]; if (coords) { var km = haversineDistance(loc.latitude, loc.longitude, coords.lat, coords.lng); dists[s.id] = { km: km, walkMin: estimateWalkTime(km) }; } }); setSpotDistances(dists); } var [showReviewForm, setShowReviewForm] = useState(false); var [brewAnim, setBrewAnim] = useState(false); var [newSparkle, setNewSparkle] = useState(null); var [detailTab, setDetailTab] = useState('info'); var spotTodos = (appData && appData.spotTodos) ? appData.spotTodos : {}; var [newTodo, setNewTodo] = useState(''); var [formName, setFormName] = useState(''); var [formAddress, setFormAddress] = useState(''); var [formDesc, setFormDesc] = useState(''); var [formOpen, setFormOpen] = useState('07:00'); var [formClose, setFormClose] = useState('22:00'); var [formTags, setFormTags] = useState(''); var [reviewText, setReviewText] = useState(''); var [reviewQuiet, setReviewQuiet] = useState(3); var [reviewEnergy, setReviewEnergy] = useState(3); var [reviewWifi, setReviewWifi] = useState(3); var inputRef = useRef(null); function getCurrentHour() { return new Date().getHours(); } function timeToMinutes(t) { if (!t) return 0; var parts = t.split(':'); return parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10); } function isSpotOpen(spot) { var now = getCurrentHour() * 60 + new Date().getMinutes(); var open = timeToMinutes(spot.openTime); var close = timeToMinutes(spot.closeTime); if (close < open) { return now >= open || now < close; } return now >= open && now < close; } function formatTimeAgo(ts) { if (!ts) return 'Unknown'; var diffMins = Math.floor((Date.now() - ts) / 60000); if (diffMins < 1) return 'Just now'; if (diffMins < 60) return diffMins + 'm ago'; var diffHours = Math.floor(diffMins / 60); if (diffHours < 24) return diffHours + 'h ago'; return Math.floor(diffHours / 24) + 'd ago'; } function formatTime(t) { if (!t) return ''; var parts = t.split(':'); var h = parseInt(parts[0], 10); var m = parts[1]; var ampm = h >= 12 ? 'PM' : 'AM'; var hour12 = h % 12 || 12; return hour12 + ':' + m + ' ' + ampm; } function getGrindPick() { if (!studyStyle) return null; var style = (STUDY_STYLES || []).find(function(s) { return s.id === studyStyle; }); if (!style) return null; var openSpots = (spots || []).filter(function(s) { return isSpotOpen(s); }); if ((openSpots || []).length === 0) openSpots = spots; var scored = (openSpots || []).map(function(s) { var score = s.vibeScore || 3; if (style.prefTag && s.tags && (s.tags || []).indexOf(style.prefTag) !== -1) score += 2; if (style.prefOpen) { var prefOpenMin = timeToMinutes(style.prefOpen); var spotOpenMin = timeToMinutes(s.openTime); if (spotOpenMin <= prefOpenMin) score += 1; } if (style.prefClose) { var prefCloseMin = timeToMinutes(style.prefClose); var spotCloseMin = timeToMinutes(s.closeTime); if (spotCloseMin >= prefCloseMin || spotCloseMin < timeToMinutes('06:00')) score += 1; } return { spot: s, score: score }; }); (scored || []).sort(function(a, b) { return b.score - a.score; }); return scored[0] ? scored[0].spot : null; } var grindPick = getGrindPick(); var styleInfo = studyStyle ? (STUDY_STYLES || []).find(function(s) { return s.id === studyStyle; }) : null; var drinkInfo = drinkPref ? (DRINK_PREFS || []).find(function(d) { return d.id === drinkPref; }) : null; function handleAddSpot(e) { e.preventDefault(); if (!formName.trim()) return; var newSpot = { id: 'spot-' + Date.now(), name: formName.trim(), address: formAddress.trim() || formName.trim() + ', University of Sydney', desc: formDesc.trim() || 'A great spot to study!', openTime: formOpen, closeTime: formClose, vibe: { quiet: 3, energy: 3, wifi: 3 }, vibeScore: 3.5, tags: formTags ? formTags.split(',').map(function(t) { return t.trim().toLowerCase(); }) : [], reviews: [], isDemo: false, crowdLevel: 1, crowdUpdatedAt: Date.now(), addedBy: user.name || 'Anonymous', addedById: user.id, _user: { id: user.id, displayName: user.displayName || user.name, handle: user.handle, profileImageUrl: user.profileImageUrl || user.avatarUrl }, _timestamp: Date.now() }; var existing = (spots || []).filter(function(s) { return !s.isDemo; }); var updated = [newSpot].concat(existing); writePatch({ spots: updated }); setNewSparkle(newSpot.id); setTimeout(function() { setNewSparkle(null); }, 2000); setFormName(''); setFormAddress(''); setFormDesc(''); setFormOpen('07:00'); setFormClose('22:00'); setFormTags(''); setShowAddForm(false); } function handleAddReview(e) { e.preventDefault(); if (!selectedSpot || !reviewText.trim()) return; var newReview = { text: reviewText.trim(), rating: Math.round((reviewQuiet + reviewEnergy + reviewWifi) / 3), quiet: reviewQuiet, energy: reviewEnergy, wifi: reviewWifi, author: user.name || 'Anonymous', authorId: user.id, date: Date.now(), _user: { id: user.id, displayName: user.displayName || user.name, handle: user.handle, profileImageUrl: user.profileImageUrl || user.avatarUrl }, _timestamp: Date.now() }; var updatedSpots = (spots || []).map(function(s) { if (s.id !== selectedSpot.id) return s; var oldReviews = s.reviews || []; var newReviews = [newReview].concat(oldReviews); var allVibes = (newReviews || []).filter(function(r) { return r.quiet; }); var avgQuiet = (allVibes || []).length > 0 ? (allVibes || []).reduce(function(sum, r) { return sum + r.quiet; }, 0) / (allVibes || []).length : (s.vibe ? s.vibe.quiet : 3); var avgEnergy = (allVibes || []).length > 0 ? (allVibes || []).reduce(function(sum, r) { return sum + r.energy; }, 0) / (allVibes || []).length : (s.vibe ? s.vibe.energy : 3); var avgWifi = (allVibes || []).length > 0 ? (allVibes || []).reduce(function(sum, r) { return sum + r.wifi; }, 0) / (allVibes || []).length : (s.vibe ? s.vibe.wifi : 3); var newVibeScore = Math.round(((avgQuiet + avgEnergy + avgWifi) / 3) * 10) / 10; return Object.assign({}, s, { reviews: newReviews, vibe: { quiet: Math.round(avgQuiet), energy: Math.round(avgEnergy), wifi: Math.round(avgWifi) }, vibeScore: newVibeScore }); }); writePatch({ spots: updatedSpots }); setSelectedSpot((updatedSpots || []).find(function(s) { return s.id === selectedSpot.id; })); setBrewAnim(true); setTimeout(function() { setBrewAnim(false); }, 1500); setReviewText(''); setReviewQuiet(3); setReviewEnergy(3); setReviewWifi(3); setShowReviewForm(false); } function handleSetStyle(styleId) { writePatch({ studyStyle: styleId }); setShowStylePicker(false); } function handleSetDrink(drinkId) { writePatch({ drinkPref: drinkId }); setShowDrinkPicker(false); } var colors = { bg: '#F5F0E8', card: '#FFFDF7', cardBorder: '#E8DCC4', primary: '#6B7C5E', primaryDark: '#4A5A3D', accent: '#8B6F4E', accentLight: '#D4C5B5', text: '#2D3A3A', textLight: '#6B7B7B', rose: '#D4A5A5', cream: '#F5F0E8', open: '#6B7C5E', closed: '#B07070', white: '#FFFDF7' }; var fontFamily = "'Georgia', 'Garamond', 'Times New Roman', serif"; function StarRow(props) { var val = props.value; var onChange = props.onChange; var label = props.label; return React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 } }, React.createElement('span', { style: { fontSize: 14, color: colors.textLight, width: 60, fontFamily: fontFamily } }, label), [1,2,3,4,5].map(function(n) { return React.createElement('span', { key: n, onClick: onChange ? function() { onChange(n); } : undefined, style: { fontSize: 20, cursor: onChange ? 'pointer' : 'default', opacity: n <= val ? 1 : 0.25 } }, '⭐'); }) ); } function SpotCard(props) { var spot = props.spot; var open = isSpotOpen(spot); var isNew = newSparkle === spot.id; var isPick = grindPick && grindPick.id === spot.id; return React.createElement('div', { onClick: function() { setSelectedSpot(spot); setView('detail'); setDetailTab('info'); }, style: { background: colors.card, border: '1px solid ' + (isPick ? colors.primary : colors.cardBorder), borderRadius: 16, padding: 16, marginBottom: 12, cursor: 'pointer', opacity: open ? 1 : 0.65, transition: 'all 0.3s ease', transform: isNew ? 'scale(1.02)' : 'scale(1)', boxShadow: isPick ? '0 4px 16px rgba(107,124,94,0.2)' : '0 2px 8px rgba(0,0,0,0.04)', position: 'relative' } }, isNew ? React.createElement('div', { style: { position: 'absolute', top: -8, right: -8, background: colors.primary, color: '#fff', borderRadius: 20, padding: '2px 10px', fontSize: 12, fontFamily: fontFamily, fontWeight: 700 } }, '✨ NEW!') : null, spot.isDemo ? React.createElement('div', { style: { position: 'absolute', top: -8, left: 12, background: colors.accentLight, color: colors.accent, borderRadius: 20, padding: '2px 10px', fontSize: 11, fontFamily: fontFamily } }, 'Demo') : null, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' } }, React.createElement('div', { style: { flex: 1 } }, React.createElement('h3', { style: { margin: 0, fontSize: 18, fontWeight: 700, color: colors.text, fontFamily: fontFamily } }, spot.name), React.createElement('div', { style: { display: 'flex', gap: 6, marginTop: 6, flexWrap: 'wrap' } }, (spot.tags || []).slice(0, 3).map(function(tag) { return React.createElement('span', { key: tag, style: { background: colors.cream, color: colors.accent, padding: '2px 8px', borderRadius: 10, fontSize: 12, fontFamily: fontFamily } }, tag); }) ) ), React.createElement('div', { style: { textAlign: 'right' } }, React.createElement('div', { style: { background: open ? colors.open : colors.closed, color: '#fff', padding: '3px 10px', borderRadius: 12, fontSize: 12, fontWeight: 600, fontFamily: fontFamily, marginBottom: 4 } }, open ? '🟢 OPEN' : '🔴 CLOSED'), React.createElement('div', { style: { fontSize: 12, color: colors.textLight, fontFamily: fontFamily } }, formatTime(spot.openTime) + ' – ' + formatTime(spot.closeTime)) ) ), React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 } }, React.createElement('div', { style: { fontSize: 14, color: colors.textLight, fontFamily: fontFamily, display: 'flex', gap: 12, alignItems: 'center' } }, React.createElement('span', null, '☕ ' + (spot.vibeScore || '–')), spot.crowdLevel && CROWD_LEVELS[spot.crowdLevel] ? React.createElement('span', { style: { color: CROWD_LEVELS[spot.crowdLevel].color, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 } }, CROWD_LEVELS[spot.crowdLevel].emoji + ' ' + CROWD_LEVELS[spot.crowdLevel].label) : null ), React.createElement('div', { style: { fontSize: 13, color: colors.textLight, fontFamily: fontFamily } }, (spot.reviews || []).length + ' review' + ((spot.reviews || []).length !== 1 ? 's' : '')) ) ); } if (view === 'detail' && selectedSpot) { var spot = selectedSpot; var open = isSpotOpen(spot); var reviews = spot.reviews || []; var currentTodos = spotTodos[spot.id] || []; function toggleTodo(todoId) { var updatedList = (currentTodos || []).map(function(t) { return t.id === todoId ? Object.assign({}, t, { done: !t.done }) : t; }); var newSpotTodos = Object.assign({}, spotTodos); newSpotTodos[spot.id] = updatedList; writePatch({ spotTodos: newSpotTodos }); } function addTodo(e) { e.preventDefault(); if (!newTodo.trim()) return; var updatedList = (currentTodos || []).concat([{ id: Date.now(), text: newTodo.trim(), done: false }]); var newSpotTodos = Object.assign({}, spotTodos); newSpotTodos[spot.id] = updatedList; writePatch({ spotTodos: newSpotTodos }); setNewTodo(''); } function handleUpdateCrowd(level) { var updatedSpots = (spots || []).map(function(s) { if (s.id !== spot.id) return s; return Object.assign({}, s, { crowdLevel: level, crowdUpdatedAt: Date.now(), crowdUpdatedBy: user.name || 'Anonymous' }); }); writePatch({ spots: updatedSpots }); setSelectedSpot((updatedSpots || []).find(function(s) { return s.id === spot.id; })); } return React.createElement('div', { style: { minHeight: '100dvh', background: colors.bg, fontFamily: fontFamily, paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)', paddingBottom: 'env(safe-area-inset-bottom, 20px)', paddingLeft: 'max(env(safe-area-inset-left, 0px), 16px)', paddingRight: 'max(env(safe-area-inset-right, 0px), 16px)', maxWidth: 480, margin: '0 auto', boxSizing: 'border-box' } }, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }, React.createElement('button', { onClick: function() { setView('list'); setSelectedSpot(null); setShowReviewForm(false); }, style: { background: 'none', border: 'none', fontSize: 18, color: colors.primary, cursor: 'pointer', padding: '8px 0', fontFamily: fontFamily, fontWeight: 600 } }, '← Back'), React.createElement('button', { onClick: function() { share({ spotName: spot.name }); }, style: { background: colors.primary, color: '#fff', border: 'none', borderRadius: 12, padding: '6px 14px', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: fontFamily, display: 'flex', alignItems: 'center', gap: 4 } }, '📤 Share Spot') ), React.createElement('div', { style: { background: colors.card, borderRadius: 20, padding: 20, border: '1px solid ' + colors.cardBorder, marginTop: 8 } }, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' } }, React.createElement('h2', { style: { margin: 0, fontSize: 24, color: colors.text, fontFamily: fontFamily } }, spot.name), React.createElement('div', { style: { background: open ? colors.open : colors.closed, color: '#fff', padding: '4px 14px', borderRadius: 14, fontSize: 14, fontWeight: 700, fontFamily: fontFamily } }, open ? '🟢 OPEN' : '🔴 CLOSED') ), React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 16, marginBottom: 12 } }, React.createElement('button', { onClick: function() { setDetailTab('info'); }, style: { flex: 1, padding: '8px 0', borderRadius: 10, border: 'none', background: detailTab === 'info' ? colors.primary : colors.accentLight, color: detailTab === 'info' ? '#fff' : colors.text, fontWeight: 600, fontFamily: fontFamily, cursor: 'pointer', transition: '0.2s' } }, '📍 Spot Info'), React.createElement('button', { onClick: function() { setDetailTab('tasks'); }, style: { flex: 1, padding: '8px 0', borderRadius: 10, border: 'none', background: detailTab === 'tasks' ? colors.primary : colors.accentLight, color: detailTab === 'tasks' ? '#fff' : colors.text, fontWeight: 600, fontFamily: fontFamily, cursor: 'pointer', transition: '0.2s' } }, '✅ Session To-Dos') ), detailTab === 'info' ? React.createElement(React.Fragment, null, React.createElement('p', { style: { color: colors.textLight, fontSize: 15, lineHeight: 1.6, marginTop: 10, fontFamily: fontFamily } }, spot.desc), React.createElement('div', { style: { display: 'flex', gap: 16, marginTop: 14, padding: '12px 0', borderTop: '1px solid ' + colors.cardBorder } }, React.createElement('div', null, React.createElement('div', { style: { fontSize: 12, color: colors.textLight } }, 'Opens'), React.createElement('div', { style: { fontSize: 16, fontWeight: 600, color: colors.text } }, formatTime(spot.openTime))), React.createElement('div', null, React.createElement('div', { style: { fontSize: 12, color: colors.textLight } }, 'Closes'), React.createElement('div', { style: { fontSize: 16, fontWeight: 600, color: colors.text } }, formatTime(spot.closeTime))) ), React.createElement('div', { style: { marginTop: 16, padding: 12, background: colors.cream, borderRadius: 12, border: '1px solid ' + colors.cardBorder } }, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 } }, React.createElement('div', { style: { fontSize: 14, fontWeight: 600, color: colors.text } }, 'Live Crowd Level'), React.createElement('div', { style: { fontSize: 12, color: colors.textLight } }, 'Updated ' + formatTimeAgo(spot.crowdUpdatedAt)) ), React.createElement('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } }, [1, 2, 3, 4].map(function(lvl) { var info = CROWD_LEVELS[lvl]; var isSelected = spot.crowdLevel === lvl; return React.createElement('button', { key: lvl, onClick: function() { handleUpdateCrowd(lvl); }, style: { flex: 1, padding: '6px 4px', borderRadius: 8, border: '1px solid ' + (isSelected ? info.color : colors.cardBorder), background: isSelected ? info.color + '22' : colors.white, cursor: 'pointer', fontFamily: fontFamily, transition: '0.2s', minWidth: 60 } }, React.createElement('div', { style: { fontSize: 18, marginBottom: 2 } }, info.emoji), React.createElement('div', { style: { fontSize: 11, fontWeight: isSelected ? 700 : 500, color: isSelected ? info.color : colors.textLight } }, info.label) ); }) ) ), React.createElement('div', { style: { marginTop: 16 } }, React.createElement('div', { style: { fontSize: 14, fontWeight: 600, color: colors.text, marginBottom: 6 } }, 'Vibe Check'), React.createElement('div', { style: { display: 'flex', gap: 16 } }, React.createElement('div', { style: { textAlign: 'center' } }, React.createElement('div', { style: { fontSize: 22 } }, '🤫'), React.createElement('div', { style: { fontSize: 12, color: colors.textLight } }, 'Quiet'), React.createElement('div', { style: { fontSize: 14, fontWeight: 600 } }, (spot.vibe ? spot.vibe.quiet : '–') + '/5')), React.createElement('div', { style: { textAlign: 'center' } }, React.createElement('div', { style: { fontSize: 22 } }, '⚡'), React.createElement('div', { style: { fontSize: 12, color: colors.textLight } }, 'Energy'), React.createElement('div', { style: { fontSize: 14, fontWeight: 600 } }, (spot.vibe ? spot.vibe.energy : '–') + '/5')), React.createElement('div', { style: { textAlign: 'center' } }, React.createElement('div', { style: { fontSize: 22 } }, '📶'), React.createElement('div', { style: { fontSize: 12, color: colors.textLight } }, 'WiFi'), React.createElement('div', { style: { fontSize: 14, fontWeight: 600 } }, (spot.vibe ? spot.vibe.wifi : '–') + '/5')) ) ), React.createElement('div', { style: { marginTop: 16, paddingTop: 16, borderTop: '1px solid ' + colors.cardBorder } }, React.createElement('div', { style: { fontSize: 14, fontWeight: 600, color: colors.text, marginBottom: 8 } }, 'Location & Directions'), React.createElement('div', { style: { borderRadius: 12, overflow: 'hidden', marginBottom: 12, border: '1px solid ' + colors.cardBorder, background: '#e0e0e0', height: 160 } }, React.createElement('iframe', { width: '100%', height: '100%', frameBorder: '0', scrolling: 'no', marginHeight: '0', marginWidth: '0', src: 'https://maps.google.com/maps?q=' + encodeURIComponent(spot.address || spot.name + ', University of Sydney') + '&t=&z=15&ie=UTF8&iwloc=&output=embed' }) ), React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } }, React.createElement('a', { href: 'https://www.google.com/maps/dir/?api=1&origin=' + encodeURIComponent('University of Sydney, Camperdown NSW') + '&destination=' + encodeURIComponent(spot.address || spot.name + ', University of Sydney'), target: '_blank', rel: 'noopener noreferrer', style: { flex: '1 1 45%', padding: '8px', background: colors.card, border: '1px solid ' + colors.cardBorder, borderRadius: 8, fontSize: 13, color: colors.text, cursor: 'pointer', fontFamily: fontFamily, textDecoration: 'none', textAlign: 'center', boxSizing: 'border-box' } }, '🎓 From USYD'), locHome ? React.createElement('a', { href: 'https://www.google.com/maps/dir/?api=1&origin=' + encodeURIComponent(locHome) + '&destination=' + encodeURIComponent(spot.address || spot.name + ', University of Sydney'), target: '_blank', rel: 'noopener noreferrer', style: { flex: '1 1 45%', padding: '8px', background: colors.card, border: '1px solid ' + colors.cardBorder, borderRadius: 8, fontSize: 13, color: colors.text, cursor: 'pointer', fontFamily: fontFamily, textDecoration: 'none', textAlign: 'center', boxSizing: 'border-box' } }, '🏠 From Home') : React.createElement('button', { onClick: function() { setShowLocPicker(true); }, style: { flex: '1 1 45%', padding: '8px', background: colors.cream, border: '1px dashed ' + colors.primary, borderRadius: 8, fontSize: 13, color: colors.textLight, cursor: 'pointer', fontFamily: fontFamily } }, '🏠 Set Home'), locWork ? React.createElement('a', { href: 'https://www.google.com/maps/dir/?api=1&origin=' + encodeURIComponent(locWork) + '&destination=' + encodeURIComponent(spot.address || spot.name + ', University of Sydney'), target: '_blank', rel: 'noopener noreferrer', style: { flex: '1 1 45%', padding: '8px', background: colors.card, border: '1px solid ' + colors.cardBorder, borderRadius: 8, fontSize: 13, color: colors.text, cursor: 'pointer', fontFamily: fontFamily, textDecoration: 'none', textAlign: 'center', boxSizing: 'border-box' } }, '💼 From Work') : React.createElement('button', { onClick: function() { setShowLocPicker(true); }, style: { flex: '1 1 45%', padding: '8px', background: colors.cream, border: '1px dashed ' + colors.primary, borderRadius: 8, fontSize: 13, color: colors.textLight, cursor: 'pointer', fontFamily: fontFamily } }, '💼 Set Work'), locOther ? React.createElement('a', { href: 'https://www.google.com/maps/dir/?api=1&origin=' + encodeURIComponent(locOther) + '&destination=' + encodeURIComponent(spot.address || spot.name + ', University of Sydney'), target: '_blank', rel: 'noopener noreferrer', style: { flex: '1 1 45%', padding: '8px', background: colors.card, border: '1px solid ' + colors.cardBorder, borderRadius: 8, fontSize: 13, color: colors.text, cursor: 'pointer', fontFamily: fontFamily, textDecoration: 'none', textAlign: 'center', boxSizing: 'border-box' } }, '📍 From Other') : React.createElement('button', { onClick: function() { setShowLocPicker(true); }, style: { flex: '1 1 45%', padding: '8px', background: colors.cream, border: '1px dashed ' + colors.primary, borderRadius: 8, fontSize: 13, color: colors.textLight, cursor: 'pointer', fontFamily: fontFamily } }, '📍 Set Other') ) ), spot.isDemo ? React.createElement('div', { style: { marginTop: 12, padding: 8, background: colors.cream, borderRadius: 10, fontSize: 13, color: colors.accent, textAlign: 'center', fontStyle: 'italic' } }, 'This is a demo spot — add your own spots to replace these!') : null, spot._user ? React.createElement('div', { style: { marginTop: 10, paddingTop: 10, borderTop: '1px solid ' + colors.cardBorder, display: 'flex', alignItems: 'center', gap: 8 } }, React.createElement('div', { onClick: function() { if (spot._user.handle) openProfile(spot._user.handle); }, style: { width: 24, height: 24, borderRadius: 12, background: spot._user.profileImageUrl ? 'url(' + spot._user.profileImageUrl + ') center/cover' : colors.accentLight, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, cursor: spot._user.handle ? 'pointer' : 'default', border: '1px solid ' + colors.cardBorder, flexShrink: 0 } }, !spot._user.profileImageUrl ? '👤' : null), React.createElement('span', { onClick: function() { if (spot._user.handle) openProfile(spot._user.handle); }, style: { fontSize: 12, color: colors.textLight, cursor: spot._user.handle ? 'pointer' : 'default' } }, 'Added by ' + (spot._user.displayName || 'Someone')) ) : null ) : React.createElement('div', { style: { marginTop: 16, paddingTop: 16, borderTop: '1px solid ' + colors.cardBorder } }, React.createElement('h3', { style: { margin: '0 0 16px', fontSize: 18, color: colors.text, fontFamily: fontFamily } }, 'Session Goals'), (currentTodos || []).length === 0 ? React.createElement('div', { style: { textAlign: 'center', padding: '20px 0', color: colors.textLight, fontStyle: 'italic', fontSize: 14 } }, 'What do you want to accomplish today at this study spot?') : (currentTodos || []).map(function(t) { return React.createElement('div', { key: t.id, onClick: function() { toggleTodo(t.id); }, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '12px', background: colors.cream, borderRadius: 12, marginBottom: 8, cursor: 'pointer', border: '1px solid ' + colors.cardBorder } }, React.createElement('div', { style: { width: 22, height: 22, borderRadius: 6, border: '2px solid ' + (t.done ? colors.primary : colors.textLight), background: t.done ? colors.primary : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 14, flexShrink: 0 } }, t.done ? '✓' : ''), React.createElement('span', { style: { fontSize: 15, color: t.done ? colors.textLight : colors.text, textDecoration: t.done ? 'line-through' : 'none', wordBreak: 'break-word' } }, t.text) ); }), React.createElement('form', { onSubmit: addTodo, style: { display: 'flex', gap: 8, marginTop: 16 } }, React.createElement('input', { value: newTodo, onChange: function(e) { setNewTodo(e.target.value); }, placeholder: 'e.g. Read chapter 4...', style: { flex: 1, height: 48, padding: '0 14px', borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.cream, fontSize: 15, fontFamily: fontFamily, boxSizing: 'border-box' } }), React.createElement('button', { type: 'submit', style: { width: 48, height: 48, borderRadius: 12, border: 'none', background: colors.primary, color: '#fff', fontSize: 20, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, '➕') ) ) ), detailTab === 'info' ? React.createElement(React.Fragment, null, brewAnim ? React.createElement('div', { style: { textAlign: 'center', padding: 20, fontSize: 48, animation: 'none' } }, React.createElement('div', { style: { fontSize: 48 } }, '☕'), React.createElement('div', { style: { fontSize: 14, color: colors.primary, fontWeight: 600, marginTop: 4 } }, 'Review brewed! ✨')) : null, React.createElement('div', { style: { marginTop: 20 } }, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 } }, React.createElement('h3', { style: { margin: 0, fontSize: 18, color: colors.text, fontFamily: fontFamily } }, 'Reviews (' + (reviews || []).length + ')'), !showReviewForm ? React.createElement('button', { onClick: function() { setShowReviewForm(true); }, style: { background: colors.primary, color: '#fff', border: 'none', borderRadius: 12, padding: '8px 16px', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: fontFamily } }, '✏️ Write Review') : null ), showReviewForm ? React.createElement('form', { onSubmit: handleAddReview, style: { background: colors.card, border: '1px solid ' + colors.cardBorder, borderRadius: 16, padding: 16, marginBottom: 16 } }, React.createElement('div', { style: { fontSize: 16, fontWeight: 600, color: colors.text, marginBottom: 12 } }, 'Vibe Check This Spot'), React.createElement(StarRow, { label: 'Quiet', value: reviewQuiet, onChange: setReviewQuiet }), React.createElement(StarRow, { label: 'Energy', value: reviewEnergy, onChange: setReviewEnergy }), React.createElement(StarRow, { label: 'WiFi', value: reviewWifi, onChange: setReviewWifi }), React.createElement('textarea', { ref: inputRef, value: reviewText, onChange: function(e) { setReviewText(e.target.value); }, placeholder: 'Share your experience...', style: { width: '100%', minHeight: 80, fontSize: 16, padding: 12, borderRadius: 12, border: '1px solid ' + colors.cardBorder, fontFamily: fontFamily, background: colors.cream, resize: 'vertical', boxSizing: 'border-box' } }), React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 12 } }, React.createElement('button', { type: 'button', onClick: function() { setShowReviewForm(false); }, style: { flex: 1, minHeight: 48, borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.white, color: colors.text, fontSize: 15, cursor: 'pointer', fontFamily: fontFamily } }, 'Cancel'), React.createElement('button', { type: 'submit', style: { flex: 1, minHeight: 48, borderRadius: 12, border: 'none', background: colors.primary, color: '#fff', fontSize: 15, fontWeight: 600, cursor: 'pointer', fontFamily: fontFamily } }, '☕ Brew Review') ) ) : null, (reviews || []).length === 0 ? React.createElement('div', { style: { textAlign: 'center', padding: 24, color: colors.textLight, fontStyle: 'italic' } }, 'No reviews yet — be the first to vibe check this spot!') : (reviews || []).map(function(r, i) { var reviewUser = r._user || { displayName: r.author || 'Anonymous', handle: null, profileImageUrl: null }; var reviewHandle = reviewUser.handle; return React.createElement('div', { key: i, style: { background: colors.card, border: '1px solid ' + colors.cardBorder, borderRadius: 14, padding: 14, marginBottom: 8 } }, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } }, React.createElement('div', { onClick: function(e) { e.stopPropagation(); if (reviewHandle) openProfile(reviewHandle); }, style: { width: 28, height: 28, borderRadius: 14, background: reviewUser.profileImageUrl ? 'url(' + reviewUser.profileImageUrl + ') center/cover' : colors.accentLight, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, cursor: reviewHandle ? 'pointer' : 'default', border: '1px solid ' + colors.cardBorder, flexShrink: 0 } }, !reviewUser.profileImageUrl ? '👤' : null), React.createElement('span', { onClick: function(e) { e.stopPropagation(); if (reviewHandle) openProfile(reviewHandle); }, style: { fontWeight: 600, fontSize: 14, color: colors.text, cursor: reviewHandle ? 'pointer' : 'default', textDecoration: reviewHandle ? 'underline' : 'none' } }, reviewUser.displayName || r.author || 'Anonymous') ), React.createElement('span', { style: { fontSize: 12, color: colors.textLight } }, (r._timestamp || r.date) ? new Date(r._timestamp || r.date).toLocaleDateString() : '') ), React.createElement('p', { style: { margin: '6px 0 0', fontSize: 14, color: colors.textLight, lineHeight: 1.5 } }, r.text) ); }) ) ) : null ); } return React.createElement('div', { style: { minHeight: '100dvh', background: colors.bg, fontFamily: fontFamily, display: 'flex', flexDirection: 'column', paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)', paddingBottom: 'env(safe-area-inset-bottom, 20px)', paddingLeft: 'max(env(safe-area-inset-left, 0px), 16px)', paddingRight: 'max(env(safe-area-inset-right, 0px), 16px)', maxWidth: 480, margin: '0 auto', boxSizing: 'border-box' } }, React.createElement('header', { style: { paddingBottom: 8, flexShrink: 0 } }, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }, React.createElement('div', null, React.createElement('h1', { style: { margin: 0, fontSize: 26, fontWeight: 700, color: colors.text, fontFamily: fontFamily } }, '☕ Campus Grind'), React.createElement('p', { style: { margin: '2px 0 0', fontSize: 14, color: colors.textLight, fontStyle: 'italic' } }, 'Find your perfect study spot') ), React.createElement('div', { style: { display: 'flex', gap: 8 } }, React.createElement('button', { onClick: function() { setShowDrinkPicker(true); }, style: { width: 44, height: 44, borderRadius: 22, border: '1px solid ' + colors.cardBorder, background: colors.card, fontSize: 22, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, drinkInfo ? drinkInfo.emoji : '🍵'), React.createElement('button', { onClick: function() { setShowStylePicker(true); }, style: { width: 44, height: 44, borderRadius: 22, border: '1px solid ' + colors.cardBorder, background: colors.card, fontSize: 22, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, styleInfo ? styleInfo.emoji : '⚙️'), React.createElement('button', { onClick: function() { setShowMapView(true); }, style: { width: 44, height: 44, borderRadius: 22, border: '1px solid ' + colors.cardBorder, background: colors.card, fontSize: 20, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, '🗺️'), React.createElement('button', { onClick: share, style: { width: 44, height: 44, borderRadius: 22, border: '1px solid ' + colors.cardBorder, background: colors.card, fontSize: 20, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, '📤') ) ) ), grindPick ? React.createElement('div', { style: { background: 'linear-gradient(135deg, ' + colors.primaryDark + ', ' + colors.primary + ')', borderRadius: 18, padding: 16, marginBottom: 14, color: '#fff', position: 'relative', overflow: 'hidden', cursor: 'pointer' }, onClick: function() { setSelectedSpot(grindPick); setView('detail'); setDetailTab('info'); } }, React.createElement('div', { style: { position: 'absolute', top: -20, right: -10, fontSize: 60, opacity: 0.15 } }, styleInfo ? styleInfo.emoji : '☕'), React.createElement('div', { style: { fontSize: 12, textTransform: 'uppercase', letterSpacing: 1.5, opacity: 0.85, marginBottom: 4 } }, (styleInfo ? styleInfo.emoji + ' ' : '') + 'Your Grind Pick!'), React.createElement('div', { style: { fontSize: 20, fontWeight: 700, fontFamily: fontFamily } }, grindPick.name), React.createElement('div', { style: { fontSize: 13, opacity: 0.85, marginTop: 4 } }, (isSpotOpen(grindPick) ? '🟢 Open now' : '🔴 Currently closed') + ' · Vibe: ' + (grindPick.vibeScore || '–') + '/5') ) : (!studyStyle ? React.createElement('div', { onClick: function() { setShowStylePicker(true); }, style: { background: colors.card, border: '2px dashed ' + colors.primary, borderRadius: 18, padding: 16, marginBottom: 14, textAlign: 'center', cursor: 'pointer' } }, React.createElement('div', { style: { fontSize: 28 } }, '🎯'), React.createElement('div', { style: { fontSize: 15, fontWeight: 600, color: colors.text, marginTop: 4 } }, 'Set Your Study Style'), React.createElement('div', { style: { fontSize: 13, color: colors.textLight, marginTop: 2 } }, 'Get personalized spot recommendations!') ) : null), React.createElement('div', { style: { marginBottom: 14 } }, React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 } }, React.createElement('span', { style: { fontSize: 13, fontWeight: 600, color: colors.text, fontFamily: fontFamily } }, '👥 Community (' + (memberList || []).length + ')'), React.createElement('button', { onClick: function() { share(); }, style: { background: colors.primary, color: '#fff', border: 'none', borderRadius: 10, padding: '4px 12px', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: fontFamily, display: 'flex', alignItems: 'center', gap: 4 } }, '📤 Invite Friends') ), React.createElement('div', { style: { display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 4 } }, (memberList || []).map(function(m) { return React.createElement('div', { key: m.id, onClick: function() { if (m.handle) openProfile(m.handle); }, style: { textAlign: 'center', cursor: m.handle ? 'pointer' : 'default', flexShrink: 0 } }, React.createElement('div', { style: { width: 40, height: 40, borderRadius: 20, background: m.avatarUrl ? 'url(' + m.avatarUrl + ') center/cover' : colors.accentLight, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, border: '2px solid ' + colors.primary } }, !m.avatarUrl ? '👤' : null), React.createElement('div', { style: { fontSize: 11, color: colors.textLight, marginTop: 2, maxWidth: 50, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, m.displayName || m.name || 'User') ); }) ) ), React.createElement('div', { style: { flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 80 } }, React.createElement('div', { style: { fontSize: 13, color: colors.textLight, marginBottom: 8, fontStyle: 'italic' } }, (spots || []).length + ' spot' + ((spots || []).length !== 1 ? 's' : '') + ' · ' + (spots || []).filter(isSpotOpen).length + ' open now'), (spots || []).map(function(spot) { return React.createElement(SpotCard, { key: spot.id, spot: spot }); }) ), React.createElement('div', { style: { position: 'fixed', bottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', right: 'max(env(safe-area-inset-right, 0px), 20px)', zIndex: 100 } }, React.createElement('button', { onClick: function() { setShowAddForm(true); }, style: { width: 56, height: 56, borderRadius: 28, background: colors.primary, color: '#fff', border: 'none', fontSize: 28, cursor: 'pointer', boxShadow: '0 4px 16px rgba(107,124,94,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, '➕') ), showAddForm ? React.createElement('div', { style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 200, display: 'flex', alignItems: 'flex-end' } }, React.createElement('div', { style: { width: '100%', maxWidth: 480, margin: '0 auto', background: colors.bg, borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', paddingLeft: 20, paddingRight: 20 } }, React.createElement('div', { style: { width: 36, height: 5, background: colors.accentLight, borderRadius: 3, margin: '0 auto 16px' } }), React.createElement('h3', { style: { margin: '0 0 16px', fontSize: 20, color: colors.text, fontFamily: fontFamily } }, '📍 Add a New Spot'), React.createElement('form', { onSubmit: handleAddSpot }, React.createElement('input', { value: formName, onChange: function(e) { setFormName(e.target.value); }, placeholder: 'Spot name *', style: { width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, marginBottom: 10, boxSizing: 'border-box' } }), React.createElement('input', { value: formAddress, onChange: function(e) { setFormAddress(e.target.value); }, placeholder: 'Address (optional)', style: { width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, marginBottom: 10, boxSizing: 'border-box' } }), React.createElement('textarea', { value: formDesc, onChange: function(e) { setFormDesc(e.target.value); }, placeholder: 'Description (optional)', style: { width: '100%', minHeight: 70, fontSize: 16, padding: 14, borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, marginBottom: 10, resize: 'vertical', boxSizing: 'border-box' } }), React.createElement('div', { style: { display: 'flex', gap: 10, marginBottom: 10 } }, React.createElement('div', { style: { flex: 1 } }, React.createElement('label', { style: { fontSize: 13, color: colors.textLight, display: 'block', marginBottom: 4 } }, 'Opens'), React.createElement('input', { type: 'time', value: formOpen, onChange: function(e) { setFormOpen(e.target.value); }, style: { width: '100%', height: 44, fontSize: 16, padding: '0 10px', borderRadius: 10, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, boxSizing: 'border-box' } }) ), React.createElement('div', { style: { flex: 1 } }, React.createElement('label', { style: { fontSize: 13, color: colors.textLight, display: 'block', marginBottom: 4 } }, 'Closes'), React.createElement('input', { type: 'time', value: formClose, onChange: function(e) { setFormClose(e.target.value); }, style: { width: '100%', height: 44, fontSize: 16, padding: '0 10px', borderRadius: 10, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, boxSizing: 'border-box' } }) ) ), React.createElement('input', { value: formTags, onChange: function(e) { setFormTags(e.target.value); }, placeholder: 'Tags (comma separated: quiet, wifi, late-night)', style: { width: '100%', height: 44, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, marginBottom: 14, boxSizing: 'border-box' } }), React.createElement('div', { style: { display: 'flex', gap: 10 } }, React.createElement('button', { type: 'button', onClick: function() { setShowAddForm(false); }, style: { flex: 1, minHeight: 52, borderRadius: 14, border: '1px solid ' + colors.cardBorder, background: colors.white, color: colors.text, fontSize: 16, cursor: 'pointer', fontFamily: fontFamily } }, 'Cancel'), React.createElement('button', { type: 'submit', style: { flex: 1, minHeight: 52, borderRadius: 14, border: 'none', background: colors.primary, color: '#fff', fontSize: 16, fontWeight: 600, cursor: 'pointer', fontFamily: fontFamily } }, '🌿 Add Spot') ) ) ) ) : null, showStylePicker ? React.createElement('div', { style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 200, display: 'flex', alignItems: 'flex-end' } }, React.createElement('div', { style: { width: '100%', maxWidth: 480, margin: '0 auto', background: colors.bg, borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', paddingLeft: 20, paddingRight: 20 } }, React.createElement('div', { style: { width: 36, height: 5, background: colors.accentLight, borderRadius: 3, margin: '0 auto 16px' } }), React.createElement('h3', { style: { margin: '0 0 4px', fontSize: 20, color: colors.text, fontFamily: fontFamily } }, '🎯 Your Study Style'), React.createElement('p', { style: { margin: '0 0 16px', fontSize: 14, color: colors.textLight } }, 'Pick your vibe for personalized spot picks'), (STUDY_STYLES || []).map(function(style) { var isSelected = studyStyle === style.id; return React.createElement('div', { key: style.id, onClick: function() { handleSetStyle(style.id); }, style: { display: 'flex', alignItems: 'center', gap: 14, padding: 14, borderRadius: 14, border: '2px solid ' + (isSelected ? colors.primary : colors.cardBorder), background: isSelected ? colors.primary + '15' : colors.card, marginBottom: 10, cursor: 'pointer', transition: 'all 0.2s' } }, React.createElement('div', { style: { fontSize: 32, width: 48, textAlign: 'center' } }, style.emoji), React.createElement('div', { style: { flex: 1 } }, React.createElement('div', { style: { fontSize: 16, fontWeight: 600, color: colors.text, fontFamily: fontFamily } }, style.label), React.createElement('div', { style: { fontSize: 13, color: colors.textLight } }, style.desc) ), isSelected ? React.createElement('span', { style: { fontSize: 20 } }, '✅') : null ); }), React.createElement('button', { onClick: function() { setShowStylePicker(false); }, style: { width: '100%', minHeight: 48, borderRadius: 14, border: '1px solid ' + colors.cardBorder, background: colors.white, color: colors.text, fontSize: 16, cursor: 'pointer', fontFamily: fontFamily, marginTop: 6 } }, 'Done') ) ) : null, showDrinkPicker ? React.createElement('div', { style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 200, display: 'flex', alignItems: 'flex-end' } }, React.createElement('div', { style: { width: '100%', maxWidth: 480, margin: '0 auto', background: colors.bg, borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', paddingLeft: 20, paddingRight: 20, maxHeight: '85vh', display: 'flex', flexDirection: 'column' } }, React.createElement('div', { style: { width: 36, height: 5, background: colors.accentLight, borderRadius: 3, margin: '0 auto 16px', flexShrink: 0 } }), React.createElement('h3', { style: { margin: '0 0 4px', fontSize: 20, color: colors.text, fontFamily: fontFamily, flexShrink: 0 } }, '🍵 Drink Preference'), React.createElement('p', { style: { margin: '0 0 12px', fontSize: 14, color: colors.textLight, flexShrink: 0 } }, 'What fuels your study sessions?'), React.createElement('input', { value: drinkSearch, onChange: function(e) { setDrinkSearch(e.target.value); }, placeholder: '🔍 Search drinks...', style: { width: '100%', height: 44, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, marginBottom: 16, boxSizing: 'border-box', flexShrink: 0 } }), React.createElement('div', { style: { overflowY: 'auto', flex: 1, paddingBottom: 10, WebkitOverflowScrolling: 'touch' } }, (DRINK_PREFS || []).filter(function(d) { return d.label.toLowerCase().indexOf(drinkSearch.toLowerCase()) !== -1 || d.desc.toLowerCase().indexOf(drinkSearch.toLowerCase()) !== -1; }).map(function(drink) { var isSelected = drinkPref === drink.id; return React.createElement('div', { key: drink.id, onClick: function() { handleSetDrink(drink.id); }, style: { display: 'flex', alignItems: 'center', gap: 14, padding: 14, borderRadius: 14, border: '2px solid ' + (isSelected ? colors.primary : colors.cardBorder), background: isSelected ? colors.primary + '15' : colors.card, marginBottom: 10, cursor: 'pointer', transition: 'all 0.2s' } }, React.createElement('div', { style: { fontSize: 32, width: 48, textAlign: 'center' } }, drink.emoji), React.createElement('div', { style: { flex: 1 } }, React.createElement('div', { style: { fontSize: 16, fontWeight: 600, color: colors.text, fontFamily: fontFamily } }, drink.label), React.createElement('div', { style: { fontSize: 13, color: colors.textLight } }, drink.desc) ), isSelected ? React.createElement('span', { style: { fontSize: 20 } }, '✅') : null ); }) ), React.createElement('button', { onClick: function() { setShowDrinkPicker(false); setDrinkSearch(''); }, style: { width: '100%', minHeight: 48, borderRadius: 14, border: '1px solid ' + colors.cardBorder, background: colors.white, color: colors.text, fontSize: 16, cursor: 'pointer', fontFamily: fontFamily, marginTop: 6, flexShrink: 0 } }, 'Done') ) ) : null, showMapView ? React.createElement('div', { style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 200, display: 'flex', alignItems: 'flex-end' } }, React.createElement('div', { style: { width: '100%', maxWidth: 480, margin: '0 auto', background: colors.bg, borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', paddingLeft: 20, paddingRight: 20, maxHeight: '90vh', display: 'flex', flexDirection: 'column' } }, React.createElement('div', { style: { width: 36, height: 5, background: colors.accentLight, borderRadius: 3, margin: '0 auto 16px', flexShrink: 0 } }), React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12, flexShrink: 0 } }, React.createElement('h3', { style: { margin: 0, fontSize: 20, color: colors.text, fontFamily: fontFamily } }, '🗺️ Campus Map'), React.createElement('div', { style: { display: 'flex', gap: 8 } }, React.createElement('button', { onClick: function() { setShowLocPicker(true); }, style: { padding: '6px 12px', borderRadius: 10, border: '1px solid ' + colors.cardBorder, background: colors.card, fontSize: 12, color: colors.text, cursor: 'pointer', fontFamily: fontFamily } }, '⚙️ Locations'), React.createElement('button', { onClick: handleGetUserLocation, disabled: loadingLocation, style: { padding: '6px 12px', borderRadius: 10, border: 'none', background: colors.primary, color: '#fff', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: fontFamily, opacity: loadingLocation ? 0.6 : 1 } }, loadingLocation ? '⏳ Locating...' : '📍 Find Me') ) ), React.createElement('div', { style: { borderRadius: 14, overflow: 'hidden', border: '1px solid ' + colors.cardBorder, height: 220, marginBottom: 12, flexShrink: 0, position: 'relative' } }, React.createElement('iframe', { width: '100%', height: '100%', frameBorder: '0', scrolling: 'no', src: 'https://maps.google.com/maps?q=' + encodeURIComponent('University of Sydney, Camperdown NSW') + '&t=&z=16&ie=UTF8&iwloc=&output=embed', style: { border: 'none' } }), userLocation ? React.createElement('div', { style: { position: 'absolute', bottom: 8, left: 8, background: 'rgba(255,255,255,0.92)', borderRadius: 8, padding: '4px 8px', fontSize: 11, color: colors.text, fontFamily: fontFamily, boxShadow: '0 1px 4px rgba(0,0,0,0.15)' } }, '📍 Your location detected') : null ), !userLocation && !loadingLocation ? React.createElement('div', { style: { textAlign: 'center', padding: '8px 0', fontSize: 13, color: colors.textLight, fontStyle: 'italic', flexShrink: 0 } }, 'Tap "Find Me" to see distances to each spot') : null, React.createElement('div', { style: { flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' } }, React.createElement('div', { style: { fontSize: 13, fontWeight: 600, color: colors.text, marginBottom: 8 } }, 'Study Spots' + (userLocation ? ' — sorted by distance' : '')), (function() { var sortedSpots = (spots || []).slice(); if (userLocation && Object.keys(spotDistances || {}).length > 0) { (sortedSpots || []).sort(function(a, b) { return ((spotDistances[a.id] || {}).km || 999) - ((spotDistances[b.id] || {}).km || 999); }); } return (sortedSpots || []).map(function(s) { var dist = spotDistances[s.id]; var sOpen = isSpotOpen(s); var crowd = s.crowdLevel && CROWD_LEVELS[s.crowdLevel] ? CROWD_LEVELS[s.crowdLevel] : null; return React.createElement('div', { key: s.id, onClick: function() { setShowMapView(false); setSelectedSpot(s); setView('detail'); setDetailTab('info'); }, style: { display: 'flex', alignItems: 'center', gap: 12, padding: 12, background: colors.card, border: '1px solid ' + colors.cardBorder, borderRadius: 14, marginBottom: 8, cursor: 'pointer' } }, React.createElement('div', { style: { width: 48, height: 48, borderRadius: 12, background: sOpen ? colors.primary + '18' : colors.closed + '18', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, dist ? React.createElement(React.Fragment, null, React.createElement('div', { style: { fontSize: 14, fontWeight: 700, color: sOpen ? colors.primary : colors.closed } }, dist.km < 1 ? Math.round(dist.km * 1000) + 'm' : dist.km.toFixed(1) + 'km'), React.createElement('div', { style: { fontSize: 10, color: colors.textLight } }, dist.walkMin + ' min') ) : React.createElement('div', { style: { fontSize: 22 } }, '📍') ), React.createElement('div', { style: { flex: 1, minWidth: 0 } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } }, React.createElement('div', { style: { fontSize: 15, fontWeight: 600, color: colors.text, fontFamily: fontFamily, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, s.name), React.createElement('div', { style: { fontSize: 10, padding: '1px 6px', borderRadius: 6, background: sOpen ? colors.open : colors.closed, color: '#fff', fontWeight: 600, flexShrink: 0 } }, sOpen ? 'OPEN' : 'CLOSED') ), React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 3, alignItems: 'center', fontSize: 12, color: colors.textLight } }, React.createElement('span', null, '☕ ' + (s.vibeScore || '–')), crowd ? React.createElement('span', { style: { color: crowd.color } }, crowd.emoji + ' ' + crowd.label) : null, dist ? React.createElement('span', null, '🚶 ' + dist.walkMin + ' min walk') : null ) ), React.createElement('div', { style: { fontSize: 18, color: colors.textLight, flexShrink: 0 } }, '›') ); }); })() ), React.createElement('button', { onClick: function() { setShowMapView(false); }, style: { width: '100%', minHeight: 48, borderRadius: 14, border: '1px solid ' + colors.cardBorder, background: colors.white, color: colors.text, fontSize: 16, cursor: 'pointer', fontFamily: fontFamily, marginTop: 8, flexShrink: 0 } }, 'Close Map') ) ) : null, showLocPicker ? React.createElement('div', { style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 200, display: 'flex', alignItems: 'flex-end' } }, React.createElement('div', { style: { width: '100%', maxWidth: 480, margin: '0 auto', background: colors.bg, borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', paddingLeft: 20, paddingRight: 20 } }, React.createElement('div', { style: { width: 36, height: 5, background: colors.accentLight, borderRadius: 3, margin: '0 auto 16px' } }), React.createElement('h3', { style: { margin: '0 0 4px', fontSize: 20, color: colors.text, fontFamily: fontFamily } }, '🗺️ Saved Locations'), React.createElement('p', { style: { margin: '0 0 16px', fontSize: 14, color: colors.textLight } }, 'Set default starting points for map directions.'), React.createElement('div', { style: { marginBottom: 12 } }, React.createElement('label', { style: { fontSize: 13, color: colors.textLight, display: 'block', marginBottom: 4 } }, '🏠 Home'), React.createElement('input', { value: locHome, onChange: function(e) { setLocHome(e.target.value); }, placeholder: 'Enter home address or suburb', style: { width: '100%', height: 44, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, boxSizing: 'border-box' } }) ), React.createElement('div', { style: { marginBottom: 12 } }, React.createElement('label', { style: { fontSize: 13, color: colors.textLight, display: 'block', marginBottom: 4 } }, '💼 Work'), React.createElement('input', { value: locWork, onChange: function(e) { setLocWork(e.target.value); }, placeholder: 'Enter work address or suburb', style: { width: '100%', height: 44, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, boxSizing: 'border-box' } }) ), React.createElement('div', { style: { marginBottom: 16 } }, React.createElement('label', { style: { fontSize: 13, color: colors.textLight, display: 'block', marginBottom: 4 } }, '📍 Other'), React.createElement('input', { value: locOther, onChange: function(e) { setLocOther(e.target.value); }, placeholder: 'Enter another location', style: { width: '100%', height: 44, fontSize: 16, padding: '0 14px', borderRadius: 12, border: '1px solid ' + colors.cardBorder, background: colors.card, fontFamily: fontFamily, boxSizing: 'border-box' } }) ), React.createElement('div', { style: { display: 'flex', gap: 10 } }, React.createElement('button', { onClick: function() { setShowLocPicker(false); }, style: { flex: 1, minHeight: 48, borderRadius: 14, border: '1px solid ' + colors.cardBorder, background: colors.white, color: colors.text, fontSize: 16, cursor: 'pointer', fontFamily: fontFamily } }, 'Cancel'), React.createElement('button', { onClick: handleSaveLocations, style: { flex: 1, minHeight: 48, borderRadius: 14, border: 'none', background: colors.primary, color: '#fff', fontSize: 16, fontWeight: 600, cursor: 'pointer', fontFamily: fontFamily } }, 'Save Locations') ) ) ) : null ); }