// 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; // ───────────────────────── Store state (shared) ───────────────────────── const StoreCtx = createContext(null); function StoreProvider({ children, settings }) { const [route, setRoute] = useState({ name: 'home' }); const [cart, setCart] = useState([]); const [cartOpen, setCartOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [lang, setLang] = useState('uk'); const [toast, setToast] = useState(null); const [pulse, setPulse] = useState(0); const [wishlist, setWishlist] = useState([]); // [productId, ...] const [searchOpen, setSearchOpen] = useState(false); const [user, setUser] = useState(null); // { email, name, points, tier } | null const [authOpen, setAuthOpen] = useState(false); // login/register modal 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 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, }; 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 ───────────────────────── function Hero({ mobile }) { const { goto, t } = useStore(); return (
{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')}
{(() => { const heroP = window.ECOPROF_PRODUCTS.find(x => x.id === 'p11') || window.ECOPROF_PRODUCTS[0]; return ( <> {/* product chip overlay — bottom-left */}
{t('hero.eyebrow').replace(/.*·\s*/, '')}
{heroP.name}
); })()}
); } // ───────────────────────── 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)}
{countLabel(countFor(c.id))}
); })}
); } // ───────────────────────── 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 onSale = !!p.oldPrice; const variant = settings?.saleStyle || saleVariant; 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 }}>
{onSale && variant === 'd' &&
SALE −{Math.round((1 - p.price/p.oldPrice)*100)}%
} {onSale && variant === 'b' && ( −{Math.round((1 - p.price/p.oldPrice)*100)}% )} {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)}
{onSale && variant === 'a' && {fmt(p.oldPrice)}} {onSale && variant === 'c' && } {fmt(p.price)}
{p.rating.toFixed(2)}
); } // ───────────────────────── Bestsellers ───────────────────────── function Bestsellers({ mobile }) { const { t } = 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: 'sale', label: t('best.tab.sale') }, ]; const list = useMemo(() => { const all = window.ECOPROF_PRODUCTS; if (filter === 'all') return all.filter(p => p.badges.includes('best') || p.badges.includes('new') || p.oldPrice).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 === 'sale') return all.filter(p => p.oldPrice).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:'Пройти ще раз', addAll:'Додати всі в кошик', resTitle:'Твій ритуал готовий', resSub:(n)=>`Підібрали ${n} формул під твої відповіді. Можеш додати все в кошик або переглянути кожне.`, } : { step:(n,total)=>`Step ${n} of ${total}`, time:'~60 sec', next:'Next', back:'Back', skip:'Skip', restart:'Start over', addAll:'Add all to bag', resTitle:'Your routine is ready', resSub:(n)=>`Picked ${n} formulas matched to your answers. Add the lot or open each.`, }; const [step, setStep] = useState(0); // 0..Q.length = result const [answers, setAnswers] = useState({}); const total = Q.length; const atResult = step >= total; // recommendation logic const recommended = useMemo(() => { if (!atResult) return []; const A = answers; const P = window.ECOPROF_PRODUCTS; const picks = new Set(); const pick = (predicate, limit = 1) => { const found = P.filter(predicate).slice(0, limit); found.forEach(p => picks.add(p.id)); }; // 1. Cleanser based on type if (A.type === 'oily' || A.concern === 'acne') pick(p => p.cat === 'cleanse' && /focus|charcoal/i.test(p.name)); else if (A.type === 'dry' || A.type === 'normal') pick(p => p.cat === 'cleanse' && /angel|gentle/i.test(p.name)); else pick(p => p.cat === 'cleanse'); // 2. Toner pick(p => p.cat === 'tone'); // 3. Serum by concern if (A.concern === 'age') pick(p => p.cat === 'age' && /retinol|peptide|lift/i.test(p.name)); else if (A.concern === 'pigment') pick(p => /brightening|arbu|vit c/i.test(p.name)); else if (A.concern === 'acne') pick(p => p.cat === 'acne' && /azsal|sos/i.test(p.name)); else if (A.concern === 'sensitive') pick(p => /green barrier|centella|barrier/i.test(p.name) && p.cat === 'serum'); else pick(p => p.cat === 'serum' && /angels|barrier/i.test(p.name)); // 4. Cream if (A.texture === 'light') pick(p => p.cat === 'cream' && /cloud|gel|lift/i.test(p.name)); else if (A.texture === 'rich') pick(p => p.cat === 'cream' && /comfort|night|rich|radiance/i.test(p.name)); else pick(p => p.cat === 'cream' && /lift|radiance/i.test(p.name)); // 5. SPF if (A.spf === 'yes' || A.spf === 'sometimes') pick(p => p.cat === 'spf'); // budget cap let result = P.filter(p => picks.has(p.id)); if (A.budget === 'low') result = result.filter(p => p.price <= 1200); return result.slice(0, 4); }, [atResult, answers]); const recTotal = recommended.reduce((s, p) => s + p.price, 0); const reset = () => { setStep(0); setAnswers({}); }; // 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 })} 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 */}
{step > 0 ? ( ) : }
)} {atResult && ( <>
✓ {UI.step(total, total)}
{UI.resTitle}
{UI.resSub(recommended.length)}
{/* Compact product list */}
{recommended.map(p => (
goto({ name:'product', id: p.id })} style={{ display:'flex', alignItems:'center', gap: 12, padding: '10px 0', borderTop:'1px solid var(--ep-line-2)', cursor:'pointer', }}>
{p.name}
{tr(p.sub)}
{fmt(p.price)}
))}
{/* Add all */}
{lang==='uk'?'Разом':'Total'}
{fmt(recTotal)}
)}
); // Embedded: bare panel, parent provides framing if (embedded) return quizPanel; // Home: 2-column section with text on left, quiz on right inside ONE card return (
{lang === 'uk' ? 'Онлайн-консультація' : 'Online consult'}

{lang === 'uk' ? 'Потрібна персональна порада?' : 'Need a personal opinion?'}

{lang === 'uk' ? 'Дерматолог Ольга Лісняк проводить 30-хвилинну зустріч у Zoom: аналіз шкіри, протокол на 6 тижнів, підбір продуктів. 800 ₴.' : 'Dermatologist Olga Lisnyak runs a 30-min Zoom session: skin analysis, 6-week protocol, product picks. ₴800.'}

{lang === 'uk' ? 'Або пройди безкоштовний підбір праворуч — без реєстрації, за 60 секунд.' : 'Or take the free quiz on the right — no sign-up, 60 seconds.'}

{quizPanel}
); } // ───────────────────────── Editorial story ───────────────────────── function StoryBlock({ mobile }) { const { t } = useStore(); return (
{t('story.eyebrow')}

{t('story.title')}

{t('story.body')}

); } // ───────────────────────── Footer ───────────────────────── function Footer({ mobile }) { const { t, goto } = useStore(); return ( ); } Object.assign(window, { StoreProvider, useStore, useApplySettings, hexA, I, Header, PromoStrip, Hero, CategoryCircles, ProductCard, Bestsellers, SaleVariantsShowcase, AwardsStrip, QuizCallout, StoryBlock, Footer, LangToggle, CartToast, });