const { useState, useEffect, useRef, useMemo } = React; function DetailsPanel({ product }) { if (!product || product.soon) return null; const list = product.ingredients.join(', ') + (product.real ? '.' : ' — végleges lista hamarosan.'); return (
TELJES ÖSSZETEVŐ-LISTA

{list}

{product.age && (

KOROSZTÁLY {product.age}

)} {product.real && (

ENGEDÉLYEZETT ÁLLÍTÁS HELYE  B6-vitamin, B12-vitamin, C-vitamin — tápanyagreferencia-érték szerinti jelölés.

)}
); } function usePinProgress(ref, extra) { const [p, setP] = useState(0); useEffect(() => { const el = ref.current; if (!el) return; let raf = null; const compute = () => { const r = el.getBoundingClientRect(); setP(Math.max(0, Math.min(1, -r.top / extra))); }; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { compute(); raf = null; }); }; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); compute(); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, [extra]); return p; } function useElementWidth(ref) { const [w, setW] = useState(0); useEffect(() => { const el = ref.current; if (!el) return; const ro = new ResizeObserver((entries) => requestAnimationFrame(() => { for (const e of entries) setW(e.contentRect.width); })); ro.observe(el); setW(el.clientWidth); return () => ro.disconnect(); }, []); return w; } function Drawer({ open, children }) { const innerRef = useRef(); const [maxH, setMaxH] = useState(0); useEffect(() => { if (!open) { setMaxH(0); return; } const measure = () => { if (innerRef.current) setMaxH((prev) => { const next = innerRef.current.scrollHeight; return Math.abs(next - prev) > 1 ? next : prev; }); }; measure(); const ro = new ResizeObserver(() => requestAnimationFrame(measure)); if (innerRef.current) ro.observe(innerRef.current); return () => ro.disconnect(); }, [open]); return
{children}
; } function useIsMobile() { const [m, setM] = useState(false); useEffect(() => { const mq = window.matchMedia('(max-width: 820px)'); const on = () => setM(mq.matches); on(); mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }, []); return m; } function useAutoProgress(ref, run) { const [p, setP] = useState(0); useEffect(() => { if (!run) return; const el = ref.current; if (!el) return; let raf = null, start = null, playing = false; const step = (t) => { if (!start) start = t; const e = Math.min(1, (t - start) / 4200); setP(e); if (e < 1) raf = requestAnimationFrame(step); }; const io = new IntersectionObserver((entries) => { entries.forEach((en) => { if (en.isIntersecting && !playing) { playing = true; raf = requestAnimationFrame(step); io.disconnect(); } }); }, { threshold: 0.4 }); io.observe(el); return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); }; }, [run]); return p; } function ScrollBottleStage({ product, extra = 500, outerRef: extRef }) { const localRef = useRef(); const outerRef = extRef || localRef; const laneRef = useRef(); const isMobile = useIsMobile(); const reduce = useMemo(() => window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches, []); const pinProgress = usePinProgress(outerRef, extra); const autoProgress = useAutoProgress(outerRef, isMobile && !reduce); const progress = reduce ? 1 : (isMobile ? autoProgress : pinProgress); const laneWidth = useElementWidth(laneRef); const list = product.ingredients || []; const colW = isMobile ? 84 : 118, gap = isMobile ? 14 : 22; const rowWidth = list.length * colW + Math.max(0, list.length - 1) * gap; const startX = laneWidth || 900; const endX = -(rowWidth + 60); const tx = startX - progress * (startX - endX); const rotateY = reduce ? 0 : Math.sin(progress * Math.PI * 4) * 3; const center = (laneWidth || 900) / 2; let hit = 0; if (!reduce && list.length) { for (let i = 0; i < list.length; i++) { const cx = tx + i * (colW + gap) + colW / 2; const d = Math.abs(cx - center); const v = Math.exp(-(d * d) / (2 * 62 * 62)); if (v > hit) hit = v; } } const shine = reduce ? 0 : Math.sin(progress * Math.PI * 2) * 34; const shadowScale = 0.9 + 0.06 * hit; return (
KIEMELT TERMÉK
{list.length > 0 && ( )}
{product.img ? (
); } function FeaturedStage({ products, activeId, onSelect }) { const stageRef = useRef(); const [open, setOpen] = useState(false); const active = products.find((p) => p.id === activeId) || products[0]; useEffect(() => { setOpen(false); }, [activeId]); const closeAndScroll = () => { setOpen(false); setTimeout(() => { const el = document.getElementById('products'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 8, behavior: 'smooth' }); }, 0); }; return (
{ onSelect(id); const el = document.getElementById('products'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 8, behavior: 'smooth' }); setTimeout(() => setOpen(true), 30); }} />
); } function ProductStrip({ activeId, onPick }) { const all = (window.AZ_ALAP_ORDER || []).concat(window.A_CELZAS_ORDER || []).map((id) => window.PS_PRODUCTS[id]).filter(Boolean); return (
A TELJES TERMÉKCSALÁD — VÁLASSZ EGYET
{all.map((p) => ( ))}
); } function BottleRow({ products, onSelect }) { return (
{products.map((p, i) => { const h = p.soon ? 96 : (i % 2 === 0 ? 190 : 148); return ( ); })}
); } function CircleBrowser({ groups, activeGroup, onGroupChange, onSelect }) { const [angleOffset, setAngleOffset] = useState(0); const [paused, setPaused] = useState(false); const [hoverId, setHoverId] = useState(null); const [tappedId, setTappedId] = useState(null); const isMobile = useIsMobile(); const touchX = useRef(null); useEffect(() => { const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce || paused || isMobile) return; let raf; let last = performance.now(); const tick = (t) => { const dt = t - last; last = t; setAngleOffset((a) => a - dt * 0.00006 * (activeGroup === 'celzott' ? -1 : 1)); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [paused, activeGroup, isMobile]); const toggleGroup = () => { const idx = groups.findIndex((g) => g.key === activeGroup); onGroupChange(groups[(idx + 1) % groups.length].key); }; const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { if (touchX.current == null) return; const dx = e.changedTouches[0].clientX - touchX.current; if (Math.abs(dx) > 60) toggleGroup(); touchX.current = null; }; return (
{isMobile && (
)}
setPaused(true)} onMouseLeave={() => { setPaused(false); setHoverId(null); }} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{ position: 'relative', width: '100%', maxWidth: 760, aspectRatio: '1 / 1', margin: '0 auto', touchAction: 'pan-y' }}> {!isMobile && (
kattints a váltáshoz
)} {isMobile && ( húzd oldalra )} {groups.map((g) => { const isActive = g.key === activeGroup; const n = g.products.length || 1; const radius = isMobile ? (isActive ? 'clamp(104px, 30vw, 140px)' : 'clamp(58px, 17vw, 88px)') : (isActive ? 'clamp(180px, 32vw, 330px)' : 'clamp(120px, 22vw, 220px)'); return (
{g.products.map((p, i) => { const angle = (i / n) * Math.PI * 2 - Math.PI / 2 + (isActive ? angleOffset : 0); const size = isMobile ? (isActive ? 62 : 40) : (isActive ? 132 : 84); const glow = isActive && (hoverId === p.id || tappedId === p.id); return ( ); })}
); })}
); } Object.assign(window, { DetailsPanel, Drawer, ScrollBottleStage, FeaturedStage, BottleRow, CircleBrowser, ProductStrip });