product details

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 */}