// store-app.jsx — Ecoprof store: Header, Home, Cart context. i18n-aware. // Lang state lives in StoreProvider; t(key, lang) + tr(field, lang) + fmtMoney(n, lang). const { useState, useEffect, useRef, useMemo, useContext, createContext } = React; // ───────────────────────── Persistence helpers (demo) ───────────────────────── const LS_CART = 'ep_cart'; const LS_WISH = 'ep_wishlist'; const LS_USER = 'ep_user'; const LS_LANG = 'ep_lang'; function loadLS(key, fallback) { try { const s = typeof localStorage !== 'undefined' && localStorage.getItem(key); return s ? JSON.parse(s) : fallback; } catch { return fallback; } } function saveLS(key, val) { try { localStorage.setItem(key, JSON.stringify(val)); } catch {} } // ───────────────────────── Hash router ───────────────────────── // URL hash routing resolves client-side; no Cloudflare _routes.json needed. // Shape: #/product/p17 · #/catalog/cleanse?tag=best · #/article/a1 · #/about · etc. const ROUTES_WITH_ID = new Set(['product', 'article', 'role']); function serializeRoute(r) { if (!r || r.name === 'home') return ''; let path = '/' + r.name; if (ROUTES_WITH_ID.has(r.name) && r.id) path += '/' + encodeURIComponent(r.id); else if (r.name === 'catalog' && r.cat) path += '/' + encodeURIComponent(r.cat); const qs = []; if (r.name === 'catalog' && r.tag) qs.push('tag=' + encodeURIComponent(r.tag)); if (qs.length) path += '?' + qs.join('&'); return path; } function parseRoute(hash) { const raw = (hash || '').replace(/^#/, ''); if (!raw || raw === '/' || raw === '') return { name: 'home' }; const [pathPart, queryPart] = raw.split('?'); const segs = pathPart.replace(/^\//, '').split('/').filter(Boolean).map(decodeURIComponent); if (segs.length === 0) return { name: 'home' }; const name = segs[0]; const route = { name }; if (ROUTES_WITH_ID.has(name) && segs[1]) route.id = segs[1]; else if (name === 'catalog' && segs[1]) route.cat = segs[1]; if (queryPart) { const tag = new URLSearchParams(queryPart).get('tag'); if (tag) route.tag = tag; } return route; } // ───────────────────────── Store state (shared) ───────────────────────── const StoreCtx = createContext(null); function StoreProvider({ children, settings }) { const [route, setRoute] = useState(() => parseRoute(typeof window !== 'undefined' ? window.location.hash : '')); const [cart, setCart] = useState(() => { const r = loadLS(LS_CART, []); return Array.isArray(r) ? r.filter(i => i && i.id && i.qty > 0) : []; }); const [cartOpen, setCartOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [lang, setLang] = useState(() => loadLS(LS_LANG, 'uk')); const [toast, setToast] = useState(null); const [pulse, setPulse] = useState(0); const [wishlist, setWishlist] = useState(() => { const r = loadLS(LS_WISH, []); return Array.isArray(r) ? r : []; }); // [productId, ...] const [searchOpen, setSearchOpen] = useState(false); const [user, setUser] = useState(() => loadLS(LS_USER, null)); // { email, name, points, tier } | null const [authOpen, setAuthOpen] = useState(false); // login/register modal const [checkoutPrefill, setCheckoutPrefill] = useState(null); // {name,phone,email,comment} from 1-click // Persist to localStorage (demo — survives reload + new tab). useEffect(() => { saveLS(LS_CART, cart); }, [cart]); useEffect(() => { saveLS(LS_WISH, wishlist); }, [wishlist]); useEffect(() => { saveLS(LS_USER, user); }, [user]); useEffect(() => { saveLS(LS_LANG, lang); }, [lang]); // Sync route ↔ window.location.hash (back/forward + reload preservation). useEffect(() => { const onHash = () => { const next = parseRoute(window.location.hash); setRoute(cur => serializeRoute(cur) === serializeRoute(next) ? cur : next); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); const toggleWishlist = (id) => setWishlist(w => w.includes(id) ? w.filter(x => x !== id) : [...w, id]); const isWished = (id) => wishlist.includes(id); const login = (data) => { setUser({ email: data.email || 'user@ecoprof.ua', name: data.name || 'Olena', points: 2400, // demo balance tier: 'silver', // bronze | silver | gold tierDiscount: 5, // % personal discount based on tier }); setAuthOpen(false); }; const logout = () => setUser(null); const spendPoints = (n) => setUser(u => u ? { ...u, points: Math.max(0, u.points - n) } : u); const goto = (r) => { setRoute(r); setMenuOpen(false); window.scrollTo?.({ top: 0, behavior: 'instant' }); const next = '#' + serializeRoute(r); if (typeof window !== 'undefined' && window.location.hash !== next) { if (next === '#') history.replaceState(null, '', window.location.pathname + window.location.search); else window.location.hash = serializeRoute(r); } }; const addToCart = (id, qty = 1) => { setCart((c) => { const ex = c.find(i => i.id === id); return ex ? c.map(i => i.id === id ? { ...i, qty: i.qty + qty } : i) : [...c, { id, qty }]; }); setToast({ id, ts: Date.now() }); setPulse(p => p + 1); }; const setQty = (id, qty) => { setCart((c) => qty <= 0 ? c.filter(i => i.id !== id) : c.map(i => i.id === id ? { ...i, qty } : i)); }; const cartCount = cart.reduce((s, i) => s + i.qty, 0); const subtotal = cart.reduce((s, i) => { const p = window.ECOPROF_PRODUCTS.find(p => p.id === i.id); return s + (p ? p.price * i.qty : 0); }, 0); // localized helpers bound to current lang const _t = (k) => window.t(k, lang); const _tr = (f) => window.tr(f, lang); const _fm = (n) => window.fmtMoney(n, lang); const value = { route, goto, cart, addToCart, setQty, cartOpen, setCartOpen, cartCount, subtotal, menuOpen, setMenuOpen, settings, lang, setLang, t: _t, tr: _tr, fmt: _fm, toast, setToast, pulse, wishlist, toggleWishlist, isWished, searchOpen, setSearchOpen, user, login, logout, spendPoints, authOpen, setAuthOpen, checkoutPrefill, setCheckoutPrefill, }; return {children}; } const useStore = () => useContext(StoreCtx); // ── Apply tweak settings as CSS vars ───────────────────── function useApplySettings(rootRef, settings) { useEffect(() => { if (!rootRef.current || !settings) return; const r = rootRef.current; r.style.setProperty('--ep-accent', settings.accent || '#c47862'); r.style.setProperty('--ep-accent-soft', hexA(settings.accent || '#c47862', 0.1)); r.style.setProperty('--ep-circle', (settings.circleSize || 132) + 'px'); const cs = settings.cardStyle || 'clean'; if (cs === 'clean') { r.style.setProperty('--ep-card-bg', 'var(--ep-surface)'); r.style.setProperty('--ep-card-border', '1px solid var(--ep-line-2)'); r.style.setProperty('--ep-card-radius', '14px'); } else if (cs === 'tinted') { r.style.setProperty('--ep-card-bg', 'transparent'); r.style.setProperty('--ep-card-border', '0'); r.style.setProperty('--ep-card-radius', '14px'); } else if (cs === 'soft') { r.style.setProperty('--ep-card-bg', '#fdfaf4'); r.style.setProperty('--ep-card-border', '0'); r.style.setProperty('--ep-card-radius', '22px'); } }, [settings, rootRef]); } function hexA(hex, a) { const h = hex.replace('#',''); const n = h.length === 3 ? h.split('').map(c=>c+c).join('') : h; const r = parseInt(n.slice(0,2),16), g = parseInt(n.slice(2,4),16), b = parseInt(n.slice(4,6),16); return `rgba(${r},${g},${b},${a})`; } // ───────────────────────── Icons (inline) ───────────────────────── const I = { search: () => , bag: () => , heart: () => , user: () => , menu: () => , x: () => , arrow: () => , star: () => , play: () => , check: () => , }; // ───────────────────────── Lang toggle ───────────────────────── function LangToggle({ compact = false }) { const { lang, setLang } = useStore(); return (
{['uk','en'].map(l => ( ))}
); } // ───────────────────────── Toast on add ───────────────────────── function CartToast() { const { toast, lang, setCartOpen } = useStore(); const [visible, setVisible] = useState(false); useEffect(() => { if (!toast) return; setVisible(true); const tm = setTimeout(() => setVisible(false), 2400); return () => clearTimeout(tm); }, [toast]); if (!toast) return null; const p = window.ECOPROF_PRODUCTS.find(x => x.id === toast.id); if (!p) return null; return (
{lang === 'uk' ? 'Додано в кошик' : 'Added to bag'}
{p.name}
); } // ───────────────────────── Header ───────────────────────── function Header({ mobile }) { const { goto, cartCount, setCartOpen, route, setMenuOpen, t, lang, pulse, setSearchOpen, wishlist, user, setAuthOpen } = useStore(); const [pulseCls, setPulseCls] = useState(''); useEffect(() => { if (!pulse) return; setPulseCls('ep-cart-pulse'); const tm = setTimeout(() => setPulseCls(''), 620); return () => clearTimeout(tm); }, [pulse]); return (
{mobile && ( )} goto({ name: 'home' })}> ecoprof {!mobile && ( )}
{!mobile && } {!mobile && } {!mobile && } {!mobile && ( )} {mobile && }
); } // ───────────────────────── Promo strip ───────────────────────── function PromoStrip() { const { t } = useStore(); const items = [t('promo.shipping'), t('promo.new'), t('promo.returns'), t('promo.samples')]; const doubled = [...items, ...items, ...items, ...items]; return (
{doubled.map((tx, i) => {tx})}
); } // ───────────────────────── Hero (auto-rotating banner set) ───────────────────────── function Hero({ mobile }) { const { goto, t, tr, fmt, lang } = useStore(); const P = window.ECOPROF_PRODUCTS; const find = (re, fb) => P.find(x => re.test(x.name)) || P.find(x => x.id === fb) || P[0]; const heroP = find(/Green Barrier Serum/, 'p11'); const spot = find(/Radiance Vit C/, 'p18'); const promoP = P.find(x => x.promo && x.promo.type === '2+1') || find(/Carboxy/, 'p25'); // ── Slide A — editorial: copy + portrait + product chip ── const slideEditorial = (
{t('hero.eyebrow')}

