function MainComponent() { const [sliderPositions, setSliderPositions] = useState({}); const stagingExamples = [ { id: 1, before: "https://ucarecdn.com/b3b3a59d-270d-47e8-bb78-2070df0a6bbd/-/format/auto/", after: "https://ucarecdn.com/528c60df-b2b7-4e17-ad49-1938ab82c399/-/format/auto/", title: "Modern Living Room" }, { id: 2, before: "https://ucarecdn.com/85ddd9fe-77d5-428a-9664-05f94d698f06/-/format/auto/", after: "https://ucarecdn.com/e40efc61-4a8e-41f9-a53f-abb48d031b66/-/format/auto/", title: "Elegant Dining Space" }, { id: 3, before: "https://ucarecdn.com/ceead314-fbb6-4db9-8dbf-800766c1ec3a/-/format/auto/", after: "https://ucarecdn.com/7d11dbd9-95bc-4488-b962-fba631a25826/-/format/auto/", title: "Master Bedroom Suite" } ]; const handleTouchMove = (e, example)=>{ e.preventDefault(); const touch = e.touches[0]; const rect = e.currentTarget.getBoundingClientRect(); const x = touch.clientX - rect.left; const percentage = x / rect.width * 100; setSliderPositions((prev)=>({ ...prev, [example.id]: Math.min(100, Math.max(0, percentage)) })); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-7xl mx-auto p-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl md:text-5xl font-bold font-caveat text-[#293f4c] mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Virtual Staging"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-montserrat text-gray-600", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Transform empty spaces into beautifully staged rooms. Slide to see the difference!")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, stagingExamples.map((example)=>/*#__PURE__*/ React.createElement("div", { key: example.id, className: "relative group transform transition-all duration-300 hover:-translate-y-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[400px] rounded-2xl overflow-hidden shadow-xl", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: example.before, alt: "Before virtual staging", className: "absolute w-full h-full object-cover", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: example.after, alt: "After virtual staging", className: "absolute w-full h-full object-cover", style: { clipPath: `inset(0 ${100 - (sliderPositions[example.id] || 50)}% 0 0)` }, __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", onMouseMove: (e)=>{ const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const percentage = x / rect.width * 100; setSliderPositions((prev)=>({ ...prev, [example.id]: Math.min(100, Math.max(0, percentage)) })); }, onTouchMove: (e)=>handleTouchMove(e, example), onTouchStart: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-y-0 w-1 bg-white cursor-ew-resize", style: { left: `${sliderPositions[example.id] || 50}%` }, __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 92, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrows-left-right text-[#293f4c] text-lg", __source: { fileName: "", lineNumber: 93, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 bg-[#babc33]/90 px-3 py-1 rounded-full", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-montserrat font-medium text-white", __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this }, "After")), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 bg-white/90 px-3 py-1 rounded-full", __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-montserrat font-medium text-[#293f4c]", __source: { fileName: "", lineNumber: 102, columnNumber: 21 }, __self: this }, "Before"))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent h-32 flex flex-col justify-end p-6", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-montserrat font-bold text-xl", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, example.title)))))))); }