added backend

components/productSection/ProductModal.tsx

@@ -2,11 +2,12 @@
 
 import { motion, AnimatePresence } from "framer-motion";
 import { X } from "lucide-react";
-import { ProductViewer } from "./ProductViewer";
 import type { Product } from "@/lib/products";
 import { useLanguage } from "@/context/language-context";
 import Link from "next/link";
 import { useProductStore } from "@/lib/productZustand";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
 
 interface ProductModalProps {
   product: Product;
@@ -14,8 +15,12 @@ interface ProductModalProps {
 }
 
 export function ProductModal({ product, onClose }: ProductModalProps) {
-  const { t } = useLanguage();
+  const { t, language } = useLanguage();
   const setProductName = useProductStore((state) => state.setProductName);
+  const languageIndex = language === "uz" ? true : false;
+  const pathName = usePathname();
+  const isPathName = pathName === "/product";
+
 
   return (
     <AnimatePresence>
@@ -34,9 +39,9 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
           className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
         >
           {/* Header */}
-          <div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex justify-between items-center">
-            <h2 className="text-2xl font-bold text-gray-900">
-              {product.nameKey}
+          <div className="sticky z-10 top-0 bg-white border-b border-gray-200 sm:p-6 p-2 flex justify-between items-center">
+            <h2 className="md:text-2xl text-lg font-bold text-gray-900">
+              {languageIndex ? product.name_uz : product.name_ru}
             </h2>
             <motion.button
               whileHover={{ scale: 1.1 }}
@@ -49,39 +54,35 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
           </div>
 
           {/* Content */}
-          <div className="p-6">
+          <div className="sm:p-6 p-2">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
-              {/* 3D Viewer / Gallery */}
-              <div>
-                <ProductViewer
-                  modelUrl={product.model3D}
-                  images={product.images}
-                  autoRotate={true}
+              {/* Image */}
+              <div className="relative max-sm:w-full max-md:h-50">
+                <Image
+                  src={`https://api.serenmebel.uz${product.image}`}
+                  alt="image"
+                  fill
+                  className="object-contain max-md:h-50"
                 />
               </div>
 
-              {/* Details */}
+              {/* Specifications */}
               <div>
-                <p className="text-gray-600 mb-6">
-                  {product.longDescriptionKey
-                    ? product.longDescriptionKey
-                    : product.shortDescriptionKey}
-                </p>
-
-                {/* Specifications */}
                 <div className="mb-8">
                   <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                    Technical Specifications
+                    {t.features}
                   </h3>
                   <div className="space-y-3">
-                    {product.specs.map((spec, idx) => (
+                    {product.features.map((spec, idx) => (
                       <div
                         key={idx}
-                        className="flex justify-between py-2 border-b border-gray-100"
+                        className="flex max-sm:flex-col justify-between py-2 border-b border-gray-100"
                       >
-                        <span className="text-gray-600">{spec.key}:</span>
-                        <span className="font-semibold text-gray-900">
-                          {spec.value}
+                        <span className="text-gray-600">
+                          {languageIndex ? spec.key_uz : spec.key_ru}:
+                        </span>
+                        <span className="text-gray-600">
+                          {languageIndex ? spec.value_uz : spec.value_ru}
                         </span>
                       </div>
                     ))}
@@ -90,15 +91,17 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
 
                 {/* CTA Buttons */}
                 <div className="space-y-3">
-                  <Link href="#contact">
+                  <Link href={isPathName ? "/#contact" : "#contact"} >
                     <motion.button
                       onClick={() => {
                         onClose();
-                        setProductName(product.nameKey);
+                        setProductName(
+                          languageIndex ? product.name_uz : product.name_ru
+                        );
                       }}
                       whileHover={{ scale: 1.05 }}
                       whileTap={{ scale: 0.95 }}
-                      className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+                      className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors"
                     >
                       {t.contact.send}
                     </motion.button>
@@ -106,6 +109,9 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
                 </div>
               </div>
             </div>
+            <div className="text-gray-800 max-sm:text-[14px]">
+              {languageIndex ? product.description_uz : product.description_ru}
+            </div>
           </div>
         </motion.div>
       </motion.div>