{t('hero.title.1')}
{t('hero.title.2')}

{t('hero.lede')}

50
{t('hero.meta.1k')}
12+
{t('hero.meta.2k')}
4.86
{t('hero.meta.3k')}
Bio Barrier
goto({ name: 'product', id: heroP.id })} role="link" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter') goto({ name: 'product', id: heroP.id }); }} style={{ position:'absolute', left: 20, bottom: 20, zIndex: 3, cursor: 'pointer', display:'flex', alignItems:'center', gap: 10, padding: '7px 16px 7px 7px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', backdropFilter:'blur(10px)', border: '1px solid rgba(255,255,255,0.6)', boxShadow: '0 8px 24px rgba(0,0,0,0.10)' }}>
{t('hero.eyebrow').replace(/.*·\s*/, '')}
{heroP.name}
); // ── Slide B — product spotlight: copy + product on a tinted disc ── const slideSpotlight = (
{spot.award ? window.ECOPROF_AWARDS[spot.award]?.label : (lang==='uk'?'Бестселер':'Bestseller')}

{spot.name.split(' ').slice(0,-1).join(' ')}
{spot.name.split(' ').slice(-1)}

{tr(spot.sub)}.

{fmt(spot.price)}
{spot.name} goto({ name:'product', id: spot.id })} style={{ position:'relative', zIndex:2, height:'76%', objectFit:'contain', cursor:'pointer', filter:'drop-shadow(0 24px 40px rgba(42,36,30,0.18))' }}/>
); // ── Slide C — promo / gift: centered statement + product trio ── const promoTrio = [promoP, spot, heroP]; const slidePromo = (
{lang==='uk'?'Акція тижня · 2+1':'Deal of the week · 2+1'}

