// Wochenangebote — Hero-Card links + Karussell rechts. // Daten kommen live aus /api/offers/current (DreamCRM-Push). Wenn kein // aktuelles Angebot im KV liegt (z.B. zwischen zwei Wochen oder vor dem // ersten Push), wird die ganze Section ausgeblendet — kein Hardcoded-Fallback. function Angebote() { const { t, lang } = useT(); const [remote, setRemote] = React.useState(null); const [tried, setTried] = React.useState(false); const [idx, setIdx] = React.useState(0); const trackRef = React.useRef(null); const cardW = 240; const gap = 16; const step = cardW + gap; const visible = 3; // Laden + aktuell halten. Safari (v.a. iOS) restauriert Tabs aus dem // BFCache: der alte React-State (inkl. alter pdf_url aufs alte Prospekt- // Blob) lebt dann weiter, ohne dass dieser Mount-Effect je wieder läuft. // Darum zusätzlich bei pageshow(persisted) und beim Sichtbarwerden des // Tabs neu fetchen — gedrosselt auf 1×/Minute. setRemote nur bei wirklich // neuem Push (published_at), sonst würde jeder Tab-Wechsel das Karussell // auf Slide 0 zurückwerfen (Effect unten hängt an `remote`). const lastFetchRef = React.useRef(0); React.useEffect(() => { let alive = true; const load = () => { lastFetchRef.current = Date.now(); fetch('/api/offers/current', { headers: { Accept: 'application/json' }, cache: 'no-store' }) .then((r) => (r.ok ? r.json() : null)) .then((json) => { if (!alive) return; if (json && json.ok && json.offer) { setRemote((prev) => ( prev && prev.published_at && prev.published_at === json.offer.published_at ? prev : json.offer )); } }) .catch(() => {}) .finally(() => { if (alive) setTried(true); }); }; const reloadIfStale = () => { if (document.visibilityState !== 'visible') return; if (Date.now() - lastFetchRef.current < 60000) return; load(); }; const onPageShow = (e) => { if (e.persisted) reloadIfStale(); }; load(); window.addEventListener('pageshow', onPageShow); document.addEventListener('visibilitychange', reloadIfStale); return () => { alive = false; window.removeEventListener('pageshow', onPageShow); document.removeEventListener('visibilitychange', reloadIfStale); }; }, []); // Sync `idx` mit nativem Scroll (Touch-Swipe / Trackpad / Maus) React.useEffect(() => { const el = trackRef.current; if (!el) return; let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; const next = Math.round(Math.abs(el.scrollLeft) / step); setIdx((prev) => (prev === next ? prev : next)); }); }; el.addEventListener('scroll', onScroll, { passive: true }); return () => { el.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); }; }, [step, remote]); // Wenn neue CRM-Daten kommen: zurueck auf Slide 0 (instant, ohne Animation) React.useEffect(() => { if (!remote) return; setIdx(0); if (trackRef.current) trackRef.current.scrollLeft = 0; }, [remote]); // Solange noch nichts geladen ist (oder nichts gepusht wurde) → Section verbergen. if (!tried) return null; if (!remote || !Array.isArray(remote.produkte) || remote.produkte.length === 0) return null; const produkte = remote.produkte; const heroId = remote.hero_produkt_id; const hero = produkte.find((p) => p.id === heroId) || produkte[0]; const rest = produkte.filter((p) => p !== hero); const max = Math.max(0, rest.length - visible); const go = (n) => { const target = Math.min(max, Math.max(0, n)); setIdx(target); const el = trackRef.current; if (el) el.scrollTo({ left: target * step, behavior: 'smooth' }); }; // KW-Label live aus dem Push. Fallback: clientseitig berechnete KW // wie früher — falls die CRM-Übersetzung mal ausfällt. const kwLabel = remote.kw_label_translations && remote.kw_label_translations[lang] ? remote.kw_label_translations[lang] : (remote.kw || ''); const headline = (remote.headline_translations && remote.headline_translations[lang]) || t('angebote.headline'); const headlineEm = t('angebote.headlineEm'); const hIdx = headline.indexOf(headlineEm); const hBefore = hIdx >= 0 ? headline.slice(0, hIdx) : headline; const hAfter = hIdx >= 0 ? headline.slice(hIdx + headlineEm.length) : ''; // Hilfs-Selector pro Produkt: bevorzugt Übersetzung in der aktiven Sprache, // fällt sonst auf de zurück. const tr = (p, key) => { const t = p.translations || {}; return (t[lang] && t[lang][key]) || (t.de && t.de[key]) || ''; }; const heroName = tr(hero, 'name'); const heroSub = tr(hero, 'sub'); const heroEyebrow = tr(hero, 'eyebrow'); const heroUnit = tr(hero, 'unit'); const heroColor = hero.color || '#7A2E1F'; const heroImage = hero.image_url || ''; const flyerHref = remote.pdf_url || ''; const flyerName = remote.pdf_filename || `Azra-Wochenangebote-${remote.slug || 'aktuell'}.pdf`; return (
{kwLabel}

{hBefore}{headlineEm}{hAfter}

{flyerHref ? {t('angebote.flyer')} : null}
{/* Hero-Card: Angebot der Woche */}
{/* contain statt cover: Produkt komplett sichtbar (freigestellt), wie auf dem CRM-Angebotszettel. #FAF6EA = Paper-Ton, den der CRM-Push in die JPEGs backt — so sitzt das Bild nahtlos, ohne Letterbox-Kanten. */} {heroImage ?
:
}
{hero.price}€
{heroUnit}
{t('angebote.heroBadge')}
{heroEyebrow}

{heroName}

{heroSub}

{hero.old_price && {t('angebote.insteadOf', { price: hero.old_price })}} {t('angebote.onlyThisWeek')}
{/* Karussell mit Rest — nativ scrollbar (Touch/Wheel) + scroll-snap */}
{rest.map((d) => { const name = tr(d, 'name'); const sub = tr(d, 'sub'); const eyebrow = tr(d, 'eyebrow'); const unit = tr(d, 'unit'); const color = d.color || '#9C3E2C'; const img = d.image_url || ''; return (
{img ?
:
}
{d.price}€
{unit}
{eyebrow}

{name}

{sub}

{d.old_price &&
{t('angebote.insteadOf', { price: d.old_price })}
}
); })}
{rest.length > visible ? (
{Array.from({length:max+1}).map((_,i)=>(
) : null}
); } window.Angebote = Angebote;