function MainComponent() { const [activeProject, setActiveProject] = useState(null); const projects = [ { id: 1, tourUrl: "https://my.matterport.com/show/?m=SE9QkdUr7Yn" }, { id: 2, tourUrl: "https://my.matterport.com/show/?m=t1gLgRxcZXy" }, { id: 3, tourUrl: "https://my.matterport.com/show/?m=cgC1TKmBrWU" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-fit md:h-auto bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#f8f9fa] text-[#293f4c] flex flex-col", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-2 flex flex-col pt-4 pb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-5xl font-bold font-caveat mb-1 md:mb-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Immersive Virtual Tours"), /*#__PURE__*/ React.createElement("p", { className: "text-base md:text-lg font-montserrat text-gray-600", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Step inside our most stunning properties with Matterport 3D tours")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-8 items-center px-1", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, projects.map((project)=>/*#__PURE__*/ React.createElement("div", { key: project.id, className: "bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[275px] md:h-[350px] relative", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: project.tourUrl, className: "w-full h-full object-cover", frameBorder: "0", allowFullScreen: true, allow: "autoplay; fullscreen; web-share; xr-spatial-tracking", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-2", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: project.tourUrl, target: "_blank", rel: "noopener noreferrer", className: "w-full bg-[#babc33] text-white py-2 rounded-lg font-montserrat text-sm hover:bg-[#9fa024] transition-all duration-300 flex items-center justify-center transform hover:scale-[1.02]", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-vr-cardboard mr-2", __source: { fileName: "", lineNumber: 51, columnNumber: 23 }, __self: this }), "View 3D Tour")))))))), activeProject && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/90 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[1920px] h-[1080px] max-w-[85vw] max-h-[60vh]", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveProject(null), className: "absolute -top-4 right-0 z-10 text-white hover:text-gray-300 transition-colors p-2", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-2xl", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("iframe", { src: activeProject.tourUrl, frameBorder: "0", allowFullScreen: true, allow: "autoplay; fullscreen; web-share; xr-spatial-tracking", className: "w-full h-full rounded-xl", style: { aspectRatio: "16/9" }, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } `)); }