{lang==='uk'?<>Збери ритуал —
третій у подарунок:<>Build a ritual —
third one free}

{lang==='uk'?'Обери три засоби з улюблених ліній — найдешевший даруємо.':'Pick any three from our favourite lines — the cheapest is on us.'}

{promoTrio.map((p, i) => (
goto({ name:'product', id: p.id })} style={{ width: mobile?78:104, height: mobile?78:104, borderRadius: '50%', background:`radial-gradient(circle at 38% 32%, #fff, ${p.color||'#E6EBE4'} 82%)`, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', boxShadow:'0 8px 22px rgba(42,36,30,0.08)' }}> {p.name}
))}
); const slides = [slideEditorial, slideSpotlight, slidePromo]; const [idx, setIdx] = useState(0); useEffect(() => { const id = setInterval(() => setIdx(i => (i + 1) % slides.length), 6500); return () => clearInterval(id); }, [slides.length]); return (
{slides.map((S, i) => (
{S}
))}
); } // ───────────────────────── Category circles ───────────────────────── function CategoryCircles({ mobile }) { const { t, tr, lang, goto } = useStore(); // Find representative product image per category (first product with matching cat) const repFor = (catId) => window.ECOPROF_PRODUCTS.find(p => p.cat === catId); const countFor = (catId) => window.ECOPROF_PRODUCTS.filter(p => p.cat === catId).length; const countLabel = (n) => lang === 'uk' ? `${n} ${n === 1 ? 'продукт' : (n >= 2 && n <= 4 ? 'продукти' : 'продуктів')}` : `${n} ${n === 1 ? 'product' : 'products'}`; return (
{t('cats.eyebrow')}

