From 513163b174fef0baa19a69266c2674244074117e Mon Sep 17 00:00:00 2001
From: Bivekich <biveki-dev@yandex.ru>
Date: Thu, 3 Jul 2025 14:24:02 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B=20Header=20?=
 =?UTF-8?q?=D0=B8=20MobileMenuBottomSection,=20=D1=83=D0=BB=D1=83=D1=87?=
 =?UTF-8?q?=D1=88=D0=B5=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B8=D0=BD=D1=84=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BC=D0=B0=D1=86=D0=B8=D0=B8=20=D0=BE=20=D0=BF=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=B2=D0=BE=D0=B4=D0=B8=D1=82=D0=B5=D0=BB=D1=8F?=
 =?UTF-8?q?=D1=85.=20=D0=A3=D0=BF=D1=80=D0=BE=D1=89=D0=B5=D0=BD=D1=8B=20?=
 =?UTF-8?q?=D0=BA=D0=BB=D0=B0=D1=81=D1=81=D1=8B=20=D0=B8=20=D1=83=D0=BB?=
 =?UTF-8?q?=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B0=20=D1=87=D0=B8=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=BE=D1=81=D1=82=D1=8C=20=D0=BA=D0=BE=D0=B4=D0=B0?=
 =?UTF-8?q?.=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BA=D0=B8=20=D0=B8?=
 =?UTF-8?q?=20=D1=81=D0=BE=D0=BE=D0=B1=D1=89=D0=B5=D0=BD=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D0=BE=D0=B1=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B0=D1=85=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=B3=D0=BE?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BB=D1=8C=D1=81=D0=BA=D0=BE=D0=B3=D0=BE=20=D0=BE=D0=BF=D1=8B?=
 =?UTF-8?q?=D1=82=D0=B0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[vehicleId]/part/[oemNumber]/brands.tsx   | 220 ++++++++----------
 1 file changed, 98 insertions(+), 122 deletions(-)

diff --git a/src/pages/vehicle-search/[brand]/[vehicleId]/part/[oemNumber]/brands.tsx b/src/pages/vehicle-search/[brand]/[vehicleId]/part/[oemNumber]/brands.tsx
index 3ef9246..a3a4c9e 100644
--- a/src/pages/vehicle-search/[brand]/[vehicleId]/part/[oemNumber]/brands.tsx
+++ b/src/pages/vehicle-search/[brand]/[vehicleId]/part/[oemNumber]/brands.tsx
@@ -2,7 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useQuery } from '@apollo/client';
 import Head from 'next/head';
+import Header from '@/components/Header';
 import Footer from '@/components/Footer';
+import MobileMenuBottomSection from '@/components/MobileMenuBottomSection';
 import { GET_BRANDS_BY_CODE, GET_LAXIMO_CATALOG_INFO } from '@/lib/graphql';
 import { LaximoCatalogInfo } from '@/types/laximo';
 
