From 38d602a37cf84fc2d0265ca7d4429119218f5ba3 Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Thu, 11 Dec 2025 20:15:55 +0500
Subject: [PATCH] product details

---
 components/ContactForm.tsx  | 30 ++++++++++++++----------------
 components/ProductModal.tsx |  7 ++++---
 lib/translations.ts         | 12 ++++++++----
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx
index bb171f6..d6d6d23 100644
--- a/components/ContactForm.tsx
+++ b/components/ContactForm.tsx
@@ -7,17 +7,20 @@ import { sendContactMessage } from "@/lib/api";
 import { Phone, MessageSquare, MapPin } from "lucide-react";
 import Image from "next/image";
 import { useLanguage } from "@/context/language-context";
+import { useProductStore } from "@/lib/productZustand";
 
 export function ContactForm() {
-  const {t} = useLanguage();
+  const { t } = useLanguage();
   const pathname = usePathname();
   const locale = (pathname.split("/")[1] || "uz") as "uz" | "ru";
 
+  const productName = useProductStore((state) => state.productName);
+
   const [formData, setFormData] = useState({
     name: "",
     phone: "",
     message: "",
-    productSlug: "",
+    productName: "",
   });
 
   const [loading, setLoading] = useState(false);
@@ -50,7 +53,7 @@ export function ContactForm() {
 
       if (result.success) {
         setMessage({ type: "success", text: t.contact.success });
-        setFormData({ name: "", phone: "", message: "", productSlug: "" });
+        setFormData({ name: "", phone: "", message: "", productName: "" });
       } else {
         setMessage({ type: "error", text: t.contact.error });
       }
@@ -71,7 +74,7 @@ export function ContactForm() {
           className="object-cover"
         />
       </div>
-      <div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40"/>
+      <div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40" />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <motion.div
@@ -100,9 +103,7 @@ export function ContactForm() {
               <h3 className="text-2xl font-bold text-gray-900 mb-2">
                 {t.contact.title}
               </h3>
-              <p className="text-gray-600 mb-8">
-                {t.contact.desc}
-              </p>
+              <p className="text-gray-600 mb-8">{t.contact.desc}</p>
             </div>
 
             {/* Contact Methods */}
@@ -202,17 +203,14 @@ export function ContactForm() {
               <label className="block text-gray-700 font-medium mb-2">
                 {t.contact.product}
               </label>
-              <select
-                name="productSlug"
-                value={formData.productSlug}
+              <input
+                type="text"
+                name="productName"
+                value={productName ? productName : formData.productName}
                 onChange={handleChange}
+                placeholder={t.contact.product}
                 className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                <option value="">Select a product...</option>
-                <option value="schotchik-pump">Schotchik Pump</option>
-                <option value="agregat-pump">Agregat Pump</option>
-                <option value="ccl-20-24-pump">CCL 20/24 Pump</option>
-              </select>
+              />
             </div>
 
             {/* Message Alert */}
diff --git a/components/ProductModal.tsx b/components/ProductModal.tsx
index c03e9d7..a2f473a 100644
--- a/components/ProductModal.tsx
+++ b/components/ProductModal.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import { motion, AnimatePresence } from "framer-motion";
-import { X, Download } from "lucide-react";
-import Image from "next/image";
+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";
 
 interface ProductModalProps {
   product: Product;
@@ -15,6 +15,7 @@ interface ProductModalProps {
 
 export function ProductModal({ product, onClose }: ProductModalProps) {
   const { t } = useLanguage();
+  const setProductName = useProductStore((state)=>state.setProductName);
 
   return (
     <AnimatePresence>
@@ -91,7 +92,7 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
                 <div className="space-y-3">
                   <Link href="#contact">
                     <motion.button
-                      onClick={onClose}
+                      onClick={()=>{onClose(); setProductName(product.nameKey)}}
                       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"
diff --git a/lib/translations.ts b/lib/translations.ts
index 2eb8962..80528c8 100644
--- a/lib/translations.ts
+++ b/lib/translations.ts
@@ -92,10 +92,10 @@ export const translations = {
     },
     more: "Ko'proq ko'rish",
     details: "Batafsil",
-    empty_data:{
-      description:"Mahsulot topilmadi!!!",
-      back:"Asosiy sahifaga qaytish"
-    }
+    empty_data: {
+      description: "Mahsulot topilmadi!!!",
+      back: "Asosiy sahifaga qaytish",
+    },
   },
 
   ru: {
@@ -195,5 +195,9 @@ export const translations = {
     },
     more: "Смотреть больше",
     details: "Подробнее",
+    empty_data: {
+      description: "Товар не найден!!!",
+      back: "Вернуться на главную страницу",
+    },
   },
 };