{t('cats.title')}

{t('cats.sub')}

{!mobile && goto({ name: 'catalog' })}>{t('cats.all')} }
{window.ECOPROF_CATEGORIES.map((c) => { const rep = repFor(c.id); return (
goto({ name: 'catalog' })} style={{ '--ring-bg': c.color }}>
{rep ? {tr(c.name)} : }
{tr(c.name)}
); })}
); } // ───────────────────────── Product Card ───────────────────────── function ProductCard({ p, saleVariant = 'b' }) { const { goto, addToCart, setQty, cart, settings, t, tr, fmt, lang, isWished, toggleWishlist } = useStore(); const cat = window.ECOPROF_CATEGORIES.find(c => c.id === p.cat); const promoBadge = window.promoBadge(p.promo, lang); const cartItem = cart.find(c => c.id === p.id); const inCart = !!cartItem; const wished = isWished(p.id); return (
goto({ name: 'product', id: p.id })} style={{ '--cat-color': cat?.color }}>
{promoBadge && {promoBadge}} {inCart && ( {lang==='uk' ? 'У кошику' : 'In bag'} )}
{inCart ? (
e.stopPropagation()}> {cartItem.qty}
) : ( )}
{p.badges.includes('new') && NEW} {p.badges.includes('best') && {lang === 'uk' ? 'Бестселер' : 'Bestseller'}}
{tr(cat.name)} · {p.vol}
{p.name}
{tr(p.sub)}
{fmt(p.price)}
{p.rating.toFixed(2)}
); } // ───────────────────────── Bestsellers ───────────────────────── function Bestsellers({ mobile }) { const { t, lang } = useStore(); const [filter, setFilter] = useState('all'); const tabs = [ { id: 'all', label: t('best.tab.all') }, { id: 'best', label: t('best.tab.best') }, { id: 'new', label: t('best.tab.new') }, { id: 'promo', label: lang==='uk' ? 'Акції' : 'Promos' }, ]; const list = useMemo(() => { const all = window.ECOPROF_PRODUCTS; if (filter === 'all') return all.filter(p => p.badges.includes('best') || p.badges.includes('new') || p.promo).slice(0, 8); if (filter === 'best') return all.filter(p => p.badges.includes('best')).slice(0, 8); if (filter === 'new') return all.filter(p => p.badges.includes('new')).slice(0, 8); if (filter === 'promo') return all.filter(p => p.promo).slice(0, 8); return []; }, [filter]); return (
{t('best.eyebrow')}

{t('best.title')}

{t('best.sub')}

{tabs.map(tt => ( ))}
{list.map(p => )}
); } // ───────────────────────── Sale-variants showcase ───────────────────────── function SaleVariantsShowcase({ mobile }) { const { t } = useStore(); const sale = window.ECOPROF_PRODUCTS.find(p => p.id === 'p15'); const variants = [ { id: 'a', label: t('sale.a.label'), sub: t('sale.a.sub') }, { id: 'b', label: t('sale.b.label'), sub: t('sale.b.sub') }, { id: 'c', label: t('sale.c.label'), sub: t('sale.c.sub') }, { id: 'd', label: t('sale.d.label'), sub: t('sale.d.sub') }, ]; return (
{t('sale.eyebrow')}

{t('sale.title')}

{t('sale.sub')}

