"use client"; import React, { useState, useRef, useCallback } from "react"; import { Sparkles, ArrowRight } from "lucide-react"; export const ImageComparison = ({ beforeImage = "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?q=85&w=1920&auto=format&fit=crop", afterImage = "https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=85&w=1920&auto=format&fit=crop", altBefore = "The Climb", altAfter = "The Summit", leftLabel = "Climb", rightLabel = "Summit", leftQuote = "The path reveals itself one step at a time. Keep going.", rightQuote = "From the summit, every hardship below becomes a landmark of growth.", }: { beforeImage?: string; afterImage?: string; altBefore?: string; altAfter?: string; leftLabel?: string; rightLabel?: string; leftQuote?: string; rightQuote?: string; }) => { const [sliderPosition, setSliderPosition] = useState(50); const containerRef = useRef(null); const handleMove = useCallback((clientX: number) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const x = (clientX - rect.left) / rect.width; setSliderPosition(Math.max(0, Math.min(100, x * 100))); }, []); const handleMouseMove = (e: React.MouseEvent) => handleMove(e.clientX); const handleTouchMove = (e: React.TouchEvent) => handleMove(e.touches[0].clientX); const leftClip = `inset(0 ${100 - sliderPosition}% 0 0)`; const rightClip = `inset(0 0 0 ${sliderPosition}%)`; return (

{/* Left side — independently clipped */}

{leftLabel}

“{leftQuote}”

Explore

{/* Right side — independently clipped */}

{rightLabel}

“{rightQuote}”

Discover

{/* Slider Handle */}

{/* Bottom label */}

{leftLabel}

{rightLabel}

); };

Image Comparison Slider