// Lalaluxe booking — components/RecentWork.jsx
// Offloaded hero "Recent Work" gallery row (was inline in intro.jsx).
// Load BEFORE intro.jsx (see CLAUDE.md "multi-file Babel contract"); Intro renders <RecentWork>.
//
// ── HOW TO MODIFY ─────────────────────────────────────────────
//  • The looks shown come from `gallery` (passed in by Intro, sourced from
//    site config → content.gallery). Each item: { src, sm, label }.
//  • Card markup lives in <RecentWorkCard> below — edit it in one place.
//  • Edge chevrons float over the strip ends as paging controls / swipe hints;
//    each fades out once the strip is scrolled to its edge. No bottom pager pill.
//  • All styling is in styles/booking.css under "Recent Work — framed gallery".
// ──────────────────────────────────────────────────────────────

function RecentWorkCard({ item, onOpen, idx }) {
	return (
		<button
			className="rw2-card"
			onClick={onOpen}
			aria-label={`Enlarge ${item.label}`}
		>
			<span className="rw2-frame">
				{/* first two cards are above the fold by design — fetch them eagerly */}
				<img
					className="rw2-img"
					src={item.sm}
					alt={item.label}
					loading={idx < 2 ? "eager" : "lazy"}
				/>
			</span>
		</button>
	);
}

function RecentWork({ gallery, onOpen, title = "Recent Sets" }) {
	const trackRef = useRef(null);
	// edge.start: scrolled to the very left (hide the back arrow)
	// edge.end:   scrolled to the very right (hide the forward arrow)
	const [edge, setEdge] = useState({ start: true, end: false });

	const updateEdge = useCallback(() => {
		const t = trackRef.current;
		if (!t) return;
		const max = t.scrollWidth - t.clientWidth;
		// generous tolerance: scroll-snap + padding rests scrollLeft a few px in
		setEdge({ start: t.scrollLeft <= 12, end: t.scrollLeft >= max - 12 });
	}, []);

	useEffect(() => {
		const t = trackRef.current;
		if (!t) return;
		updateEdge();
		t.addEventListener("scroll", updateEdge, { passive: true });
		window.addEventListener("resize", updateEdge);
		return () => {
			t.removeEventListener("scroll", updateEdge);
			window.removeEventListener("resize", updateEdge);
		};
	}, [gallery, updateEdge]);

	const page = (dir) => {
		const t = trackRef.current;
		if (!t) return;
		const card = t.querySelector(".rw2-card");
		const step = card ? card.offsetWidth + 10 : t.clientWidth * 0.5;
		t.scrollBy({ left: dir * step, behavior: "smooth" });
	};

	if (!gallery || !gallery.length) return null;

	return (
		<section className="rw2" aria-label="Recent work">
			<header className="rw2-head">
				<span className="rw2-rule" aria-hidden="true"></span>
				<span className="rw2-spark" aria-hidden="true">✦</span>
				<h2 className="rw2-title">{title}</h2>
				<span className="rw2-spark" aria-hidden="true">✦</span>
				<span className="rw2-rule" aria-hidden="true"></span>
			</header>

			<div className="rw2-viewport">
				<div className="rw2-track" ref={trackRef} onScroll={updateEdge}>
					{gallery.map((g, i) => (
						<RecentWorkCard
							key={g.src || i}
							item={g}
							idx={i}
							onOpen={() => onOpen(i)}
						/>
					))}
				</div>
				<button
					className={`rw2-more rw2-back${edge.start ? " is-hidden" : ""}`}
					onClick={() => page(-1)}
					aria-label="Show previous looks"
					tabIndex={edge.start ? -1 : 0}
				></button>
				<button
					className={`rw2-more${edge.end ? " is-hidden" : ""}`}
					onClick={() => page(1)}
					aria-label="Show more looks"
					tabIndex={edge.end ? -1 : 0}
				></button>
			</div>

			<p className="rw2-caption">
				<span className="rw2-caption-arrow rw2-caption-arrow--l" aria-hidden="true"></span>
				<span className="rw2-caption-text">swipe through recent work</span>
				<span className="rw2-caption-arrow rw2-caption-arrow--r" aria-hidden="true"></span>
			</p>
		</section>
	);
}