Refactor components to comment out unused imports and navigation logic, replacing navigate calls with window.open for external links. Clean up commented code in VirtualTourPage for better readability.

src/components/UnitMaskOnFloor.tsx

@@ -1,6 +1,6 @@
 import { Unit } from "../types/IUnit";
 import getUnitMaskOnFloor from "../utils/getUnitMaskOnFloor";
-import DubaiMarinaOnFloorMask7_38Comb from "./onFloorMasks/DubaiMarinaOnFloorMask7_38Comb";
+// import DubaiMarinaOnFloorMask7_38Comb from "./onFloorMasks/DubaiMarinaOnFloorMask7_38Comb";
 
 interface UnitMaskOnFloorProps {
   unit: Unit;
@@ -14,14 +14,15 @@ function UnitMaskOnFloor({ unit }: UnitMaskOnFloorProps) {
   }
 
   // Extract unit number (last 2 digits)
-  const unitNumber = +unit.unitNo.split("-")[0].slice(-2);
+  // const unitNumber = +unit.unitNo.split("-")[0].slice(-2);
 
   switch (maskType) {
     case "dubai-marina-mask-7_38":
       return <div>Dubai Marina Floor 7-38 Mask for unit {unit.unitNo}</div>;
 
     case "dubai-marina-mask-7_38-combinable":
-      return <DubaiMarinaOnFloorMask7_38Comb unitNumber={unitNumber} />;
+      // return <DubaiMarinaOnFloorMask7_38Comb unitNumber={unitNumber} />;
+      return null;
 
     case "dubai-marina-mask-39_40":
       // Handle 39-40 floor mask

src/components/UnitTypeItem.tsx

@@ -2,7 +2,7 @@ import ShareIcon from "./icons/ShareIcon";
 import Button from "./ui/Button";
 import Project from "../types/Project";
 import UnitType from "../types/UnitType";
-import { useNavigate } from "react-router";
+// import { useNavigate } from "react-router";
 import PlayIcon from "./icons/PlayIcon";
 import VideoModal from "./VideoModal";
 import useModalStore from "../stores/useModalStore";
@@ -14,7 +14,7 @@ interface UnitTypeItemProps {
 }
 
 function UnitTypeItem({ project, type }: UnitTypeItemProps) {
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
 
   function handleShare() {
     navigator.share({
@@ -109,7 +109,10 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
               variant="cta"
               size="large"
               onClick={() =>
-                navigate(`/virtual-tour/${project.slug}/${type.slug}`)
+                window.open(
+                  `/virtual-tour/${project.slug}/${type.slug}`,
+                  "_blank"
+                )
               }
             >
               Virtual tour

src/pages/UnitPage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useQuery } from "@tanstack/react-query";
-import { useNavigate, useParams } from "react-router";
+import { useParams } from "react-router";
 import { api } from "../api/ky";
 import { Unit } from "../types/IUnit";
 import ShareIcon from "../components/icons/ShareIcon";
@@ -22,7 +22,7 @@ import useModalStore from "../stores/useModalStore";
 
 function UnitPage() {
   const params = useParams<{ complexName: string; unitNumber: string }>();
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
 
   const { data: unit } = useQuery({
     queryKey: ["unit", params.complexName, params.unitNumber],
@@ -242,11 +242,12 @@ function UnitPage() {
                   variant="cta"
                   size="large"
                   onClick={() =>
-                    navigate(
+                    window.open(
                       `/virtual-tour/${params.complexName}/${getUnitTypeSlug(
                         params.complexName!,
                         unit.unitType
-                      )}`
+                      )}`,
+                      "_blank"
                     )
                   }
                 >

src/pages/VirtualTourPage.tsx

@@ -1,21 +1,21 @@
-import { useNavigate, useParams } from "react-router";
-import Button from "../components/ui/Button";
-import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
+import { useParams } from "react-router";
+// import Button from "../components/ui/Button";
+// import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
 
 function VirtualTourPage() {
   const { complexName, unitTypeSlug } = useParams();
 
-  const navigate = useNavigate();
+  // const navigate = useNavigate();
 
   return (
     <div>
-      <div className="absolute 2xl:top-[calc(4.444vw+1.111vw)] md:max-2xl:top-[calc(64px+16px)] top-[calc(56px+16px)] 2xl:left-[calc(1.111vw)] md:max-2xl:left-[calc(16px)] left-[calc(16px)]">
+      {/* <div className="absolute 2xl:top-[calc(4.444vw+1.111vw)] md:max-2xl:top-[calc(64px+16px)] top-[calc(56px+16px)] 2xl:left-[calc(1.111vw)] md:max-2xl:left-[calc(16px)] left-[calc(16px)]">
         <Button onlyIcon onClick={() => navigate(-1)}>
           <span className="2xl:size-[1.389vw] size-5">
             <ArrowLeftIcon />
           </span>
         </Button>
-      </div>
+      </div> */}
       <iframe
         src={`/virtual-tours/${complexName}/${unitTypeSlug}/index.html`}
         className="2xl:h-[calc(100vh-4.444vw)] md:max-2xl:h-[calc(100vh-64px)] h-[calc(100vh-48px)] w-full"