// store-pdp.jsx — Product detail, Cart drawer, Mobile menu (i18n-aware) const { useState: useS2, useEffect: useE2, useMemo: useM2 } = React; // ───────────────────────── Product page ───────────────────────── function ProductPage({ id, mobile }) { const p = window.ECOPROF_PRODUCTS.find(x => x.id === id); const cat = window.ECOPROF_CATEGORIES.find(c => c.id === p?.cat); const { addToCart, goto, settings, t, tr, fmt, lang, isWished, toggleWishlist, setCheckoutPrefill } = useStore(); const [qty, setQty] = useS2(1); const [tab, setTab] = useS2('description'); const [activeImg, setActiveImg] = useS2(0); const [bundle, setBundle] = useS2({}); const [qbOpen, setQbOpen] = useS2(false); const [qbSent, setQbSent] = useS2(false); const [qbForm, setQbForm] = useS2({ name: '', phone: '', email: '', comment: '' }); const [vidOpen, setVidOpen] = useS2(false); const [vidIdx, setVidIdx] = useS2(0); // Video model — products may have several clips (texture, about, how-to…). // Falls back to the legacy single `youtube` field. Labels resolve by kind. const VKIND = { texture: { uk:'Текстура', en:'Texture' }, about: { uk:'Про продукт', en:'About' }, howto: { uk:'Як наносити', en:'How to use' }, routine: { uk:'У ритуалі', en:'In routine' }, result: { uk:'Результат', en:'Result' }, }; const videos = (p?.videos && p.videos.length) ? p.videos : (p?.youtube ? [{ kind:'about', dur:'3:42' }] : []); const vLabel = (v) => (VKIND[v.kind] || VKIND.about)[lang]; const fbtIds = (window.ECOPROF_BUNDLES[id] || [id, 'p11', 'p17', 'p25']).filter(x => x !== id); const fbtList = [p, ...fbtIds.map(fid => window.ECOPROF_PRODUCTS.find(x => x.id === fid)).filter(Boolean)]; useE2(() => { const init = {}; fbtList.forEach(x => { init[x.id] = true; }); setBundle(init); }, [id]); if (!p) return null; const bundleSelected = fbtList.filter(x => bundle[x.id]); const bundleTotal = bundleSelected.reduce((s, x) => s + x.price, 0); // No combo discount — buying the full set unlocks a free gift instead. const bundleGiftQ = 3; // min items in set to earn the gift const bundleGiftEarned = bundleSelected.length >= bundleGiftQ; const sameLine = window.ECOPROF_PRODUCTS.filter(x => x.cat === p.cat && x.id !== p.id); let related = sameLine.slice(0, 4); // If category has < 4 products, supplement with bestsellers from other lines if (related.length < 4) { const extras = window.ECOPROF_PRODUCTS .filter(x => x.id !== p.id && x.cat !== p.cat && x.badges.includes('best')) .filter(x => !related.some(r => r.id === x.id)) .slice(0, 4 - related.length); related = [...related, ...extras]; } const relatedTitleKey = sameLine.length > 0 ? 'related.same' : 'related.also'; const variant = settings?.saleStyle || 'b'; const promoBadge = window.promoBadge(p.promo, lang); const promoLine = window.promoLine(p.promo, lang); const onSale = false; // Gallery slides: base shots + optional before/after + optional video // Gallery: product images (same size, like real admin uploads) + optional before/after. const slides = [0, 1, 2, ...(p.beforeAfter ? ['ba'] : [])]; const curIdx = Math.max(0, slides.indexOf(activeImg)); const goSlide = (dir) => setActiveImg(slides[(curIdx + dir + slides.length) % slides.length]); // Mobile swipe on the gallery image → prev/next slide. Touch-only (desktop uses arrows). const touchX = React.useRef(null); const onGalleryTouchStart = (e) => { touchX.current = e.touches[0] ? e.touches[0].clientX : null; }; const onGalleryTouchEnd = (e) => { if (touchX.current == null) return; const endX = e.changedTouches[0] ? e.changedTouches[0].clientX : touchX.current; const dx = endX - touchX.current; touchX.current = null; if (slides.length > 1 && Math.abs(dx) > 40) goSlide(dx < 0 ? 1 : -1); }; return (
goto({ name: 'home' })} style={{ cursor:'pointer' }}>{t('nav.shop')} / {tr(cat.name)} / {p.name}
{/* Gallery — full-bleed image, thumbnails overlay on hover */}
{/* why: gallery badges (NEW / promo / award) show only on the product photos. In the before/after view they collide top-right with the «N днів» badge — that view has its own До / N днів labels, so hide gallery badges there. */} {activeImg !== 'ba' && ( <> {p.badges.includes('new') && ( NEW )} {promoBadge && ( {promoBadge} )} {p.award && (
{window.ECOPROF_AWARDS[p.award]?.label}
)} )} {slides.length > 1 && ( <> )} {/* Main shows BA composition when BA thumb is selected */} {activeImg === 'ba' && p.beforeAfter ? (
{/* padding:0 overrides .ep-pdp-main img { padding:6% } — that inset is for transparent product PNGs, not the full-bleed before/after photo */}
{lang==='uk' ? 'До' : 'Before'}
{lang==='uk' ? `${p.beforeAfter.days} днів` : `${p.beforeAfter.days} days`}
) : ( )}
{/* Gallery bar (watch-video + thumbnails) — SIBLING of .ep-pdp-main, not a child. why: on desktop it's an absolute overlay (hover-revealed) over the image; on mobile it becomes a static row BELOW the image so it no longer overlaps the photo. */} {(videos.length > 0 || slides.length > 1) && (
{videos.length > 0 && ( )} {slides.length > 1 && (
{slides.map((key) => { const active = activeImg === key; if (key === 'ba') return ( ); return ( ); })}
)}
)}
{/* Info */}
{tr(cat.name)} · {p.vol}