{variants.map(v => (
{t('sale.variant')} {v.id.toUpperCase()} {v.id}
{v.label}
{v.sub}
))}
); } // ───────────────────────── Awards strip ───────────────────────── function AwardsStrip() { const items = [ { medal: '#7E3A33', short: 'Vogue', label: "Editor's Choice 2025" }, { medal: '#523F73', short: 'Allure', label: 'Best of Beauty 2026' }, { medal: '#735320', short: 'Elle', label: 'Beauty Shortlist 2025' }, { medal: '#2F5A48', short: 'Cosmo', label: 'Clean Beauty Award' }, { medal: '#5A4634', short: 'GQ', label: 'Grooming Pick 2026' }, ]; return (
{items.map((a, i) => (
{a.short}
{a.label}
))}
); } // ───────────────────────── Quiz (LIVE) ───────────────────────── function QuizCallout({ mobile, embedded = false }) { const { t, tr, lang, goto, addToCart, fmt } = useStore(); // Questions definition. opts:[{id,label}] — single-select; ids feed recommendation logic. const Q = lang === 'uk' ? [ { id:'type', q:'Який твій тип шкіри?', opts:[ ['dry','Суха · стягується'],['normal','Нормальна'],['oily','Жирна · блищить'],['combo','Комбінована'] ]}, { id:'concern', q:'Що турбує найбільше?', opts:[ ['hydration','Зневоднення'],['age','Вік, тонус'],['acne','Акне, пори'],['pigment','Пігментація'],['sensitive','Чутливість'] ]}, { id:'age', q:'Скільки тобі років?', opts:[ ['<25','до 25'],['25-34','25 – 34'],['35-44','35 – 44'],['45+','45 та старше'] ]}, { id:'experience', q:'Який рівень догляду зараз?', opts:[ ['none','Тільки починаю'],['basic','Базовий ритуал'],['adv','Просунутий'] ]}, { id:'budget', q:'Який бюджет на місяць?', opts:[ ['low','до 1000 ₴'],['mid','1000 – 2500 ₴'],['high','2500 ₴ +'] ]}, { id:'texture', q:'Які текстури кремів подобаються?', opts:[ ['light','Легкі гель-креми'],['rich','Поживні, щільні'],['any','Будь-які'] ]}, { id:'spf', q:'Чи готова наносити SPF щодня?', opts:[ ['yes','Так, обов’язково'],['sometimes','Іноді'],['no','Ні'] ]}, ] : [ { id:'type', q:"What's your skin type?", opts:[ ['dry','Dry · feels tight'],['normal','Normal'],['oily','Oily · shiny'],['combo','Combination'] ]}, { id:'concern', q:"What's your main concern?", opts:[ ['hydration','Dehydration'],['age','Ageing, firmness'],['acne','Acne, pores'],['pigment','Pigmentation'],['sensitive','Sensitivity'] ]}, { id:'age', q:'Your age?', opts:[ ['<25','Under 25'],['25-34','25 – 34'],['35-44','35 – 44'],['45+','45 and over'] ]}, { id:'experience', q:'Routine experience?', opts:[ ['none','Just starting'],['basic','Basic routine'],['adv','Advanced'] ]}, { id:'budget', q:'Monthly budget?', opts:[ ['low','Under ₴1000'],['mid','₴1000 – 2500'],['high','₴2500+'] ]}, { id:'texture', q:'Cream textures you like?', opts:[ ['light','Light gel-creams'],['rich','Rich & nourishing'],['any','Either'] ]}, { id:'spf', q:'SPF every day?', opts:[ ['yes','Yes, always'],['sometimes','Sometimes'],['no','No'] ]}, ]; const UI = lang === 'uk' ? { step:(n,total)=>`Крок ${n} з ${total}`, time:'~60 сек', next:'Далі', back:'Назад', skip:'Пропустити', restart:'Пройти ще раз', resTitle:'Залиш заявку на консультацію', formSub:'Дерматолог вивчить твої відповіді та зв’яжеться, щоб підібрати догляд саме під твою шкіру.', yourAnswers:'Твої відповіді', fName:'Ім’я', fPhone:'Телефон', fComment:'Коментар (необов’язково)', fCommentPh:'Що ще варто знати про твою шкіру?', send:'Надіслати заявку', sentTitle:'Заявку прийнято', sentSub:'Дякуємо! Дерматолог зв’яжеться з тобою впродовж 2 годин у робочий час.', } : { step:(n,total)=>`Step ${n} of ${total}`, time:'~60 sec', next:'Next', back:'Back', skip:'Skip', restart:'Start over', resTitle:'Request your consultation', formSub:'Our dermatologist reviews your answers and gets in touch to build a routine for your skin.', yourAnswers:'Your answers', fName:'Name', fPhone:'Phone', fComment:'Comment (optional)', fCommentPh:'Anything else we should know about your skin?', send:'Send request', sentTitle:'Request received', sentSub:'Thank you! Our dermatologist will contact you within 2 working hours.', }; const [step, setStep] = useState(0); // 0..Q.length = result const [answers, setAnswers] = useState({}); const [form, setForm] = useState({ name:'', phone:'', email:'', comment:'', slot: (lang==='uk'?'Зранку (9:00–12:00)':'Morning (9:00–12:00)') }); const [sent, setSent] = useState(false); const [bookForm, setBookForm] = useState({ name:'', phone:'', email:'', slot: (lang==='uk'?'Зранку (9:00–12:00)':'Morning (9:00–12:00)') }); const [bookSent, setBookSent] = useState(false); const total = Q.length; const atResult = step >= total; // Summary of chosen answers — passed along as context to the dermatologist. const answerSummary = Q.map(q => { const opt = q.opts.find(([oid]) => oid === answers[q.id]); return opt ? opt[1] : null; }).filter(Boolean); const reset = () => { setStep(0); setAnswers({}); setForm({ name:'', phone:'', email:'', comment:'' }); setSent(false); }; // Bare interactive quiz panel — used both inline and embedded. const quizPanel = (
{!atResult && ( <> {/* Progress */}
{UI.step(step+1, total)} · {UI.time}
{Q.map((_,i) => ( ))}
{/* Question */}
{Q[step].q}
{/* Options */}
{Q[step].opts.map(([oid, oLabel]) => { const isSel = answers[Q[step].id] === oid; return (
{ setAnswers({ ...answers, [Q[step].id]: oid }); setTimeout(() => setStep(s => s + 1), 260); }} style={{ display:'flex', alignItems:'center', gap: 12, padding: '13px 16px', borderRadius: 12, border: isSel ? '1.5px solid var(--ep-accent)' : '1px solid var(--ep-line-2)', background: isSel ? 'var(--ep-accent-soft)' : 'transparent', fontSize: 14, color: 'var(--ep-ink)', transition: 'all .15s var(--ep-ease)', cursor: 'pointer', }}> {oLabel}
); })}
{/* Footer — auto-advances on select; only a Back control */}
{step > 0 ? ( ) : } {lang==='uk' ? 'Обери варіант' : 'Pick an option'}
)} {atResult && !sent && ( <>
✓ {UI.step(total, total)}
{UI.resTitle}
{UI.formSub}
{/* Consultation request form */}
{ e.preventDefault(); setSent(true); }} style={{ display:'flex', flexDirection:'column', gap: 12, marginTop: 6, paddingTop: 18, borderTop:'1px solid var(--ep-line-2)' }}>
setForm({...form, name:e.target.value})} placeholder={UI.fName} style={{ flex:1, minWidth:0, height: 52, padding:'0 16px', border:'1px solid var(--ep-line-2)', borderRadius: 12, background:'#fff', font:'15px var(--ep-font)', color:'var(--ep-ink)', outline:'none', boxSizing:'border-box' }}/> setForm({...form, phone:e.target.value})} placeholder={UI.fPhone} style={{ flex:1, minWidth:0, height: 52, padding:'0 16px', border:'1px solid var(--ep-line-2)', borderRadius: 12, background:'#fff', font:'15px var(--ep-font)', color:'var(--ep-ink)', outline:'none', boxSizing:'border-box' }}/>
setForm({...form, email:e.target.value})} placeholder="Email" style={{ height: 52, padding:'0 16px', border:'1px solid var(--ep-line-2)', borderRadius: 12, background:'#fff', font:'15px var(--ep-font)', color:'var(--ep-ink)', outline:'none', boxSizing:'border-box' }}/>
{lang==='uk'?'Зручний час':'Preferred time'}
{(lang==='uk' ? ['Зранку (9:00–12:00)','Вдень (12:00–16:00)','Ввечері (16:00–20:00)'] : ['Morning (9:00–12:00)','Afternoon (12:00–16:00)','Evening (16:00–20:00)'] ).map((s) => { const on = form.slot === s; return ( ); })}