// ZION EventsRow — auto-rotating photo strip.
// Starts with the 2 stage shots (event-3 + event-4), then crossfades to the
// 2 fireball action shots (event-1 + event-2). 10s per slide, infinite loop.
// Same horizontal edge-blend + top/bottom mask as the hero.
function EventsRow({ onBook }) {
const slides = [
[
{ src: 'assets/event-3.jpg' }, // Red Bull stage — landscape
{ src: 'assets/event-4.jpg' }, // Bomboclat duo — landscape
],
[
{ src: 'assets/event-6.jpg' }, // hooded fire kick — landscape
{ src: 'assets/event-2.jpg' }, // fire bowl close-up — portrait (original)
],
];
const [active, setActive] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => {
setActive(a => (a + 1) % slides.length);
}, 10000);
return () => clearInterval(t);
}, []);
return (
EVENTS
Festivals, brand activations, content shoots. Bring the fireball to your stage.
{/* Full-width blended strip. Each slide is absolutely stacked and
cross-fades via opacity, so the mask/fade reads identically across slides. */}
{slides.map((photos, idx) => (
{photos.map((p, i) => (
0} />
))}
))}
{/* Tiny rotation indicator (dots) */}
{slides.map((_, idx) => (
);
}
// Single event photo with horizontal edge-fade so neighbors bleed into each other.
function EventPhoto({ src, overlapLeft }) {
const m = 'linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%)';
return (
);
}
// BookNowButton — rounded pill CTA. Same family as the hero PillButton but
// scoped to events so it can be tweaked independently.
function BookNowButton({ onClick }) {
const [hover, setHover] = React.useState(false);
const [press, setPress] = React.useState(false);
return (
);
}
window.EventsRow = EventsRow;