{p.name}

{tr(p.sub)}

{Array.from({length:5}).map((_,i) => )} {p.rating.toFixed(2)} · {p.reviews} {t('pdp.reviews')}
{p.award && (
{[p.award, 'editor-choice-2025'].slice(0, 2).map((a, i) => { const aw = window.ECOPROF_AWARDS[a]; if (!aw) return null; return (
{aw.label.split(' ')[0].slice(0,3)}
{aw.label}
{tr(aw.sub)}
); })}
)}
{fmt(p.price)}
{promoLine && (
{promoBadge} {promoLine}
)} {/* Before/After & video live in the gallery (thumbnail + main view) */}
    {[t('pdp.bullets.1'), t('pdp.bullets.2'), t('pdp.bullets.3'), t('pdp.bullets.4')].map((b, i) => (
  • {b}
    • ))}
{/* ── Selling-landing sections ── */} {/* Frequently Bought Together */}
{t('fbt.eyebrow')}

{t('fbt.title')}

{fbtList.map((x, i) => (
setBundle({ ...bundle, [x.id]: !bundle[x.id] })}>
{x.name}
{fmt(x.price)}
{i < fbtList.length - 1 && +} ))} =
{lang==='uk' ? 'Подарунок' : 'Gift'}
{lang==='uk' ? 'косметичка + 3 семпли' : 'pouch + 3 samples'}
{t('fbt.total')} {fmt(bundleTotal)}
{bundleGiftEarned ? ( {lang==='uk' ? 'Подарунок у замовленні' : 'Gift included'} ) : ( {lang==='uk' ? `Ще ${bundleGiftQ - bundleSelected.length} до подарунка` : `${bundleGiftQ - bundleSelected.length} more to the gift`} )}
{/* Repeat CTA */} addToCart(p.id, qty)}/> {/* Related */} {related.length > 0 && (
{sameLine.length > 0 ? `${tr(cat.name)} · ${t('pdp.relSub')}` : (lang === 'uk' ? 'Також рекомендуємо' : 'Also recommended')}

{sameLine.length > 0 ? t('pdp.related') : (lang === 'uk' ? 'Може зацікавити' : 'You might also like')}

{related.map(rp => )}
)} {/* FAQ + reviews — last sections before footer */}
{qbOpen && (
setQbOpen(false)}>
e.stopPropagation()}> {( <>
{lang==='uk' ? 'Купівля в 1 клік' : '1-click order'}

{lang==='uk' ? 'Швидке замовлення' : 'Quick order'}

{p.name}
{qty} × {fmt(p.price)}
{fmt(p.price*qty)}
{lang==='uk' ? 'Кількість' : 'Quantity'}
{qty}