// Shared UI components — nav, ticker, placeholders, icons const Placeholder = ({ tone = 'sage', label, img, children, style = {} }) => (
{children} {label && !img && {label}}
); const Icon = ({ name, size = 16, stroke = 1.6, color = 'currentColor' }) => { const paths = { search: <>, calendar: <>, user: <>, arrow: , arrowLeft: , arrowDown: , plus: , minus: , check: , close: , star: , heart: , map: <>, clock: <>, pin: <>, users: <>, compass: <>, bed: <>, car: <>, food: <>, camera: <>, sun: <>, mountain: , waves: , }; return ( {paths[name]} ); }; const Nav = ({ page, setPage, cart = 0 }) => { const [drawerOpen, setDrawerOpen] = React.useState(false); const [showAuth, setShowAuth] = React.useState(false); const [authTab, setAuthTab] = React.useState('signin'); const [user, setUser] = React.useState(() => { try { return JSON.parse(localStorage.getItem('yt_cuser')); } catch { return null; } }); const [authForm, setAuthForm] = React.useState({ name: '', email: '', phone: '', password: '' }); const [authError, setAuthError] = React.useState(''); const [authLoading, setAuthLoading] = React.useState(false); const [showUserMenu, setShowUserMenu] = React.useState(false); const [navSs, setNavSs] = React.useState(window.SITE_SETTINGS || {}); React.useEffect(() => { fetch('/api/settings').then(r => r.json()).then(s => { window.SITE_SETTINGS = s; setNavSs(s); }).catch(() => {}); }, []); React.useEffect(() => { document.body.style.overflow = (drawerOpen || showAuth) ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [drawerOpen, showAuth]); const openAuth = (tab = 'signin') => { setAuthTab(tab); setAuthError(''); setAuthForm({ name: '', email: '', phone: '', password: '' }); setShowAuth(true); }; const handleAuth = async (e) => { e.preventDefault(); setAuthLoading(true); setAuthError(''); try { const url = authTab === 'signin' ? '/api/customer/login' : '/api/customer/register'; const body = authTab === 'signin' ? { email: authForm.email, password: authForm.password } : { name: authForm.name, email: authForm.email, phone: authForm.phone, password: authForm.password }; const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); const data = await r.json(); if (!r.ok) { setAuthError(data.error || 'Something went wrong'); setAuthLoading(false); return; } localStorage.setItem('yt_ctoken', data.token); localStorage.setItem('yt_cuser', JSON.stringify(data.customer)); setUser(data.customer); setShowAuth(false); } catch { setAuthError('Network error. Please try again.'); } setAuthLoading(false); }; const signOut = () => { localStorage.removeItem('yt_ctoken'); localStorage.removeItem('yt_cuser'); setUser(null); setShowUserMenu(false); }; const navItems = [ { id: 'home', label: 'Discover' }, { id: 'listing', label: 'All Tours' }, { id: 'inquiry', label: 'Tour Inquiry' }, { id: 'about', label: 'About' }, { id: 'contact', label: 'Contact Us' }, ]; const goTo = (id) => { setPage({ name: id === 'home' ? 'home' : id }); setDrawerOpen(false); }; const LogoSvg = ({ size = 26 }) => ( ); return ( <> {/* Overlay */}
setDrawerOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(26,29,26,0.5)', zIndex: 298, opacity: drawerOpen ? 1 : 0, pointerEvents: drawerOpen ? 'auto' : 'none', transition: 'opacity 0.3s', }} /> {/* Left-side mobile drawer */}
{/* Drawer header */}
{/* Nav items */}
{navItems.map((item) => ( ))}
{/* Contact */} {navSs.contact_phone ? ( ) : null} {user ? (
{user.name}
{user.email}
My Profile
) : (
)}
{/* Auth Modal */} {showAuth && (
{ if (e.target === e.currentTarget) setShowAuth(false); }} style={{ position: 'fixed', inset: 0, background: 'rgba(26,29,26,0.6)', zIndex: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
{/* Modal header */}
{[{ id: 'signin', label: 'Sign In' }, { id: 'signup', label: 'Create Account' }].map(t => ( ))}
{/* Form */}
{authTab === 'signup' && ( )} {authTab === 'signup' && ( )} {authError &&
{authError}
}
{authTab === 'signin' ? ( <>No account? ) : ( <>Already have an account? )}
)} {/* Main nav bar */} ); }; const Ticker = ({ items }) => { const content = ( <> {items.map((t, i) => ( {t}✶ ))} ); return (
{content}{content}
); }; const Footer = () => { const [ss, setSs] = React.useState(window.SITE_SETTINGS || {}); React.useEffect(() => { fetch('/api/settings').then(r => r.json()).then(s => { window.SITE_SETTINGS = s; setSs(s); }).catch(() => {}); }, []); const colHd = { fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'rgba(255,255,255,0.45)', marginBottom: 18, fontWeight: 600 }; const colLink = { fontSize: 14, color: 'rgba(255,255,255,0.8)', lineHeight: 1.4 }; return ( ); }; Object.assign(window, { Placeholder, Icon, Nav, Ticker, Footer });