Refactor FloorPopup and AmenitiesFloorView components for improved logic and styling; enhance ResidentialFloorView with new floor options and update floor range constants for better organization and clarity.

src/components/FloorPopup.tsx

@@ -24,10 +24,11 @@ function getAmenitiesCount(complexName: string, title: string) {
 function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
   const { setPopup } = usePopupStore();
   const amenitiesCount = useMemo(
-    () =>
-      Number.isNaN(+title.at(-1)!)
-        ? getAmenitiesCount(complexName, title)
-        : null,
+    () => {
+      // Check if title is in SPECIAL_FLOORS or try to get amenities count
+      const amenities = getAmenitiesCount(complexName, title);
+      return amenities || null;
+    },
     [title, complexName]
   );
 

src/components/floor-plans/AmenitiesFloorView.tsx

@@ -43,7 +43,7 @@ function AmenitiesFloorView({ floor }: AmenitiesFloorViewProps) {
     <div className="2xl:space-y-[2.222vw] space-y-8">
       <div className="2xl:space-y-[1.667vw] space-y-6">
         <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
-          <p className="text-h4 font-medium">{floor.displayName}</p>
+          <p className="font-medium text-h4">{floor.displayName}</p>
           <Badge
             variant="secondary"
             text={`${floor.amenitiesCount.total} Amenities`}
@@ -69,10 +69,10 @@ function AmenitiesFloorView({ floor }: AmenitiesFloorViewProps) {
           hasInteriorView={hasInteriorView}
         />
 
-        <div className="bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[1.111vw] p-4 relative">
+        <div className="border border-[#E2E2DC] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[1.111vw] p-4 relative">
           <img
             src="/images/floor-plans/compass.png"
-            className="absolute top-0 left-0 size-[7.222vw]"
+            className="absolute size-[7.222vw]"
             alt=""
           />
           <img src={currentImage} alt={floor.name} className="w-full" />

src/components/floor-plans/ResidentialFloorView.tsx

@@ -124,7 +124,7 @@ function ResidentialFloorView({
 
         {/* ── Floor plan ──────────────────────────────────── */}
         <div
-          className="2xl:py-[1.667vw] 2xl:px-[1.111vw] max-2xl:p-4 bg-[#F3F3F2] 2xl:rounded-[0.833vw] rounded-lg relative 2xl:space-y-[2.222vw] space-y-8"
+          className="2xl:py-[1.667vw] 2xl:px-[1.111vw] max-2xl:p-4 border border-[#E2E2DC] 2xl:rounded-[0.833vw] rounded-lg relative 2xl:space-y-[2.222vw] space-y-8"
           onMouseMove={(e) =>
             !isMobile && setPosition({ x: e.clientX, y: e.clientY })
           }
@@ -150,16 +150,27 @@ function getSelectOptions(
   complexName: ComplexName,
   floorsData?: FloorsData[]
 ): string[] {
-  if (!floorsData) return [];
+  const complexConfig = getComplexConfig(complexName);
 
   if (complexName === "marasi-drive") {
-    return floorsData.flatMap((item) => [
-      `East ${item.floor}`,
-      `West ${item.floor}`,
+    // Get unique floor numbers from local config (residential floors only)
+    const residentialFloors = complexConfig.floors.filter(
+      (floor): floor is ResidentialFloorData => floor.type === "residential"
+    );
+
+    const floorNumbers = Array.from(
+      new Set(residentialFloors.map((f) => f.floorNumber))
+    ).sort((a, b) => a - b);
+
+    // Generate East and West options for each floor
+    return floorNumbers.flatMap((floorNum) => [
+      `East ${floorNum}`,
+      `West ${floorNum}`,
     ]);
   }
 
   if (complexName === "dubai-marina") {
+    if (!floorsData) return [];
     return floorsData.map((item) => {
       if (item.floor === 39) return "39-40";
       if (item.floor === 41) return "41-42";
@@ -167,7 +178,16 @@ function getSelectOptions(
     });
   }
 
-  // HQ and default
+  if (complexName === "hq") {
+    if (!floorsData) return [];
+    return floorsData.map((item) => {
+      if (item.floor === 29) return "29-30";
+      return item.floor.toString();
+    });
+  }
+
+  // Default
+  if (!floorsData) return [];
   return floorsData.map((item) => item.floor.toString());
 }
 
@@ -267,7 +287,7 @@ function FloorPlanRenderer({
 
   if (!config) {
     return (
-      <div className="text-center text-gray-400 py-8">
+      <div className="py-8 text-center text-gray-400">
         Floor plan coming soon
       </div>
     );