detail page connected to backend , modal form for one product connected to backend

app/[locale]/products/[slug]/page.tsx

@@ -1,40 +1,87 @@
 "use client";
 
-import { DATA } from "@/lib/demoData";
 import { Features, RightSide, SliderComp } from "@/components/pages/products";
+import { useProductPageInfo } from "@/store/useProduct";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { AlertCircle } from "lucide-react";
+import { LoadingSkeleton } from "@/components/pages/products/slug/loading";
+import { EmptyState } from "@/components/pages/products/slug/empty";
+import { useEffect } from "react";
+
+// Types
+interface ProductImage {
+  id: number;
+  product: number;
+  image: string;
+  is_main: boolean;
+  order: number;
+}
+
+interface ProductDetail {
+  id: number;
+  name: string;
+  articular: string;
+  status: string;
+  description: string;
+  size: number;
+  price: string;
+  features: string[];
+  images: ProductImage[];
+}
 
 export default function SlugPage() {
-  const statusColor =
-    DATA[0].status === "full"
-      ? "text-green-500"
-      : DATA[0].status === "empty"
-        ? "text-red-600"
-        : "text-yellow-800";
+  const productZustand = useProductPageInfo((state) => state.product);
 
-  const statusText =
-    DATA[0].status === "full"
-      ? "Sotuvda mavjud"
-      : DATA[0].status === "empty"
-        ? "Sotuvda qolmagan"
-        : "Buyurtma asosida";
+  const { data: product, isLoading } = useQuery({
+    queryKey: ["product", productZustand.id],
+    queryFn: () => httpClient(endPoints.product.detail(productZustand.id)),
+    select: (data) => data?.data?.data as ProductDetail,
+    enabled: !!productZustand.id,
+  });
+
+  useEffect(()=>console.log("product detail: ",product))
+
+  // Loading State
+  if (isLoading) {
+    return <LoadingSkeleton />;
+  }
+
+  // Empty State
+  if (!product) {
+    return <EmptyState />;
+  }
+
+  // Extract images
+  const productImages = product.images?.map((img) => img.image) || [];
+  const mainImage = product.images?.find((img) => img.is_main)?.image || productImages[0] || "";
+  const features = product.features.map((item:any)=>item.name)
 
   return (
-    <div className="min-h-screen bg-[#1e1d1c] py-40 px-4 md:px-8">
-      <div className="max-w-6xl mx-auto">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
-          <SliderComp imgs={DATA[0].images} />
+    <div className="min-h-screen bg-[#1e1d1c] py-20 md:py-32 lg:py-40 px-4 md:px-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Main Product Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12">
+          {/* Left - Image Slider */}
+          <SliderComp imgs={productImages} />
 
+          {/* Right - Product Info */}
           <RightSide
-            id={1}
-            title={DATA[0].title}
-            name={DATA[0].name}
-            statusColor={statusColor}
-            statusText={statusText}
-            description={DATA[0].description}
-            image={DATA[0].images[0]}
+            id={product.id}
+            title={product.name}
+            articular={product.articular}
+            status={product.status}
+            description={product.description}
+            price={product.price}
+            image={mainImage}
           />
         </div>
-        <Features features={DATA[0].features} />
+
+        {/* Features Section */}
+        {product.features && product.features.length > 0 && (
+          <Features features={features} />
+        )}
       </div>
     </div>
   );

components/pages/home/blog/catalog.tsx

@@ -16,9 +16,6 @@ export default function   Catalog() {
     queryFn: () => httpClient(endPoints.category.all),
     select: (data): CategoryType[] => data?.data?.results,
   });
