pproducts

components/ProductModal.tsx

@@ -2,10 +2,11 @@
 
 import { motion, AnimatePresence } from "framer-motion";
 import { X, Download } from "lucide-react";
-import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { ProductViewer } from "./ProductViewer";
 import type { Product } from "@/lib/products";
+import { useLanguage } from "@/context/language-context";
+import Link from "next/link";
 
 interface ProductModalProps {
   product: Product;
@@ -13,7 +14,7 @@ interface ProductModalProps {
 }
 
 export function ProductModal({ product, onClose }: ProductModalProps) {
-  const t = useTranslations();
+  const { t } = useLanguage();
 
   return (
     <AnimatePresence>
@@ -34,7 +35,7 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
           {/* 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">
-              {t(product.nameKey)}
+              {product.nameKey}
             </h2>
             <motion.button
               whileHover={{ scale: 1.1 }}
@@ -56,34 +57,14 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
                   images={product.images}
                   autoRotate={true}
                 />
-
-                {/* Image Thumbnails */}
-                {product.images.length > 1 && (
-                  <div className="mt-4 grid grid-cols-4 gap-2">
-                    {product.images.map((img, idx) => (
-                      <motion.div
-                        key={idx}
-                        whileHover={{ scale: 1.05 }}
-                        className="relative h-20 rounded cursor-pointer overflow-hidden bg-gray-100"
-                      >
-                        <Image
-                          src={img}
-                          alt={`${t(product.nameKey)} ${idx + 1}`}
-                          fill
-                          className="object-cover"
-                        />
-                      </motion.div>
-                    ))}
-                  </div>
-                )}
               </div>
 
               {/* Details */}
               <div>
                 <p className="text-gray-600 mb-6">
                   {product.longDescriptionKey
-                    ? t(product.longDescriptionKey)
-                    : t(product.shortDescriptionKey)}
+                    ? product.longDescriptionKey
+                    : product.shortDescriptionKey}
                 </p>
 
                 {/* Specifications */}
@@ -108,21 +89,16 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
 
                 {/* CTA Buttons */}
                 <div className="space-y-3">
-                  <motion.button
-                    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"
-                  >
-                    {t("contact.send")}
-                  </motion.button>
-                  <motion.button
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
-                    className="w-full px-6 py-3 border border-blue-600 text-blue-600 rounded-lg font-semibold hover:bg-blue-50 transition-colors flex items-center justify-center gap-2"
-                  >
-                    <Download size={18} />
-                    Download Datasheet
-                  </motion.button>
+                  <Link href="#contact">
+                    <motion.button
+                      onClick={onClose}
+                      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"
+                    >
+                      {t.contact.send}
+                    </motion.button>
+                  </Link>
                 </div>
               </div>
             </div>