function WhatsAppBusinessCard({ settings }) { const number = (settings.whatsapp_number || '').replace(/\D/g, ''); const display = settings.whatsapp_display || settings.phone || ''; const hours = settings.whatsapp_hours || 'Mon–Fri 9:00–18:00 GMT'; const replySla = settings.whatsapp_reply_sla || '2hr'; const status = settings.whatsapp_status || 'online'; const company = settings.company_name || 'Lupipak'; if (!number) return null; const statusDot = status === 'online' ? '#25D366' : status === 'away' ? '#E8A74A' : '#8B857A'; const statusText = status === 'online' ? `REPLY ${replySla.toUpperCase()}` : status === 'away' ? `AWAY · ${replySla.toUpperCase()}` : 'OFFLINE'; const defaultMsg = (settings.whatsapp_default_message || "Hi {{company}} — I'd like to ask about packaging options.") .replace(/\{\{company\}\}/g, company); const link = `https://wa.me/${number}?text=${encodeURIComponent(defaultMsg)}`; return ( { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }} >
WhatsApp Business VERIFIED · {statusText}
Chat directly with our team
{display}{display ? ' · ' : ''}{hours}
Chat now ); } function Homepage({ onSelect, accent, onAdmin, sectors, settings }) { const [query, setQuery] = React.useState(''); const [hover, setHover] = React.useState(null); const [time, setTime] = React.useState(new Date()); const isMobile = useMedia('(max-width: 900px)'); React.useEffect(() => { const t = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(t); }, []); const filtered = (sectors || []).filter(s => s.label.toLowerCase().includes(query.toLowerCase()) || (s.sub || '').toLowerCase().includes(query.toLowerCase()) ); const hhmm = time.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }); const cityLabel = settings.city_label || 'LONDON'; const companyName = settings.company_name || 'Lupipak Ltd'; const companyShort = companyName.toUpperCase(); return (
window.scrollTo({ top: 0, behavior: 'smooth' })} right={<> {cityLabel} · {hhmm} Catalogue Case studies Contact } /> {/* Meta strip */}
№ 001 · {settings.tagline || 'Visual Packaging Builder'}
🇬🇧 UK · 🇪🇺 EU · 🇹🇷 TR Est. lead time {settings.lead_time_days || '12–18 days'}
{/* Left: question */}
Step 01 · Tell us about your kitchen

What are you
selling?

Build a complete packaging set in minutes. Pick your sector, configure quantities, get a tailored quote from our team within 24 hours.

{/* Search */}
setQuery(e.target.value)} placeholder="Search sector — e.g. burger, pizza, döner…" style={{ width: '100%', padding: '16px 18px 16px 44px', fontFamily: 'inherit', background: 'var(--paper)', border: '.5px solid var(--line-2)', borderRadius: 12, outline: 'none', }} /> {query && filtered.length > 0 && (
{filtered.map(s => (
onSelect(s.id)} style={{ padding: '12px 18px', fontSize: 14, borderBottom: '.5px solid var(--line)', display: 'flex', justifyContent: 'space-between', cursor: 'pointer' }} > {s.label} {s.kcal} products
))}
)}
{/* WhatsApp Business card */} {/* Stats */}
{/* Right: sector grid */}
Select sector {(sectors || []).length} · A to E
{(sectors || []).map((s, i) => (
onSelect(s.id)} onMouseEnter={() => setHover(s.id)} onMouseLeave={() => setHover(null)} className="fade-up" style={{ animationDelay: `${0.1 + i * 0.06}s`, display: 'grid', gridTemplateColumns: '28px 1fr auto auto', alignItems: 'center', gap: 16, padding: '20px 20px', background: hover === s.id ? 'var(--ink)' : 'var(--paper)', color: hover === s.id ? 'var(--paper)' : 'var(--ink)', borderRadius: 14, border: '.5px solid var(--line-2)', transition: 'all .25s cubic-bezier(.2,.8,.2,1)', transform: hover === s.id ? 'translateX(-4px)' : 'translateX(0)', cursor: 'pointer', }} > 0{i + 1}
{s.label} {s.sub}
{s.kcal} items
))}
Don't see your sector? Talk to sales →
{/* Footer strip */}
); } Object.assign(window, { Homepage });