Σύνολο / θέση €22.00

Ασφαλής πληρωμή

); } function VisJourney() { return (

Σε πορεία

Escrow Protected

Αθήνα 312 / 503 km Θεσ/νίκη

Γιώργος + Μαρία (συνεπιβάτης)

); } function VisPayout() { return (

✓

Άφιξη επιβεβαιώθηκε

Αποδεσμεύτηκε στον οδηγό €22.00

0% προμήθεια · 100% στον Γιώργο

); } function StoryScroll() { const lang = window.__LANG__ || 'el'; const ref = React.useRef(null); const [p, setP] = React.useState(0); const [, force] = React.useState(0); const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { const checkMobile = () => setIsMobile(window.innerWidth < 768); checkMobile(); window.addEventListener('resize', checkMobile); return () => window.removeEventListener('resize', checkMobile); }, []); React.useEffect(() => { const s = document.createElement('style'); s.id = 'story-kf'; s.textContent = `@keyframes storyWheel { to { transform: rotate(360deg); } }`; document.head.appendChild(s); return () => { const el = document.getElementById('story-kf'); if (el) el.remove(); }; }, []); React.useEffect(() => { const onLang = () => force(n => n + 1); window.addEventListener('langchange', onLang); let ticking = false; const onScroll = () => { if (ticking) return; ticking = true; requestAnimationFrame(() => { const el = ref.current; if (el) { const rect = el.getBoundingClientRect(); const total = rect.height - window.innerHeight; setP(total > 0 ? Math.min(1, Math.max(0, -rect.top / total)) : 0); } ticking = false; }); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('langchange', onLang); }; }, []); const t = window.t; const chapters = [ { tag: t('story.s1tag'), title: t('story.s1t'), body: t('story.s1b'), Vis: VisPost }, { tag: t('story.s2tag'), title: t('story.s2t'), body: t('story.s2b'), Vis: VisBook }, { tag: t('story.s3tag'), title: t('story.s3t'), body: t('story.s3b'), Vis: VisJourney }, { tag: t('story.s4tag'), title: t('story.s4t'), body: t('story.s4b'), Vis: VisPayout }, ]; const N = 5; const seg = 1 / N; const center = Math.min(N - 1, p / seg); const rawIdx = Math.min(N - 1, Math.round(center)); const moving = p > 0.001 && p < 0.999; const carPct = 6 + Math.min(1, p / (seg * 4)) * 82; const transformFor = (i) => { const offset = i - center; const abs = Math.min(2, Math.abs(offset)); const opacity = Math.max(0, 1 - abs * 1.5); const tx = offset * (isMobile ? 24 : 64); const rotY = offset * (isMobile ? -10 : -22); const tz = -abs * (isMobile ? 120 : 240); const scale = 1 - Math.min(0.34, abs * (isMobile ? 0.15 : 0.2)); return { opacity, transform: `perspective(1600px) translateX(${tx}px) translateZ(${tz}px) rotateY(${rotY}deg) scale(${scale})`, pointerEvents: abs < 0.4 ? 'auto' : 'none', zIndex: 20 - Math.round(abs * 10), filter: abs > 0.6 ? `blur(${Math.min(4, (abs - 0.6) * 5)}px)` : 'none', }; }; const jumpToStep = (idx) => { if (ref.current) { const total = ref.current.getBoundingClientRect().height - window.innerHeight; const targetY = ref.current.offsetTop + (idx * (total / (N - 1))); window.scrollTo({ top: targetY, behavior: 'smooth' }); } }; return (

{/* Header */}

{t('story.eyebrow')}

{t('story.title')}

{t('story.lead')}

{/* Interactive Step Navigation Pills for Mobile & Desktop */}

{chapters.map((_, idx) => ( ))}

{/* Counter Pill */}

{String(Math.min(4, rawIdx + 1)).padStart(2, '0')} / 04

{/* Chapter 3D deck */}

{chapters.map((ch, i) => { const st = transformFor(i); const Vis = ch.Vis; return (

{ch.tag}

{ch.title}

{ch.body}

); })} {/* Final CTA deck */} {(() => { const st = transformFor(4); return (

{lang === 'el' ? ( Κατέβασε το ellaride. Βρες τη διαδρομή σου. ) : ( Download ellaride. Find your route. )}

{t('story.ctaBody')}

{t('story.ctaBtn')} →

); })()}

{/* Road & Car */}

); } window.StoryScroll = StoryScroll;