@@ -19,29 +21,25 @@ const InfoBrandSelection = ({
     <div className="w-layout-blockcontainer container info w-container">
       <div className="w-layout-vflex flex-block-9">
         <div className="w-layout-hflex flex-block-7">
-          <a href="/" className="link-block w-inline-block text-[#000814] hover:text-[#EC1C24] transition-colors">
+          <a href="/" className="link-block w-inline-block">
             <div>Главная</div>
           </a>
           <div className="text-block-3">→</div>
-          <a href="#" className="link-block-2 w-inline-block text-[#000814] hover:text-[#EC1C24] transition-colors">
+          <a href="#" className="link-block-2 w-inline-block">
             <div>Каталог</div>
           </a>
           <div className="text-block-3">→</div>
-          <div className="font-semibold text-gray-900">{brandName}</div>
+          <div>{brandName}</div>
           <div className="text-block-3">→</div>
-          <div className="font-semibold text-gray-900">Деталь {oemNumber}</div>
+          <div>Деталь {oemNumber}</div>
           <div className="text-block-3">→</div>
-          <div className="font-semibold text-gray-900">Выбор производителя</div>
+          <div>Выбор производителя</div>
         </div>
-        <div className="w-layout-hflex flex-block-8 mt-4">
-          <div className="w-layout-hflex flex-block-10 items-center gap-4">
-            <h1 className="heading text-2xl font-bold text-gray-900">Выберите производителя</h1>
+        <div className="w-layout-hflex flex-block-8">
+          <div className="w-layout-hflex flex-block-10">
+            <h1 className="heading">Выберите производителя для {oemNumber}</h1>
           </div>
         </div>
-        <div className="text-lg text-gray-600 mt-2">
-          {detailName && <span>Деталь: {detailName} • </span>}
-          Артикул: {oemNumber}
-        </div>
       </div>
     </div>
   </section>
@@ -117,141 +115,119 @@ const BrandSelectionPage = () => {
     router.back();
   };
 
-  return (
+    return (
     <>
       <Head>
         <title>Выбор производителя для {oemNumber} - {catalogInfo?.name || 'Каталог запчастей'}</title>
         <meta name="description" content={`Выберите производителя для детали ${oemNumber} в каталоге ${catalogInfo?.name}`} />
+        <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />
+        <link href="images/webclip.png" rel="apple-touch-icon" />
       </Head>
-      <div className="bg-[#F5F8FB] min-h-screen w-full">
-        <InfoBrandSelection 
-          brandName={catalogInfo?.name || String(brand)} 
-          oemNumber={String(oemNumber)}
-          detailName={String(detailName || '')}
-        />
-        <div className="flex flex-col px-32 pt-10 pb-16 max-md:px-5">
-          <div className="flex flex-col items-center w-full">
-            <div className="w-full max-w-[1200px]">
-              
-              {/* Кнопка назад */}
-              <div className="mb-6">
-                <button
-                  onClick={handleBack}
-                  className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
-                >
-                  <svg className="w-5 h-5" 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>
+      <InfoBrandSelection 
+        brandName={catalogInfo?.name || String(brand)} 
+        oemNumber={String(oemNumber)}
+        detailName={String(detailName || '')}
+      />
+      <div className="page-wrapper bg-[#F5F8FB] min-h-screen">
+        <div className="w-full max-w-[1580px] mx-auto px-8 max-md:px-5 pt-10 pb-16">
+
+          {/* Кнопка назад */}
+          <div className="mb-6">
+            <button
+              onClick={handleBack}
+              className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
+            >
+              <svg className="w-5 h-5" 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>
+          </div>
+
+          {/* Обработка ошибок */}
+          {hasError && !loading && (
+            <div className="bg-red-50 border border-red-200 rounded-2xl shadow p-10 mb-6">
+              <div className="flex items-center">
+                <svg className="w-6 h-6 text-red-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <div>
+                  <h3 className="text-lg font-medium text-red-800">Ошибка загрузки</h3>
+                  <p className="text-red-700 mt-1">
+                    {brandsData?.error || error?.message || 'Не удалось загрузить список производителей'}
+                  </p>
+                </div>
               </div>
+            </div>
+          )}
 
-              {(catalogLoading || loading) && (
-                <div className="bg-white rounded-2xl shadow p-10 flex flex-col items-center justify-center min-h-[300px]">
-                  <div className="animate-spin rounded-full h-24 w-24 border-b-2 border-red-600 mb-6"></div>
-                  <p className="text-lg text-gray-600">Загружаем производителей...</p>
+          {/* Загрузка */}
+          {(catalogLoading || loading) && (
+            <div className="bg-white rounded-2xl shadow p-10 flex flex-col items-center justify-center min-h-[300px]">
+              <div className="animate-spin rounded-full h-24 w-24 border-b-2 border-red-600 mb-6"></div>
+              <p className="text-lg text-gray-600">Загружаем производителей...</p>
+            </div>
+          )}
+
+          {/* Результаты */}
+          {!loading && !hasError && (
+            <div className="space-y-6">
+              {hasNoBrands ? (
+                <div className="bg-[#eaf0fa] border border-[#b3c6e6] rounded-2xl shadow p-10 text-center">
+                  <svg className="w-16 h-16 mx-auto mb-4" style={{ color: '#0d336c' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z" />
+                  </svg>
+                  <h3 className="text-xl font-semibold mb-2" style={{ color: '#0d336c' }}>
+                    Производители не найдены
+                  </h3>
+                  <p className="mb-4" style={{ color: '#0d336c' }}>
+                    По артикулу <span className="font-mono font-semibold">{oemNumber}</span> производители не найдены.
+                  </p>
+                  <p className="text-sm" style={{ color: '#3b5a99' }}>
+                    Попробуйте изменить запрос или обратитесь к нашим менеджерам.
+                  </p>
                 </div>
-              )}
-
-              {hasError && !loading && (
-                <div className="bg-red-50 border border-red-200 rounded-2xl shadow p-10 mb-6">
-                  <div className="flex items-center">
-                    <svg className="w-6 h-6 text-red-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    <div>
-                      <h3 className="text-lg font-medium text-red-800">Ошибка загрузки</h3>
-                      <p className="text-red-700 mt-1">
-                        {brandsData?.error || error?.message || 'Не удалось загрузить список производителей'}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {hasNoBrands && !loading && (
-                <div className="bg-yellow-50 border border-yellow-200 rounded-2xl shadow p-10">
-                  <div className="text-center">
-                    <div className="text-yellow-500 mb-3">
-                      <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z" />
-                      </svg>
-                    </div>
-                    <h4 className="text-lg font-medium text-yellow-800 mb-2">Производители не найдены</h4>
-                    <p className="text-yellow-700 mb-4">
-                      К сожалению, по данному артикулу производители не найдены
-                    </p>
-                    <p className="text-sm text-yellow-600 mb-4">
-                      Попробуйте изменить параметры поиска или обратитесь к нашим менеджерам
-                    </p>
-                    <div className="space-y-2 text-sm text-yellow-700">
-                      <p>Телефон: <span className="font-medium">+7 (495) 123-45-67</span></p>
-                      <p>Email: <span className="font-medium">info@protek.ru</span></p>
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {!loading && !hasError && brands.length > 0 && (
+              ) : brands.length > 0 && (
                 <div className="bg-white rounded-2xl shadow p-10">
-                  <div className="border-b border-gray-200 pb-4 mb-6">
-                    <h2 className="text-xl font-semibold text-gray-900">Выберите производителя</h2>
+                  <div className="border-b border-gray-200 pb-4">
+                    <h2 className="text-xl font-semibold text-gray-900">
+                      Выбор производителя для артикула: {oemNumber}
+                    </h2>
                     <p className="text-sm text-gray-600 mt-1">
+                      {detailName && <span>Деталь: {detailName} • </span>}
                       Найдено производителей: <span className="font-medium">{brands.length}</span>
                     </p>
                   </div>
-
-                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  <div className="divide-y divide-gray-200">
                     {brands.map((brandItem: any, index: number) => (
-                      <button
-                        key={index}
-                        onClick={() => handleBrandSelect(brandItem.brand)}
-                        className="text-left p-6 rounded-lg border border-gray-200 hover:border-red-500 hover:bg-red-50 transition-all duration-200 group hover:shadow-md"
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex-1">
-                            <div className="font-medium text-gray-900 group-hover:text-red-700 text-lg mb-1">
+                      <div key={index}>
+                        <button
+                          onClick={() => handleBrandSelect(brandItem.brand)}
+                          className="w-full text-left p-4 hover:bg-gray-50 transition-colors block group"
+                        >
+                          <div className="flex w-full items-center gap-2">
+                            <div className="w-1/5 max-md:w-1/3 font-bold text-left truncate" style={{ color: 'rgb(77, 180, 94)' }}>
                               {brandItem.brand}
                             </div>
-                            {brandItem.name && brandItem.name !== brandItem.brand && (
-                              <div className="text-sm text-gray-600 group-hover:text-red-600 mb-2">
-                                {brandItem.name}
-                              </div>
-                            )}
-                            <div className="text-xs text-gray-500 group-hover:text-red-500">
-                              Код: {brandItem.code}
+                            <div className="w-1/5 max-md:text-center max-md:w-1/3 font-bold text-left truncate group-hover:text-[#EC1C24] transition-colors">
+                              {oemNumber}
+                            </div>
+                            <div className="w-3/5 max-md:w-1/3 text-left truncate">
+                              {brandItem.name && brandItem.name !== brandItem.brand ? brandItem.name : detailName || 'Запчасть'}
                             </div>
                           </div>
-                          <svg 
-                            className="w-6 h-6 text-gray-400 group-hover:text-red-500 transition-colors flex-shrink-0 ml-4" 
-                            fill="none" 
-                            stroke="currentColor" 
-                            viewBox="0 0 24 24"
-                          >
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                          </svg>
-                        </div>
-                      </button>
+                        </button>
+                      </div>
                     ))}
                   </div>
-
-                  <div className="mt-8 pt-6 border-t border-gray-200">
-                    <div className="flex items-center justify-between">
-                      <div className="text-sm text-gray-600">
-                        Не нашли нужного производителя?
-                      </div>
-                      <div className="text-sm text-gray-500">
-                        Обратитесь к менеджеру: <span className="font-medium text-gray-700">+7 (495) 123-45-67</span>
-                      </div>
-                    </div>
-                  </div>
                 </div>
               )}
             </div>
-          </div>
+          )}
         </div>
+        <MobileMenuBottomSection />
+        <Footer />
       </div>
-      <Footer />
     </>
   );
 };