// Hero — animated, parallax, countdown
const { useState, useEffect, useRef } = React;
function useCountdown(target) {
const [now, setNow] = useState(Date.now());
useEffect(() => {
const t = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(t);
}, []);
const diff = Math.max(0, new Date(target).getTime() - now);
const d = Math.floor(diff / 86400000);
const h = Math.floor((diff % 86400000) / 3600000);
const m = Math.floor((diff % 3600000) / 60000);
const s = Math.floor((diff % 60000) / 1000);
return { d, h, m, s };
}
function Hero({ onTabChange }) {
const { d, h, m, s } = useCountdown(window.TRIP.startDate);
const [scrollY, setScrollY] = useState(0);
const heroRef = useRef(null);
useEffect(() => {
const onScroll = () => setScrollY(window.scrollY);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const parallax = Math.min(scrollY, 800);
return (
{/* Photo layer with parallax */}
{/* Vignette */}
{/* Title block */}
Volume 01
Aug 20 — 29, 2026
Turkey
2026
{window.TRIP.subtitle}. Six friends, two cities, endless memories.
{/* Scroll hint */}
↓ Scroll · The Issue
);
}
function Countdown({ d, h, m, s }) {
const cell = (val, label) => (
{String(val).padStart(2, '0')}
{label}
);
return (
{cell(d, 'Days')}
{cell(h, 'Hrs')}
{cell(m, 'Min')}
{cell(s, 'Sec')}
);
}
window.Hero = Hero;
