Resolve merge conflicts in HouseCalculatorModal.tsx

src/components/HouseCalculatorModal.tsx

@@ -4,9 +4,30 @@ import { useState } from 'react';
 import { X, ChevronLeft, ChevronRight, Check } from 'lucide-react';
 
 const materials = [
-  { label: 'Кирпич/керамический блок', value: 'Кирпич/керамический блок', img: '/images/keramic.jpg' },
-  { label: 'Газобетон', value: 'Газобетон', img: '/images/gazobet.png' },
-  { label: 'Керамзитобетон', value: 'Керамзитобетон', img: '/images/keramiz.jpg' },
+  { 
+    label: 'Кирпич/керамический блок', 
+    value: 'Кирпич/керамический блок', 
+    img: '/images/keramic.jpg',
+    icon: '🧱',
+    name: 'Кирпич',
+    description: 'Прочный и долговечный'
+  },
+  { 
+    label: 'Газобетон', 
+    value: 'Газобетон', 
+    img: '/images/gazobet.png',
+    icon: '🏗️',
+    name: 'Газобетон',
+    description: 'Легкий и теплый'
+  },
+  { 
+    label: 'Керамзитобетон', 
+    value: 'Керамзитобетон', 
+    img: '/images/keramiz.jpg',
+    icon: '🏠',
+    name: 'Керамзитобетон',
+    description: 'Экологичный материал'
+  },
 ];
 
 const areas = [
@@ -16,6 +37,19 @@ const areas = [
   'более 200 кв.м.',
 ];
 
+const finishOptions = [
+  'Без отделки',
+  'Черновая отделка (стяжка, штукатурка и тд)',
+  'Чистовая отделка (обои, ламинат и тд)',
+];
+
+const financeOptions = [
+  'Наличные',
+  'Сельская ипотека',
+  'Ипотека, кредит',
+  'Свой вариант',
+];
+
 interface HouseCalculatorModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -33,6 +67,14 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
   if (!isOpen) return null;
 
+  const canProceed = () => {
+    if (step === 1) return material !== '';
+    if (step === 2) return area !== '';
+    if (step === 3) return finish !== '';
+    if (step === 4) return finance !== '';
+    return true;
+  };
+
   const handleNext = () => {
     if (step === 1 && !material) return;
     if (step === 2 && !area) return;
@@ -73,7 +115,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
         setStep(5);
       }
     } catch {
-      // Обработка ошибки
+      // Обработка ошибок
     } finally {
       setIsSubmitting(false);
     }
@@ -89,9 +131,23 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
     onClose();
   };
 
+  const calculatePrice = () => {
+    let basePrice = 1500000; // Базовая цена
+    
+    // Корректировка по площади
+    if (area === '100-150 кв.м.') basePrice *= 1.3;
+    else if (area === '150-200 кв.м.') basePrice *= 1.6;
+    else if (area === 'более 200 кв.м.') basePrice *= 2;
+    
+    // Корректировка по материалу
+    if (material === 'Кирпич/керамический блок') basePrice *= 1.2;
+    else if (material === 'Керамзитобетон') basePrice *= 1.1;
+    
+    return Math.round(basePrice);
+  };
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-2 sm:p-4">
-      {/* Декоративный фон */}
       <div className="absolute inset-0 opacity-20">
         <div className="absolute top-1/4 left-1/4 w-64 sm:w-80 lg:w-96 h-64 sm:h-80 lg:h-96 bg-blue-500 rounded-full blur-3xl"></div>
         <div className="absolute bottom-1/4 right-1/4 w-56 sm:w-64 lg:w-80 h-56 sm:h-64 lg:h-80 bg-purple-500 rounded-full blur-3xl"></div>
