{label}
);
// Category structure. Order mirrors the 6 mobile-specific category names
// F1 (v0.8.0): consolidated 6 mobile categories (demo / pricing / trust /
// reviews_qa / structure / growth) into the same 4 sections desktop now
// uses (demo / group1 / group2 / ux_real). Mobile-only tweaks land in
// group1 (topcats_nav, nutrition_tab, ingredients_tab, faq_block,
// review_badges) and ux_real (variant_table). Mapping mirrors
// docs/PHASING-PLAN.md F1 final mapping.
const categories = [
{
id: 'demo',
title: t.tweak_cat_demo,
desc: t.tweak_cat_demo_desc,
bool: ['discount'],
render: () => [
renderSegment('lang', t.tweak_lang_label, [
{ v: 'sk', l: 'SK' }, { v: 'hu', l: 'HU' },
]),
renderSegment('stock', t.tweak_stock_label, [
{ v: 'in', l: t.tweak_stock_in },
{ v: 'low', l: t.tweak_stock_low },
{ v: 'out', l: t.tweak_stock_out },
]),
renderSwitch('discount', t.tweak_discount_label, t.tweak_discount_desc),
renderSegment('product_state', t.tweak_product_state_label, [
{ v: 'A', l: t.tweak_product_state_a },
{ v: 'P', l: t.tweak_product_state_p },
]),
],
},
{
id: 'group1',
title: t.tweak_cat_group1,
desc: t.tweak_cat_group1_desc,
bool: [
'ai_summary', 'ai_beta_badge',
'savings_line', 'social_proof',
'trust_strip', 'evidence_line', 'valueprops_strip',
'alt_names', 'price_per_kg',
'qa_sort', 'qa_stats', 'review_badges',
'promo_bar', 'sticky_tabs',
'topcats_nav', 'nutrition_tab', 'ingredients_tab', 'faq_block',
'bundle_promo', 'recently_viewed',
],
render: () => [
renderSwitch('ai_summary', t.tweak_ai_summary_label, t.tweak_ai_summary_desc),
renderSwitch('ai_beta_badge', t.tweak_ai_beta_badge_label, t.tweak_ai_beta_badge_desc),
renderSwitch('savings_line', t.tweak_savings_line_label, t.tweak_savings_line_desc),
renderSwitch('social_proof', t.tweak_social_proof_label, t.tweak_social_proof_desc),
renderSwitch('trust_strip', t.tweak_trust_strip_label, t.tweak_trust_strip_desc),
renderSwitch('evidence_line', t.tweak_evidence_line_label, t.tweak_evidence_line_desc),
renderSwitch('valueprops_strip', t.tweak_valueprops_strip_label, t.tweak_valueprops_strip_desc),
renderSwitch('alt_names', t.tweak_alt_names_label, t.tweak_alt_names_desc),
renderSwitch('price_per_kg', t.tweak_price_per_kg_label, t.tweak_price_per_kg_desc),
renderSwitch('qa_sort', t.tweak_qa_sort_label, t.tweak_qa_sort_desc),
renderSwitch('qa_stats', t.tweak_qa_stats_label, t.tweak_qa_stats_desc),
renderSwitch('review_badges', t.tweak_review_badges_label, t.tweak_review_badges_desc),
renderSwitch('promo_bar', t.tweak_promo_bar_label, t.tweak_promo_bar_desc),
renderSwitch('sticky_tabs', t.tweak_sticky_tabs_label, t.tweak_sticky_tabs_desc),
renderSwitch('topcats_nav', t.tweak_topcats_nav_label, t.tweak_topcats_nav_desc),
renderSwitch('nutrition_tab', t.tweak_nutrition_tab_label, t.tweak_nutrition_tab_desc),
renderSwitch('ingredients_tab', t.tweak_ingredients_tab_label, t.tweak_ingredients_tab_desc),
renderSwitch('faq_block', t.tweak_faq_block_label, t.tweak_faq_block_desc),
renderSwitch('bundle_promo', t.tweak_bundle_promo_label, t.tweak_bundle_promo_desc),
renderSwitch('recently_viewed', t.tweak_recently_viewed_label, t.tweak_recently_viewed_desc),
],
},
{
id: 'group2',
title: t.tweak_cat_group2,
desc: t.tweak_cat_group2_desc,
bool: ['expiration_warn', 'qty_tiers', 'gift_bonus'],
render: () => [
renderSwitch('expiration_warn', t.tweak_expiration_warn_label, t.tweak_expiration_warn_desc),
renderSwitch('qty_tiers', t.tweak_qty_tiers_label, t.tweak_qty_tiers_desc),
renderSwitch('gift_bonus', t.tweak_gift_bonus_label, t.tweak_gift_bonus_desc),
],
},
{
id: 'ux_real',
title: t.tweak_cat_ux_real,
desc: t.tweak_cat_ux_real_desc,
bool: ['discount_timer', 'gallery_flags', 'cross_sell', 'ship_opts', 'variant_table', 'toasts'],
render: () => [
renderSegment('flavor_picker_variant', t.tweak_flavor_picker_label, [
{ v: 'dropdown', l: t.tweak_flavor_picker_dropdown },
{ v: 'pills', l: t.tweak_flavor_picker_pills },
]),
renderSwitch('discount_timer', t.tweak_discount_timer_label, t.tweak_discount_timer_desc),
renderSwitch('gallery_flags', t.tweak_gallery_flags_label, t.tweak_gallery_flags_desc),
renderSwitch('cross_sell', t.tweak_cross_sell_label, t.tweak_cross_sell_desc),
renderSwitch('ship_opts', t.tweak_ship_opts_label, t.tweak_ship_opts_desc),
renderSwitch('variant_table', t.tweak_variant_table_label, t.tweak_variant_table_desc),
renderSwitch('toasts', t.tweak_toasts_label, t.tweak_toasts_desc),
],
},
];
// F1: bulk toggle helper (twin of desktop bulkToggle).
const bulkToggle = (cat, value) => {
(cat.bool || []).forEach(k => onChange(k, value));
};
const closeLabel = t.tweak_panel_close || (t.restock_close_aria || 'Close');
return (
<>
{open && (
{options.map(o => (
))}
{ if (e.target === e.currentTarget) setOpen(false); }}
>
)}
);
}
// ---------------------------------------------------------------------------
// G2 (v0.9.1): MFlavorPicker - mobile bottom-sheet variant of the flavor
// selector. Mirrors desktop DFlavorPicker (search, keyboard nav, badges,
// available count) but opens as a slide-up sheet (matches the existing
// p-restock-sheet / p-share-sheet patterns on mobile). Pills variant is
// preserved as alternative via tweak `flavor_picker_variant: 'pills'`.
// ---------------------------------------------------------------------------
function MFlavorPicker({ flavors, currentSize, sizeLabel, current, getVariant, t, lang, onPick }) {
const [open, setOpen] = useState(false);
const [query, setQuery] = useState('');
const [active, setActive] = useState(0);
const inputRef = useRef(null);
const listRef = useRef(null);
const rows = flavors.map((f) => {
const variant = getVariant(currentSize, f.id);
const exists = !!variant;
const isOut = exists && variant.stock === 'out';
const isLow = exists && variant.stock === 'low';
const isRestk = exists && variant.stock === 'restock';
const hasDisc = exists && variant.orig && variant.orig > variant.price;
const discPct = hasDisc ? Math.round((1 - variant.price / variant.orig) * 100) : 0;
const label = (t.flavors && t.flavors[f.id]) || f.label;
return { ...f, variant, exists, isOut, isLow, isRestk, hasDisc, discPct, label };
});
const q = query.trim().toLowerCase();
const visible = rows.filter(r => !q || r.label.toLowerCase().includes(q));
const availCount = rows.filter(r => r.exists && !r.isOut).length;
const totalCount = rows.length;
const selected = rows.find(r => r.id === current) || rows[0];
// Reset query + auto-focus search input on open. ESC closes (registered on
// sheet keydown). Body scroll lock not strictly needed since sheet covers
// viewport via overlay click handler.
useEffect(() => {
if (open) {
setQuery('');
const idx = rows.findIndex(r => r.id === current);
setActive(idx >= 0 ? idx : 0);
const tmr = setTimeout(() => { if (inputRef.current) inputRef.current.focus(); }, 80);
return () => clearTimeout(tmr);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
// Scroll active row into view on keyboard nav
useEffect(() => {
if (!open || !listRef.current) return;
const el = listRef.current.querySelector('.is-active');
if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
}, [active, open]);
const selectFlavor = (id) => {
onPick(id);
setOpen(false);
};
const onKeyDown = (e) => {
if (e.key === 'Escape') { e.preventDefault(); setOpen(false); return; }
if (e.key === 'ArrowDown') {
e.preventDefault();
setActive(a => Math.min(visible.length - 1, a + 1));
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setActive(a => Math.max(0, a - 1));
} else if (e.key === 'Enter') {
e.preventDefault();
const r = visible[active];
if (r && r.exists && !r.isOut) selectFlavor(r.id);
}
};
const fmt = (n) => n.toFixed(2).replace('.', ',') + ' €';
const giftLabel = t.flavor_gift_short || (lang === 'hu' ? '+ ajándék' : '+ darček');
const lowLabel = t.flavor_stock_low || (lang === 'hu' ? 'kevés' : 'málo');
const restkLabel = t.flavor_stock_restock || (lang === 'hu' ? 'úton' : 'na ceste');
const outLabel = t.flavor_stock_out || (lang === 'hu' ? 'kifogyott' : 'vypredané');
const noneLabel = t.flavor_unavail || (lang === 'hu' ? 'nem elérhető' : 'nedostupné');
const placeholder = t.flavor_search_placeholder || (lang === 'hu' ? 'Íz keresése...' : 'Hľadať príchuť...');
const noResults = t.flavor_no_results || (lang === 'hu' ? 'Nincs találat' : 'Žiadne výsledky');
const closeLabel = t.restock_close_aria || (lang === 'hu' ? 'Bezárás' : 'Zavrieť');
const countLabel = (lang === 'hu')
? (availCount + ' / ' + totalCount + (sizeLabel ? (' (' + sizeLabel + ')') : ''))
: (availCount + ' z ' + totalCount + (sizeLabel ? (' v ' + sizeLabel) : ''));
return (
<>
{open && (
{ if (e.target === e.currentTarget) setOpen(false); }}
role="presentation"
>
)}
);
}
function MobilePDP() {
const initialStock = window.__TWEAKS?.stock || 'in';
const initialDiscount = window.__TWEAKS?.discount !== false;
const initialLang = window.__TWEAKS?.lang || 'sk';
const [stock, setStock] = useState(initialStock);
const [discount, setDiscount] = useState(initialDiscount);
const [lang, setLang] = useState(initialLang);
const [galIdx, setGalIdx] = useState(0);
const [size, setSize] = useState('1kg');
// chocolate-deluxe matches PDPDesktop default (highest in-stock 1kg variant).
const [flavor, setFlavor] = useState('chocolate-deluxe');
const [qty, setQty] = useState(1);
const [fav, setFav] = useState(false);
const [added, setAdded] = useState(false);
// v0.7.5 A3: default to 'dose' since nutri + ingr tabs are off by default.
// Real DB has NULL nutritional_informations / composition_allergens for
// WPC 80; only use_dosing is populated.
const [tab, setTab] = useState('dose');
const [descExpanded, setDescExpanded] = useState(false);
const [filter, setFilter] = useState('all');
const [sort, setSort] = useState('recent');
const [faqOpen, setFaqOpen] = useState(new Set([0]));
// M1d footer accordion: Set of open section indices. All sections start
// collapsed (mobile pattern). Brand block + bottom bar stay always visible.
const [footOpen, setFootOpen] = useState(new Set());
const [toasts, setToasts] = useState([]);
const [addedCross, setAddedCross] = useState(new Set());
const [showSticky, setShowSticky] = useState(false);
const [cartCount, setCartCount] = useState(3);
const [helpful, setHelpful] = useState(new Set());
const [aiEnabled, setAiEnabled] = useState(window.__TWEAKS?.ai_summary !== false);
const [aiVariant, setAiVariant] = useState(window.__TWEAKS?.ai_variant || 'classic');
// ----- M1c: sticky tab anchor nav state -----
// Toggleable via `sticky_tabs`; default ON. Tracks which section is
// currently in the upper portion of the .p-body scroll viewport so
// the matching pill highlights.
const [stickyTabs, setStickyTabs] = useState(window.__TWEAKS?.sticky_tabs !== false);
const [activeTabAnchor, setActiveTabAnchor] = useState('descr');
// Variant matrix card list section visibility (M1c block 2). Default OFF
// because cross-sell is the primary upsell pattern; toggling this ON
// surfaces the full size x flavor matrix as anchor target #variants.
const [variantTable, setVariantTable] = useState(window.__TWEAKS?.variant_table === true);
// ----- M1b: Customer Q&A module state -----
// Mirrors PDPDesktop Q&A wiring 1:1 so behaviour stays identical across
// breakpoints; UI is restyled mobile-first via .p-qa-* classes below.
const [qaSort, setQaSort] = useState('helpful'); // helpful | recent | unanswered
const [qaVisible, setQaVisible] = useState(5); // show-more pagination cursor
const [qaLiked, setQaLiked] = useState(new Set()); // session-only +1 toggles
const [qaFormOpen, setQaFormOpen] = useState(false); // collapsed inline form
const [qaForm, setQaForm] = useState({ name: '', email: '', variantId: '', question: '', consent: false });
const [qaSubmitting, setQaSubmitting] = useState(false);
const [faqBlock, setFaqBlock] = useState(window.__TWEAKS?.faq_block === true);
// ----- M2a: gift indicator on variant pills -----
// Same key as PDPDesktop so the shared tweak panel toggles both at once.
// Default ON (mirrors desktop). When OFF, gift overlays disappear from
// size + flavor pills (and the future gift-bonus block).
const [giftBonus, setGiftBonus] = useState(window.__TWEAKS?.gift_bonus !== false);
// ----- M2b: quantity tier discount block -----
// Mirrors PDPDesktop qtyTiers state. Default ON; toggling OFF hides the
// 3-row tier table that sits above the qty stepper + ATC button.
const [qtyTiers, setQtyTiers] = useState(window.__TWEAKS?.qty_tiers !== false);
// ----- M2b: shipping options expander -----
// Mirrors PDPDesktop shipOptsOn / shipOpen pair. Toggle key matches desktop
// (ship_opts) so the shared tweak panel flips both at once. Default ON.
const [shipOpts, setShipOpts] = useState(window.__TWEAKS?.ship_opts !== false);
const [shipOpen, setShipOpen] = useState(false);
// ----- M2a: restock notification bottom sheet -----
// Slide-up sheet (mobile pattern, NOT a centered modal) shown when user
// taps an OOS / restock variant pill or the main ATC button while the
// active variant is unavailable. Mirrors PDPDesktop restockOpen wiring;
// form submit is mock-only (no backend) and auto-closes after 2s.
const [restockOpen, setRestockOpen] = useState(false);
const [restockEmail, setRestockEmail] = useState('');
const [restockSent, setRestockSent] = useState(false);
// ----- M3a: alternative names line below evidence -----
// Mirrors PDPDesktop alt_names tweak. Default ON. When OFF the small
// italic synonyms strip below the evidence line is hidden so the head
// column collapses tighter.
const [altNames, setAltNames] = useState(window.__TWEAKS?.alt_names !== false);
// ----- M3b: price-sub savings clause + per-kg gate -----
// Same keys as PDPDesktop so the shared tweak panel toggles both at once.
// savings_line gates the "Ušetríš X EUR" tail after VAT + per-kg; price_per_kg
// gates the inline price/kg readout. Both default ON.
const [savingsLine, setSavingsLine] = useState(window.__TWEAKS?.savings_line !== false);
const [pricePerKgOn, setPricePerKgOn] = useState(window.__TWEAKS?.price_per_kg !== false);
// ----- M3b: discount countdown ticker -----
// Same key as PDPDesktop discount_timer. Default ON; gates the live
// countdown chip rendered after .p-price-sub (mock discountTo dates are
// injected into M_VARIANTS at module load so both states are visible).
const [discountTimer, setDiscountTimer] = useState(window.__TWEAKS?.discount_timer !== false);
// ----- M3b: product expiration warning -----
// Mirrors PDPDesktop expiration_warn (Latte: $productExpiration). Default
// ON for mobile (desktop default OFF) so the chip is visible without
// toggling. Renders below the countdown, above the bullets.
const [expirationWarn, setExpirationWarn] = useState(window.__TWEAKS?.expiration_warn !== false);
// ----- M3b: trust strip below gallery -----
// Same key as PDPDesktop trust_strip (4-tile grid: 24h ship / 30 day
// return / lab tested / SK production). Default ON. Renders between the
// gallery thumbnails and the head block.
const [trustStrip, setTrustStrip] = useState(window.__TWEAKS?.trust_strip !== false);
// ----- v0.7.5 A3: nutrition + ingredients tabs (default OFF) -----
// The real namaximum.sk PDP for WPC 80 does not render these sections
// because product_translations.nutritional_informations,
// composition_allergens, and active_substances are all NULL in DB. We
// keep them tweakable for products that do populate those fields.
// Default tab falls back to 'dose' (use_dosing IS populated in DB) when
// both flags are off, see useEffect below.
const [nutritionTab, setNutritionTab] = useState(!!window.__TWEAKS?.nutrition_tab);
const [ingredientsTab, setIngredientsTab] = useState(!!window.__TWEAKS?.ingredients_tab);
// ----- M4a: top promo announcement bar -----
// Same key as PDPDesktop promo_bar. Default OFF (matches desktop) so the
// dark single-line strip above the .p-hd header is opt-in. Mobile copy
// is intentionally compact (free shipping line only) - no extra links
// and no country flag emoji per design rules.
const [promoBar, setPromoBar] = useState(!!window.__TWEAKS?.promo_bar);
// ----- M4a: value-props strip under top cats -----
// Same key as PDPDesktop valueprops_strip. Default ON for mobile because
// mobile lacks the desktop wide trust strip in eyeshot above-the-fold;
// this 4-pill horizontal scroll row buys an extra density beat right
// before the breadcrumbs. Copy is mobile-tuned (gift / shipping / 30 day
// return / lab tested) and does NOT use t.valueprops because the desktop
// bundle expects 4 different items.
const [valuePropsStrip, setValuePropsStrip] = useState(window.__TWEAKS?.valueprops_strip !== false);
// F2 (v0.8.1): mobile parity hooks for tweaks that previously had no
// state - they were always rendered regardless of the panel toggle.
// Now real-style state requires actual gating. Defaults follow F2
// flip (evidence_line / qa_stats / qa_sort / review_badges /
// ai_beta_badge / social_proof / review_topics / review_reply_cta
// all default false on mobile + desktop).
const [evidenceLine, setEvidenceLine] = useState(window.__TWEAKS?.evidence_line === true);
const [qaStatsShow, setQaStatsShow] = useState(window.__TWEAKS?.qa_stats === true);
const [qaSortShow, setQaSortShow] = useState(window.__TWEAKS?.qa_sort === true);
const [reviewBadges, setReviewBadges] = useState(window.__TWEAKS?.review_badges === true);
const [aiBetaBadge, setAiBetaBadge] = useState(window.__TWEAKS?.ai_beta_badge === true);
const [socialProof, setSocialProof] = useState(window.__TWEAKS?.social_proof === true);
// ----- v0.7.1 polish: functional gift picker bottom-sheet -----
// giftOpen toggles the slide-up sheet; giftSelected holds the IDs of
// gifts the user has picked (max GIFT_PICKS_TOTAL = 3 out of 5 cards).
// Replaces the previous static 'Vybrali ste 2 z 3 darcekov' label so
// the prototype matches real namaximum.sk picker behaviour.
const [giftOpen, setGiftOpen] = useState(false);
const [giftSelected, setGiftSelected] = useState([]);
const giftFull = giftSelected.length >= GIFT_PICKS_TOTAL;
const toggleGiftPick = (id) => {
setGiftSelected(prev => {
if (prev.includes(id)) return prev.filter(x => x !== id);
if (prev.length >= GIFT_PICKS_TOTAL) return prev; // ignore over-pick
return [...prev, id];
});
};
// ----- v0.7.1 polish: gallery image lightbox -----
// null = closed, number = active gallery slide index. Opened by
// tapping the hero image; close via X button, backdrop click, or ESC.
// Prev/next arrows step through GAL_SLIDES wrapping at the ends.
const [lightbox, setLightbox] = useState(null);
// ----- v0.7.1 polish: value-props rotator index -----
// Cycles 1 pill at a time every 3500ms instead of showing all four
// in a horizontal scroll. Index resets to 0 when the rotator is
// toggled back on after being hidden. Matches a common mobile
// pattern (e.g. shopify checkouts) for surfacing trust pills.
const [vpIndex, setVpIndex] = useState(0);
// ----- v0.7.1 polish: top categories strip (mobile default OFF) -----
// Real namaximum.sk on mobile uses the hamburger menu only; the desktop
// habit of a horizontal category strip below the header is redundant
// here. Kept tweakable via `topcats_nav` so QA can flip it back on.
const [topcatsNav, setTopcatsNav] = useState(window.__TWEAKS?.topcats_nav === true);
// ----- M4a: share button bottom-sheet -----
// Mobile pattern: tap the share icon next to ATC opens a slide-up sheet
// (NOT a popdown like desktop). Same 4 channels (copy link / email /
// Facebook / WhatsApp) as PDPDesktop, same i18n strings
// (t.share_btn / share_copy / share_email / share_fb / share_wa).
const [shareOpen, setShareOpen] = useState(false);
// ----- M4b: unified tweak bag for
{t.flavor}
{countLabel}
{ setQuery(e.target.value); setActive(0); }}
onKeyDown={onKeyDown}
autoComplete="off"
spellCheck={false}
/>
{query && (
)}
{visible.length === 0 && (
{noResults}
)}
{visible.map((r, i) => {
const dis = !r.exists || r.isOut;
const isCur = r.id === current;
return (
);
})}
{activeVariant.image
? 
:
{M_PRODUCT.name}
{selSize.label} · {t.flavors[selFlavor.id] || selFlavor.label} · {toEur(unitPrice)}
{/* Breadcrumbs */}
{/* GALLERY */}
{/* M3b: gallery overlay flags. Sale pill (top-left, below the
cert circles) only shows when the active variant carries an
orig price beating raw; recommend pill is always-on (mirrors
the in-head .p-flags row but in pill-on-image form, matching
real eshop visual). pointer-events: none on the wrapper so
the flags never block dot navigation underneath. */}
{/* M3b: trust strip below the gallery (Latte: tile group above the
product description). 4 reassurance tiles in a 2x2 grid: 24h
shipping, 30 day return, lab tested, SK production. Mirrors
PDPDesktop .pdp-d-trust 1:1 (same icon set, same SK/HU copy)
but tuned for mobile via .p-trust-* selectors. Tweakable via
trust_strip (default ON). */}
{trustStrip && (
{
const view = flavorView({ id: fId }, sId);
return view.variant;
}}
t={t}
lang={lang}
onPick={(id) => setFlavor(id)}
/>
)}
{/* ADD TO CART BLOCK */}
)}
{/* F3 (v0.8.2): mobile cross-sell renders horizontal scroll cards
matching real combinations.latte (linklist variant tried + cut). */}
{/* PRODUCT INFO - long description + storage box (mirrors namaximum #info Latte tab) */}
{/* v0.8.6: section subtitles dropped from mobile h2s per user
feedback ('na mobile sa casto tieto titles a subtitles vedla
seba nezmestia.. mozno tie subtitles ani netreba'). Title
alone is enough on the small viewport; matching desktop
still carries .pdp-d-section-sub. */}
{/* CERTIFICATIONS */}
{/* VARIANT MATRIX CARD LIST (M1c) - mobile-friendly equivalent of the
desktop pdp-d-vartab table. Tables don't scale well on 360px so
we render a vertical card list grouped by size. Tapping a card
switches the active (size, flavor) variant which keeps the
buy-panel and gallery in sync. Toggleable via `variant_table`
(default OFF). */}
{variantTable && (
{/* v0.8.6: variant-count subtitle dropped (see desc note). */}
);
})}
)}
{/* REVIEWS */}
{/* Stats strip: 3 compact tiles in one mobile row.
F2 (v0.8.1): qa_stats tweak - real eshop has plain count
hint only. Stats grid is opt-in. */}
{qaStatsShow && (
VIDEORECENZIA
{/* v0.7.1 polish: share trigger paired with .p-gal-zoom in the
bottom-right gallery overlay. Moved out of the ATC row so
'Pridat do kosika' regains its full label width. Same i18n
key (t.share_btn) and handler (setShareOpen) as before. */}
{GAL_SLIDES.map((s, i) => (
setLightbox(i)}
style={{ cursor: 'zoom-in', ...(s.bg ? { background: s.bg } : null) }}
role="button"
aria-label={t.share_btn /* generic; lightbox uses its own labels */}
>
{/* v0.7.6 B1: branch order mirrors PDPDesktop. variant uses
the brand packshot (M_MAIN_IMAGE) so the hero stays
flavor-agnostic and matches desktop's D_MAIN_IMAGE.
kind:'image' slides use their own src. ProductVisual
stays as the fallback for tub-lg / video placeholders.
v0.8.5: was activeVariant.image which leaked the
chocolate flavor pack into the hero on initial load. */}
{s.kind === 'variant' ? (
) : s.kind === 'image' ? (
) : (
))}
{GAL_SLIDES.map((_, i) => )}
{GAL_SLIDES.map((s, i) => (
))}
{[
{ ic: 'truck', t: lang === 'hu' ? 'Szállítás 24 óra' : 'Doručenie 24 h', d: lang === 'hu' ? '14:00-ig rendelés esetén' : 'Pri objednávke do 14:00' },
{ ic: 'shield', t: lang === 'hu' ? '30 napos visszaküldés' : '30 dní na vrátenie', d: lang === 'hu' ? 'Bontatlan árura' : 'Bez udania dôvodu' },
{ ic: 'flask', t: lang === 'hu' ? 'Labor tesztelt' : 'Lab testované', d: lang === 'hu' ? 'Független tanúsítvány' : 'Nezávislý certifikát' },
{ ic: 'package', t: lang === 'hu' ? 'SK gyártás' : 'Výroba v SR', d: 'Spišská Nová Ves' },
].map((r, i) => (
)}
{/* HEAD BLOCK */}
{r.t}
{r.d}
{/* Multi-brand row above title (mirrors PDPDesktop pdp-d-brandrow):
"Značka: Warrior, Natural Nutrition" with each brand a link.
Falls back to the single M_PRODUCT.brand when the i18n bundle
does not ship a brands array. */}
{/* SHORT DESC */}
{t.brand_label}:
{((t.brands && t.brands.length) ? t.brands : [M_PRODUCT.brand]).map((b, i, arr) => (
{b}{i < (arr.length - 1) ? ',' : ''}
))}
{M_PRODUCT.name}
{/* Product flag chips. Mirrors PDPDesktop .pdp-d-flags: SALE chip shows only when an active orig price beats the current price (gated by the discount tweak via origPrice), RECOMMEND chip is always-on for the demo product. */}
{origPrice && rawPrice < origPrice && {t.flag_sale}}
{t.flag_recommend}
{toEur(rawPrice)}
{origPrice && {toEur(origPrice)}}
{origPrice && -{Math.round((1 - rawPrice / origPrice) * 100)} %}
{t.vat}
{pricePerKgOn && (
<> · {t.price_per_kg} {toEur(rawPrice / selSize.kg)}
)}
{savingsLine && origPrice && origPrice > rawPrice && (
· {lang === 'hu' ? 'Megtakarítás' : 'Ušetríš'} {toEur((origPrice - rawPrice) * qty)}
)}
{/* M3b: live discount countdown (Latte: header-counter snippet,
per-variant deadline). Soft state >26h shows days only,
aggressive state <=26h ticks h:m:s. Gated by discount_timer
tweak (default ON) and the active variant having a
discountTo + an active orig price. */}
{discountTimer && activeVariant.discountTo && origPrice && (
-
{t.bullets.map((b, i) => (
{b[0]} {b[1]}
))}
{t.evidence} {t.evidence_link} {t.evidence_tail}
{t.alt_label}: {t.alt_names}
)}
{/* Standalone EAN row below alt names. The inline SKU/EAN in the
meta-row stays (above-the-fold context), but the active variant
EAN is also surfaced here as a clearly labeled row so it
updates visibly when the user switches a flavor or pack size,
mirroring PDPDesktop .pdp-d-ean (k label + monospace v value). */}
{t.ean_label}:
{activeVariant.ean || t.ean}
{t.packaging} ({M_SIZES.length})
{selSize.label}
{M_SIZES.map(s => {
// Mirror PDPDesktop size pill state machine: per-variant stock
// detail (in/low/restock/out) plus a separate is-unavailable
// bucket for combos that don't exist in the matrix at all.
const view = sizeView(s, flavor);
const variant = view.variant;
const exists = !!variant;
const isOut = exists && variant.stock === 'out';
const isRestk = exists && variant.stock === 'restock';
const isLow = exists && variant.stock === 'low';
const disabled = !exists;
const flavorCount = countActiveForSize(s.id);
const hasDisc = exists && variant.orig && variant.orig > variant.price;
const onPillClick = () => {
if (!exists) return;
setSize(s.id);
if (isOut || isRestk) openRestock();
};
return (
);
})}
{/* PRÍCHUŤ - G2 (v0.9.1) default = dropdown bottom-sheet (matches
real namaximum.sk parameter-box-with-select); pills variant
available via tweak `flavor_picker_variant: 'pills'`. */}
{t.flavor} ({M_FLAVORS.length})
{tweaks.flavor_picker_variant === 'pills' && (
{t.flavors[selFlavor.id] || selFlavor.label}
)}
{tweaks.flavor_picker_variant === 'pills' ? (
{M_FLAVORS.map(f => {
// Per-variant view, mirrors PDPDesktop flavor pill cascade.
// exists=false means the (size, flavor) combo is absent from
// the matrix entirely (real eshop $missingValues cascade);
// is-unavailable shows the strikethrough hatched pill.
const view = flavorView(f, size);
const variant = view.variant;
const exists = !!variant;
const isOut = exists && variant.stock === 'out';
const isLow = exists && variant.stock === 'low';
const isRestk = exists && variant.stock === 'restock';
const disabled = !exists;
const hasDisc = exists && variant.orig && variant.orig > variant.price;
const discPct = hasDisc ? Math.round((1 - variant.price / variant.orig) * 100) : 0;
const onPillClick = () => {
if (!exists) return;
setFlavor(f.id);
if (isOut || isRestk) openRestock();
};
return (
);
})}
) : (
{/* M2b: quantity discount tiers (Latte: $productQuantityPrices). Sits
above the qty stepper + ATC row so the active tier highlights as
the user steps qty up. Mirrors PDPDesktop pdp-d-qtytiers. */}
{qtyTiers && (
{/* CROSS-SELL */}
-
{QTY_TIERS.map((tier, i) => {
const active = qty >= tier.min && (tier.max === null || qty <= tier.max);
const label = tier.max
? (lang === 'hu' ? (tier.min + '-' + tier.max + ' db') : ('Pri kúpe ' + tier.min + '-' + tier.max + ' bal.'))
: (lang === 'hu' ? ('Min. ' + tier.min + ' db felett') : ('Pri kúpe ' + tier.min + '+ balení'));
const save = activeVariant.price ? Math.round((1 - tier.perPack / activeVariant.price) * 100) : 0;
return (
- {label} {toEur(tier.perPack)} /{lang === 'hu' ? 'db' : 'bal.'} {save > 0 && {'-' + save + ' %'}} ); })}
{lang === 'hu' ? 'Limitált akció!' : 'Limitovaná akcia!'}
{lang === 'hu' ? 'Adjon hozzá ajándékokat a változathoz.' : 'Pridaj darček k variantu, zadarmo k tomuto baleniu.'}
{Array.from({ length: GIFT_PICKS_TOTAL }).map((_, slot) => {
const id = giftSelected[slot];
const g = id ? GIFT_PICKS.find(x => x.id === id) : null;
return (
);
})}
{t.gift_picked_label(giftSelected.length, GIFT_PICKS_TOTAL)}
)}
{qty}
{/* v0.7.1 polish: share button moved to gallery overlay
(.p-gallery-share). ATC row drops back to qty + ATC + fav
so 'Pridat do kosika' regains its label width. */}
{t.delivery_by} {t.delivery_cutoff}
{shipOpen && (
)}
-
{(t.ship_options || []).map((s, i) => {
const free = s.pr.toLowerCase().includes('zdarma') || s.pr.toLowerCase().includes('ingyenes');
return (
-
{s.nm} {s.t} {s.pr}
);
})}
{freeRemain > 0
? <>{t.free_remain_pre} {toEur(freeRemain)} {t.free_remain_post} {t.free_shipping}
: {t.free_ship_done}
}
{toEur(totalPrice)} / {toEur(FREE_SHIPPING)}
{t.cross_title}{t.cross_sub ? <> {t.cross_sub} : null}
{/* F2 (v0.8.1): bundle banner gated behind tweaks.bundle_promo (default false). Twin of desktop guard - real eshop has no bundle banner, only sibling product link list. F3 will promote the link list to default cross_sell render. */} {tweaks.bundle_promo && (
{t.bundle_tag}
{t.bundle_name}
{/* v0.7.11: real CDN photos from window.BUNDLE.items
(data/wpc80-bundle.json - production MySQL). Falls back
to the original 2 ProductVisual paint mocks ('WPC 80 /
1 KG' + 'CREATINE / 500 G') when window.BUNDLE is not
available. Desktop twin in PDPDesktop.jsx mirrors. */}
{((typeof window !== 'undefined' && window.BUNDLE && window.BUNDLE.items) || []).map((it, idx, arr) => (
{idx < arr.length - 1 && +}
))}
{!(typeof window !== 'undefined' && window.BUNDLE) && (
<>
{toEur(37.80)}
{t.bundle_vs}
{t.bundle_save_pre} {toEur(4.00)} {t.bundle_save_post}
{CROSS.map(p => {
// F3 mirror of desktop sale-flag overlay percentage. Currently
// CROSS rows ship without `orig`, so this falls through and
// no badge renders. Hook stays for parity with real eshop.
const pct = (p.orig && p.orig > p.price)
? Math.round((1 - p.price / p.orig) * 100)
: null;
return (
{p.flag && 
:
);
})}
{p.flag}
}
{/* F3: -X% sale-flag overlay (mirrors .sale-flag--new). */}
{pct && -{pct}%
}
{/* v0.7.7 C-phase: real photo when DB row carries one
(greenmedical.bwcdn.net CDN); ProductVisual stays
as the no-image fallback so styling does not crack
open if a row lacks a media join. */}
{p.image
? ★ {p.rating.toLocaleString(t.locale, { minimumFractionDigits: 1 })} ({p.reviews})
{/* F3: 'od' prefix on variant products (matches real). */}
{t.cross_price_from}
{' '}
{toEur(p.price)}
{p.orig && {toEur(p.orig)}}
{/* F3: replaced inline ATC "+" with a Detail link on
desktop to mirror real combinations.latte.
v0.8.6: dropped on mobile per user annotation
('tento button prec na mobilnej verzii'). The whole
card image + name are already wrapped in so the
tap target stays - the explicit Detail chip just
added visual noise on the small card width. */}
{t.desc_section_title}
{t.desc_use_dosing}
{t.desc_storage}
{/* v0.8.6: subtitle dropped (see desc_section_title note). */}
{/* TABS - nutri / ingredients / dosage / video (M1c block 3)
v0.7.5 A3: nutri + ingr tabs gated on tweaks (default OFF).
If the active tab gets disabled at runtime we fall back to
'dose' inside a useEffect so the body never renders empty. */}
{t.certs_title}
{t.certs_note} {t.certs_more}
{nutritionTab && (
)}
{ingredientsTab && (
)}
{tab === 'nutri' && (
)}
{tab === 'ingr' && (
{M_PRODUCT.descriptionVideoHtml ? (
) : (
)}
{tab === 'files' && (
)}
{t.nutri_col1}
{t.nutri_col2}
{t.nutri_col3}
{t.nutri_rows.map((r, i) => (
{r[0]}{r[1]}{r[2]}
))}
{t.ingr_composition} {t.ingr_text}
{t.ingr_source} {t.ingr_source_text}
{t.allergens} {t.allergens_text}
{t.dose_steps.map((s, i) => (
)}
{tab === 'video' && (
{i + 1}
))}
{s[0]}
{s[1]}
{t.video_empty}
)}
{t.files_section_sub}
-
{FILES.map((f, i) => (
-
{f.name}
{f.type}
·
{f.size}
{t.var_title}
{M_SIZES.map((sDef) => { const sId = sDef.id; const variantsInSize = variantsForSize(sId); if (variantsInSize.length === 0) return null; return (
{sDef.label}
{t.var_group_count(variantsInSize.length)}
{variantsInSize.map(([key, v]) => {
const fId = key.slice(sId.length + 1);
const fDef = M_FLAVORS.find((f) => f.id === fId);
if (!fDef) return null;
const fLabel = (t.flavors && t.flavors[fId]) || fDef.label;
const isActive = sId === size && fId === flavor;
const isOut = v.stock === 'out';
const isLow = v.stock === 'low';
const isRestock = v.stock === 'restock';
const perKg = sDef.kg ? v.price / sDef.kg : 0;
const hasDisc = v.orig && v.orig > v.price;
const stockTxt = isOut
? t.var_sold_out
: isRestock
? (lang === 'hu'
? ((v.restockDays || 0) + ' nap múlva')
: ('O ' + (v.restockDays || 0) + ' dní'))
: isLow
? t.stock_low
: t.stock_in;
const chipCls = isOut
? 'is-out'
: isRestock
? 'is-restock'
: isLow
? 'is-low'
: 'is-in';
return (
);
})}
{/* v0.8.6: subtitle dropped (see desc_section_title note). */}
setFilter('all')} />}
{/* CUSTOMER Q&A (M1b) - mobile counterpart of pdp-d-qa-* on desktop.
Replaces the static FAQ accordion as the primary knowledge surface;
the legacy FAQ stays available behind the `faq_block` tweak. */}
{t.rev_title}
{M_PRODUCT.averageRating.toFixed(2).replace('.', ',')}
{t.reviews_count(M_PRODUCT.ratingsCount)}
{REV_DIST.map(d => (
{d.s}
))}
{d.n}
{REV_RECOMMEND_PCT.toLocaleString(lang === 'hu' ? 'hu-HU' : 'sk-SK', { minimumFractionDigits: 1 })} %
{t.rev_recommend_msg}
{t.rev_cta_q}
{REV_FILTERS.map(f => (
))}
{t.rev_showing(1, 3, 1342)}
{REVIEWS.map(r => (
{r.initial}
{r.name}
{/* F2 (v0.8.1): review_badges gates the 'Overeny'
chip next to reviewer name. Real eshop has no
verified-buyer badge. */}
{reviewBadges && r.verified &&
{r.date} · {r.size} · {r.flavor}
{r.title}
{r.body}
{/* v0.7.5 A2: dropped the '#' prefix on review tags. The
real namaximum.sk review widget renders tags as plain
pills, not Twitter-style hashtags. */}
{r.tags.map(t => {t})}
{t.qa_title}
{t.qa_sub_count(QA_META.total, QA_META.withReply)}
{QA_META.total}
{t.qa_stat_total}
{QA_META.verifiedBuyers}
{t.qa_stat_verified}