-  useEffect(() => {
-    console.log("product catalog data: ", data);
-  }, [data]);
 
   if (isLoading) {
     return (

components/pages/products/filter/filter.tsx

@@ -55,7 +55,6 @@ export default function Filter() {
   useEffect(() => {
     catalog && setCatalogData(catalog);
     size && setSizeData(size);
-    console.log("catalog: ", catalog, "size: ", size);
   }, [size, catalog]);
 
   // Bo'lim uchun ko'rsatiladigan itemlar
@@ -67,7 +66,6 @@ export default function Filter() {
   const visibleSectionNumber = numberExpanded
     ? sizeData
     : sizeData.slice(0, 10);
-  console.log("filter: ", filter);
 
   return (
     <div className="space-y-3 lg:max-w-70 lg:px-0 px-3 w-full text-white">

components/pages/products/product/mianProduct.tsx

@@ -5,12 +5,14 @@ import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
 import { useCategory } from "@/store/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { useProductPageInfo } from "@/store/useProduct";
 
 export default function MainProduct() {
   const category = useCategory((state) => state.category);
   const filter = useFilter((state) => state.filter);
-  const getFiltersByType = useFilter((state)=>state.getFiltersByType)
+  const getFiltersByType = useFilter((state) => state.getFiltersByType);
+  const setProduct = useProductPageInfo((state) => state.setProducts);
 
   // Query params yaratish
   const queryParams = useMemo(() => {
@@ -40,9 +42,17 @@ export default function MainProduct() {
   const { data, isLoading, error } = useQuery({
     queryKey: ["products", category.id, queryParams],
     queryFn: () => httpClient(requestLink),
-    select: (data) => data?.data?.data?.results,
+    select: (data) => {
+      const product = data?.data?.data?.results;
+      return product.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+        image: item.images[0].image,
+      }));
+    },
   });
 
+
   if (isLoading) {
     return (
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -74,6 +84,7 @@ export default function MainProduct() {
       {data.map((item: any) => (
         <ProductCard
           key={item.id} // ✅ index o'rniga id ishlatish
+          getProduct={() => setProduct(item)}
           title={item.name}
           image={item.image}
           slug={item.slug}

components/pages/products/product/productCard.tsx

@@ -1,4 +1,3 @@
-
 import { useLocale } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,17 +6,19 @@ interface ProductCardProps {
   title: string;
   image: string;
   slug: string;
+  getProduct: () => void;
 }
 
 export default function ProductCard({
   title,
   image,
   slug,
+  getProduct,
 }: ProductCardProps) {
   const locale = useLocale();
 
   return (
-    <Link href={`/${locale}/products/${slug}`}>
+    <Link href={`/${locale}/products/${slug}`} onClick={getProduct}>
       <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full">
         {/* Image Container */}
         <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">

components/pages/products/slug/empty.tsx

@@ -0,0 +1,36 @@
+// Empty State Component
+export function EmptyState() {
+  return (
+    <div className="min-h-screen bg-[#1e1d1c] flex items-center justify-center px-4">
+      <div className="text-center max-w-md">
+        <div className="w-24 h-24 mx-auto mb-6 bg-gray-800 rounded-full flex items-center justify-center">
+          <svg
+            className="w-12 h-12 text-gray-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+            />
+          </svg>
+        </div>
+        <h2 className="text-2xl font-bold text-white mb-2">
+          Mahsulot topilmadi
+        </h2>
+        <p className="text-gray-400 mb-6">
+          Siz qidirayotgan mahsulot mavjud emas yoki o'chirilgan
+        </p>
+        <a
+          href="/products"
+          className="inline-block bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition"
+        >
+          Mahsulotlarga qaytish
+        </a>
+      </div>
+    </div>
+  );
+}

components/pages/products/slug/features.tsx

@@ -1,10 +1,19 @@
 export function Features({ features }: { features: string[] }) {
+  if (!features || features.length === 0) {
+    return null;
+  }
+
   return (
-    <table className="w-full rounded-xl overflow-hidden">
+    <div className="mt-12">
+      <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
+        Xususiyatlar
+      </h2>
+      <div className="rounded-xl overflow-hidden border border-gray-800 shadow-xl">
+        <table className="w-full">
           <thead>
-        <tr className="border-b border-gray-700 bg-black">
+            <tr className="bg-linear-to-r from-gray-900 to-black border-b border-gray-800">
               <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
-            Feature
+                Xususiyat
               </th>
             </tr>
           </thead>
@@ -12,16 +21,21 @@ export function Features({ features }: { features: string[] }) {
             {features.map((feature, index) => (
               <tr
                 key={index}
-            className={` border-gray-700 transition-colors hover:bg-opacity-80 ${
-              index % 2 === 0 ? "bg-[#323232]" : "bg-black/20"
+                className={`border-b border-gray-800 last:border-b-0 transition-colors hover:bg-red-900/10 ${
+                  index % 2 === 0 ? "bg-[#252525]" : "bg-[#1e1e1e]"
                 }`}
               >
-            <td className="px-4 py-4 md:px-6 text-sm md:text-base text-white font-medium">
-              {feature}
+                <td className="px-4 py-4 md:px-6 text-sm md:text-base text-gray-300">
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-700 mt-1">•</span>
+                    <span>{feature}</span>
+                  </div>
                 </td>
               </tr>
             ))}
           </tbody>
         </table>
+      </div>
+    </div>
   );
 }

components/pages/products/slug/loading.tsx

@@ -0,0 +1,61 @@
+// Loading Skeleton Component
+export function LoadingSkeleton() {
+  return (
+    <div className="min-h-screen bg-[#1e1d1c] py-20 md:py-32 lg:py-40 px-4 md:px-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12">
+          {/* Image Skeleton */}
+          <div className="w-full h-96 md:h-125 bg-gray-800 rounded-lg animate-pulse" />
+
+          {/* Info Skeleton */}
+          <div className="flex flex-col justify-center space-y-4">
+            {/* Title */}
+            <div className="h-8 bg-gray-800 rounded animate-pulse w-3/4" />
+
+            {/* Articular */}
+            <div className="h-6 bg-gray-800 rounded animate-pulse w-1/2" />
+
+            {/* Status */}
+            <div className="h-8 bg-gray-800 rounded animate-pulse w-1/3" />
+
+            {/* Description */}
+            <div className="space-y-2">
+              <div className="h-4 bg-gray-800 rounded animate-pulse w-full" />
+              <div className="h-4 bg-gray-800 rounded animate-pulse w-5/6" />
+              <div className="h-4 bg-gray-800 rounded animate-pulse w-4/6" />
+            </div>
+
+            {/* Price */}
+            <div className="h-10 bg-gray-800 rounded animate-pulse w-32" />
+
+            {/* Buttons */}
+            <div className="flex gap-4">
+              <div className="h-12 bg-gray-800 rounded animate-pulse flex-1" />
+            </div>
+
+            {/* Social */}
+            <div className="flex gap-2">
+              {[1, 2, 3, 4, 5, 6].map((i) => (
+                <div
+                  key={i}
+                  className="w-10 h-10 bg-gray-800 rounded-lg animate-pulse"
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Features Skeleton */}
+        <div className="space-y-2">
+          <div className="h-12 bg-gray-800 rounded-t-xl animate-pulse" />
+          {[1, 2, 3, 4].map((i) => (
+            <div
+              key={i}
+              className="h-16 bg-gray-800/50 rounded animate-pulse"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

components/pages/products/slug/rightSide.tsx

@@ -1,116 +1,106 @@
 import { usePriceModalStore } from "@/store/useProceModalStore";
-import { Facebook } from "lucide-react";
+import { Facebook, Share2 } from "lucide-react";
 
 const socialLinks = [
   { name: "telegram", icon: "✈️", color: "#0088cc" },
-  { name: "facebook", icon: <Facebook />, color: "#1877F2" },
-  { name: "odnoklassniki", icon: "ok", color: "#ED7100" },
-  { name: "vkontakte", icon: "VK", color: "#0077FF" },
+  { name: "facebook", icon: <Facebook size={18} />, color: "#1877F2" },
+  { name: "whatsapp", icon: "💬", color: "#25D366" },
   { name: "twitter", icon: "𝕏", color: "#1DA1F2" },
-  { name: "whatsapp", icon: "W", color: "#25D366" },
 ];
 
 interface RightSideProps {
   id: number;
   title: string;
-  name: string;
+  articular: string;
+  status: string;
   description: string;
-  statusText: string;
-  statusColor: string;
+  price: string;
   image: string;
 }
 
 export function RightSide({
   title,
-  name,
+  articular,
+  status,
   description,
-  statusColor,
-  statusText,
+  price,
   id,
   image,
 }: RightSideProps) {
   const openModal = usePriceModalStore((state) => state.openModal);
+
   const handleGetPrice = () => {
     openModal({
-      id: id,
+      id,
       name: title,
-      image: image,
-      inStock: true,
+      image,
+      inStock: status === "Sotuvda mavjud",
     });
   };
+
+  // Status color logic
+  const isInStock = status === "Sotuvda mavjud";
+  const statusColor = isInStock
+    ? "bg-green-600/20 text-green-400 border border-green-600/30"
+    : "bg-red-600/20 text-red-400 border border-red-600/30";
+
   return (
-    <div className="flex flex-col justify-center">
+    <div className="flex flex-col justify-center space-y-6">
       {/* Title */}
-      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-white mb-4 leading-tight">
+      <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white leading-tight">
         {title}
       </h1>
 
       {/* Article ID */}
-      <div className="mb-3">
-        <p className="text-gray-400">
-          Artikul:
-          <span className="text-white font-semibold">{name}</span>
-        </p>
+      <div className="flex items-center gap-2 text-sm md:text-base">
+        <span className="text-gray-400">Artikul:</span>
+        <span className="text-white font-semibold">{articular}</span>
       </div>
 
       {/* Status Badge */}
-      <div className="mb-2">
-        <span
-          className={`inline-block py-2 rounded text-sm font-semibold ${statusColor}`}
-        >
-          {statusText}
+      <div>
+        <span className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}>
+          {status}
         </span>
       </div>
 
-      {/* description */}
-      <div className="mb-2">
-        <p className="text-sm font-bold text-white mb-4 leading-tight">
+      {/* Description */}
+      <div className="border-l-4 border-red-700 pl-4">
+        <p className="text-sm md:text-base text-gray-300 leading-relaxed">
           {description}
         </p>
       </div>
 
       {/* Price Section */}
-      <div className="mb-8">
-        <h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-6">
-          17.00$
+      <div className="bg-[#1716169f] rounded-xl p-6 space-y-6">
+        {/* Price */}
+        <div>
+          <p className="text-gray-400 text-sm mb-2">Narx:</p>
+          <h2 className="text-3xl md:text-4xl font-bold text-red-700">
+            ${price}
           </h2>
+        </div>
 
-        {/* Action Buttons */}
-        <div className="flex flex-col sm:flex-row gap-4 mb-6">
-          {/* <button
-                        onClick={onPriceClick}
-                        className="flex-1 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"
-                      >
-                        Narxni bilish
-                      </button> */}
+        {/* Action Button */}
         <button
           onClick={handleGetPrice}
-            className="flex-1 border-2 border-red-700 text-red-700 hover:bg-red-50 font-bold py-3 px-6 rounded-lg transition duration-300"
+          className="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-red-700/50"
         >
           Xabar yuborish
         </button>
-          {/* <button
-                        onClick={() => setIsFavorite(!isFavorite)}
-                        className="p-3 border-2 border-gray-600 rounded-lg hover:border-red-700 transition duration-300"
-                        title="Add to favorites"
-                      >
-                        <Heart
-                          size={24}
-                          className={
-                            isFavorite ? "fill-red-700 text-red-700" : "text-gray-600"
-                          }
-                        />
-                      </button> */}
-        </div>
 
-        {/* Social Share Icons */}
-        <div className="flex gap-3 items-center">
-          <div className="flex gap-2">
+        {/* Social Share */}
+        <div className="pt-4 border-t border-gray-800">
+          <div className="flex items-center gap-3 mb-3">
+            <Share2 className="w-5 h-5 text-gray-400" />
+            <span className="text-sm text-gray-400">Ulashish:</span>
+          </div>
+          <div className="flex flex-wrap gap-2">
             {socialLinks.map((social) => (
               <a
                 key={social.name}
                 href="#"
-                className="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold transition duration-300 hover:scale-110"
+                className="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold transition-all duration-300 hover:scale-110 hover:shadow-lg"
                 style={{ backgroundColor: social.color }}
                 title={social.name}
               >

components/pages/products/slug/slider.tsx

@@ -1,60 +1,133 @@
 "use client";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper/modules";
+import { Navigation, Pagination, Thumbs } from "swiper/modules";
+import { useState } from "react";
+import type { Swiper as SwiperType } from "swiper";
 import "swiper/css";
 import "swiper/css/navigation";
-import { DATA } from "@/lib/demoData";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import Image from "next/image";
 
-// The custom CSS selectors for navigation
 const navigationPrevEl = ".custom-swiper-prev";
 const navigationNextEl = ".custom-swiper-next";
 
 export function SliderComp({ imgs }: { imgs: string[] }) {
+  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
+
+  // Agar rasm bo'lmasa
+  if (!imgs || imgs.length === 0) {
     return (
-    <div>
-      <div className="flex items-center justify-center relative">
-        <Swiper
-          modules={[Navigation]}
-          navigation={{
-            // Pass the class selectors here
-            prevEl: navigationPrevEl,
-            nextEl: navigationNextEl,
-          }}
-          pagination={{ clickable: true }}
-          className="w-full h-96 md:h-125 bg-white rounded-lg overflow-hidden shadow-lg"
+      <div className="w-full h-96 md:h-125 bg-gray-800 rounded-lg flex items-center justify-center">
+        <div className="text-center">
+          <svg
+            className="w-20 h-20 text-gray-600 mx-auto mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
           >
-          {imgs.map((image, index) => (
-            <SwiperSlide
-              key={index}
-              className="bg-white flex items-center justify-center"
-            >
-              <img
-                src={image || "/placeholder.svg"}
-                alt={`${DATA[0].title} - ${index + 1}`}
-                className="w-full h-full object-contain p-4"
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
             />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-        {/* Custom buttons */}
-        <button
-          className={`${navigationPrevEl.replace(
-            ".",
-            "",
-          )} absolute z-10 top-1/2 left-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center 
-          text-white flex items-center justify-center hover:cursor-pointer transition`}
-        >
-          ‹
-        </button>
-        <button
-          className={`${navigationNextEl.replace(
-            ".",
-            "",
-          )} absolute z-10 top-1/2 right-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:cursor-pointer transition `}
-        >
-          ›
-        </button>
+          </svg>
+          <p className="text-gray-500">Rasm mavjud emas</p>
         </div>
       </div>
     );
   }
+
+  return (
+    <div className="space-y-4">
+      {/* Main Slider */}
+      <div className="relative group">
+        <Swiper
+          modules={[Navigation, Pagination, Thumbs]}
+          thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
+          navigation={{
+            prevEl: navigationPrevEl,
+            nextEl: navigationNextEl,
+          }}
+          pagination={{ clickable: true }}
+          loop={imgs.length > 1}
+          className="w-[90%] h-96 md:h-96  rounded-lg overflow-hidden shadow-xl"
+        >
+          {imgs.map((image, index) => (
+            <SwiperSlide
+              key={index}
+              className=" flex items-center justify-center"
+            >
+              <div className="relative w-full h-full p-4 md:p-8">
+                <Image
+                  src={image}
+                  alt={`Product image ${index + 1}`}
+                  fill
+                  className="object-contain"
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                  priority={index === 0}
+                />
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+
+        {/* Navigation Buttons */}
+        {imgs.length > 1 && (
+          <>
+            <button
+              className={`${navigationPrevEl.replace(
+                ".",
+                ""
+              )} absolute z-10 top-1/2 -translate-y-1/2 left-2 md:left-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <button
+              className={`${navigationNextEl.replace(
+                ".",
+                ""
+              )} absolute z-10 top-1/2 -translate-y-1/2 right-2 md:right-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Thumbnail Slider */}
+      {imgs.length > 1 && (
+        <Swiper
+          onSwiper={setThumbsSwiper}
+          spaceBetween={10}
+          slidesPerView={4}
+          breakpoints={{
+            640: { slidesPerView: 5 },
+            768: { slidesPerView: 6 },
+          }}
+          watchSlidesProgress
+          className="w-full"
+        >
+          {imgs.map((image, index) => (
+            <SwiperSlide key={index}>
+              <div className="relative h-20 md:h-24 bg-white rounded-lg overflow-hidden cursor-pointer border-2 border-transparent hover:border-red-700 transition">
+                <Image
+                  src={image}
+                  alt={`Thumbnail ${index + 1}`}
+                  fill
+                  className="object-contain p-2"
+                  sizes="100px"
+                />
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
+    </div>
+  );
+}

components/priceContact.tsx

@@ -1,10 +1,19 @@
 "use client";
-
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useState, useEffect } from "react";
 import { X } from "lucide-react";
 import { usePriceModalStore } from "@/store/useProceModalStore";
+import { useMutation } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { toast } from "react-toastify";
+
+interface FormType {
+  name: string;
+  product: number;
+  phone: number; // ✅ String bo'lishi kerak
+}
 
 export function PriceModal() {
   const t = useTranslations("priceModal");
@@ -13,31 +22,41 @@ export function PriceModal() {
   const [formData, setFormData] = useState({
     name: "",
     phone: "+998 ",
-    captcha: "",
   });
 
   const [errors, setErrors] = useState({
     name: "",
     phone: "",
-    captcha: "",
   });
 
-  const [captchaCode, setCaptchaCode] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  // Generate random captcha
-  useEffect(() => {
-    if (isOpen) {
-      const code = Math.random().toString(36).substring(2, 8).toUpperCase();
-      setCaptchaCode(code);
-    }
-  }, [isOpen]);
+  const formRequest = useMutation({
+    mutationFn: (data: FormType) =>
+      httpClient.post(endPoints.post.productContact, data),
+    onSuccess: () => {
+      setFormData({
+        name: "",
+        phone: "+998 ",
+      });
+      toast.success(t("success") || "Muvaffaqiyatli yuborildi!");
+      closeModal();
+    },
+    onError: (error) => {
+      console.error("Error:", error);
+      toast.error(t("error") || "Xatolik yuz berdi");
+    },
+  });
 
   // Reset form when modal closes
   useEffect(() => {
     if (!isOpen) {
-      setFormData({ name: "", phone: "+998 ", captcha: "" });
-      setErrors({ name: "", phone: "", captcha: "" });
+      setFormData({
+        name: "",
+        phone: "+998 ",
+      });
+      setErrors({
+        name: "",
+        phone: "",
+      });
     }
   }, [isOpen]);
 
@@ -61,7 +80,6 @@ export function PriceModal() {
 
     let formatted = "+998 ";
     const rest = numbers.slice(3);
-    
     if (rest.length > 0) formatted += rest.slice(0, 2);
     if (rest.length > 2) formatted += " " + rest.slice(2, 5);
     if (rest.length > 5) formatted += " " + rest.slice(5, 7);
@@ -90,51 +108,45 @@ export function PriceModal() {
     const newErrors = {
       name: "",
       phone: "",
-      captcha: "",
     };
 
+    // Name validation
     if (!formData.name.trim()) {
-      newErrors.name = t("validation.nameRequired");
+      newErrors.name = t("validation.nameRequired") || "Ism kiritilishi shart";
     }
 
+    // Phone validation
     const phoneNumbers = formData.phone.replace(/\D/g, "");
     if (phoneNumbers.length !== 12) {
-      newErrors.phone = t("validation.phoneRequired");
+      newErrors.phone =
+        t("validation.phoneRequired") || "To'liq telefon raqam kiriting";
     } else if (!phoneNumbers.startsWith("998")) {
-      newErrors.phone = t("validation.phoneInvalid");
-    }
-
-    if (!formData.captcha.trim()) {
-      newErrors.captcha = t("validation.captchaRequired");
-    } else if (formData.captcha.toUpperCase() !== captchaCode) {
-      newErrors.captcha = t("validation.captchaRequired");
+      newErrors.phone =
+        t("validation.phoneInvalid") || "Noto'g'ri telefon raqam";
     }
 
     setErrors(newErrors);
-    return !newErrors.name && !newErrors.phone && !newErrors.captcha;
+    return !newErrors.name && !newErrors.phone;
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!validateForm()) {
       return;
     }
 
-    setIsSubmitting(true);
+    // Telefon raqamni tozalash (faqat raqamlar)
+    const cleanPhone = formData.phone.replace(/\D/g, "");
 
-    try {
-      // API call logikangiz
-      await new Promise((resolve) => setTimeout(resolve, 1500));
+    const sendedData: FormType = {
+      name: formData.name,
+      phone: Number(cleanPhone), // ✅ String sifatida yuborish
+      product: product?.id || 0,
+    };
 
-      // Success
-      alert(t("success"));
-      closeModal();
-    } catch (error) {
-      alert(t("error"));
-    } finally {
-      setIsSubmitting(false);
-    }
+    console.log("Sended data:", sendedData);
+    formRequest.mutate(sendedData);
   };
 
   if (!isOpen || !product) return null;
@@ -143,49 +155,58 @@ export function PriceModal() {
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/50"
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
         onClick={closeModal}
       />
 
       {/* Modal */}
-      <div className="relative bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+      <div className="relative bg-[#2a2a2a] rounded-2xl shadow-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
         {/* Close button */}
         <button
           onClick={closeModal}
-          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors z-10"
+          className="absolute right-4 top-4 text-gray-400 hover:text-white transition-colors z-10"
           aria-label="Close modal"
         >
           <X size={24} />
         </button>
 
         {/* Content */}
-        <div className="p-8">
-          <h2 className="text-3xl font-bold mb-8">{t("title")}</h2>
+        <div className="p-6 md:p-8">
+          <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
+            {t("title") || "Narx so'rash"}
+          </h2>
 
           {/* Product Info */}
-          <div className="bg-[#f5f0e8] rounded-lg p-6 mb-8 flex items-center gap-6">
-            <div className="relative w-24 h-24 shrink-0">
+          <div className="bg-[#1e1e1e] rounded-lg p-4 mb-6 flex items-center gap-4">
+            <div className="relative w-20 h-20 shrink-0 bg-white rounded-lg overflow-hidden">
               <Image
-                src={product.image}
+                src={product.image || "/placeholder.svg"}
                 alt={product.name}
                 fill
-                className="object-contain"
+                className="object-contain p-2"
               />
             </div>
-            <div>
-              <h3 className="text-xl font-semibold mb-2">{product.name}</h3>
-              <span className="text-green-600 font-medium">
-                {t("product.inStock")}
+            <div className="flex-1">
+              <h3 className="text-white font-semibold mb-1 line-clamp-2">
+                {product.name}
+              </h3>
+              <span className="text-green-400 text-sm">
+                {product.inStock
+                  ? t("product.inStock") || "Sotuvda mavjud"
+                  : t("product.outOfStock") || "Sotuvda yo'q"}
               </span>
             </div>
           </div>
 
           {/* Form */}
-          <form onSubmit={handleSubmit} className="space-y-6">
+          <form onSubmit={handleSubmit} className="space-y-5">
             {/* Name */}
             <div>
-              <label htmlFor="name" className="block text-sm font-medium mb-2">
-                {t("form.name")}
+              <label
+                htmlFor="name"
+                className="block text-sm font-medium text-gray-300 mb-2"
+              >
+                {t("form.name") || "Ismingiz"}
               </label>
               <input
                 type="text"
@@ -193,80 +214,50 @@ export function PriceModal() {
                 name="name"
                 value={formData.name}
                 onChange={handleInputChange}
-                placeholder={t("form.namePlaceholder")}
-                className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 ${
-                  errors.name ? "border-red-500" : "border-gray-300"
-                }`}
+                className={`w-full px-4 py-3 bg-[#1e1e1e] border ${
+                  errors.name ? "border-red-500" : "border-gray-700"
+                } rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-700 transition`}
+                placeholder={t("form.namePlaceholder") || "Ismingizni kiriting"}
               />
               {errors.name && (
-                <p className="text-red-500 text-sm mt-1">{errors.name}</p>
+                <p className="mt-1 text-sm text-red-500">{errors.name}</p>
               )}
             </div>
 
             {/* Phone */}
             <div>
-              <label htmlFor="phone" className="block text-sm font-medium mb-2">
-                {t("form.phone")}
+              <label
+                htmlFor="phone"
+                className="block text-sm font-medium text-gray-300 mb-2"
+              >
+                {t("form.phone") || "Telefon raqam"}
               </label>
-              <div className="relative">
               <input
                 type="tel"
                 id="phone"
                 name="phone"
                 value={formData.phone}
                 onChange={handlePhoneChange}
-                  placeholder={t("form.phonePlaceholder")}
-                  className={`w-full pl-2 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 ${
-                    errors.phone ? "border-red-500" : "border-gray-300"
-                  }`}
+                className={`w-full px-4 py-3 bg-[#1e1e1e] border ${
+                  errors.phone ? "border-red-500" : "border-gray-700"
+                } rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-700 transition`}
+                placeholder="+998 90 123 45 67"
+                maxLength={17}
               />
-              </div>
               {errors.phone && (
-                <p className="text-red-500 text-sm mt-1">{errors.phone}</p>
+                <p className="mt-1 text-sm text-red-500">{errors.phone}</p>
               )}
             </div>
 
-            {/* Captcha */}
-            {/* <div>
-              <label htmlFor="captcha" className="block text-sm font-medium mb-2">
-                {t("form.captcha")}
-              </label>
-              <div className="flex gap-4">
-                <div className="relative w-40 h-12 bg-linear-to-r from-purple-200 via-pink-200 to-blue-200 rounded-lg flex items-center justify-center">
-                  <span className="text-2xl font-bold tracking-widest select-none">
-                    {captchaCode}
-                  </span>
-                  <div className="absolute inset-0 opacity-30">
-                    <svg className="w-full h-full">
-                      <line x1="0" y1="0" x2="100%" y2="100%" stroke="currentColor" strokeWidth="1" />
-                      <line x1="100%" y1="0" x2="0" y2="100%" stroke="currentColor" strokeWidth="1" />
-                    </svg>
-                  </div>
-                </div>
-                <input
-                  type="text"
-                  id="captcha"
-                  name="captcha"
-                  value={formData.captcha}
-                  onChange={handleInputChange}
-                  placeholder={t("form.captchaPlaceholder")}
-                  className={`flex-1 px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 ${
-                    errors.captcha ? "border-red-500" : "border-gray-300"
-                  }`}
-                />
-              </div>
-              {errors.captcha && (
-                <p className="text-red-500 text-sm mt-1">{errors.captcha}</p>
-              )}
-            </div> */}
-
             {/* Submit Button */}
             <button
               type="submit"
-              disabled={isSubmitting}
-              className="w-full bg-[#8B1538] hover:bg-[#6d1028] text-white font-semibold py-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={formRequest.isPending}
+              className="w-full bg-red-700 hover:bg-red-800 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 disabled:hover:scale-100"
             >
-              {isSubmitting ? t("form.submitting") : t("form.submit")}
+              {formRequest.isPending
+                ? t("form.submitting") || "Yuborilmoqda..."
+                : t("form.submit") || "Yuborish"}
             </button>
           </form>
         </div>