@@ -137,9 +193,15 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
                     }`}></div>
                     
                     <div className="relative z-10 text-center">
+                      <div className="text-2xl sm:text-3xl lg:text-4xl mb-2 sm:mb-3 group-hover:scale-110 transition-transform duration-300">
+                        {m.icon}
+                      </div>
                       <h3 className="text-sm sm:text-base lg:text-lg font-bold text-white mb-1 sm:mb-2 group-hover:text-blue-300 transition-colors duration-300">
-                        {m.label}
+                        {m.name}
                       </h3>
+                      <p className="text-xs sm:text-sm text-gray-300 group-hover:text-white transition-colors duration-300">
+                        {m.description}
+                      </p>
                     </div>
                   </button>
                 ))}
@@ -176,22 +238,24 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
           {step === 3 && (
             <div>
               <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
-                Выберите тип отделки
+                Вариант отделки
               </h2>
-              <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
-                {['Без отделки', 'Черновая отделка', 'Чистовая отделка'].map((f) => (
-                  <label key={f} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
+              <div className="space-y-2 sm:space-y-3 lg:space-y-4">
+                {finishOptions.map((option) => (
+                  <label key={option} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
                     <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                     <div className="relative z-10 flex items-center">
                       <input
                         type="radio"
                         name="finish"
-                        value={f}
-                        checked={finish === f}
-                        onChange={() => setFinish(f)}
+                        value={option}
+                        checked={finish === option}
+                        onChange={() => setFinish(option)}
                         className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 mr-2 sm:mr-3 accent-blue-500"
                       />
-                      <span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
+                      <span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">
+                        {option}
+                      </span>
                     </div>
                   </label>
                 ))}
@@ -204,20 +268,22 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
                 Источник финансирования
               </h2>
-              <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
-                {['Наличные', 'Сельская ипотека', 'Ипотека, кредит', 'Свой вариант'].map((f) => (
-                  <label key={f} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
+              <div className="space-y-2 sm:space-y-3 lg:space-y-4">
+                {financeOptions.map((option) => (
+                  <label key={option} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
                     <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                     <div className="relative z-10 flex items-center">
                       <input
                         type="radio"
                         name="finance"
-                        value={f}
-                        checked={finance === f}
-                        onChange={() => setFinance(f)}
+                        value={option}
+                        checked={finance === option}
+                        onChange={() => setFinance(option)}
                         className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 mr-2 sm:mr-3 accent-blue-500"
                       />
-                      <span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
+                      <span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">
+                        {option}
+                      </span>
                     </div>
                   </label>
                 ))}
@@ -232,10 +298,35 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
                 <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
                   Спасибо за заявку!
                 </h2>
+                <div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-400 mb-2 sm:mb-4">
+                  {calculatePrice().toLocaleString()} ₽
+                </div>
                 <p className="text-sm sm:text-base text-gray-300">
                   Мы свяжемся с вами в ближайшее время
                 </p>
               </div>
+              
+              <div className="bg-white/10 backdrop-blur-md rounded-xl p-4 sm:p-6 mb-6 sm:mb-8 border border-white/20">
+                <h3 className="text-base sm:text-lg font-bold text-white mb-3 sm:mb-4">Детали расчета:</h3>
+                <div className="space-y-2 text-sm sm:text-base text-gray-300">
+                  <div className="flex justify-between">
+                    <span>Материал:</span>
+                    <span className="text-white">{materials.find(m => m.value === material)?.name}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Площадь:</span>
+                    <span className="text-white">{area}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Отделка:</span>
+                    <span className="text-white">{finish}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Финансирование:</span>
+                    <span className="text-white">{finance}</span>
+                  </div>
+                </div>
+              </div>
             </div>
           )}
 
@@ -253,11 +344,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
             {step < 4 && (
               <button
                 onClick={handleNext}
-                disabled={
-                  (step === 1 && !material) ||
-                  (step === 2 && !area) ||
-                  (step === 3 && !finish)
-                }
+                disabled={!canProceed()}
                 className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
               >
                 <span>Далее</span>
@@ -268,11 +355,11 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
             {step === 4 && (
               <button
                 onClick={handleNext}
-                disabled={!finance || isSubmitting}
+                disabled={!canProceed() || isSubmitting}
                 className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
               >
-                <span>{isSubmitting ? 'Отправка...' : 'Отправить'}</span>
-                <Check className="w-4 h-4 sm:w-5 sm:h-5" />
+                <span>{isSubmitting ? 'Отправка...' : 'Рассчитать'}</span>
+                <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
             )}