go('article', { id: a.id })}
onMouseEnter={(e) => { e.currentTarget.style.boxShadow = 'var(--sh-md)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'var(--sh-sm)'; e.currentTarget.style.transform = 'none'; }}>
{lang === 'en' ? (a.catEn || a.cat) : a.cat}
{lang === 'en' ? (a.titleEn || a.title) : a.title}
{lang === 'en' ? (a.excerptEn || a.excerpt) : a.excerpt}
{a.read} {lang === 'en' ? 'read' : 'lasīšana'}
{en ? 'Klipzy connects brands that want more views with clippers who create short-form content. Choose your role to see how it works.'
: 'Klipzy savieno zīmolus, kas vēlas vairāk skatījumu, ar klipotājiem, kas veido īsus klipus. Izvēlies savu lomu un uzzini, kā tas darbojas.'}
{/* role toggle */}
{[['clipper', en ? 'For clippers' : 'Klipotājiem'], ['brand', en ? 'For brands' : 'Zīmoliem']].map(([k, label]) => (
))}
{/* stepped list */}
{steps.map((s, i) => (
{i + 1}
{i < steps.length - 1 && }
{s.t}
{typeof s.d === 'string' ? s.d.split(/\*([^*]+)\*/).map((seg, j) => j % 2 ? {seg} : seg) : s.d}
))}
{role === 'clipper'
?
: }
);
}
/* ===== ARTICLE DETAIL ===== */
function ArticleClip({ clip, lang }) {
const ref = useRef(null);
const [playing, setPlaying] = useState(false);
const [started, setStarted] = useState(false);
const [prog, setProg] = useState(0);
const barRef = useRef(null);
const src = clip.video ? clip.video[lang === 'en' ? 1 : 0] : null;
const poster = clip.thumb ? clip.thumb[lang === 'en' ? 1 : 0] : null;
const title = clip.t[lang === 'en' ? 1 : 0];
const toggle = () => { const v = ref.current; if (!v) return; if (v.paused) { v.play(); setStarted(true); setPlaying(true); } else { v.pause(); setPlaying(false); } };
const seek = (clientX) => { const v = ref.current, bar = barRef.current; if (!v || !bar || !v.duration) return; const r = bar.getBoundingClientRect(); const p = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); v.currentTime = p * v.duration; setProg(p * 100); };
return (