ElectroFix \u2014 \u0440\u0435\u043c\u043e\u043d\u0442 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u043e\u0432, \u0441\u043a\u0443\u0442\u0435\u0440\u043e\u0432 \u0438 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432<\/title>\n\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');\n\n :root {\n --bg: #020617;\n --panel: #0f172a;\n --panel2: #111827;\n --line: rgba(255,255,255,.09);\n --muted: #94a3b8;\n --green: #22c55e;\n --blue: #3b82f6;\n --amber: #f59e0b;\n }\n\n html { scroll-behavior: smooth; }\n body { margin: 0; background: var(--bg); }\n\n #workshop-app-scope {\n min-height: 100vh;\n font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n color-scheme: dark;\n background: radial-gradient(circle at 70% 10%, rgba(34,197,94,.14), transparent 28%), #020617;\n color: #f8fafc;\n text-align: left;\n }\n\n #workshop-app-scope * { box-sizing: border-box; }\n #workshop-app-scope h1,\n #workshop-app-scope h2,\n #workshop-app-scope h3,\n #workshop-app-scope h4,\n #workshop-app-scope p { margin: 0; }\n\n #workshop-app-scope button {\n border: 0;\n cursor: pointer;\n font-family: inherit;\n transition: all .2s ease;\n }\n\n #workshop-app-scope input,\n #workshop-app-scope select,\n #workshop-app-scope textarea {\n outline: none;\n font-family: inherit;\n }\n\n .soft-grid {\n background-image: radial-gradient(circle, rgba(34,197,94,.16) 1px, transparent 1px);\n background-size: 28px 28px;\n }\n\n .marquee-track {\n overflow: hidden;\n background: var(--green);\n padding: 14px 0;\n display: flex;\n }\n\n .marquee-content {\n display: flex;\n white-space: nowrap;\n animation: marquee-shuttle 34s linear infinite;\n }\n\n @keyframes marquee-shuttle {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n }\n\n .map-dot-pulse {\n position: absolute;\n width: 14px;\n height: 14px;\n background: var(--green);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n animation: pulse-dot 2s infinite;\n }\n\n @keyframes pulse-dot {\n 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.65); }\n 70% { box-shadow: 0 0 0 22px rgba(34,197,94,0); }\n 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }\n }\n\n .fade-in { animation: fadeIn .45s ease both; }\n .slide-up { animation: slideUp .42s ease both; }\n .zoom-in { animation: zoomIn .25s ease both; }\n\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n @keyframes slideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes zoomIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }\n\n .custom-scroll::-webkit-scrollbar { width: 8px; height: 8px; }\n .custom-scroll::-webkit-scrollbar-track { background: rgba(15,23,42,.6); border-radius: 20px; }\n .custom-scroll::-webkit-scrollbar-thumb { background: rgba(34,197,94,.55); border-radius: 20px; }\n <\/style>\n<\/head>\n<body>\n <div id=\"workshop-app-scope\">\n <div id=\"workshop-root-mount\"><\/div>\n <\/div>\n\n <script type=\"text\/babel\">\n (function () {\n 'use strict';\n\n const ReactRef = window.React;\n const ReactDOMRef = window.ReactDOM;\n const mountNode = document.getElementById('workshop-root-mount');\n\n if (!ReactRef || !ReactDOMRef) {\n if (mountNode) {\n mountNode.innerHTML = '<div style=\"min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;text-align:center;color:white;background:#020617;font-family:Arial,sans-serif;\">\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c React. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0438\u043b\u0438 CDN.<\/div>';\n }\n return;\n }\n\n const { useMemo, useState } = ReactRef;\n\n const ICON_PATHS = {\n zap: ['<path d=\"M13 2 3 14h8l-1 8 11-14h-8l1-6Z\" \/>'],\n wrench: ['<path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.3-3.3a6 6 0 0 1-7.7 7.7l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.7-7.7l-3.3 3.3Z\" \/>'],\n search: ['<circle cx=\"11\" cy=\"11\" r=\"8\" \/>','<path d=\"m21 21-4.3-4.3\" \/>'],\n clock: ['<circle cx=\"12\" cy=\"12\" r=\"10\" \/>','<path d=\"M12 6v6l4 2\" \/>'],\n shield: ['<path d=\"M20 13c0 5-3.5 7.5-7.7 8.8a1 1 0 0 1-.6 0C7.5 20.5 4 18 4 13V5a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.5a1.3 1.3 0 0 1 1.6 0C14.5 2.8 17 4 19 4a1 1 0 0 1 1 1v8Z\" \/>','<path d=\"m9 12 2 2 4-4\" \/>'],\n chevronRight: ['<path d=\"m9 18 6-6-6-6\" \/>'],\n chevronDown: ['<path d=\"m6 9 6 6 6-6\" \/>'],\n phone: ['<path d=\"M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.7 2.6a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6.3 6.3l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.7.6 2.6.7a2 2 0 0 1 1.7 2Z\" \/>'],\n mapPin: ['<path d=\"M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 0 1 16 0Z\" \/>','<circle cx=\"12\" cy=\"10\" r=\"3\" \/>'],\n star: ['<path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21l1.2-6.8-5-4.9 6.9-1L12 2Z\" \/>'],\n message: ['<path d=\"M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8Z\" \/>'],\n x: ['<path d=\"M18 6 6 18\" \/>','<path d=\"m6 6 12 12\" \/>'],\n navigation: ['<path d=\"m3 11 19-9-9 19-2-8-8-2Z\" \/>'],\n smartphone: ['<rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\" \/>','<path d=\"M12 18h.01\" \/>'],\n truck: ['<path d=\"M10 17h4V5H2v12h3\" \/>','<path d=\"M14 17h1\" \/>','<path d=\"M19 17h3v-6l-3-4h-5\" \/>','<circle cx=\"7.5\" cy=\"17.5\" r=\"2.5\" \/>','<circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\" \/>'],\n checkCircle: ['<path d=\"M22 11.1V12a10 10 0 1 1-5.9-9.1\" \/>','<path d=\"m9 11 3 3L22 4\" \/>'],\n bike: ['<circle cx=\"5.5\" cy=\"17.5\" r=\"3.5\" \/>','<circle cx=\"18.5\" cy=\"17.5\" r=\"3.5\" \/>','<path d=\"M15 6h3l-3 7H8l4-7h3Z\" \/>','<path d=\"M9 17.5 12 13\" \/>','<path d=\"M15 13 18.5 17.5\" \/>'],\n battery: ['<rect width=\"16\" height=\"10\" x=\"2\" y=\"7\" rx=\"2\" \/>','<path d=\"M22 11v2\" \/>','<path d=\"M6 11h8\" \/>'],\n creditCard: ['<rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\" \/>','<path d=\"M2 10h20\" \/>'],\n settings: ['<path d=\"M12.2 2h-.4l-1 3a7.8 7.8 0 0 0-1.7.7L6.4 4.3 4.3 6.4l1.4 2.7A7.8 7.8 0 0 0 5 10.8l-3 .9v.6l3 .9c.2.6.4 1.2.7 1.7l-1.4 2.7 2.1 2.1 2.7-1.4c.5.3 1.1.5 1.7.7l1 3h.4l1-3c.6-.2 1.2-.4 1.7-.7l2.7 1.4 2.1-2.1-1.4-2.7c.3-.5.5-1.1.7-1.7l3-.9v-.6l-3-.9a7.8 7.8 0 0 0-.7-1.7l1.4-2.7-2.1-2.1-2.7 1.4a7.8 7.8 0 0 0-1.7-.7l-1-3Z\" \/>','<circle cx=\"12\" cy=\"12\" r=\"3\" \/>'],\n layers: ['<path d=\"m12 2 10 5-10 5L2 7l10-5Z\" \/>','<path d=\"m2 17 10 5 10-5\" \/>','<path d=\"m2 12 10 5 10-5\" \/>'],\n calendar: ['<path d=\"M8 2v4\" \/>','<path d=\"M16 2v4\" \/>','<rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" \/>','<path d=\"M3 10h18\" \/>'],\n user: ['<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" \/>','<circle cx=\"12\" cy=\"7\" r=\"4\" \/>'],\n users: ['<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" \/>','<circle cx=\"9\" cy=\"7\" r=\"4\" \/>','<path d=\"M22 21v-2a4 4 0 0 0-3-3.87\" \/>','<path d=\"M16 3.13a4 4 0 0 1 0 7.75\" \/>'],\n package: ['<path d=\"m7.5 4.3 9 5.2\" \/>','<path d=\"M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7Z\" \/>','<path d=\"m3.3 7 8.7 5 8.7-5\" \/>','<path d=\"M12 22V12\" \/>'],\n alert: ['<circle cx=\"12\" cy=\"12\" r=\"10\" \/>','<path d=\"M12 8v4\" \/>','<path d=\"M12 16h.01\" \/>'],\n lock: ['<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" \/>','<path d=\"M7 11V7a5 5 0 0 1 10 0v4\" \/>'],\n bell: ['<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8\" \/>','<path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\" \/>'],\n image: ['<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" \/>','<circle cx=\"9\" cy=\"9\" r=\"2\" \/>','<path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\" \/>'],\n file: ['<path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z\" \/>','<path d=\"M14 2v6h6\" \/>','<path d=\"M16 13H8\" \/>','<path d=\"M16 17H8\" \/>','<path d=\"M10 9H8\" \/>'],\n qr: ['<rect width=\"5\" height=\"5\" x=\"3\" y=\"3\" rx=\"1\" \/>','<rect width=\"5\" height=\"5\" x=\"16\" y=\"3\" rx=\"1\" \/>','<rect width=\"5\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\" \/>','<path d=\"M21 16h-3a2 2 0 0 0-2 2v3\" \/>','<path d=\"M21 21v.01\" \/>','<path d=\"M12 7v3a2 2 0 0 1-2 2H7\" \/>','<path d=\"M3 12h.01\" \/>','<path d=\"M12 3h.01\" \/>','<path d=\"M12 16v.01\" \/>','<path d=\"M16 12h1\" \/>','<path d=\"M21 12v.01\" \/>','<path d=\"M12 21v-1\" \/>'],\n percent: ['<line x1=\"19\" x2=\"5\" y1=\"5\" y2=\"19\" \/>','<circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\" \/>','<circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\" \/>'],\n chart: ['<path d=\"M3 3v18h18\" \/>','<path d=\"m19 9-5 5-4-4-3 3\" \/>'],\n mail: ['<rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" \/>','<path d=\"m22 7-8.97 5.7a2 2 0 0 1-2.06 0L2 7\" \/>']\n };\n\n function Icon({ name, size = 24, className = '', fill = 'none', strokeWidth = 2, ...props }) {\n const paths = ICON_PATHS[name] || ICON_PATHS.zap;\n return (\n <svg\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill={fill}\n stroke=\"currentColor\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={className}\n aria-hidden=\"true\"\n dangerouslySetInnerHTML={{ __html: paths.join('') }}\n {...props}\n \/>\n );\n }\n\n const TRANSPORTS = [\n { id: 'all', label: '\u0412\u0441\u0435', icon: 'layers' },\n { id: 'scooter', label: '\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u044b', icon: 'zap' },\n { id: 'moped', label: '\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u044b', icon: 'battery' },\n { id: 'bike', label: '\u0412\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b', icon: 'bike' },\n { id: 'ebike', label: '\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b', icon: 'bike' }\n ];\n\n const LOCATIONS = [\n {\n id: 1,\n name: '\u0411\u0426 \u00ab\u0421\u0442\u0430\u043d\u043a\u043e\u043b\u0438\u0442\u00bb',\n address: '\u041c\u043e\u0441\u043a\u0432\u0430, \u0443\u043b. \u0421\u043a\u043b\u0430\u0434\u043e\u0447\u043d\u0430\u044f, 1\u04411',\n metro: '\u043c. \u0421\u0430\u0432\u0451\u043b\u043e\u0432\u0441\u043a\u0430\u044f, 10 \u043c\u0438\u043d\u0443\u0442 \u043f\u0435\u0448\u043a\u043e\u043c',\n phone: '+7 (495) 000-00-01',\n hours: '10:00\u201321:00 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e',\n parking: '\u0415\u0441\u0442\u044c \u0437\u043e\u043d\u0430 \u0440\u0430\u0437\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0432\u0435\u043b\u043e\u043f\u0430\u0440\u043a\u043e\u0432\u043a\u0430',\n desc: '\u0424\u043b\u0430\u0433\u043c\u0430\u043d\u0441\u043a\u0438\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430 \u0441\u0435\u0432\u0435\u0440\u0435 \u041c\u043e\u0441\u043a\u0432\u044b: \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043a\u043b\u0430\u0434 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439, \u0448\u0438\u043d\u043e\u043c\u043e\u043d\u0442\u0430\u0436, \u0440\u0435\u043c\u043e\u043d\u0442 \u0410\u041a\u0411 \u0438 \u0437\u043e\u043d\u0430 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f.',\n coords: '55.801648,37.593321',\n pos: { x: '42%', y: '35%' },\n services: ['\u0428\u0438\u043d\u043e\u043c\u043e\u043d\u0442\u0430\u0436', '\u0410\u041a\u0411', '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430', '\u0422\u041e \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432']\n },\n {\n id: 2,\n name: '\u041a\u0432\u0430\u0440\u0442\u0430\u043b \u00abArtplay\u00bb',\n address: '\u041c\u043e\u0441\u043a\u0432\u0430, \u0443\u043b. \u041d. \u0421\u044b\u0440\u043e\u043c\u044f\u0442\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f, 10',\n metro: '\u043c. \u041a\u0443\u0440\u0441\u043a\u0430\u044f \/ \u0427\u043a\u0430\u043b\u043e\u0432\u0441\u043a\u0430\u044f',\n phone: '+7 (495) 000-00-02',\n hours: '10:00\u201321:00 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e',\n parking: '\u041f\u0430\u0440\u043a\u043e\u0432\u043a\u0430 \u043d\u0430 \u0442\u0435\u0440\u0440\u0438\u0442\u043e\u0440\u0438\u0438 \u043a\u0432\u0430\u0440\u0442\u0430\u043b\u0430',\n desc: '\u0426\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0438\u043b\u0438\u0430\u043b: \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430, \u0442\u044e\u043d\u0438\u043d\u0433, \u0433\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f, \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0434\u043a\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439.',\n coords: '55.751999,37.669299',\n pos: { x: '68%', y: '58%' },\n services: ['\u0422\u044e\u043d\u0438\u043d\u0433', '\u0413\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f', '\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b', '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430']\n }\n ];\n\n const SERVICES = [\n { id: 1, type: 'scooter', category: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', title: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u0430', price: 1500, time: '20\u201340 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: true, desc: '\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0431\u0430\u0442\u0430\u0440\u0435\u0438, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438, \u0434\u0438\u0441\u043f\u043b\u0435\u044f, \u043c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u0430 \u0438 \u0442\u043e\u0440\u043c\u043e\u0437\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.' },\n { id: 2, type: 'scooter', category: '\u041a\u043e\u043b\u0451\u0441\u0430', title: '\u0417\u0430\u043c\u0435\u043d\u0430 \u043a\u0430\u043c\u0435\u0440\u044b', price: 2000, time: '30\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: true, desc: '\u0421\u043d\u044f\u0442\u0438\u0435 \u043a\u043e\u043b\u0435\u0441\u0430, \u0437\u0430\u043c\u0435\u043d\u0430 \u043a\u0430\u043c\u0435\u0440\u044b, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0434\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0433\u0435\u0440\u043c\u0435\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438.' },\n { id: 3, type: 'scooter', category: '\u041a\u043e\u043b\u0451\u0441\u0430', title: '\u0417\u0430\u043c\u0435\u043d\u0430 \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0438', price: 2500, time: '40\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: true, desc: '\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0438 \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u043f\u043e\u0441\u0430\u0434\u043a\u0438 \u0438 \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u043a\u0438.' },\n { id: 4, type: 'scooter', category: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430', title: '\u0420\u0435\u043c\u043e\u043d\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430', price: 3500, time: '\u043e\u0442 1 \u0447\u0430\u0441\u0430', guarantee: '60 \u0434\u043d\u0435\u0439', popular: true, desc: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430, \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0437\u0430\u043c\u0435\u043d\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0441 \u0442\u0435\u0441\u0442\u043e\u043c \u043f\u043e\u0434 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.' },\n { id: 5, type: 'scooter', category: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430', title: '\u0420\u0435\u043c\u043e\u043d\u0442 \u0430\u043a\u043a\u0443\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430', price: 5500, time: '2\u20134 \u0434\u043d\u044f', guarantee: '90 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 BMS, \u0437\u0430\u043c\u0435\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432 \u0438 \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u043a\u0430.' },\n { id: 6, type: 'scooter', category: '\u0417\u0430\u0449\u0438\u0442\u0430', title: '\u0413\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f IP67', price: 3500, time: '1 \u0434\u0435\u043d\u044c', guarantee: '60 \u0434\u043d\u0435\u0439', popular: true, desc: '\u0417\u0430\u0449\u0438\u0442\u0430 \u043a\u043e\u0440\u043f\u0443\u0441\u0430, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0434\u0438\u0441\u043f\u043b\u0435\u044f \u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438 \u043e\u0442 \u0432\u043b\u0430\u0433\u0438.' },\n { id: 7, type: 'moped', category: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', title: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u0430', price: 2500, time: '30\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0434\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044f, \u0410\u041a\u0411, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432, \u043f\u043e\u0434\u0432\u0435\u0441\u043a\u0438 \u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0438.' },\n { id: 8, type: 'moped', category: '\u0428\u0438\u043d\u043e\u043c\u043e\u043d\u0442\u0430\u0436', title: '\u0428\u0438\u043d\u043e\u043c\u043e\u043d\u0442\u0430\u0436 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u0430', price: 3000, time: '1\u20132 \u0447\u0430\u0441\u0430', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0417\u0430\u043c\u0435\u043d\u0430 \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0438 \u0438\u043b\u0438 \u043a\u0430\u043c\u0435\u0440\u044b \u043d\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u0435.' },\n { id: 9, type: 'moped', category: '\u041f\u043e\u0434\u0432\u0435\u0441\u043a\u0430', title: '\u0420\u0435\u043c\u043e\u043d\u0442 \u043f\u043e\u0434\u0432\u0435\u0441\u043a\u0438', price: 4200, time: '2\u20133 \u0447\u0430\u0441\u0430', guarantee: '60 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u043b\u044e\u0444\u0442\u043e\u0432, \u0437\u0430\u043c\u0435\u043d\u0430 \u043f\u043e\u0434\u0448\u0438\u043f\u043d\u0438\u043a\u043e\u0432, \u0430\u043c\u043e\u0440\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u0432 \u0438 \u043a\u0440\u0435\u043f\u0435\u0436\u0430.' },\n { id: 10, type: 'bike', category: '\u0422\u041e', title: '\u041f\u043e\u043b\u043d\u043e\u0435 \u0422\u041e \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430', price: 4500, time: '1\u20132 \u0447\u0430\u0441\u0430', guarantee: '30 \u0434\u043d\u0435\u0439', popular: true, desc: '\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0435\u0439, \u0441\u043c\u0430\u0437\u043a\u0430, \u043f\u0440\u043e\u0442\u044f\u0436\u043a\u0430 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0443\u0437\u043b\u043e\u0432.' },\n { id: 11, type: 'bike', category: '\u0422\u043e\u0440\u043c\u043e\u0437\u0430', title: '\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432', price: 1000, time: '20\u201340 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0420\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u043a\u0430 \u043c\u0435\u0445\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043b\u0438 \u0433\u0438\u0434\u0440\u0430\u0432\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432.' },\n { id: 12, type: 'bike', category: '\u0422\u0440\u0430\u043d\u0441\u043c\u0438\u0441\u0441\u0438\u044f', title: '\u0417\u0430\u043c\u0435\u043d\u0430 \u0446\u0435\u043f\u0438 \u0438 \u043a\u0430\u0441\u0441\u0435\u0442\u044b', price: 2200, time: '40\u201380 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u041f\u043e\u0434\u0431\u043e\u0440, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u0440\u0430\u043d\u0441\u043c\u0438\u0441\u0441\u0438\u0438.' },\n { id: 13, type: 'ebike', category: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', title: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430', price: 2000, time: '30\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u0430, \u0410\u041a\u0411, \u0434\u0438\u0441\u043f\u043b\u0435\u044f, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438.' },\n { id: 14, type: 'ebike', category: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430', title: '\u0420\u0435\u043c\u043e\u043d\u0442 \u043c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u0430', price: 4800, time: '1\u20132 \u0434\u043d\u044f', guarantee: '90 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430, \u0437\u0430\u043c\u0435\u043d\u0430 \u0434\u0430\u0442\u0447\u0438\u043a\u043e\u0432 \u0425\u043e\u043b\u043b\u0430, \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438.' },\n { id: 15, type: 'all', category: '\u0412\u044b\u0435\u0437\u0434', title: '\u042d\u0432\u0430\u043a\u0443\u0430\u0446\u0438\u044f \u0432 \u0441\u0435\u0440\u0432\u0438\u0441', price: 1200, time: '\u043e\u0442 1 \u0447\u0430\u0441\u0430', guarantee: '\u2014', popular: true, desc: '\u0417\u0430\u0431\u0435\u0440\u0451\u043c \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442 \u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0444\u0438\u043b\u0438\u0430\u043b.' }\n ];\n\n const PARTS = [\n { id: 1, category: '\u041f\u043e\u043a\u0440\u044b\u0448\u043a\u0438', type: 'scooter', name: '\u041f\u043e\u043a\u0440\u044b\u0448\u043a\u0430 10x2.5 \u0443\u0441\u0438\u043b\u0435\u043d\u043d\u0430\u044f', desc: '\u0414\u043b\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u043e\u0432 Ninebot, Kugoo, Halten \u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432.', compatible: '10-\u0434\u044e\u0439\u043c\u043e\u0432\u044b\u0435 \u0441\u0430\u043c\u043e\u043a\u0430\u0442\u044b', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 2500, installPrice: 2000, time: '40\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0425\u0438\u0442' },\n { id: 2, category: '\u041a\u0430\u043c\u0435\u0440\u044b', type: 'scooter', name: '\u041a\u0430\u043c\u0435\u0440\u0430 10x2 \/ 10x2.125', desc: '\u0423\u0441\u0438\u043b\u0435\u043d\u043d\u0430\u044f \u043a\u0430\u043c\u0435\u0440\u0430 \u0441 \u0438\u0437\u043e\u0433\u043d\u0443\u0442\u044b\u043c \u043d\u0438\u043f\u043f\u0435\u043b\u0435\u043c.', compatible: 'Ninebot, Kugoo, Xiaomi', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 900, installPrice: 2000, time: '30\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0421 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439' },\n { id: 3, category: '\u0422\u043e\u0440\u043c\u043e\u0437\u0430', type: 'bike', name: '\u0422\u043e\u0440\u043c\u043e\u0437\u043d\u044b\u0435 \u043a\u043e\u043b\u043e\u0434\u043a\u0438 Shimano compatible', desc: '\u041a\u043e\u043c\u043f\u043b\u0435\u043a\u0442 \u043a\u043e\u043b\u043e\u0434\u043e\u043a \u0434\u043b\u044f \u0434\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432.', compatible: 'MTB, city, e-bike', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 1200, installPrice: 1000, time: '20\u201340 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0422\u041e' },\n { id: 4, category: '\u0410\u043a\u043a\u0443\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u044b', type: 'scooter', name: '\u0410\u041a\u0411 36V 10Ah \u0441 BMS', desc: '\u0421\u0431\u043e\u0440\u043a\u0430 \u0431\u0430\u0442\u0430\u0440\u0435\u0438 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 BMS \u0438 \u0442\u0435\u0441\u0442\u043e\u043c \u043f\u043e\u0434 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.', compatible: '36V \u0441\u0438\u0441\u0442\u0435\u043c\u044b', stock: '\u041f\u043e\u0434 \u0437\u0430\u043a\u0430\u0437 2\u20133 \u0434\u043d\u044f', partPrice: 12500, installPrice: 2500, time: '1\u20132 \u0434\u043d\u044f', guarantee: '90 \u0434\u043d\u0435\u0439', badge: '\u041f\u043e\u0434 \u0437\u0430\u043a\u0430\u0437' },\n { id: 5, category: '\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b', type: 'scooter', name: '\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 36\/48V \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439', desc: '\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0434\u043b\u044f \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u044f\u0433\u0438 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044f.', compatible: '36V \/ 48V', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 3900, installPrice: 3500, time: '1\u20132 \u0447\u0430\u0441\u0430', guarantee: '60 \u0434\u043d\u0435\u0439', badge: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430' },\n { id: 6, category: '\u0414\u0438\u0441\u043f\u043b\u0435\u0438', type: 'scooter', name: '\u0414\u0438\u0441\u043f\u043b\u0435\u0439 \u0441 \u043a\u0443\u0440\u043a\u043e\u043c \u0433\u0430\u0437\u0430', desc: '\u041c\u043e\u0434\u0443\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0438\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438 \u0437\u0430\u0440\u044f\u0434\u0430.', compatible: 'Kugoo, Halten, \u0430\u043d\u0430\u043b\u043e\u0433\u0438', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 2800, installPrice: 1800, time: '40 \u043c\u0438\u043d', guarantee: '60 \u0434\u043d\u0435\u0439', badge: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430' },\n { id: 7, category: '\u041c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0451\u0441\u0430', type: 'ebike', name: '\u041c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u043e 350W', desc: '\u041c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u043e \u0434\u043b\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432 \u0438 \u043b\u0451\u0433\u043a\u0438\u0445 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u043e\u0432.', compatible: '26\u201328 \u0434\u044e\u0439\u043c\u043e\u0432', stock: '\u041f\u043e\u0434 \u0437\u0430\u043a\u0430\u0437', partPrice: 15500, installPrice: 4800, time: '1\u20132 \u0434\u043d\u044f', guarantee: '90 \u0434\u043d\u0435\u0439', badge: '\u0421\u043b\u043e\u0436\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430' },\n { id: 8, category: '\u0426\u0435\u043f\u0438', type: 'bike', name: '\u0426\u0435\u043f\u044c Shimano 8\/9 speed', desc: '\u0426\u0435\u043f\u044c \u0434\u043b\u044f \u0433\u043e\u0440\u043e\u0434\u0441\u043a\u0438\u0445 \u0438 \u0433\u043e\u0440\u043d\u044b\u0445 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432.', compatible: '8\/9 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0435\u0439', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 1600, installPrice: 900, time: '30 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438' },\n { id: 9, category: '\u0424\u0430\u0440\u044b', type: 'all', name: 'LED-\u0444\u0430\u0440\u0430 \u0432\u043b\u0430\u0433\u043e\u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u0430\u044f', desc: '\u042f\u0440\u043a\u0430\u044f \u0444\u0430\u0440\u0430 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u043a\u0430\u0442\u043e\u0432, \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432 \u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u043e\u0432.', compatible: '12\u201360V', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 2100, installPrice: 1200, time: '30\u201350 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0421\u0432\u0435\u0442' }\n ];\n\n const SLOTS = [\n { date: '\u0421\u0435\u0433\u043e\u0434\u043d\u044f', iso: '2026-05-05', slots: [\n { time: '10:00', free: false, master: '\u0410\u0440\u0442\u0451\u043c' }, { time: '11:00', free: true, master: '\u0418\u043b\u044c\u044f' },\n { time: '12:30', free: true, master: '\u0414\u0435\u043d\u0438\u0441' }, { time: '14:00', free: false, master: '\u0410\u0440\u0442\u0451\u043c' },\n { time: '16:30', free: true, master: '\u0418\u043b\u044c\u044f' }, { time: '18:00', free: true, master: '\u0414\u0435\u043d\u0438\u0441' }\n ]},\n { date: '\u0417\u0430\u0432\u0442\u0440\u0430', iso: '2026-05-06', slots: [\n { time: '10:30', free: true, master: '\u0410\u0440\u0442\u0451\u043c' }, { time: '12:00', free: true, master: '\u0418\u043b\u044c\u044f' },\n { time: '13:30', free: false, master: '\u0414\u0435\u043d\u0438\u0441' }, { time: '15:00', free: true, master: '\u0410\u0440\u0442\u0451\u043c' },\n { time: '17:30', free: true, master: '\u0418\u043b\u044c\u044f' }, { time: '19:00', free: false, master: '\u0414\u0435\u043d\u0438\u0441' }\n ]},\n { date: '7 \u043c\u0430\u044f', iso: '2026-05-07', slots: [\n { time: '10:00', free: true, master: '\u0414\u0435\u043d\u0438\u0441' }, { time: '11:30', free: true, master: '\u0410\u0440\u0442\u0451\u043c' },\n { time: '13:00', free: true, master: '\u0418\u043b\u044c\u044f' }, { time: '15:30', free: false, master: '\u0414\u0435\u043d\u0438\u0441' },\n { time: '17:00', free: true, master: '\u0410\u0440\u0442\u0451\u043c' }, { time: '20:00', free: true, master: '\u0418\u043b\u044c\u044f' }\n ]}\n ];\n\n const REPAIR_STATUS = {\n current: 2,\n steps: ['\u041f\u0440\u0438\u043d\u044f\u0442', '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', '\u0421\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435', '\u0412 \u0440\u0435\u043c\u043e\u043d\u0442\u0435', '\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435', '\u0413\u043e\u0442\u043e\u0432'],\n masterComment: '\u041d\u0430\u0439\u0434\u0435\u043d \u0441\u0433\u043e\u0440\u0435\u0432\u0448\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e. \u0411\u0435\u0437 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u0440\u0435\u043c\u043e\u043d\u0442 \u043d\u0435 \u043d\u0430\u0447\u0430\u0442.',\n price: 4800,\n warranty: '60 \u0434\u043d\u0435\u0439',\n photos: ['\u0424\u043e\u0442\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430', '\u0424\u043e\u0442\u043e \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438', '\u0424\u043e\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438']\n };\n\n const REVIEWS = [\n { name: '\u0418\u0432\u0430\u043d', text: '\u041f\u043e\u043c\u0435\u043d\u044f\u043b\u0438 \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0443 \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0433\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e \u0437\u0430 \u0434\u0435\u043d\u044c. \u0423\u0434\u043e\u0431\u043d\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0437\u0432\u043e\u043d\u043a\u0430.', rating: 5 },\n { name: '\u041c\u0430\u0440\u0438\u044f', text: '\u041f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438 \u043f\u0440\u0438\u0441\u043b\u0430\u043b\u0438 \u0441\u043c\u0435\u0442\u0443, \u044f \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u043b\u0430 \u043e\u043d\u043b\u0430\u0439\u043d. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u044e\u0440\u043f\u0440\u0438\u0437\u043e\u0432 \u043f\u043e \u0446\u0435\u043d\u0435.', rating: 5 },\n { name: '\u0414\u043e\u0441\u0442\u0430\u0432\u043a\u0430 FastGo', text: '\u041e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u043c \u043f\u0430\u0440\u043a \u043a\u0443\u0440\u044c\u0435\u0440\u0441\u043a\u0438\u0445 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432. \u0421\u043b\u043e\u0442\u044b, \u043e\u0442\u0447\u0451\u0442\u044b \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u043e\u0447\u0435\u043d\u044c \u044d\u043a\u043e\u043d\u043e\u043c\u044f\u0442 \u0432\u0440\u0435\u043c\u044f.', rating: 5 }\n ];\n\n const ADMIN_ROWS = [\n { label: '\u0417\u0430\u044f\u0432\u043a\u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f', value: '18', icon: 'bell', detail: '+24% \u043a \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u043d\u0435\u0434\u0435\u043b\u0435' },\n { label: '\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b', value: '11', icon: 'calendar', detail: '\u043f\u043e 2 \u0444\u0438\u043b\u0438\u0430\u043b\u0430\u043c' },\n { label: '\u041e\u043f\u043b\u0430\u0442\u044b', value: '36 800 \u20bd', icon: 'creditCard', detail: '\u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u044b \u0438 \u0434\u043e\u043f\u043b\u0430\u0442\u044b' },\n { label: '\u041d\u0438\u0437\u043a\u0438\u0439 \u043e\u0441\u0442\u0430\u0442\u043e\u043a', value: '4', icon: 'package', detail: '\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0437\u0430\u043a\u0430\u0437\u0430' }\n ];\n\n function formatMoney(value) {\n return new Intl.NumberFormat('ru-RU').format(value) + ' \u20bd';\n }\n\n function IconWrap({ icon, className = 'bg-green-500\/10 text-green-500' }) {\n return <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${className}`}><Icon name={icon} size={24} \/><\/div>;\n }\n\n function Button({ children, variant = 'green', className = '', ...props }) {\n const base = 'inline-flex items-center justify-center gap-3 rounded-2xl px-6 py-4 text-xs font-black uppercase tracking-[0.14em] active:scale-95';\n const styles = {\n green: 'bg-green-500 text-slate-950 hover:bg-green-400 shadow-lg shadow-green-500\/20',\n white: 'bg-white text-slate-950 hover:bg-slate-200',\n dark: 'bg-slate-800 text-white hover:bg-slate-700 border border-white\/10',\n ghost: 'bg-transparent text-slate-300 hover:text-white hover:bg-white\/5 border border-white\/10',\n blue: 'bg-blue-500 text-white hover:bg-blue-400 shadow-lg shadow-blue-500\/20'\n };\n return <button className={`${base} ${styles[variant]} ${className}`} {...props}>{children}<\/button>;\n }\n\n function SectionTitle({ eyebrow, title, accent, text }) {\n return (\n <div className=\"mb-12\">\n {eyebrow && <div className=\"text-green-500 text-[10px] font-black uppercase tracking-[0.3em] mb-4 italic\">{eyebrow}<\/div>}\n <h2 className=\"text-4xl md:text-6xl font-black italic uppercase tracking-tighter leading-none text-white\">\n {title} {accent && <span className=\"text-green-500\">{accent}<\/span>}\n <\/h2>\n {text && <p className=\"text-slate-400 text-base md:text-lg font-medium leading-relaxed max-w-3xl mt-6\">{text}<\/p>}\n <\/div>\n );\n }\n\n function App() {\n const [activeTab, setActiveTab] = useState('home');\n const [transportFilter, setTransportFilter] = useState('all');\n const [priceSearch, setPriceSearch] = useState('');\n const [partCategory, setPartCategory] = useState('all');\n const [selLoc, setSelLoc] = useState(0);\n const [modal, setModal] = useState(null);\n const [selectedService, setSelectedService] = useState(SERVICES[0]);\n const [selectedPart, setSelectedPart] = useState(null);\n const [selectedDate, setSelectedDate] = useState(SLOTS[0].iso);\n const [selectedSlot, setSelectedSlot] = useState('');\n const [orderId, setOrderId] = useState('');\n const [statusData, setStatusData] = useState(null);\n const [diagnostics, setDiagnostics] = useState({ transport: 'scooter', symptom: 'wheel' });\n const [bookingStep, setBookingStep] = useState(1);\n const [adminMode, setAdminMode] = useState('dashboard');\n const [paymentChoice, setPaymentChoice] = useState('prepay');\n const [theme, setTheme] = useState('dark');\n\n const categories = useMemo(() => ['all', ...Array.from(new Set(PARTS.map((part) => part.category)))], []);\n\n const filteredServices = useMemo(() => {\n const search = priceSearch.trim().toLowerCase();\n return SERVICES.filter((service) => {\n const byTransport = transportFilter === 'all' || service.type === transportFilter || service.type === 'all';\n const bySearch = !search || service.title.toLowerCase().includes(search) || service.category.toLowerCase().includes(search);\n return byTransport && bySearch;\n });\n }, [transportFilter, priceSearch]);\n\n const filteredParts = useMemo(() => {\n return PARTS.filter((part) => {\n const byCategory = partCategory === 'all' || part.category === partCategory;\n const byTransport = transportFilter === 'all' || part.type === transportFilter || part.type === 'all';\n return byCategory && byTransport;\n });\n }, [partCategory, transportFilter]);\n\n const diagnosticEstimate = useMemo(() => {\n const table = {\n scooter: { wheel: [2000, 4500], battery: [5500, 18000], brakes: [1000, 4500], electric: [2500, 12000] },\n moped: { wheel: [3000, 8000], battery: [8000, 28000], brakes: [2500, 7000], electric: [3500, 18000] },\n bike: { wheel: [1000, 3500], battery: [0, 0], brakes: [1000, 4000], electric: [0, 0] },\n ebike: { wheel: [2500, 12000], battery: [7000, 26000], brakes: [1200, 5000], electric: [3000, 16000] }\n };\n const current = table[diagnostics.transport][diagnostics.symptom];\n if (!current || current[1] === 0) return '\u041d\u0443\u0436\u043d\u0430 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430';\n return `\u043e\u0442 ${formatMoney(current[0])} \u0434\u043e ${formatMoney(current[1])}`;\n }, [diagnostics]);\n\n const bookingAmount = paymentChoice === 'full' ? selectedService.price : 1000;\n\n function openBooking(service = selectedService, part = null) {\n setSelectedService(service);\n setSelectedPart(part);\n setBookingStep(1);\n setModal('booking');\n }\n\n function openRoute(coords) {\n window.open(`https:\/\/yandex.ru\/maps\/?rtext=~${encodeURIComponent(coords)}`, '_blank', 'noopener,noreferrer');\n }\n\n function checkStatus() {\n if (orderId.trim() === '123') setStatusData(REPAIR_STATUS);\n else setStatusData({ error: '\u0417\u0430\u043a\u0430\u0437 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0432 \u043a\u0432\u0438\u0442\u0430\u043d\u0446\u0438\u0438.' });\n }\n\n function serviceIcon(type) {\n if (type === 'bike' || type === 'ebike') return 'bike';\n if (type === 'moped') return 'battery';\n if (type === 'truck' || type === 'all') return 'truck';\n return 'zap';\n }\n\n function currentSlots() {\n return SLOTS.find((day) => day.iso === selectedDate) || SLOTS[0];\n }\n\n function navTo(tab) {\n setActiveTab(tab);\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function LegalNote() {\n return (\n <div className=\"bg-amber-500\/10 border border-amber-500\/20 rounded-3xl p-5 flex gap-4 text-sm text-amber-100 leading-relaxed\">\n <Icon name=\"lock\" className=\"text-amber-400 shrink-0 mt-0.5\" \/>\n <p><b>\u0412\u0430\u0436\u043d\u043e\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435:<\/b> \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0438\u0437 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0434\u0430\u044e\u0442\u0441\u044f. \u041e\u043d\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432 \u043d\u0430\u0448\u0435\u0439 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439.<\/p>\n <\/div>\n );\n }\n\n function Header() {\n const nav = [\n ['home', '\u0413\u043b\u0430\u0432\u043d\u0430\u044f'], ['services', '\u0423\u0441\u043b\u0443\u0433\u0438'], ['prices', '\u041f\u0440\u0430\u0439\u0441'], ['shop', '\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438'],\n ['booking', '\u0417\u0430\u043f\u0438\u0441\u044c'], ['status', '\u0421\u0442\u0430\u0442\u0443\u0441'], ['cabinet', '\u041a\u0430\u0431\u0438\u043d\u0435\u0442'], ['business', 'B2B']\n ];\n return (\n <header className=\"border-b border-white\/5 bg-slate-950\/80 sticky top-0 z-[60] backdrop-blur-xl\">\n <div className=\"max-w-7xl mx-auto px-4 h-20 flex items-center justify-between gap-4\">\n <button className=\"flex items-center gap-2 bg-transparent text-left shrink-0\" onClick={() => navTo('home')}>\n <div className=\"bg-green-500 p-1.5 rounded-lg\"><Icon name=\"zap\" className=\"text-slate-950 w-6 h-6\" fill=\"currentColor\" \/><\/div>\n <span className=\"text-2xl font-black tracking-tighter uppercase italic text-white\">Electro<span className=\"text-green-500\">Fix<\/span><\/span>\n <\/button>\n <nav className=\"hidden lg:flex gap-5 text-[10px] font-black uppercase tracking-[0.18em] overflow-x-auto custom-scroll\" aria-label=\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\">\n {nav.map(([key, label]) => (\n <button key={key} onClick={() => navTo(key)} className={`bg-transparent whitespace-nowrap ${activeTab === key ? 'text-green-500' : 'text-slate-400 hover:text-white'}`}>{label}<\/button>\n ))}\n <\/nav>\n <div className=\"flex items-center gap-3 shrink-0\">\n <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} className=\"hidden sm:flex w-11 h-11 rounded-2xl bg-slate-900 border border-white\/10 items-center justify-center text-slate-400 hover:text-white\" title=\"\u0414\u0435\u043c\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u0442\u0435\u043c\u044b\"><Icon name=\"settings\" size={18} \/><\/button>\n <Button onClick={() => openBooking()} className=\"px-5 py-3\">\u0417\u0430\u043f\u0438\u0441\u044c<\/Button>\n <\/div>\n <\/div>\n <div className=\"lg:hidden px-4 pb-4 overflow-x-auto custom-scroll flex gap-2\">\n {nav.map(([key, label]) => (\n <button key={key} onClick={() => navTo(key)} className={`px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest whitespace-nowrap ${activeTab === key ? 'bg-green-500 text-slate-950' : 'bg-slate-900 text-slate-400 border border-white\/10'}`}>{label}<\/button>\n ))}\n <\/div>\n <\/header>\n );\n }\n\n function HomePage() {\n const popular = SERVICES.filter((service) => service.popular).slice(0, 6);\n const steps = [\n { icon: 'search', title: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', text: '\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443, \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0443, \u0410\u041a\u0411, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0438 \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u0434\u0435\u0444\u0435\u043a\u0442\u044b.' },\n { icon: 'message', title: '\u0421\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435', text: '\u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043c\u0435\u0442\u0443. \u0411\u0435\u0437 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u0440\u0435\u043c\u043e\u043d\u0442 \u043d\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c.' },\n { icon: 'wrench', title: '\u0420\u0435\u043c\u043e\u043d\u0442', text: '\u0421\u0442\u0430\u0432\u0438\u043c \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0434 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.' },\n { icon: 'shield', title: '\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f', text: '\u0412\u044b\u0434\u0430\u0451\u043c \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044e \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0435.' }\n ];\n\n return (\n <div className=\"fade-in\">\n <section className=\"max-w-7xl mx-auto px-4 py-16 md:py-28 grid lg:grid-cols-2 gap-16 items-center\">\n <div className=\"space-y-8\">\n <div className=\"inline-flex items-center gap-2 bg-green-500\/10 text-green-400 px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-[0.22em] border border-green-500\/20\">\n <span className=\"w-2 h-2 bg-green-500 rounded-full animate-pulse\"><\/span> \u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c, \u043f\u0440\u0430\u0439\u0441 \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u0440\u0435\u043c\u043e\u043d\u0442\u0430\n <\/div>\n <h1 className=\"text-5xl md:text-8xl font-black italic uppercase leading-[0.86] tracking-tighter text-white\">\n \u0420\u0435\u043c\u043e\u043d\u0442 <br \/>\u044d\u043b\u0435\u043a\u0442\u0440\u043e <br \/><span className=\"text-green-500\">\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430<\/span>\n <\/h1>\n <p className=\"text-slate-400 text-lg md:text-xl max-w-xl font-medium leading-relaxed\">\n \u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u044b, \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u044b, \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b \u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b. \u0421\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b, \u043e\u043d\u043b\u0430\u0439\u043d-\u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430, \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0430\u044f \u0441\u043c\u0435\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438.\n <\/p>\n <div className=\"flex flex-wrap gap-4\">\n <Button onClick={() => navTo('booking')}>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0435\u043c\u043e\u043d\u0442 <Icon name=\"calendar\" size={18} \/><\/Button>\n <Button variant=\"white\" onClick={() => navTo('prices')}>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0446\u0435\u043d\u044b <Icon name=\"chevronRight\" size={18} \/><\/Button>\n <Button variant=\"ghost\" onClick={() => navTo('locations')}>\u041d\u0430\u0439\u0442\u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0443\u044e <Icon name=\"mapPin\" size={18} \/><\/Button>\n <\/div>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 pt-4\">\n {TRANSPORTS.slice(1).map((item) => (\n <button key={item.id} onClick={() => { setTransportFilter(item.id); navTo('prices'); }} className=\"bg-slate-900\/80 border border-white\/10 p-4 rounded-3xl text-left hover:border-green-500\/40\">\n <Icon name={item.icon} className=\"text-green-500 mb-3\" \/>\n <span className=\"block text-[11px] font-black uppercase tracking-widest text-white leading-snug\">{item.label}<\/span>\n <\/button>\n ))}\n <\/div>\n <\/div>\n\n <div className=\"relative\">\n <div className=\"absolute inset-0 bg-green-500\/10 blur-[120px] rounded-full\"><\/div>\n <div className=\"relative bg-slate-900 border border-white\/10 p-8 md:p-10 rounded-[3rem] shadow-2xl overflow-hidden\">\n <div className=\"absolute inset-0 soft-grid opacity-30\"><\/div>\n <div className=\"relative flex justify-between items-start gap-6 mb-10\">\n <IconWrap icon=\"wrench\" className=\"bg-green-500 text-slate-950\" \/>\n <div className=\"text-right\">\n <p className=\"text-4xl font-black italic tracking-tighter uppercase text-white\">Quick Fix<\/p>\n <p className=\"text-[10px] uppercase font-bold text-slate-500 tracking-widest\">5000+ \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439<\/p>\n <\/div>\n <\/div>\n <div className=\"relative grid grid-cols-2 gap-4 mb-8\">\n {[\n ['\u0421\u0440\u0435\u0434\u043d\u0438\u0439 \u0440\u0435\u043c\u043e\u043d\u0442', '45 \u043c\u0438\u043d'], ['\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f', '\u0434\u043e 90 \u0434\u043d\u0435\u0439'], ['\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0442\u043e\u0432', '11'], ['\u041f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430', '\u043e\u0442 1 000 \u20bd']\n ].map(([label, value]) => (\n <div key={label} className=\"bg-slate-950\/70 p-5 rounded-3xl border border-white\/5\">\n <p className=\"text-[10px] font-black uppercase text-slate-500 mb-2 tracking-widest leading-none\">{label}<\/p>\n <p className=\"text-xl md:text-2xl font-black italic uppercase text-white tracking-tighter\">{value}<\/p>\n <\/div>\n ))}\n <\/div>\n <div className=\"relative bg-green-500\/10 border border-green-500\/20 p-6 rounded-3xl\">\n <div className=\"flex items-center justify-between mb-5\">\n <div>\n <p className=\"text-[10px] text-green-400 uppercase tracking-widest font-black mb-1\">\u0421\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u043a\u0430\u0437\u0430<\/p>\n <p className=\"text-white font-black italic text-2xl tracking-tighter\">\u0422\u0435\u0441\u0442: \u2116123<\/p>\n <\/div>\n <Button onClick={() => { setOrderId('123'); setActiveTab('status'); setTimeout(() => setStatusData(REPAIR_STATUS), 30); }} className=\"py-3 px-4\">\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c<\/Button>\n <\/div>\n <div className=\"h-3 bg-slate-800 rounded-full overflow-hidden\"><div className=\"h-full bg-green-500 w-[48%] rounded-full shadow-[0_0_20px_rgba(34,197,94,.5)]\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <div className=\"marquee-track\">\n <div className=\"marquee-content\">\n {[...''].length === 0 && ['\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u2014 \u043e\u0442 1 500 \u20bd', '\u0417\u0430\u043c\u0435\u043d\u0430 \u043a\u0430\u043c\u0435\u0440\u044b \u2014 \u043e\u0442 2 000 \u20bd', '\u0413\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u2014 \u043e\u0442 3 500 \u20bd', '\u0420\u0435\u043c\u043e\u043d\u0442 \u0410\u041a\u0411 \u2014 \u043e\u0442 5 500 \u20bd', '\u0422\u041e \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430 \u2014 \u043e\u0442 4 500 \u20bd', '\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439', '\u042d\u0432\u0430\u043a\u0443\u0430\u0446\u0438\u044f \u2014 \u043e\u0442 1 200 \u20bd', '\u041e\u043d\u043b\u0430\u0439\u043d-\u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430'].concat(['\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u2014 \u043e\u0442 1 500 \u20bd', '\u0417\u0430\u043c\u0435\u043d\u0430 \u043a\u0430\u043c\u0435\u0440\u044b \u2014 \u043e\u0442 2 000 \u20bd', '\u0413\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u2014 \u043e\u0442 3 500 \u20bd', '\u0420\u0435\u043c\u043e\u043d\u0442 \u0410\u041a\u0411 \u2014 \u043e\u0442 5 500 \u20bd', '\u0422\u041e \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430 \u2014 \u043e\u0442 4 500 \u20bd', '\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439', '\u042d\u0432\u0430\u043a\u0443\u0430\u0446\u0438\u044f \u2014 \u043e\u0442 1 200 \u20bd', '\u041e\u043d\u043b\u0430\u0439\u043d-\u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430']).map((text, index) => (\n <span key={index} className=\"mx-10 flex items-center gap-3 text-slate-950 font-black uppercase text-sm tracking-tighter italic whitespace-nowrap\"><Icon name=\"zap\" size={18} fill=\"currentColor\" \/> {text}<\/span>\n ))}\n <\/div>\n <\/div>\n\n <section className=\"max-w-7xl mx-auto px-4 py-20\">\n <SectionTitle eyebrow=\"\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438\" title=\"\u0411\u044b\u0441\u0442\u0440\u044b\u0439\" accent=\"\u0440\u0435\u043c\u043e\u043d\u0442\" text=\"\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0443\u0441\u043b\u0443\u0433 \u0441 \u0446\u0435\u043d\u043e\u0439 \u043e\u0442, \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0435\u0439 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u043a \u0437\u0430\u043f\u0438\u0441\u0438.\" \/>\n <div className=\"grid md:grid-cols-3 gap-6\">\n {popular.map((service) => <ServiceCard key={service.id} service={service} \/>)}\n <\/div>\n <\/section>\n\n <section className=\"max-w-7xl mx-auto px-4 py-20\">\n <SectionTitle eyebrow=\"\u041f\u0440\u043e\u0446\u0435\u0441\u0441\" title=\"\u041a\u0430\u043a \u044d\u0442\u043e\" accent=\"\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\" \/>\n <div className=\"grid md:grid-cols-4 gap-6\">\n {steps.map((step, index) => (\n <div key={step.title} className=\"relative bg-slate-900 border border-white\/10 p-8 rounded-[2.4rem] shadow-xl hover:border-green-500\/40 slide-up\">\n <div className=\"absolute -top-4 -right-4 w-12 h-12 rounded-full bg-slate-800 border border-white\/10 flex items-center justify-center text-slate-500 font-black\">0{index+1}<\/div>\n <IconWrap icon={step.icon} \/>\n <h3 className=\"text-xl font-black uppercase italic tracking-tighter text-white mt-6 mb-3\">{step.title}<\/h3>\n <p className=\"text-slate-400 text-sm leading-relaxed font-medium\">{step.text}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/section>\n\n <TrustAndReviews \/>\n <LocationsPage compact \/>\n <\/div>\n );\n }\n\n function ServiceCard({ service }) {\n return (\n <div className=\"bg-slate-900 border border-white\/10 p-7 rounded-[2.2rem] hover:border-green-500\/40 shadow-xl flex flex-col justify-between gap-8\">\n <div>\n <div className=\"flex items-center justify-between mb-5\">\n <IconWrap icon={serviceIcon(service.type)} \/>\n <span className=\"text-[10px] font-black uppercase tracking-widest text-slate-500\">{service.category}<\/span>\n <\/div>\n <h3 className=\"text-2xl font-black italic uppercase tracking-tighter text-white leading-none mb-4\">{service.title}<\/h3>\n <p className=\"text-slate-400 text-sm leading-relaxed\">{service.desc}<\/p>\n <\/div>\n <div className=\"flex items-end justify-between gap-4 pt-5 border-t border-white\/5\">\n <div>\n <p className=\"text-[10px] font-black uppercase text-slate-500 tracking-widest mb-1\">\u0426\u0435\u043d\u0430 \u043e\u0442<\/p>\n <p className=\"text-3xl font-black italic tracking-tighter text-white\">{formatMoney(service.price)}<\/p>\n <p className=\"text-[10px] font-bold uppercase text-slate-500 mt-2\">{service.time} \u00b7 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f {service.guarantee}<\/p>\n <\/div>\n <Button onClick={() => openBooking(service)} className=\"px-5 py-3\">\u0417\u0430\u043f\u0438\u0441\u044c<\/Button>\n <\/div>\n <\/div>\n );\n }\n\n function ServicesPage() {\n const grouped = TRANSPORTS.slice(1).map((transport) => ({\n ...transport,\n items: SERVICES.filter((service) => service.type === transport.id || (service.type === 'all' && transport.id === 'scooter'))\n }));\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0420\u0430\u0437\u0434\u0435\u043b \u0443\u0441\u043b\u0443\u0433\" title=\"\u0423\u0441\u043b\u0443\u0433\u0438 \u043f\u043e\" accent=\"\u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\" text=\"\u0423\u0441\u043b\u0443\u0433\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u043f\u043e \u0442\u0438\u043f\u0430\u043c \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430. \u0412 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0435\u0441\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0446\u0435\u043d\u0430 \u043e\u0442, \u0441\u0440\u043e\u043a, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u0437\u0430\u043f\u0438\u0441\u0438.\" \/>\n <div className=\"space-y-10\">\n {grouped.map((group) => (\n <div key={group.id} className=\"bg-slate-900\/60 border border-white\/10 rounded-[3rem] p-6 md:p-8\">\n <div className=\"flex items-center gap-4 mb-7\">\n <IconWrap icon={group.icon} \/>\n <h3 className=\"text-3xl font-black italic uppercase tracking-tighter text-white\">{group.label}<\/h3>\n <\/div>\n <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-5\">\n {group.items.map((service) => <ServiceCard key={service.id} service={service} \/>)}\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/section>\n );\n }\n\n function PricesPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u0430\u0439\u0441\" title=\"\u0426\u0435\u043d\u044b \u0432\" accent=\"\u0440\u0443\u0431\u043b\u044f\u0445\" text=\"\u0424\u0438\u043b\u044c\u0442\u0440 \u043f\u043e \u0442\u0438\u043f\u0443 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430, \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u0443\u0441\u043b\u0443\u0433\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438.\" \/>\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8 shadow-2xl\">\n <div className=\"grid lg:grid-cols-[1fr_340px] gap-6 mb-8\">\n <div className=\"flex flex-wrap gap-3\">\n {TRANSPORTS.map((item) => (\n <button key={item.id} onClick={() => setTransportFilter(item.id)} className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2 ${transportFilter === item.id ? 'bg-green-500 text-slate-950' : 'bg-slate-950 text-slate-400 border border-white\/10 hover:text-white'}`}>\n <Icon name={item.icon} size={16} \/> {item.label}\n <\/button>\n ))}\n <\/div>\n <div className=\"relative\">\n <Icon name=\"search\" className=\"absolute left-5 top-1\/2 -translate-y-1\/2 text-slate-500\" size={18} \/>\n <input value={priceSearch} onChange={(event) => setPriceSearch(event.target.value)} placeholder=\"\u041f\u041e\u0418\u0421\u041a \u0423\u0421\u041b\u0423\u0413\u0418\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl pl-12 pr-5 py-4 text-white font-bold placeholder:text-slate-600\" \/>\n <\/div>\n <\/div>\n\n <div className=\"overflow-x-auto custom-scroll\">\n <table className=\"w-full min-w-[860px] border-separate border-spacing-y-3\">\n <thead>\n <tr className=\"text-left text-[10px] font-black uppercase tracking-[0.22em] text-slate-500\">\n <th className=\"px-5 pb-3\">\u0423\u0441\u043b\u0443\u0433\u0430<\/th><th className=\"px-5 pb-3\">\u0422\u0438\u043f<\/th><th className=\"px-5 pb-3\">\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f<\/th><th className=\"px-5 pb-3\">\u0426\u0435\u043d\u0430<\/th><th className=\"px-5 pb-3\">\u0412\u0440\u0435\u043c\u044f<\/th><th className=\"px-5 pb-3\">\u0417\u0430\u043f\u0438\u0441\u044c<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n {filteredServices.map((service) => (\n <tr key={service.id} className=\"bg-slate-950\/70 hover:bg-slate-950\">\n <td className=\"px-5 py-5 rounded-l-2xl\"><div className=\"font-black text-white uppercase italic tracking-tight\">{service.title}<\/div><div className=\"text-xs text-slate-500 mt-1\">{service.desc}<\/div><\/td>\n <td className=\"px-5 py-5 text-slate-300 font-bold\">{TRANSPORTS.find((item) => item.id === service.type)?.label || '\u0412\u0441\u0435'}<\/td>\n <td className=\"px-5 py-5\"><span className=\"px-3 py-1 rounded-full bg-green-500\/10 text-green-400 text-[10px] font-black uppercase tracking-widest\">{service.category}<\/span><\/td>\n <td className=\"px-5 py-5 text-2xl font-black italic text-white\">\u043e\u0442 {formatMoney(service.price)}<\/td>\n <td className=\"px-5 py-5 text-slate-400 font-bold\">{service.time}<\/td>\n <td className=\"px-5 py-5 rounded-r-2xl\"><Button onClick={() => openBooking(service)} className=\"py-3 px-4\">\u0412\u044b\u0431\u0440\u0430\u0442\u044c<\/Button><\/td>\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n <\/div>\n\n <div className=\"mt-8\"><LegalNote \/><\/div>\n <\/div>\n <\/section>\n );\n }\n\n function ShopPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439\" title=\"\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438\" accent=\"\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439\" text=\"\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043c\u0430\u0433\u0430\u0437\u0438\u043d: \u0434\u0435\u0442\u0430\u043b\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0430.\" \/>\n <div className=\"mb-8\"><LegalNote \/><\/div>\n\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8 mb-10\">\n <div className=\"flex flex-col lg:flex-row gap-5 justify-between\">\n <div className=\"flex flex-wrap gap-3\">\n {categories.map((category) => (\n <button key={category} onClick={() => setPartCategory(category)} className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest ${partCategory === category ? 'bg-green-500 text-slate-950' : 'bg-slate-950 text-slate-400 border border-white\/10 hover:text-white'}`}>{category === 'all' ? '\u0412\u0441\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438' : category}<\/button>\n ))}\n <\/div>\n <div className=\"flex flex-wrap gap-3\">\n {TRANSPORTS.map((item) => (\n <button key={item.id} onClick={() => setTransportFilter(item.id)} className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2 ${transportFilter === item.id ? 'bg-blue-500 text-white' : 'bg-slate-950 text-slate-400 border border-white\/10 hover:text-white'}`}><Icon name={item.icon} size={16} \/> {item.label}<\/button>\n ))}\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n {filteredParts.map((part) => <PartCard key={part.id} part={part} \/>)}\n <\/div>\n <\/section>\n );\n }\n\n function PartCard({ part }) {\n const total = part.partPrice + part.installPrice;\n return (\n <div className=\"bg-slate-900 border border-white\/10 rounded-[2.6rem] p-6 shadow-xl hover:border-green-500\/40 flex flex-col gap-6\">\n <div className=\"h-44 rounded-[2rem] bg-slate-950 border border-white\/5 relative overflow-hidden soft-grid flex items-center justify-center\">\n <Icon name=\"package\" size={74} className=\"text-green-500\/50\" \/>\n <span className=\"absolute top-4 left-4 bg-green-500 text-slate-950 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest\">{part.badge}<\/span>\n <span className=\"absolute bottom-4 right-4 bg-slate-900\/90 border border-white\/10 text-slate-300 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest\">{part.stock}<\/span>\n <\/div>\n <div>\n <div className=\"text-[10px] font-black uppercase tracking-[0.24em] text-green-500 mb-3\">{part.category}<\/div>\n <h3 className=\"text-2xl font-black italic uppercase tracking-tighter text-white leading-none mb-4\">{part.name}<\/h3>\n <p className=\"text-slate-400 text-sm leading-relaxed mb-4\">{part.desc}<\/p>\n <div className=\"text-xs text-slate-500 font-bold uppercase tracking-widest\">\u0421\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c: <span className=\"text-slate-300\">{part.compatible}<\/span><\/div>\n <\/div>\n <div className=\"bg-slate-950\/70 border border-white\/5 rounded-3xl p-5 space-y-3\">\n <div className=\"flex justify-between text-sm\"><span className=\"text-slate-500 font-bold\">\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u044c<\/span><span className=\"text-white font-black\">{formatMoney(part.partPrice)}<\/span><\/div>\n <div className=\"flex justify-between text-sm\"><span className=\"text-slate-500 font-bold\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/span><span className=\"text-white font-black\">\u043e\u0442 {formatMoney(part.installPrice)}<\/span><\/div>\n <div className=\"pt-3 border-t border-white\/5 flex justify-between items-end\"><span className=\"text-green-400 text-[10px] font-black uppercase tracking-widest\">\u0418\u0442\u043e\u0433\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439<\/span><span className=\"text-3xl text-white font-black italic tracking-tighter\">\u043e\u0442 {formatMoney(total)}<\/span><\/div>\n <\/div>\n <div className=\"grid grid-cols-2 gap-3 text-[10px] font-black uppercase tracking-widest text-slate-500\">\n <div className=\"bg-slate-950\/40 border border-white\/5 p-3 rounded-2xl\"><Icon name=\"clock\" size={15} className=\"mb-2 text-green-500\" \/>{part.time}<\/div>\n <div className=\"bg-slate-950\/40 border border-white\/5 p-3 rounded-2xl\"><Icon name=\"shield\" size={15} className=\"mb-2 text-green-500\" \/>{part.guarantee}<\/div>\n <\/div>\n <Button onClick={() => openBooking(SERVICES.find((service) => service.category === '\u041a\u043e\u043b\u0451\u0441\u0430') || SERVICES[0], part)} className=\"w-full\">\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443<\/Button>\n <p className=\"text-[10px] text-amber-300 font-bold leading-relaxed\">\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0430 \u043d\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f. \u0417\u0430\u043f\u0447\u0430\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c\u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439.<\/p>\n <\/div>\n );\n }\n\n function BookingPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c\" title=\"\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0438\" accent=\"\u0437\u0430\u043d\u044f\u0442\u044b\u0435 \u0441\u043b\u043e\u0442\u044b\" text=\"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0442\u0438\u043f \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430, \u0443\u0441\u043b\u0443\u0433\u0443, \u043b\u043e\u043a\u0430\u0446\u0438\u044e, \u0434\u0430\u0442\u0443, \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0432\u0432\u043e\u0434\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u043f\u043b\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0443 \u0438\u043b\u0438 \u0443\u0441\u043b\u0443\u0433\u0443 \u043e\u043d\u043b\u0430\u0439\u043d.\" \/>\n <div className=\"grid lg:grid-cols-[1fr_420px] gap-8\">\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8\">\n <div className=\"grid md:grid-cols-3 gap-4 mb-8\">\n {SLOTS.map((day) => (\n <button key={day.iso} onClick={() => { setSelectedDate(day.iso); setSelectedSlot(''); }} className={`p-5 rounded-3xl text-left border ${selectedDate === day.iso ? 'bg-green-500 border-green-500 text-slate-950' : 'bg-slate-950 border-white\/10 text-white hover:border-green-500\/40'}`}>\n <div className=\"text-xl font-black italic uppercase tracking-tighter\">{day.date}<\/div>\n <div className={`text-[10px] font-black uppercase tracking-widest mt-2 ${selectedDate === day.iso ? 'text-slate-950\/70' : 'text-slate-500'}`}>{day.slots.filter((slot) => slot.free).length} \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0442\u043e\u0432<\/div>\n <\/button>\n ))}\n <\/div>\n\n <div className=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n {currentSlots().slots.map((slot) => (\n <button key={slot.time} disabled={!slot.free} onClick={() => setSelectedSlot(slot.time)} className={`p-5 rounded-3xl border text-left ${!slot.free ? 'bg-red-500\/5 border-red-500\/20 text-red-300 opacity-60 cursor-not-allowed' : selectedSlot === slot.time ? 'bg-green-500 border-green-500 text-slate-950' : 'bg-slate-950 border-white\/10 text-white hover:border-green-500\/40'}`}>\n <div className=\"flex items-center justify-between mb-3\"><span className=\"text-3xl font-black italic tracking-tighter\">{slot.time}<\/span><Icon name={slot.free ? 'checkCircle' : 'lock'} size={20} \/><\/div>\n <div className=\"text-[10px] font-black uppercase tracking-widest opacity-75\">{slot.free ? `\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u00b7 ${slot.master}` : '\u0417\u0430\u043d\u044f\u0442\u043e'}<\/div>\n <\/button>\n ))}\n <\/div>\n <\/div>\n\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8 h-fit sticky top-28\">\n <h3 className=\"text-3xl font-black italic uppercase tracking-tighter text-white mb-6\">\u041e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c<\/h3>\n <div className=\"space-y-4 mb-6\">\n <select value={selectedService.id} onChange={(event) => setSelectedService(SERVICES.find((service) => service.id === Number(event.target.value)))} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">\n {SERVICES.map((service) => <option key={service.id} value={service.id}>{service.title}<\/option>)}\n <\/select>\n <select value={selLoc} onChange={(event) => setSelLoc(Number(event.target.value))} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">\n {LOCATIONS.map((loc, index) => <option key={loc.id} value={index}>{loc.name}<\/option>)}\n <\/select>\n <input placeholder=\"\u0418\u043c\u044f\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\" \/>\n <input placeholder=\"\u0422\u0435\u043b\u0435\u0444\u043e\u043d\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\" \/>\n <textarea placeholder=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043c\u043e\u0434\u0435\u043b\u044c, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold h-28 resize-none\"><\/textarea>\n <\/div>\n <div className=\"bg-slate-950\/70 border border-white\/5 rounded-3xl p-5 mb-6\">\n <div className=\"flex justify-between text-sm mb-2\"><span className=\"text-slate-500\">\u0423\u0441\u043b\u0443\u0433\u0430<\/span><span className=\"text-white font-black\">\u043e\u0442 {formatMoney(selectedService.price)}<\/span><\/div>\n <div className=\"flex justify-between text-sm mb-2\"><span className=\"text-slate-500\">\u0414\u0430\u0442\u0430<\/span><span className=\"text-white font-black\">{currentSlots().date}<\/span><\/div>\n <div className=\"flex justify-between text-sm\"><span className=\"text-slate-500\">\u0412\u0440\u0435\u043c\u044f<\/span><span className=\"text-white font-black\">{selectedSlot || '\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0441\u043b\u043e\u0442'}<\/span><\/div>\n <\/div>\n <Button disabled={!selectedSlot} onClick={() => setModal('booking')} className={`w-full ${!selectedSlot ? 'opacity-50 cursor-not-allowed' : ''}`}>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u043a \u043e\u043f\u043b\u0430\u0442\u0435<\/Button>\n <p className=\"text-[10px] text-slate-500 mt-4 leading-relaxed\">\u0417\u0430\u043d\u044f\u0442\u044b\u0435 \u0441\u043b\u043e\u0442\u044b \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u043b\u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0411\u0443\u0444\u0435\u0440 \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0438\u0441\u044f\u043c\u0438 10\u201315 \u043c\u0438\u043d\u0443\u0442 \u0437\u0430\u043b\u043e\u0436\u0435\u043d \u0432 \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435.<\/p>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n function StatusPage() {\n return (\n <section className=\"max-w-4xl mx-auto px-4 py-20 zoom-in\">\n <SectionTitle eyebrow=\"\u041b\u0438\u0447\u043d\u044b\u0439 \u0442\u0440\u0435\u043a\u0438\u043d\u0433\" title=\"\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430\" accent=\"\u0441\u0442\u0430\u0442\u0443\u0441\u0430\" text=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430. \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 123.\" \/>\n <div className=\"flex gap-2 p-3 bg-slate-900 border border-white\/10 rounded-[2.5rem] mb-10 shadow-2xl ring-8 ring-green-500\/5\">\n <input value={orderId} onChange={(event) => setOrderId(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') checkStatus(); }} placeholder=\"\u041d\u041e\u041c\u0415\u0420 \u0417\u0410\u041a\u0410\u0417\u0410: 123\" className=\"bg-transparent border-none px-6 flex-grow text-xl font-black text-white placeholder:text-slate-700 uppercase min-w-0\" \/>\n <Button onClick={checkStatus} className=\"p-5\"><Icon name=\"search\" \/><\/Button>\n <\/div>\n {statusData && <StatusCard data={statusData} \/>}\n <\/section>\n );\n }\n\n function StatusCard({ data }) {\n if (data.error) {\n return <div className=\"bg-red-500\/10 border border-red-500\/20 p-10 rounded-[3rem] text-center text-red-300\"><Icon name=\"alert\" size={56} className=\"mx-auto mb-5\" \/><p className=\"font-black uppercase tracking-tight text-xl\">{data.error}<\/p><\/div>;\n }\n return (\n <div className=\"bg-slate-900 border border-white\/10 p-6 md:p-10 rounded-[3.5rem] shadow-2xl slide-up\">\n <div className=\"relative flex justify-between mb-16\">\n <div className=\"absolute top-5 left-0 w-full h-1.5 bg-slate-800 rounded-full\"><\/div>\n <div className=\"absolute top-5 left-0 h-1.5 bg-green-500 rounded-full z-10 shadow-[0_0_20px_#22c55e]\" style={{ width: `${(data.current \/ (data.steps.length - 1)) * 100}%` }}><\/div>\n {data.steps.map((step, index) => (\n <div key={step} className=\"relative z-20 flex flex-col items-center gap-5\">\n <div className={`w-12 h-12 rounded-full flex items-center justify-center border-4 ${index <= data.current ? 'bg-green-500 border-slate-950 text-slate-950 scale-110' : 'bg-slate-800 border-slate-900 text-slate-600'}`}>{index < data.current ? <Icon name=\"checkCircle\" \/> : <span className=\"font-black\">{index+1}<\/span>}<\/div>\n <span className={`text-[9px] font-black uppercase tracking-widest text-center max-w-[82px] ${index <= data.current ? 'text-white' : 'text-slate-600'}`}>{step}<\/span>\n <\/div>\n ))}\n <\/div>\n <div className=\"grid md:grid-cols-2 gap-6\">\n <div className=\"bg-slate-950\/60 border border-white\/5 p-7 rounded-3xl relative\">\n <IconWrap icon=\"smartphone\" className=\"bg-green-500 text-slate-950 mb-5\" \/>\n <p className=\"text-[10px] font-black uppercase text-slate-500 tracking-widest mb-3\">\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043c\u0430\u0441\u0442\u0435\u0440\u0430<\/p>\n <p className=\"text-slate-200 leading-relaxed italic\">\u201c{data.masterComment}\u201d<\/p>\n <\/div>\n <div className=\"bg-green-500\/10 border border-green-500\/20 p-7 rounded-3xl flex flex-col justify-between gap-6\">\n <div>\n <p className=\"text-[10px] text-green-400 font-black uppercase tracking-widest mb-2\">\u0421\u043c\u0435\u0442\u0430 \u043a \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044e<\/p>\n <p className=\"text-5xl font-black italic tracking-tighter text-white\">{formatMoney(data.price)}<\/p>\n <p className=\"text-slate-400 text-sm mt-3\">\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f: {data.warranty}<\/p>\n <\/div>\n <div className=\"grid grid-cols-2 gap-3\">\n <Button onClick={() => setModal('payment')}>\u0421\u043e\u0433\u043b\u0430\u0441\u0435\u043d<\/Button>\n <Button variant=\"ghost\">\u0417\u0430\u0434\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441<\/Button>\n <\/div>\n <\/div>\n <\/div>\n <div className=\"mt-6 grid sm:grid-cols-3 gap-4\">\n {data.photos.map((photo) => <div key={photo} className=\"bg-slate-950 border border-white\/5 h-28 rounded-3xl flex flex-col items-center justify-center text-slate-500 text-[10px] font-black uppercase tracking-widest\"><Icon name=\"image\" className=\"mb-2 text-green-500\" \/>{photo}<\/div>)}\n <\/div>\n <\/div>\n );\n }\n\n function CabinetPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f\" title=\"\u041b\u0438\u0447\u043d\u044b\u0439\" accent=\"\u043a\u0430\u0431\u0438\u043d\u0435\u0442\" text=\"\u0412 \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0435 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432\u0438\u0434\u0438\u0442 \u0437\u0430\u043f\u0438\u0441\u0438, \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0440\u0435\u043c\u043e\u043d\u0442\u043e\u0432, \u0441\u0442\u0430\u0442\u0443\u0441, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044e, \u0447\u0435\u043a\u0438, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0430 \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f.\" \/>\n <div className=\"grid lg:grid-cols-[360px_1fr] gap-8\">\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-8 h-fit\">\n <div className=\"flex items-center gap-4 mb-8\">\n <div className=\"w-16 h-16 rounded-3xl bg-green-500 text-slate-950 flex items-center justify-center\"><Icon name=\"user\" size={30} \/><\/div>\n <div><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter\">\u041a\u043b\u0438\u0435\u043d\u0442<\/h3><p className=\"text-slate-500 text-sm\">+7 (999) 000-00-00<\/p><\/div>\n <\/div>\n <div className=\"space-y-3 text-sm font-bold\">\n {['\u041c\u043e\u0438 \u0437\u0430\u043f\u0438\u0441\u0438', '\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u0440\u0435\u043c\u043e\u043d\u0442\u043e\u0432', '\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0438', '\u0427\u0435\u043a\u0438 \u0438 \u043e\u043f\u043b\u0430\u0442\u044b', '\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c'].map((item, index) => <button key={item} className={`w-full text-left p-4 rounded-2xl ${index === 0 ? 'bg-green-500 text-slate-950' : 'bg-slate-950 text-slate-400 border border-white\/5'}`}>{item}<\/button>)}\n <\/div>\n <\/div>\n <div className=\"space-y-6\">\n {[{ title: '\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442 Ninebot G30', status: '\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435', price: 4800, date: '\u0421\u0435\u0433\u043e\u0434\u043d\u044f, 18:30' }, { title: '\u0412\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434 Trek', status: '\u0413\u043e\u0442\u043e\u0432\u043e \u043a \u0432\u044b\u0434\u0430\u0447\u0435', price: 4500, date: '\u0412\u0447\u0435\u0440\u0430' }].map((item) => (\n <div key={item.title} className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-8 flex flex-col md:flex-row justify-between gap-6\">\n <div>\n <span className=\"bg-amber-500\/10 text-amber-300 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest\">{item.status}<\/span>\n <h3 className=\"text-3xl font-black italic uppercase text-white tracking-tighter mt-5 mb-3\">{item.title}<\/h3>\n <p className=\"text-slate-400\">\u0414\u0430\u0442\u0430: {item.date} \u00b7 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0439\u043d\u044b\u0439 \u0441\u0440\u043e\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0437\u0430\u043a\u0430\u0437\u0430.<\/p>\n <\/div>\n <div className=\"md:text-right\"><p className=\"text-4xl font-black italic text-white tracking-tighter mb-4\">{formatMoney(item.price)}<\/p><Button onClick={() => setActiveTab('status')} className=\"py-3 px-4\">\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0437\u0430\u043a\u0430\u0437<\/Button><\/div>\n <\/div>\n ))}\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-8\">\n <h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter mb-6\">QR-\u043a\u043e\u0434 \u0437\u0430\u043a\u0430\u0437\u0430<\/h3>\n <div className=\"flex flex-col md:flex-row gap-6 items-center\"><div className=\"w-40 h-40 bg-white rounded-3xl text-slate-950 flex items-center justify-center\"><Icon name=\"qr\" size={96} \/><\/div><p className=\"text-slate-400 leading-relaxed\">\u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u0451\u043c\u0430 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 QR-\u043a\u043e\u0434. \u041f\u043e \u043d\u0435\u043c\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0443\u0441 \u0440\u0435\u043c\u043e\u043d\u0442\u0430, \u0441\u043c\u0435\u0442\u0430, \u0444\u043e\u0442\u043e\u043e\u0442\u0447\u0451\u0442, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0438 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u043f\u043b\u0430\u0442\u0443.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n function DiagnosticPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041e\u043d\u043b\u0430\u0439\u043d-\u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430\" title=\"\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\" accent=\"\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438\" text=\"\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u0446\u0435\u043d\u043a\u0430 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043e \u0432\u0438\u0437\u0438\u0442\u0430. \u0422\u043e\u0447\u043d\u0430\u044f \u0446\u0435\u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438.\" \/>\n <div className=\"grid lg:grid-cols-2 gap-8\">\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-8 space-y-5\">\n <select value={diagnostics.transport} onChange={(event) => setDiagnostics({ ...diagnostics, transport: event.target.value })} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">\n {TRANSPORTS.slice(1).map((item) => <option key={item.id} value={item.id}>{item.label}<\/option>)}\n <\/select>\n <select value={diagnostics.symptom} onChange={(event) => setDiagnostics({ ...diagnostics, symptom: event.target.value })} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">\n <option value=\"wheel\">\u041a\u043e\u043b\u0435\u0441\u043e \/ \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0430 \/ \u043a\u0430\u043c\u0435\u0440\u0430<\/option>\n <option value=\"battery\">\u0410\u043a\u043a\u0443\u043c\u0443\u043b\u044f\u0442\u043e\u0440 \/ \u0437\u0430\u0440\u044f\u0434<\/option>\n <option value=\"brakes\">\u0422\u043e\u0440\u043c\u043e\u0437\u0430<\/option>\n <option value=\"electric\">\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430 \/ \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \/ \u0434\u0438\u0441\u043f\u043b\u0435\u0439<\/option>\n <\/select>\n <input placeholder=\"\u0411\u0440\u0435\u043d\u0434 \u0438 \u043c\u043e\u0434\u0435\u043b\u044c\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\" \/>\n <textarea placeholder=\"\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430? \u0411\u044b\u043b \u043b\u0438 \u0440\u0435\u043c\u043e\u043d\u0442 \u0440\u0430\u043d\u0435\u0435?\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold h-32 resize-none\"><\/textarea>\n <div className=\"grid grid-cols-2 gap-4\"><button className=\"bg-slate-950 border border-dashed border-white\/20 p-6 rounded-3xl text-slate-500 font-black uppercase tracking-widest text-[10px]\"><Icon name=\"image\" className=\"mx-auto mb-2\" \/>\u0424\u043e\u0442\u043e<\/button><button className=\"bg-slate-950 border border-dashed border-white\/20 p-6 rounded-3xl text-slate-500 font-black uppercase tracking-widest text-[10px]\"><Icon name=\"file\" className=\"mx-auto mb-2\" \/>\u0412\u0438\u0434\u0435\u043e<\/button><\/div>\n <\/div>\n <div className=\"bg-green-500 text-slate-950 rounded-[3rem] p-8 md:p-10 flex flex-col justify-between gap-10\">\n <div><p className=\"text-[10px] font-black uppercase tracking-[0.3em] opacity-70 mb-4\">\u041e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u043e\u0447\u043d\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/p><h3 className=\"text-5xl md:text-7xl font-black italic uppercase tracking-tighter leading-none\">{diagnosticEstimate}<\/h3><p className=\"mt-8 font-bold leading-relaxed opacity-80\">\u0422\u043e\u0447\u043d\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438. \u041f\u0435\u0440\u0435\u0434 \u0440\u0435\u043c\u043e\u043d\u0442\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043c\u0435\u0442\u0443 \u0438 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442 \u0435\u0451 \u043e\u043d\u043b\u0430\u0439\u043d.<\/p><\/div>\n <Button variant=\"dark\" onClick={() => openBooking(SERVICES[0])}>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0443<\/Button>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n function LocationsPage({ compact = false }) {\n return (\n <section id=\"locations\" className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041b\u043e\u043a\u0430\u0446\u0438\u0438\" title=\"\u041d\u0430\u0448\u0438\" accent=\"\u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0438\u0435\" text=\"\u0410\u0434\u0440\u0435\u0441, \u0447\u0430\u0441\u044b \u0440\u0430\u0431\u043e\u0442\u044b, \u043a\u0430\u0440\u0442\u0430, \u043a\u0430\u043a \u0434\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u0430\u0440\u043a\u043e\u0432\u043a\u0430, \u0443\u0441\u043b\u0443\u0433\u0438 \u0444\u0438\u043b\u0438\u0430\u043b\u0430 \u0438 \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0443\u044e.\" \/>\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] overflow-hidden flex flex-col lg:flex-row shadow-2xl\">\n <div className=\"lg:w-1\/2 p-8 md:p-10\">\n <div className=\"space-y-4 mb-8\">\n {LOCATIONS.map((loc, index) => (\n <button key={loc.id} onClick={() => setSelLoc(index)} className={`w-full text-left p-6 rounded-3xl border flex items-center justify-between gap-4 ${selLoc === index ? 'bg-green-500 border-green-500 text-slate-950' : 'bg-slate-950 border-white\/10 text-white hover:border-white\/20'}`}>\n <div className=\"flex gap-4 items-center\"><Icon name=\"mapPin\" className={selLoc === index ? 'text-slate-950' : 'text-green-500'} \/><div><p className=\"font-black uppercase tracking-tighter text-lg leading-tight\">{loc.name}<\/p><p className={`text-[10px] font-bold uppercase tracking-widest ${selLoc === index ? 'text-slate-950\/60' : 'text-slate-500'}`}>{loc.address}<\/p><\/div><\/div>\n {selLoc === index && <Icon name=\"checkCircle\" \/>}\n <\/button>\n ))}\n <\/div>\n <div className=\"bg-slate-950\/60 p-7 rounded-[2rem] border border-white\/5 space-y-5\">\n <p className=\"text-slate-300 font-medium leading-relaxed italic\">{LOCATIONS[selLoc].desc}<\/p>\n <div className=\"grid sm:grid-cols-2 gap-4 text-sm\"><InfoLine icon=\"clock\" label=\"\u0427\u0430\u0441\u044b\" value={LOCATIONS[selLoc].hours} \/><InfoLine icon=\"navigation\" label=\"\u041c\u0435\u0442\u0440\u043e\" value={LOCATIONS[selLoc].metro} \/><InfoLine icon=\"phone\" label=\"\u0422\u0435\u043b\u0435\u0444\u043e\u043d\" value={LOCATIONS[selLoc].phone} \/><InfoLine icon=\"truck\" label=\"\u041f\u0430\u0440\u043a\u043e\u0432\u043a\u0430\" value={LOCATIONS[selLoc].parking} \/><\/div>\n <div className=\"flex flex-wrap gap-2\">{LOCATIONS[selLoc].services.map((item) => <span key={item} className=\"bg-green-500\/10 text-green-400 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest\">{item}<\/span>)}<\/div>\n <div className=\"grid sm:grid-cols-2 gap-3\"><Button variant=\"white\" onClick={() => openRoute(LOCATIONS[selLoc].coords)}>\u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442<\/Button><Button onClick={() => openBooking()}>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0441\u044e\u0434\u0430<\/Button><\/div>\n <\/div>\n <\/div>\n <div className=\"lg:w-1\/2 min-h-[520px] bg-slate-800 relative overflow-hidden\">\n <div className=\"absolute inset-0 soft-grid opacity-30\"><\/div>\n <div className=\"absolute inset-0 flex items-center justify-center p-12\"><div className=\"w-full h-full relative border-2 border-white\/5 rounded-full flex items-center justify-center\"><div className=\"w-3\/4 h-3\/4 border border-white\/5 rounded-full flex items-center justify-center\"><div className=\"w-1\/2 h-1\/2 border border-white\/5 rounded-full\"><\/div><\/div>{LOCATIONS.map((loc, index) => <button key={loc.id} onClick={() => setSelLoc(index)} className={`absolute bg-transparent ${selLoc === index ? 'scale-125 z-20' : 'scale-100 opacity-50 z-10'}`} style={{ left: loc.pos.x, top: loc.pos.y }}><span className=\"relative flex items-center justify-center\">{selLoc === index && <span className=\"map-dot-pulse\"><\/span>}<span className={`p-4 rounded-full border-2 shadow-2xl ${selLoc === index ? 'bg-green-500 border-white text-slate-950' : 'bg-slate-900 border-slate-700 text-green-500'}`}><Icon name=\"mapPin\" fill=\"currentColor\" \/><\/span><\/span><\/button>)}<\/div><\/div>\n <div className=\"absolute bottom-8 left-8 right-8 p-6 bg-slate-900\/90 backdrop-blur-xl border border-white\/10 rounded-3xl\"><div className=\"text-[10px] text-green-500 font-black uppercase tracking-widest mb-2\">\u0424\u043e\u0442\u043e \u0432\u0445\u043e\u0434\u0430 \/ \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440<\/div><p className=\"text-white font-bold leading-relaxed\">\u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f \u0444\u0430\u0441\u0430\u0434\u0430, \u0432\u0445\u043e\u0434\u0430 \u0438 \u043a\u0440\u0430\u0442\u043a\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u201c\u043a\u0430\u043a \u043d\u0430\u0439\u0442\u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0443\u044e\u201d.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n function InfoLine({ icon, label, value }) {\n return <div className=\"flex gap-3\"><Icon name={icon} className=\"text-green-500 shrink-0\" size={18} \/><div><p className=\"text-[9px] font-black uppercase tracking-widest text-slate-500\">{label}<\/p><p className=\"text-slate-200 font-bold leading-snug\">{value}<\/p><\/div><\/div>;\n }\n\n function TrustAndReviews() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0414\u043e\u0432\u0435\u0440\u0438\u0435\" title=\"\u041e\u0442\u0437\u044b\u0432\u044b,\" accent=\"\u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0438 \u043a\u0435\u0439\u0441\u044b\" \/>\n <div className=\"grid lg:grid-cols-3 gap-6 mb-10\">\n {REVIEWS.map((review) => <div key={review.name} className=\"bg-slate-900 border border-white\/10 rounded-[2.4rem] p-7\"><div className=\"flex gap-1 text-yellow-500 mb-5\">{[0,1,2,3,4].map((i) => <Icon key={i} name=\"star\" size={16} fill=\"currentColor\" \/>)}<\/div><p className=\"text-slate-300 leading-relaxed italic mb-6\">\u201c{review.text}\u201d<\/p><p className=\"text-white font-black uppercase tracking-widest text-xs\">{review.name}<\/p><\/div>)}\n <\/div>\n <div className=\"grid lg:grid-cols-3 gap-6\">\n <div className=\"lg:col-span-2 bg-slate-900 border border-white\/10 rounded-[2.4rem] p-8\"><div className=\"flex items-center gap-4 mb-6\"><IconWrap icon=\"wrench\" \/><h3 className=\"text-3xl font-black italic uppercase tracking-tighter text-white\">\u041a\u0435\u0439\u0441 \u0440\u0435\u043c\u043e\u043d\u0442\u0430<\/h3><\/div><div className=\"grid md:grid-cols-2 gap-5 text-sm\"><InfoLine icon=\"alert\" label=\"\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\" value=\"\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u043b\u0441\u044f\" \/><InfoLine icon=\"search\" label=\"\u041f\u0440\u0438\u0447\u0438\u043d\u0430\" value=\"\u041d\u0435\u0438\u0441\u043f\u0440\u0430\u0432\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\" \/><InfoLine icon=\"checkCircle\" label=\"\u0420\u0435\u0448\u0435\u043d\u0438\u0435\" value=\"\u0417\u0430\u043c\u0435\u043d\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438\" \/><InfoLine icon=\"shield\" label=\"\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f\" value=\"30 \u0434\u043d\u0435\u0439 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u044b\" \/><\/div><\/div>\n <div className=\"bg-green-500 text-slate-950 rounded-[2.4rem] p-8\"><Icon name=\"shield\" size={44} className=\"mb-6\" \/><h3 className=\"text-3xl font-black italic uppercase tracking-tighter leading-none mb-4\">\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f<\/h3><p className=\"font-bold leading-relaxed opacity-80\">\u041d\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438. \u0423\u0441\u043b\u043e\u0432\u0438\u044f \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0438, \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439.<\/p><\/div>\n <\/div>\n <\/section>\n );\n }\n\n function BusinessPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c\" title=\"B2B \u0438\" accent=\"\u043f\u0430\u0440\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430\" text=\"\u0420\u0430\u0437\u0434\u0435\u043b \u0434\u043b\u044f \u0441\u043b\u0443\u0436\u0431 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438, \u043f\u0440\u043e\u043a\u0430\u0442\u043e\u0432, \u043a\u0443\u0440\u044c\u0435\u0440\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u043a\u043e\u043c \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430.\" \/>\n <div className=\"grid lg:grid-cols-3 gap-6\">\n {[['\u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0422\u041e','\u041f\u043b\u0430\u043d\u043e\u0432\u043e\u0435 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u043a\u0430 \u043f\u043e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0443.','calendar'],['\u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c','\u0412\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b \u0434\u043b\u044f \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432.','clock'],['\u041e\u0442\u0447\u0451\u0442\u044b \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b','\u0410\u043a\u0442\u044b, \u0447\u0435\u043a\u0438, \u0441\u0442\u0430\u0442\u0443\u0441\u044b, \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0440\u0435\u043c\u043e\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438.','file'],['\u0421\u0440\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u043c\u043e\u043d\u0442','\u0412\u043d\u0435\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0430\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0438 \u0440\u0435\u043c\u043e\u043d\u0442 \u0441 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c.','zap'],['\u0421\u043a\u043b\u0430\u0434 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439','\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 \u043f\u043e\u0434 \u043f\u0430\u0440\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0430.','package'],['CRM-\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f','\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0437\u0430\u044f\u0432\u043e\u043a, \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 \u0438 \u043e\u043f\u043b\u0430\u0442 \u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.','settings']].map(([title,text,icon]) => <div key={title} className=\"bg-slate-900 border border-white\/10 rounded-[2.4rem] p-8\"><IconWrap icon={icon} \/><h3 className=\"text-2xl font-black italic uppercase tracking-tighter text-white my-5\">{title}<\/h3><p className=\"text-slate-400 leading-relaxed\">{text}<\/p><\/div>)}\n <\/div>\n <div className=\"mt-8 bg-slate-900 border border-white\/10 rounded-[3rem] p-8 md:p-10 flex flex-col md:flex-row items-center justify-between gap-8\"><div><h3 className=\"text-4xl font-black italic uppercase tracking-tighter text-white mb-3\">\u0417\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0434\u043e\u0433\u043e\u0432\u043e\u0440<\/h3><p className=\"text-slate-400\">\u041e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0437\u0430\u044f\u0432\u043a\u0443 \u2014 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u043a\u0430.<\/p><\/div><Button onClick={() => setModal('business')}>\u041e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u044f\u0432\u043a\u0443<\/Button><\/div>\n <\/section>\n );\n }\n\n function AdminPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0414\u0435\u043c\u043e \u0430\u0434\u043c\u0438\u043d-\u043f\u0430\u043d\u0435\u043b\u0438\" title=\"\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\" accent=\"\u0441\u0430\u0439\u0442\u043e\u043c\" text=\"\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438\u0437 \u0430\u0434\u043c\u0438\u043d\u043a\u0438: \u0443\u0441\u043b\u0443\u0433\u0438, \u0446\u0435\u043d\u044b, \u0441\u043b\u043e\u0442\u044b, \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438, \u043a\u043b\u0438\u0435\u043d\u0442\u044b, \u043c\u0430\u0441\u0442\u0435\u0440\u0430, \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u0438 \u043e\u043f\u043b\u0430\u0442\u044b.\" \/>\n <div className=\"grid md:grid-cols-4 gap-5 mb-8\">{ADMIN_ROWS.map((row) => <div key={row.label} className=\"bg-slate-900 border border-white\/10 rounded-[2rem] p-6\"><IconWrap icon={row.icon} \/><p className=\"text-slate-500 text-[10px] font-black uppercase tracking-widest mt-5 mb-2\">{row.label}<\/p><p className=\"text-3xl font-black italic text-white tracking-tighter\">{row.value}<\/p><p className=\"text-slate-500 text-xs mt-2\">{row.detail}<\/p><\/div>)}<\/div>\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8\">\n <div className=\"flex flex-wrap gap-3 mb-8\">{['dashboard','services','parts','slots','clients'].map((mode) => <button key={mode} onClick={() => setAdminMode(mode)} className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest ${adminMode===mode?'bg-green-500 text-slate-950':'bg-slate-950 text-slate-400 border border-white\/10'}`}>{mode}<\/button>)}<\/div>\n <div className=\"grid lg:grid-cols-2 gap-6\"><div className=\"bg-slate-950\/60 rounded-[2rem] p-6 border border-white\/5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter mb-5\">\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3><div className=\"space-y-4\"><input defaultValue=\"\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u0430\" className=\"w-full bg-slate-900 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input defaultValue=\"1 500 \u20bd\" className=\"w-full bg-slate-900 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input defaultValue=\"20\u201340 \u043c\u0438\u043d\" className=\"w-full bg-slate-900 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><Button className=\"w-full\">\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f<\/Button><\/div><\/div><div className=\"bg-slate-950\/60 rounded-[2rem] p-6 border border-white\/5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter mb-5\">\u041b\u043e\u0433\u0438\u043a\u0430 \u0430\u0434\u043c\u0438\u043d\u043a\u0438<\/h3><ul className=\"space-y-4 text-slate-400 leading-relaxed\"><li>\u2022 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0443\u0441\u043b\u0443\u0433\u0430\u043c\u0438, \u043f\u0440\u0430\u0439\u0441\u043e\u043c \u0438 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e.<\/li><li>\u2022 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u044f\u043c\u0438, \u043c\u0430\u0441\u0442\u0435\u0440\u0430\u043c\u0438 \u0438 \u0441\u043b\u043e\u0442\u0430\u043c\u0438.<\/li><li>\u2022 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u043c \u201c\u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439\u201d.<\/li><li>\u2022 \u0421\u0442\u0430\u0442\u0443\u0441\u044b \u0440\u0435\u043c\u043e\u043d\u0442\u0430, \u043e\u043f\u043b\u0430\u0442\u044b, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0438 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f.<\/li><\/ul><\/div><\/div>\n <\/div>\n <\/section>\n );\n }\n\n function LegalPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u042e\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0431\u043b\u043e\u043a\" title=\"\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\" accent=\"\u0443\u0441\u043b\u043e\u0432\u0438\u044f\" text=\"\u041d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u044e\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043e\u043f\u043b\u0430\u0442\u044b, \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0435 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.\" \/>\n <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-5\">{['\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438','\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435','\u0423\u0441\u043b\u043e\u0432\u0438\u044f \u043e\u043d\u043b\u0430\u0439\u043d-\u043e\u043f\u043b\u0430\u0442\u044b','\u0423\u0441\u043b\u043e\u0432\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430','\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0439\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f','\u0421\u043e\u0433\u043b\u0430\u0441\u0438\u0435 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445','Cookie policy','\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439'].map((item) => <div key={item} className=\"bg-slate-900 border border-white\/10 rounded-[2rem] p-6\"><IconWrap icon=\"file\" \/><h3 className=\"text-xl font-black italic uppercase text-white tracking-tighter mt-5\">{item}<\/h3><\/div>)}<\/div>\n <\/section>\n );\n }\n\n function AnalyticsPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430\" title=\"\u041c\u0435\u0442\u0440\u0438\u043a\u0438\" accent=\"\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044f\" text=\"\u0414\u0435\u043c\u043e-\u0431\u043b\u043e\u043a \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438: \u0437\u0430\u044f\u0432\u043a\u0438, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438, \u043e\u043f\u043b\u0430\u0442\u044b, \u043e\u0442\u043c\u0435\u043d\u044b, \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043c\u0430\u0441\u0442\u0435\u0440\u043e\u0432.\" \/>\n <div className=\"grid md:grid-cols-3 gap-6\"><div className=\"bg-slate-900 border border-white\/10 rounded-[2.4rem] p-8 md:col-span-2\"><h3 className=\"text-3xl font-black italic uppercase text-white tracking-tighter mb-8\">\u0412\u043e\u0440\u043e\u043d\u043a\u0430<\/h3>{[['\u0412\u0438\u0437\u0438\u0442\u044b',100],['\u041a\u043b\u0438\u043a\u0438 \u201c\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f\u201d',62],['\u0412\u044b\u0431\u043e\u0440 \u0441\u043b\u043e\u0442\u0430',44],['\u041f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430',31]].map(([label,value]) => <div key={label} className=\"mb-6\"><div className=\"flex justify-between text-xs font-black uppercase tracking-widest text-slate-500 mb-2\"><span>{label}<\/span><span>{value}%<\/span><\/div><div className=\"h-3 bg-slate-800 rounded-full overflow-hidden\"><div className=\"h-full bg-green-500 rounded-full\" style={{width:value+'%'}}><\/div><\/div><\/div>)}<\/div><div className=\"bg-green-500 text-slate-950 rounded-[2.4rem] p-8\"><Icon name=\"chart\" size={48} className=\"mb-8\" \/><h3 className=\"text-4xl font-black italic uppercase tracking-tighter leading-none mb-5\">\u041e\u0442\u0447\u0451\u0442\u044b<\/h3><p className=\"font-bold leading-relaxed opacity-80\">\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0437\u0430\u044f\u0432\u043e\u043a, \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b, \u043e\u043f\u043b\u0430\u0442\u044b \u0438 \u043e\u0442\u043c\u0435\u043d\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c \u0441\u0430\u0439\u0442.<\/p><\/div><\/div>\n <\/section>\n );\n }\n\n function BookingModal() {\n const [localName, setLocalName] = useState('');\n const selectedDay = currentSlots();\n const selectedPartTotal = selectedPart ? selectedPart.partPrice + selectedPart.installPrice : 0;\n const total = selectedPart ? selectedPartTotal : selectedService.price;\n const dueNow = paymentChoice === 'full' ? total : 1000;\n\n return (\n <div className=\"fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-6 backdrop-blur-3xl bg-slate-950\/80\">\n <button className=\"absolute inset-0 w-full h-full bg-transparent\" onClick={() => setModal(null)} aria-label=\"\u0417\u0430\u043a\u0440\u044b\u0442\u044c\"><\/button>\n <div className=\"relative bg-slate-900 border border-white\/10 w-full max-w-5xl rounded-[2.5rem] md:rounded-[4rem] p-6 md:p-10 shadow-[0_0_100px_rgba(0,0,0,.5)] zoom-in max-h-[92vh] overflow-auto custom-scroll\">\n <button onClick={() => setModal(null)} className=\"absolute top-6 right-6 bg-transparent text-slate-600 hover:text-white\"><Icon name=\"x\" size={30} \/><\/button>\n <div className=\"mb-8 pr-10\"><p className=\"text-green-500 text-[10px] font-black uppercase tracking-[0.3em] mb-3\">\u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c<\/p><h2 className=\"text-4xl md:text-6xl font-black italic uppercase text-white tracking-tighter leading-none\">\u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 <span className=\"text-green-500\">\u0437\u0430\u044f\u0432\u043a\u0438<\/span><\/h2><\/div>\n <div className=\"grid lg:grid-cols-[1fr_360px] gap-8\">\n <div>\n <div className=\"flex gap-2 mb-6\">{[1,2,3].map((step) => <div key={step} className={`h-2 flex-1 rounded-full ${bookingStep >= step ? 'bg-green-500' : 'bg-slate-800'}`}><\/div>)}<\/div>\n {bookingStep === 1 && <div className=\"space-y-5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter\">1. \u0423\u0441\u043b\u0443\u0433\u0430 \u0438 \u0441\u043b\u043e\u0442<\/h3><select value={selectedService.id} onChange={(e)=>setSelectedService(SERVICES.find(s=>s.id===Number(e.target.value)))} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">{SERVICES.map((s)=><option key={s.id} value={s.id}>{s.title}<\/option>)}<\/select><select value={selLoc} onChange={(e)=>setSelLoc(Number(e.target.value))} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">{LOCATIONS.map((l,i)=><option key={l.id} value={i}>{l.name}<\/option>)}<\/select><div className=\"grid sm:grid-cols-3 gap-3\">{SLOTS.map((d)=><button key={d.iso} onClick={()=>{setSelectedDate(d.iso);setSelectedSlot('');}} className={`p-4 rounded-2xl border text-left ${selectedDate===d.iso?'bg-green-500 border-green-500 text-slate-950':'bg-slate-950 border-white\/10 text-white'}`}><b>{d.date}<\/b><br\/><span className=\"text-[10px] uppercase font-black opacity-70\">{d.slots.filter(s=>s.free).length} \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e<\/span><\/button>)}<\/div><div className=\"grid sm:grid-cols-3 gap-3\">{selectedDay.slots.map((slot)=><button key={slot.time} disabled={!slot.free} onClick={()=>setSelectedSlot(slot.time)} className={`p-4 rounded-2xl border ${!slot.free?'bg-red-500\/5 border-red-500\/20 text-red-300 opacity-50':'bg-slate-950 border-white\/10 text-white'} ${selectedSlot===slot.time?'!bg-green-500 !text-slate-950 !border-green-500':''}`}><b>{slot.time}<\/b><br\/><span className=\"text-[10px] uppercase font-black opacity-70\">{slot.free?slot.master:'\u0437\u0430\u043d\u044f\u0442\u043e'}<\/span><\/button>)}<\/div><Button disabled={!selectedSlot} onClick={()=>setBookingStep(2)} className={`w-full ${!selectedSlot?'opacity-50 cursor-not-allowed':''}`}>\u0414\u0430\u043b\u0435\u0435<\/Button><\/div>}\n {bookingStep === 2 && <div className=\"space-y-5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter\">2. \u0414\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/h3><input value={localName} onChange={(e)=>setLocalName(e.target.value)} placeholder=\"\u0418\u043c\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input placeholder=\"\u0422\u0435\u043b\u0435\u0444\u043e\u043d\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input placeholder=\"E-mail\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input placeholder=\"\u0411\u0440\u0435\u043d\u0434 \u0438 \u043c\u043e\u0434\u0435\u043b\u044c \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><textarea placeholder=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0435\u0438\u0441\u043f\u0440\u0430\u0432\u043d\u043e\u0441\u0442\u0438 \/ \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold h-28 resize-none\"><\/textarea><div className=\"grid grid-cols-2 gap-3\"><button className=\"bg-slate-950 border border-dashed border-white\/20 rounded-2xl p-5 text-slate-500 font-black uppercase text-[10px]\"><Icon name=\"image\" className=\"mx-auto mb-2\"\/>\u0424\u043e\u0442\u043e<\/button><button className=\"bg-slate-950 border border-dashed border-white\/20 rounded-2xl p-5 text-slate-500 font-black uppercase text-[10px]\"><Icon name=\"file\" className=\"mx-auto mb-2\"\/>\u0412\u0438\u0434\u0435\u043e<\/button><\/div><label className=\"flex gap-3 text-slate-400 text-sm\"><input type=\"checkbox\" defaultChecked\/> \u0421\u043e\u0433\u043b\u0430\u0441\u0435\u043d \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445<\/label><div className=\"grid grid-cols-2 gap-3\"><Button variant=\"ghost\" onClick={()=>setBookingStep(1)}>\u041d\u0430\u0437\u0430\u0434<\/Button><Button onClick={()=>setBookingStep(3)}>\u041a \u043e\u043f\u043b\u0430\u0442\u0435<\/Button><\/div><\/div>}\n {bookingStep === 3 && <div className=\"space-y-5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter\">3. \u041e\u043f\u043b\u0430\u0442\u0430<\/h3><div className=\"grid sm:grid-cols-2 gap-4\"><button onClick={()=>setPaymentChoice('prepay')} className={`p-5 rounded-3xl border text-left ${paymentChoice==='prepay'?'bg-green-500 text-slate-950 border-green-500':'bg-slate-950 text-white border-white\/10'}`}><Icon name=\"creditCard\" className=\"mb-4\"\/><b>\u041f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430<\/b><p className=\"text-xs opacity-70 mt-2\">\u0411\u0440\u043e\u043d\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \/ \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430<\/p><\/button><button onClick={()=>setPaymentChoice('full')} className={`p-5 rounded-3xl border text-left ${paymentChoice==='full'?'bg-green-500 text-slate-950 border-green-500':'bg-slate-950 text-white border-white\/10'}`}><Icon name=\"checkCircle\" className=\"mb-4\"\/><b>\u041f\u043e\u043b\u043d\u0430\u044f \u043e\u043f\u043b\u0430\u0442\u0430<\/b><p className=\"text-xs opacity-70 mt-2\">\u041e\u043f\u043b\u0430\u0442\u0430 \u0443\u0441\u043b\u0443\u0433\u0438 \u0438\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/p><\/button><\/div><div className=\"bg-slate-950 border border-white\/10 rounded-3xl p-6\"><div className=\"flex justify-between mb-3\"><span className=\"text-slate-500\">\u041a \u043e\u043f\u043b\u0430\u0442\u0435 \u0441\u0435\u0439\u0447\u0430\u0441<\/span><b className=\"text-white\">{formatMoney(dueNow)}<\/b><\/div><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0421\u043f\u043e\u0441\u043e\u0431<\/span><b className=\"text-white\">\u041a\u0430\u0440\u0442\u0430 \/ \u0421\u0411\u041f \/ \u042eKassa<\/b><\/div><\/div><div className=\"grid grid-cols-2 gap-3\"><Button variant=\"ghost\" onClick={()=>setBookingStep(2)}>\u041d\u0430\u0437\u0430\u0434<\/Button><Button onClick={()=>{setModal(null); setOrderId('123'); setActiveTab('status'); setStatusData(REPAIR_STATUS); alert('\u0414\u0435\u043c\u043e: \u0437\u0430\u044f\u0432\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430, \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430 123. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u0451\u0436\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438 CRM.');}}>\u041e\u043f\u043b\u0430\u0442\u0438\u0442\u044c<\/Button><\/div><\/div>}\n <\/div>\n <div className=\"bg-slate-950\/70 border border-white\/5 rounded-[2rem] p-6 h-fit\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter mb-6\">\u0418\u0442\u043e\u0433\u043e<\/h3>{selectedPart && <div className=\"bg-amber-500\/10 border border-amber-500\/20 rounded-2xl p-4 mb-5 text-amber-100 text-sm\"><b>{selectedPart.name}<\/b><br\/>\u0422\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0430 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430.<\/div>}<div className=\"space-y-4 text-sm\"><div className=\"flex justify-between gap-4\"><span className=\"text-slate-500\">\u0423\u0441\u043b\u0443\u0433\u0430<\/span><b className=\"text-white text-right\">{selectedService.title}<\/b><\/div><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0424\u0438\u043b\u0438\u0430\u043b<\/span><b className=\"text-white\">{LOCATIONS[selLoc].name}<\/b><\/div><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0414\u0430\u0442\u0430 \/ \u0432\u0440\u0435\u043c\u044f<\/span><b className=\"text-white\">{selectedDay.date} {selectedSlot || '\u2014'}<\/b><\/div><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/span><b className=\"text-white\">\u043e\u0442 {formatMoney(total)}<\/b><\/div><div className=\"pt-4 border-t border-white\/10 flex justify-between items-end\"><span className=\"text-green-400 text-[10px] font-black uppercase tracking-widest\">\u0421\u0435\u0439\u0447\u0430\u0441<\/span><span className=\"text-4xl font-black italic text-white tracking-tighter\">{formatMoney(dueNow)}<\/span><\/div><\/div><p className=\"text-slate-500 text-xs leading-relaxed mt-6\">\u041f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0438\u0442\u043e\u0433\u043e\u0432\u0443\u044e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0438 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442 \u0440\u0435\u043c\u043e\u043d\u0442 \u043e\u043d\u043b\u0430\u0439\u043d.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n }\n\n function PaymentModal() {\n return (\n <div className=\"fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-3xl bg-slate-950\/80\"><button className=\"absolute inset-0\" onClick={()=>setModal(null)}><\/button><div className=\"relative bg-slate-900 border border-white\/10 max-w-lg w-full rounded-[3rem] p-8 zoom-in\"><button onClick={()=>setModal(null)} className=\"absolute top-6 right-6 bg-transparent text-slate-500\"><Icon name=\"x\" \/><\/button><IconWrap icon=\"creditCard\" className=\"bg-green-500 text-slate-950 mb-6\" \/><h2 className=\"text-4xl font-black italic uppercase text-white tracking-tighter mb-4\">\u041e\u043d\u043b\u0430\u0439\u043d-\u043e\u043f\u043b\u0430\u0442\u0430<\/h2><p className=\"text-slate-400 leading-relaxed mb-8\">\u0414\u0435\u043c\u043e-\u044d\u043a\u0440\u0430\u043d \u043e\u043f\u043b\u0430\u0442\u044b. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u042eKassa, CloudPayments, Robokassa, \u0421\u0411\u041f, \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0430\u0441\u0441\u0430 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0447\u0435\u043a\u0430.<\/p><div className=\"bg-slate-950 border border-white\/10 rounded-3xl p-6 mb-6\"><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0421\u0443\u043c\u043c\u0430<\/span><b className=\"text-white text-2xl\">{formatMoney(REPAIR_STATUS.price)}<\/b><\/div><\/div><Button onClick={()=>{setModal(null);alert('\u0414\u0435\u043c\u043e: \u043f\u043b\u0430\u0442\u0451\u0436 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d.')}} className=\"w-full\">\u041e\u043f\u043b\u0430\u0442\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0439 \/ \u0421\u0411\u041f<\/Button><\/div><\/div>\n );\n }\n\n function Footer() {\n return (\n <footer className=\"bg-slate-950 border-t border-white\/5 py-20 mt-12\">\n <div className=\"max-w-7xl mx-auto px-4 grid md:grid-cols-4 gap-10\">\n <div className=\"md:col-span-1\"><div className=\"flex items-center gap-2 mb-6\"><Icon name=\"zap\" className=\"text-green-500\" fill=\"currentColor\" \/><span className=\"text-3xl font-black italic uppercase tracking-tighter text-white\">ElectroFix<\/span><\/div><p className=\"text-slate-500 text-sm leading-relaxed\">\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0430\u044f \u043f\u043e \u0440\u0435\u043c\u043e\u043d\u0442\u0443 \u044d\u043b\u0435\u043a\u0442\u0440\u043e- \u0438 \u0432\u0435\u043b\u043e\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430 \u0441 \u043e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c\u044e, \u043e\u043f\u043b\u0430\u0442\u043e\u0439, \u0441\u0442\u0430\u0442\u0443\u0441\u0430\u043c\u0438 \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u043c \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439.<\/p><\/div>\n <div><h4 className=\"text-[10px] font-black uppercase tracking-[0.3em] text-slate-600 mb-5\">\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b<\/h4><p className=\"text-white font-black text-2xl italic tracking-tighter mb-2\">+7 (495) 000-00-00<\/p><p className=\"text-slate-500 text-sm mb-5\">\u0415\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e 10:00\u201321:00<\/p><div className=\"flex gap-3\"><button className=\"w-12 h-12 bg-slate-900 rounded-2xl flex items-center justify-center text-slate-400 hover:text-slate-950 hover:bg-green-500\"><Icon name=\"phone\" \/><\/button><button className=\"w-12 h-12 bg-slate-900 rounded-2xl flex items-center justify-center text-slate-400 hover:text-slate-950 hover:bg-green-500\"><Icon name=\"message\" \/><\/button><button className=\"w-12 h-12 bg-slate-900 rounded-2xl flex items-center justify-center text-slate-400 hover:text-slate-950 hover:bg-green-500\"><Icon name=\"mail\" \/><\/button><\/div><\/div>\n <div><h4 className=\"text-[10px] font-black uppercase tracking-[0.3em] text-slate-600 mb-5\">\u0420\u0430\u0437\u0434\u0435\u043b\u044b<\/h4><div className=\"grid gap-3 text-sm font-bold text-slate-400\">{['\u0423\u0441\u043b\u0443\u0433\u0438','\u041f\u0440\u0430\u0439\u0441','\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439','\u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c','\u0421\u0442\u0430\u0442\u0443\u0441 \u0440\u0435\u043c\u043e\u043d\u0442\u0430','\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f'].map((item)=> <button key={item} onClick={()=>navTo(item==='\u041f\u0440\u0430\u0439\u0441'?'prices':item==='\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439'?'shop':item==='\u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c'?'booking':item==='\u0421\u0442\u0430\u0442\u0443\u0441 \u0440\u0435\u043c\u043e\u043d\u0442\u0430'?'status':'services')} className=\"bg-transparent text-left hover:text-green-500\">{item}<\/button>)}<\/div><\/div>\n <div><h4 className=\"text-[10px] font-black uppercase tracking-[0.3em] text-slate-600 mb-5\">\u042e\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u043e<\/h4><p className=\"text-amber-200 text-sm leading-relaxed bg-amber-500\/10 border border-amber-500\/20 rounded-3xl p-5\">\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0438\u0437 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0430 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439 \u043d\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f.<\/p><\/div>\n <\/div>\n <\/footer>\n );\n }\n\n function MainContent() {\n if (activeTab === 'services') return <ServicesPage \/>;\n if (activeTab === 'prices') return <PricesPage \/>;\n if (activeTab === 'shop') return <ShopPage \/>;\n if (activeTab === 'booking') return <BookingPage \/>;\n if (activeTab === 'status') return <StatusPage \/>;\n if (activeTab === 'cabinet') return <CabinetPage \/>;\n if (activeTab === 'business') return <BusinessPage \/>;\n if (activeTab === 'diagnostic') return <DiagnosticPage \/>;\n if (activeTab === 'locations') return <LocationsPage \/>;\n if (activeTab === 'admin') return <AdminPage \/>;\n if (activeTab === 'legal') return <LegalPage \/>;\n if (activeTab === 'analytics') return <AnalyticsPage \/>;\n return <HomePage \/>;\n }\n\n return (\n <div className={`${theme === 'light' ? 'brightness-110' : ''} min-h-screen flex flex-col`}>\n <Header \/>\n <main className=\"flex-grow\"><MainContent \/><\/main>\n <div className=\"fixed bottom-5 left-1\/2 -translate-x-1\/2 z-50 hidden md:flex gap-2 bg-slate-950\/80 backdrop-blur-xl border border-white\/10 rounded-full p-2 shadow-2xl\"><button onClick={()=>navTo('diagnostic')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430<\/button><button onClick={()=>navTo('locations')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u041b\u043e\u043a\u0430\u0446\u0438\u0438<\/button><button onClick={()=>navTo('admin')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u0410\u0434\u043c\u0438\u043d\u043a\u0430<\/button><button onClick={()=>navTo('legal')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u042e\u0440. \u0431\u043b\u043e\u043a<\/button><button onClick={()=>navTo('analytics')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430<\/button><\/div>\n <Footer \/>\n {modal === 'booking' && <BookingModal \/>}\n {modal === 'payment' && <PaymentModal \/>}\n {modal === 'business' && <BookingModal \/>}\n <\/div>\n );\n }\n\n function runSmokeTests() {\n const required = ['zap','wrench','search','clock','shield','creditCard','package','calendar','user','qr','chart'];\n console.assert(Boolean(window.React), 'React \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d');\n console.assert(Boolean(window.ReactDOM), 'ReactDOM \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d');\n console.assert(required.every((name) => ICON_PATHS[name]), '\u0412\u0441\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 SVG-\u0438\u043a\u043e\u043d\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b');\n console.assert(Array.isArray(SERVICES) && SERVICES.length >= 10, '\u0414\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0441\u043b\u0443\u0433 \u0434\u043b\u044f \u043f\u0440\u0430\u0439\u0441\u0430');\n console.assert(Array.isArray(PARTS) && PARTS.length >= 8, '\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d');\n console.assert(PARTS.every((part) => part.partPrice > 0 && part.installPrice > 0), '\u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0446\u0435\u043d\u0430 \u0434\u0435\u0442\u0430\u043b\u0438 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438');\n console.assert(SLOTS.some((day) => day.slots.some((slot) => slot.free)), '\u0414\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b');\n console.assert(mountNode, '\u0422\u043e\u0447\u043a\u0430 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c');\n }\n\n try {\n runSmokeTests();\n ReactDOMRef.createRoot(mountNode).render(<App \/>);\n } catch (error) {\n console.error('ElectroFix render error:', error);\n if (mountNode) {\n mountNode.innerHTML = '<div style=\"min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff;background:#020617;font-family:Arial,sans-serif;padding:24px;text-align:center;\"><div><h1 style=\"font-size:28px;margin:0 0 12px;\">\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0430\u0439\u0442\u0430<\/h1><p style=\"color:#94a3b8;margin:0;\">\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438.<\/p><\/div><\/div>';\n }\n }\n })();\n <\/script>\n<\/body>\n<\/html>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":3,"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n \n ElectroFix \u2014 \u0440\u0435\u043c\u043e\u043d\u0442 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u043e\u0432, \u0441\u043a\u0443\u0442\u0435\u0440\u043e\u0432 \u0438 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432<\/title>\n\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');\n\n :root {\n --bg: #020617;\n --panel: #0f172a;\n --panel2: #111827;\n --line: rgba(255,255,255,.09);\n --muted: #94a3b8;\n --green: #22c55e;\n --blue: #3b82f6;\n --amber: #f59e0b;\n }\n\n html { scroll-behavior: smooth; }\n body { margin: 0; background: var(--bg); }\n\n #workshop-app-scope {\n min-height: 100vh;\n font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n color-scheme: dark;\n background: radial-gradient(circle at 70% 10%, rgba(34,197,94,.14), transparent 28%), #020617;\n color: #f8fafc;\n text-align: left;\n }\n\n #workshop-app-scope * { box-sizing: border-box; }\n #workshop-app-scope h1,\n #workshop-app-scope h2,\n #workshop-app-scope h3,\n #workshop-app-scope h4,\n #workshop-app-scope p { margin: 0; }\n\n #workshop-app-scope button {\n border: 0;\n cursor: pointer;\n font-family: inherit;\n transition: all .2s ease;\n }\n\n #workshop-app-scope input,\n #workshop-app-scope select,\n #workshop-app-scope textarea {\n outline: none;\n font-family: inherit;\n }\n\n .soft-grid {\n background-image: radial-gradient(circle, rgba(34,197,94,.16) 1px, transparent 1px);\n background-size: 28px 28px;\n }\n\n .marquee-track {\n overflow: hidden;\n background: var(--green);\n padding: 14px 0;\n display: flex;\n }\n\n .marquee-content {\n display: flex;\n white-space: nowrap;\n animation: marquee-shuttle 34s linear infinite;\n }\n\n @keyframes marquee-shuttle {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n }\n\n .map-dot-pulse {\n position: absolute;\n width: 14px;\n height: 14px;\n background: var(--green);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n animation: pulse-dot 2s infinite;\n }\n\n @keyframes pulse-dot {\n 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.65); }\n 70% { box-shadow: 0 0 0 22px rgba(34,197,94,0); }\n 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }\n }\n\n .fade-in { animation: fadeIn .45s ease both; }\n .slide-up { animation: slideUp .42s ease both; }\n .zoom-in { animation: zoomIn .25s ease both; }\n\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n @keyframes slideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes zoomIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }\n\n .custom-scroll::-webkit-scrollbar { width: 8px; height: 8px; }\n .custom-scroll::-webkit-scrollbar-track { background: rgba(15,23,42,.6); border-radius: 20px; }\n .custom-scroll::-webkit-scrollbar-thumb { background: rgba(34,197,94,.55); border-radius: 20px; }\n <\/style>\n<\/head>\n<body>\n <div id=\"workshop-app-scope\">\n <div id=\"workshop-root-mount\"><\/div>\n <\/div>\n\n <script type=\"text\/babel\">\n (function () {\n 'use strict';\n\n const ReactRef = window.React;\n const ReactDOMRef = window.ReactDOM;\n const mountNode = document.getElementById('workshop-root-mount');\n\n if (!ReactRef || !ReactDOMRef) {\n if (mountNode) {\n mountNode.innerHTML = '<div style=\"min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;text-align:center;color:white;background:#020617;font-family:Arial,sans-serif;\">\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c React. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0438\u043b\u0438 CDN.<\/div>';\n }\n return;\n }\n\n const { useMemo, useState } = ReactRef;\n\n const ICON_PATHS = {\n zap: ['<path d=\"M13 2 3 14h8l-1 8 11-14h-8l1-6Z\" \/>'],\n wrench: ['<path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.3-3.3a6 6 0 0 1-7.7 7.7l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.7-7.7l-3.3 3.3Z\" \/>'],\n search: ['<circle cx=\"11\" cy=\"11\" r=\"8\" \/>','<path d=\"m21 21-4.3-4.3\" \/>'],\n clock: ['<circle cx=\"12\" cy=\"12\" r=\"10\" \/>','<path d=\"M12 6v6l4 2\" \/>'],\n shield: ['<path d=\"M20 13c0 5-3.5 7.5-7.7 8.8a1 1 0 0 1-.6 0C7.5 20.5 4 18 4 13V5a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.5a1.3 1.3 0 0 1 1.6 0C14.5 2.8 17 4 19 4a1 1 0 0 1 1 1v8Z\" \/>','<path d=\"m9 12 2 2 4-4\" \/>'],\n chevronRight: ['<path d=\"m9 18 6-6-6-6\" \/>'],\n chevronDown: ['<path d=\"m6 9 6 6 6-6\" \/>'],\n phone: ['<path d=\"M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.7 2.6a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6.3 6.3l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.7.6 2.6.7a2 2 0 0 1 1.7 2Z\" \/>'],\n mapPin: ['<path d=\"M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 0 1 16 0Z\" \/>','<circle cx=\"12\" cy=\"10\" r=\"3\" \/>'],\n star: ['<path d=\"m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21l1.2-6.8-5-4.9 6.9-1L12 2Z\" \/>'],\n message: ['<path d=\"M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8Z\" \/>'],\n x: ['<path d=\"M18 6 6 18\" \/>','<path d=\"m6 6 12 12\" \/>'],\n navigation: ['<path d=\"m3 11 19-9-9 19-2-8-8-2Z\" \/>'],\n smartphone: ['<rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\" \/>','<path d=\"M12 18h.01\" \/>'],\n truck: ['<path d=\"M10 17h4V5H2v12h3\" \/>','<path d=\"M14 17h1\" \/>','<path d=\"M19 17h3v-6l-3-4h-5\" \/>','<circle cx=\"7.5\" cy=\"17.5\" r=\"2.5\" \/>','<circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\" \/>'],\n checkCircle: ['<path d=\"M22 11.1V12a10 10 0 1 1-5.9-9.1\" \/>','<path d=\"m9 11 3 3L22 4\" \/>'],\n bike: ['<circle cx=\"5.5\" cy=\"17.5\" r=\"3.5\" \/>','<circle cx=\"18.5\" cy=\"17.5\" r=\"3.5\" \/>','<path d=\"M15 6h3l-3 7H8l4-7h3Z\" \/>','<path d=\"M9 17.5 12 13\" \/>','<path d=\"M15 13 18.5 17.5\" \/>'],\n battery: ['<rect width=\"16\" height=\"10\" x=\"2\" y=\"7\" rx=\"2\" \/>','<path d=\"M22 11v2\" \/>','<path d=\"M6 11h8\" \/>'],\n creditCard: ['<rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\" \/>','<path d=\"M2 10h20\" \/>'],\n settings: ['<path d=\"M12.2 2h-.4l-1 3a7.8 7.8 0 0 0-1.7.7L6.4 4.3 4.3 6.4l1.4 2.7A7.8 7.8 0 0 0 5 10.8l-3 .9v.6l3 .9c.2.6.4 1.2.7 1.7l-1.4 2.7 2.1 2.1 2.7-1.4c.5.3 1.1.5 1.7.7l1 3h.4l1-3c.6-.2 1.2-.4 1.7-.7l2.7 1.4 2.1-2.1-1.4-2.7c.3-.5.5-1.1.7-1.7l3-.9v-.6l-3-.9a7.8 7.8 0 0 0-.7-1.7l1.4-2.7-2.1-2.1-2.7 1.4a7.8 7.8 0 0 0-1.7-.7l-1-3Z\" \/>','<circle cx=\"12\" cy=\"12\" r=\"3\" \/>'],\n layers: ['<path d=\"m12 2 10 5-10 5L2 7l10-5Z\" \/>','<path d=\"m2 17 10 5 10-5\" \/>','<path d=\"m2 12 10 5 10-5\" \/>'],\n calendar: ['<path d=\"M8 2v4\" \/>','<path d=\"M16 2v4\" \/>','<rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" \/>','<path d=\"M3 10h18\" \/>'],\n user: ['<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" \/>','<circle cx=\"12\" cy=\"7\" r=\"4\" \/>'],\n users: ['<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" \/>','<circle cx=\"9\" cy=\"7\" r=\"4\" \/>','<path d=\"M22 21v-2a4 4 0 0 0-3-3.87\" \/>','<path d=\"M16 3.13a4 4 0 0 1 0 7.75\" \/>'],\n package: ['<path d=\"m7.5 4.3 9 5.2\" \/>','<path d=\"M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7Z\" \/>','<path d=\"m3.3 7 8.7 5 8.7-5\" \/>','<path d=\"M12 22V12\" \/>'],\n alert: ['<circle cx=\"12\" cy=\"12\" r=\"10\" \/>','<path d=\"M12 8v4\" \/>','<path d=\"M12 16h.01\" \/>'],\n lock: ['<rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" \/>','<path d=\"M7 11V7a5 5 0 0 1 10 0v4\" \/>'],\n bell: ['<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8\" \/>','<path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\" \/>'],\n image: ['<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" \/>','<circle cx=\"9\" cy=\"9\" r=\"2\" \/>','<path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\" \/>'],\n file: ['<path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z\" \/>','<path d=\"M14 2v6h6\" \/>','<path d=\"M16 13H8\" \/>','<path d=\"M16 17H8\" \/>','<path d=\"M10 9H8\" \/>'],\n qr: ['<rect width=\"5\" height=\"5\" x=\"3\" y=\"3\" rx=\"1\" \/>','<rect width=\"5\" height=\"5\" x=\"16\" y=\"3\" rx=\"1\" \/>','<rect width=\"5\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\" \/>','<path d=\"M21 16h-3a2 2 0 0 0-2 2v3\" \/>','<path d=\"M21 21v.01\" \/>','<path d=\"M12 7v3a2 2 0 0 1-2 2H7\" \/>','<path d=\"M3 12h.01\" \/>','<path d=\"M12 3h.01\" \/>','<path d=\"M12 16v.01\" \/>','<path d=\"M16 12h1\" \/>','<path d=\"M21 12v.01\" \/>','<path d=\"M12 21v-1\" \/>'],\n percent: ['<line x1=\"19\" x2=\"5\" y1=\"5\" y2=\"19\" \/>','<circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\" \/>','<circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\" \/>'],\n chart: ['<path d=\"M3 3v18h18\" \/>','<path d=\"m19 9-5 5-4-4-3 3\" \/>'],\n mail: ['<rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" \/>','<path d=\"m22 7-8.97 5.7a2 2 0 0 1-2.06 0L2 7\" \/>']\n };\n\n function Icon({ name, size = 24, className = '', fill = 'none', strokeWidth = 2, ...props }) {\n const paths = ICON_PATHS[name] || ICON_PATHS.zap;\n return (\n <svg\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill={fill}\n stroke=\"currentColor\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={className}\n aria-hidden=\"true\"\n dangerouslySetInnerHTML={{ __html: paths.join('') }}\n {...props}\n \/>\n );\n }\n\n const TRANSPORTS = [\n { id: 'all', label: '\u0412\u0441\u0435', icon: 'layers' },\n { id: 'scooter', label: '\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u044b', icon: 'zap' },\n { id: 'moped', label: '\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u044b', icon: 'battery' },\n { id: 'bike', label: '\u0412\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b', icon: 'bike' },\n { id: 'ebike', label: '\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b', icon: 'bike' }\n ];\n\n const LOCATIONS = [\n {\n id: 1,\n name: '\u0411\u0426 \u00ab\u0421\u0442\u0430\u043d\u043a\u043e\u043b\u0438\u0442\u00bb',\n address: '\u041c\u043e\u0441\u043a\u0432\u0430, \u0443\u043b. \u0421\u043a\u043b\u0430\u0434\u043e\u0447\u043d\u0430\u044f, 1\u04411',\n metro: '\u043c. \u0421\u0430\u0432\u0451\u043b\u043e\u0432\u0441\u043a\u0430\u044f, 10 \u043c\u0438\u043d\u0443\u0442 \u043f\u0435\u0448\u043a\u043e\u043c',\n phone: '+7 (495) 000-00-01',\n hours: '10:00\u201321:00 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e',\n parking: '\u0415\u0441\u0442\u044c \u0437\u043e\u043d\u0430 \u0440\u0430\u0437\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0432\u0435\u043b\u043e\u043f\u0430\u0440\u043a\u043e\u0432\u043a\u0430',\n desc: '\u0424\u043b\u0430\u0433\u043c\u0430\u043d\u0441\u043a\u0438\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430 \u0441\u0435\u0432\u0435\u0440\u0435 \u041c\u043e\u0441\u043a\u0432\u044b: \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043a\u043b\u0430\u0434 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439, \u0448\u0438\u043d\u043e\u043c\u043e\u043d\u0442\u0430\u0436, \u0440\u0435\u043c\u043e\u043d\u0442 \u0410\u041a\u0411 \u0438 \u0437\u043e\u043d\u0430 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f.',\n coords: '55.801648,37.593321',\n pos: { x: '42%', y: '35%' },\n services: ['\u0428\u0438\u043d\u043e\u043c\u043e\u043d\u0442\u0430\u0436', '\u0410\u041a\u0411', '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430', '\u0422\u041e \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432']\n },\n {\n id: 2,\n name: '\u041a\u0432\u0430\u0440\u0442\u0430\u043b \u00abArtplay\u00bb',\n address: '\u041c\u043e\u0441\u043a\u0432\u0430, \u0443\u043b. \u041d. \u0421\u044b\u0440\u043e\u043c\u044f\u0442\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f, 10',\n metro: '\u043c. \u041a\u0443\u0440\u0441\u043a\u0430\u044f \/ \u0427\u043a\u0430\u043b\u043e\u0432\u0441\u043a\u0430\u044f',\n phone: '+7 (495) 000-00-02',\n hours: '10:00\u201321:00 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e',\n parking: '\u041f\u0430\u0440\u043a\u043e\u0432\u043a\u0430 \u043d\u0430 \u0442\u0435\u0440\u0440\u0438\u0442\u043e\u0440\u0438\u0438 \u043a\u0432\u0430\u0440\u0442\u0430\u043b\u0430',\n desc: '\u0426\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0438\u043b\u0438\u0430\u043b: \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430, \u0442\u044e\u043d\u0438\u043d\u0433, \u0433\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f, \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0434\u043a\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439.',\n coords: '55.751999,37.669299',\n pos: { x: '68%', y: '58%' },\n services: ['\u0422\u044e\u043d\u0438\u043d\u0433', '\u0413\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f', '\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b', '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430']\n }\n ];\n\n const SERVICES = [\n { id: 1, type: 'scooter', category: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', title: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u0430', price: 1500, time: '20\u201340 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: true, desc: '\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0431\u0430\u0442\u0430\u0440\u0435\u0438, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438, \u0434\u0438\u0441\u043f\u043b\u0435\u044f, \u043c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u0430 \u0438 \u0442\u043e\u0440\u043c\u043e\u0437\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.' },\n { id: 2, type: 'scooter', category: '\u041a\u043e\u043b\u0451\u0441\u0430', title: '\u0417\u0430\u043c\u0435\u043d\u0430 \u043a\u0430\u043c\u0435\u0440\u044b', price: 2000, time: '30\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: true, desc: '\u0421\u043d\u044f\u0442\u0438\u0435 \u043a\u043e\u043b\u0435\u0441\u0430, \u0437\u0430\u043c\u0435\u043d\u0430 \u043a\u0430\u043c\u0435\u0440\u044b, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0434\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0433\u0435\u0440\u043c\u0435\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438.' },\n { id: 3, type: 'scooter', category: '\u041a\u043e\u043b\u0451\u0441\u0430', title: '\u0417\u0430\u043c\u0435\u043d\u0430 \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0438', price: 2500, time: '40\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: true, desc: '\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0438 \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u043f\u043e\u0441\u0430\u0434\u043a\u0438 \u0438 \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u043a\u0438.' },\n { id: 4, type: 'scooter', category: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430', title: '\u0420\u0435\u043c\u043e\u043d\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430', price: 3500, time: '\u043e\u0442 1 \u0447\u0430\u0441\u0430', guarantee: '60 \u0434\u043d\u0435\u0439', popular: true, desc: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430, \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0437\u0430\u043c\u0435\u043d\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0441 \u0442\u0435\u0441\u0442\u043e\u043c \u043f\u043e\u0434 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.' },\n { id: 5, type: 'scooter', category: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430', title: '\u0420\u0435\u043c\u043e\u043d\u0442 \u0430\u043a\u043a\u0443\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u0430', price: 5500, time: '2\u20134 \u0434\u043d\u044f', guarantee: '90 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 BMS, \u0437\u0430\u043c\u0435\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432 \u0438 \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u043a\u0430.' },\n { id: 6, type: 'scooter', category: '\u0417\u0430\u0449\u0438\u0442\u0430', title: '\u0413\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f IP67', price: 3500, time: '1 \u0434\u0435\u043d\u044c', guarantee: '60 \u0434\u043d\u0435\u0439', popular: true, desc: '\u0417\u0430\u0449\u0438\u0442\u0430 \u043a\u043e\u0440\u043f\u0443\u0441\u0430, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0434\u0438\u0441\u043f\u043b\u0435\u044f \u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438 \u043e\u0442 \u0432\u043b\u0430\u0433\u0438.' },\n { id: 7, type: 'moped', category: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', title: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u0430', price: 2500, time: '30\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0434\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044f, \u0410\u041a\u0411, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432, \u043f\u043e\u0434\u0432\u0435\u0441\u043a\u0438 \u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0438.' },\n { id: 8, type: 'moped', category: '\u0428\u0438\u043d\u043e\u043c\u043e\u043d\u0442\u0430\u0436', title: '\u0428\u0438\u043d\u043e\u043c\u043e\u043d\u0442\u0430\u0436 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u0430', price: 3000, time: '1\u20132 \u0447\u0430\u0441\u0430', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0417\u0430\u043c\u0435\u043d\u0430 \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0438 \u0438\u043b\u0438 \u043a\u0430\u043c\u0435\u0440\u044b \u043d\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u0435.' },\n { id: 9, type: 'moped', category: '\u041f\u043e\u0434\u0432\u0435\u0441\u043a\u0430', title: '\u0420\u0435\u043c\u043e\u043d\u0442 \u043f\u043e\u0434\u0432\u0435\u0441\u043a\u0438', price: 4200, time: '2\u20133 \u0447\u0430\u0441\u0430', guarantee: '60 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u043b\u044e\u0444\u0442\u043e\u0432, \u0437\u0430\u043c\u0435\u043d\u0430 \u043f\u043e\u0434\u0448\u0438\u043f\u043d\u0438\u043a\u043e\u0432, \u0430\u043c\u043e\u0440\u0442\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u0432 \u0438 \u043a\u0440\u0435\u043f\u0435\u0436\u0430.' },\n { id: 10, type: 'bike', category: '\u0422\u041e', title: '\u041f\u043e\u043b\u043d\u043e\u0435 \u0422\u041e \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430', price: 4500, time: '1\u20132 \u0447\u0430\u0441\u0430', guarantee: '30 \u0434\u043d\u0435\u0439', popular: true, desc: '\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0435\u0439, \u0441\u043c\u0430\u0437\u043a\u0430, \u043f\u0440\u043e\u0442\u044f\u0436\u043a\u0430 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0443\u0437\u043b\u043e\u0432.' },\n { id: 11, type: 'bike', category: '\u0422\u043e\u0440\u043c\u043e\u0437\u0430', title: '\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432', price: 1000, time: '20\u201340 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0420\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u043a\u0430 \u043c\u0435\u0445\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043b\u0438 \u0433\u0438\u0434\u0440\u0430\u0432\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432.' },\n { id: 12, type: 'bike', category: '\u0422\u0440\u0430\u043d\u0441\u043c\u0438\u0441\u0441\u0438\u044f', title: '\u0417\u0430\u043c\u0435\u043d\u0430 \u0446\u0435\u043f\u0438 \u0438 \u043a\u0430\u0441\u0441\u0435\u0442\u044b', price: 2200, time: '40\u201380 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u041f\u043e\u0434\u0431\u043e\u0440, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u0440\u0430\u043d\u0441\u043c\u0438\u0441\u0441\u0438\u0438.' },\n { id: 13, type: 'ebike', category: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', title: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430', price: 2000, time: '30\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', popular: false, desc: '\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u0430, \u0410\u041a\u0411, \u0434\u0438\u0441\u043f\u043b\u0435\u044f, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438.' },\n { id: 14, type: 'ebike', category: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430', title: '\u0420\u0435\u043c\u043e\u043d\u0442 \u043c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u0430', price: 4800, time: '1\u20132 \u0434\u043d\u044f', guarantee: '90 \u0434\u043d\u0435\u0439', popular: false, desc: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430, \u0437\u0430\u043c\u0435\u043d\u0430 \u0434\u0430\u0442\u0447\u0438\u043a\u043e\u0432 \u0425\u043e\u043b\u043b\u0430, \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438.' },\n { id: 15, type: 'all', category: '\u0412\u044b\u0435\u0437\u0434', title: '\u042d\u0432\u0430\u043a\u0443\u0430\u0446\u0438\u044f \u0432 \u0441\u0435\u0440\u0432\u0438\u0441', price: 1200, time: '\u043e\u0442 1 \u0447\u0430\u0441\u0430', guarantee: '\u2014', popular: true, desc: '\u0417\u0430\u0431\u0435\u0440\u0451\u043c \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442 \u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0444\u0438\u043b\u0438\u0430\u043b.' }\n ];\n\n const PARTS = [\n { id: 1, category: '\u041f\u043e\u043a\u0440\u044b\u0448\u043a\u0438', type: 'scooter', name: '\u041f\u043e\u043a\u0440\u044b\u0448\u043a\u0430 10x2.5 \u0443\u0441\u0438\u043b\u0435\u043d\u043d\u0430\u044f', desc: '\u0414\u043b\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u043e\u0432 Ninebot, Kugoo, Halten \u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432.', compatible: '10-\u0434\u044e\u0439\u043c\u043e\u0432\u044b\u0435 \u0441\u0430\u043c\u043e\u043a\u0430\u0442\u044b', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 2500, installPrice: 2000, time: '40\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0425\u0438\u0442' },\n { id: 2, category: '\u041a\u0430\u043c\u0435\u0440\u044b', type: 'scooter', name: '\u041a\u0430\u043c\u0435\u0440\u0430 10x2 \/ 10x2.125', desc: '\u0423\u0441\u0438\u043b\u0435\u043d\u043d\u0430\u044f \u043a\u0430\u043c\u0435\u0440\u0430 \u0441 \u0438\u0437\u043e\u0433\u043d\u0443\u0442\u044b\u043c \u043d\u0438\u043f\u043f\u0435\u043b\u0435\u043c.', compatible: 'Ninebot, Kugoo, Xiaomi', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 900, installPrice: 2000, time: '30\u201360 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0421 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439' },\n { id: 3, category: '\u0422\u043e\u0440\u043c\u043e\u0437\u0430', type: 'bike', name: '\u0422\u043e\u0440\u043c\u043e\u0437\u043d\u044b\u0435 \u043a\u043e\u043b\u043e\u0434\u043a\u0438 Shimano compatible', desc: '\u041a\u043e\u043c\u043f\u043b\u0435\u043a\u0442 \u043a\u043e\u043b\u043e\u0434\u043e\u043a \u0434\u043b\u044f \u0434\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432.', compatible: 'MTB, city, e-bike', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 1200, installPrice: 1000, time: '20\u201340 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0422\u041e' },\n { id: 4, category: '\u0410\u043a\u043a\u0443\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u044b', type: 'scooter', name: '\u0410\u041a\u0411 36V 10Ah \u0441 BMS', desc: '\u0421\u0431\u043e\u0440\u043a\u0430 \u0431\u0430\u0442\u0430\u0440\u0435\u0438 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 BMS \u0438 \u0442\u0435\u0441\u0442\u043e\u043c \u043f\u043e\u0434 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.', compatible: '36V \u0441\u0438\u0441\u0442\u0435\u043c\u044b', stock: '\u041f\u043e\u0434 \u0437\u0430\u043a\u0430\u0437 2\u20133 \u0434\u043d\u044f', partPrice: 12500, installPrice: 2500, time: '1\u20132 \u0434\u043d\u044f', guarantee: '90 \u0434\u043d\u0435\u0439', badge: '\u041f\u043e\u0434 \u0437\u0430\u043a\u0430\u0437' },\n { id: 5, category: '\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b', type: 'scooter', name: '\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 36\/48V \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439', desc: '\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0434\u043b\u044f \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u044f\u0433\u0438 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044f.', compatible: '36V \/ 48V', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 3900, installPrice: 3500, time: '1\u20132 \u0447\u0430\u0441\u0430', guarantee: '60 \u0434\u043d\u0435\u0439', badge: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430' },\n { id: 6, category: '\u0414\u0438\u0441\u043f\u043b\u0435\u0438', type: 'scooter', name: '\u0414\u0438\u0441\u043f\u043b\u0435\u0439 \u0441 \u043a\u0443\u0440\u043a\u043e\u043c \u0433\u0430\u0437\u0430', desc: '\u041c\u043e\u0434\u0443\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0438\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438 \u0437\u0430\u0440\u044f\u0434\u0430.', compatible: 'Kugoo, Halten, \u0430\u043d\u0430\u043b\u043e\u0433\u0438', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 2800, installPrice: 1800, time: '40 \u043c\u0438\u043d', guarantee: '60 \u0434\u043d\u0435\u0439', badge: '\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430' },\n { id: 7, category: '\u041c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0451\u0441\u0430', type: 'ebike', name: '\u041c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u043e 350W', desc: '\u041c\u043e\u0442\u043e\u0440-\u043a\u043e\u043b\u0435\u0441\u043e \u0434\u043b\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432 \u0438 \u043b\u0451\u0433\u043a\u0438\u0445 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u043e\u0432.', compatible: '26\u201328 \u0434\u044e\u0439\u043c\u043e\u0432', stock: '\u041f\u043e\u0434 \u0437\u0430\u043a\u0430\u0437', partPrice: 15500, installPrice: 4800, time: '1\u20132 \u0434\u043d\u044f', guarantee: '90 \u0434\u043d\u0435\u0439', badge: '\u0421\u043b\u043e\u0436\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430' },\n { id: 8, category: '\u0426\u0435\u043f\u0438', type: 'bike', name: '\u0426\u0435\u043f\u044c Shimano 8\/9 speed', desc: '\u0426\u0435\u043f\u044c \u0434\u043b\u044f \u0433\u043e\u0440\u043e\u0434\u0441\u043a\u0438\u0445 \u0438 \u0433\u043e\u0440\u043d\u044b\u0445 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432.', compatible: '8\/9 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0435\u0439', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 1600, installPrice: 900, time: '30 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438' },\n { id: 9, category: '\u0424\u0430\u0440\u044b', type: 'all', name: 'LED-\u0444\u0430\u0440\u0430 \u0432\u043b\u0430\u0433\u043e\u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u0430\u044f', desc: '\u042f\u0440\u043a\u0430\u044f \u0444\u0430\u0440\u0430 \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u043a\u0430\u0442\u043e\u0432, \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432 \u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u043e\u0432.', compatible: '12\u201360V', stock: '\u0412 \u043d\u0430\u043b\u0438\u0447\u0438\u0438', partPrice: 2100, installPrice: 1200, time: '30\u201350 \u043c\u0438\u043d', guarantee: '30 \u0434\u043d\u0435\u0439', badge: '\u0421\u0432\u0435\u0442' }\n ];\n\n const SLOTS = [\n { date: '\u0421\u0435\u0433\u043e\u0434\u043d\u044f', iso: '2026-05-05', slots: [\n { time: '10:00', free: false, master: '\u0410\u0440\u0442\u0451\u043c' }, { time: '11:00', free: true, master: '\u0418\u043b\u044c\u044f' },\n { time: '12:30', free: true, master: '\u0414\u0435\u043d\u0438\u0441' }, { time: '14:00', free: false, master: '\u0410\u0440\u0442\u0451\u043c' },\n { time: '16:30', free: true, master: '\u0418\u043b\u044c\u044f' }, { time: '18:00', free: true, master: '\u0414\u0435\u043d\u0438\u0441' }\n ]},\n { date: '\u0417\u0430\u0432\u0442\u0440\u0430', iso: '2026-05-06', slots: [\n { time: '10:30', free: true, master: '\u0410\u0440\u0442\u0451\u043c' }, { time: '12:00', free: true, master: '\u0418\u043b\u044c\u044f' },\n { time: '13:30', free: false, master: '\u0414\u0435\u043d\u0438\u0441' }, { time: '15:00', free: true, master: '\u0410\u0440\u0442\u0451\u043c' },\n { time: '17:30', free: true, master: '\u0418\u043b\u044c\u044f' }, { time: '19:00', free: false, master: '\u0414\u0435\u043d\u0438\u0441' }\n ]},\n { date: '7 \u043c\u0430\u044f', iso: '2026-05-07', slots: [\n { time: '10:00', free: true, master: '\u0414\u0435\u043d\u0438\u0441' }, { time: '11:30', free: true, master: '\u0410\u0440\u0442\u0451\u043c' },\n { time: '13:00', free: true, master: '\u0418\u043b\u044c\u044f' }, { time: '15:30', free: false, master: '\u0414\u0435\u043d\u0438\u0441' },\n { time: '17:00', free: true, master: '\u0410\u0440\u0442\u0451\u043c' }, { time: '20:00', free: true, master: '\u0418\u043b\u044c\u044f' }\n ]}\n ];\n\n const REPAIR_STATUS = {\n current: 2,\n steps: ['\u041f\u0440\u0438\u043d\u044f\u0442', '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', '\u0421\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435', '\u0412 \u0440\u0435\u043c\u043e\u043d\u0442\u0435', '\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435', '\u0413\u043e\u0442\u043e\u0432'],\n masterComment: '\u041d\u0430\u0439\u0434\u0435\u043d \u0441\u0433\u043e\u0440\u0435\u0432\u0448\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e. \u0411\u0435\u0437 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u0440\u0435\u043c\u043e\u043d\u0442 \u043d\u0435 \u043d\u0430\u0447\u0430\u0442.',\n price: 4800,\n warranty: '60 \u0434\u043d\u0435\u0439',\n photos: ['\u0424\u043e\u0442\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430', '\u0424\u043e\u0442\u043e \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438', '\u0424\u043e\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438']\n };\n\n const REVIEWS = [\n { name: '\u0418\u0432\u0430\u043d', text: '\u041f\u043e\u043c\u0435\u043d\u044f\u043b\u0438 \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0443 \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0433\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e \u0437\u0430 \u0434\u0435\u043d\u044c. \u0423\u0434\u043e\u0431\u043d\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0437\u0432\u043e\u043d\u043a\u0430.', rating: 5 },\n { name: '\u041c\u0430\u0440\u0438\u044f', text: '\u041f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438 \u043f\u0440\u0438\u0441\u043b\u0430\u043b\u0438 \u0441\u043c\u0435\u0442\u0443, \u044f \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u043b\u0430 \u043e\u043d\u043b\u0430\u0439\u043d. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u044e\u0440\u043f\u0440\u0438\u0437\u043e\u0432 \u043f\u043e \u0446\u0435\u043d\u0435.', rating: 5 },\n { name: '\u0414\u043e\u0441\u0442\u0430\u0432\u043a\u0430 FastGo', text: '\u041e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u043c \u043f\u0430\u0440\u043a \u043a\u0443\u0440\u044c\u0435\u0440\u0441\u043a\u0438\u0445 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u043e\u0432. \u0421\u043b\u043e\u0442\u044b, \u043e\u0442\u0447\u0451\u0442\u044b \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u043e\u0447\u0435\u043d\u044c \u044d\u043a\u043e\u043d\u043e\u043c\u044f\u0442 \u0432\u0440\u0435\u043c\u044f.', rating: 5 }\n ];\n\n const ADMIN_ROWS = [\n { label: '\u0417\u0430\u044f\u0432\u043a\u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f', value: '18', icon: 'bell', detail: '+24% \u043a \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u043d\u0435\u0434\u0435\u043b\u0435' },\n { label: '\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b', value: '11', icon: 'calendar', detail: '\u043f\u043e 2 \u0444\u0438\u043b\u0438\u0430\u043b\u0430\u043c' },\n { label: '\u041e\u043f\u043b\u0430\u0442\u044b', value: '36 800 \u20bd', icon: 'creditCard', detail: '\u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u044b \u0438 \u0434\u043e\u043f\u043b\u0430\u0442\u044b' },\n { label: '\u041d\u0438\u0437\u043a\u0438\u0439 \u043e\u0441\u0442\u0430\u0442\u043e\u043a', value: '4', icon: 'package', detail: '\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0437\u0430\u043a\u0430\u0437\u0430' }\n ];\n\n function formatMoney(value) {\n return new Intl.NumberFormat('ru-RU').format(value) + ' \u20bd';\n }\n\n function IconWrap({ icon, className = 'bg-green-500\/10 text-green-500' }) {\n return <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${className}`}><Icon name={icon} size={24} \/><\/div>;\n }\n\n function Button({ children, variant = 'green', className = '', ...props }) {\n const base = 'inline-flex items-center justify-center gap-3 rounded-2xl px-6 py-4 text-xs font-black uppercase tracking-[0.14em] active:scale-95';\n const styles = {\n green: 'bg-green-500 text-slate-950 hover:bg-green-400 shadow-lg shadow-green-500\/20',\n white: 'bg-white text-slate-950 hover:bg-slate-200',\n dark: 'bg-slate-800 text-white hover:bg-slate-700 border border-white\/10',\n ghost: 'bg-transparent text-slate-300 hover:text-white hover:bg-white\/5 border border-white\/10',\n blue: 'bg-blue-500 text-white hover:bg-blue-400 shadow-lg shadow-blue-500\/20'\n };\n return <button className={`${base} ${styles[variant]} ${className}`} {...props}>{children}<\/button>;\n }\n\n function SectionTitle({ eyebrow, title, accent, text }) {\n return (\n <div className=\"mb-12\">\n {eyebrow && <div className=\"text-green-500 text-[10px] font-black uppercase tracking-[0.3em] mb-4 italic\">{eyebrow}<\/div>}\n <h2 className=\"text-4xl md:text-6xl font-black italic uppercase tracking-tighter leading-none text-white\">\n {title} {accent && <span className=\"text-green-500\">{accent}<\/span>}\n <\/h2>\n {text && <p className=\"text-slate-400 text-base md:text-lg font-medium leading-relaxed max-w-3xl mt-6\">{text}<\/p>}\n <\/div>\n );\n }\n\n function App() {\n const [activeTab, setActiveTab] = useState('home');\n const [transportFilter, setTransportFilter] = useState('all');\n const [priceSearch, setPriceSearch] = useState('');\n const [partCategory, setPartCategory] = useState('all');\n const [selLoc, setSelLoc] = useState(0);\n const [modal, setModal] = useState(null);\n const [selectedService, setSelectedService] = useState(SERVICES[0]);\n const [selectedPart, setSelectedPart] = useState(null);\n const [selectedDate, setSelectedDate] = useState(SLOTS[0].iso);\n const [selectedSlot, setSelectedSlot] = useState('');\n const [orderId, setOrderId] = useState('');\n const [statusData, setStatusData] = useState(null);\n const [diagnostics, setDiagnostics] = useState({ transport: 'scooter', symptom: 'wheel' });\n const [bookingStep, setBookingStep] = useState(1);\n const [adminMode, setAdminMode] = useState('dashboard');\n const [paymentChoice, setPaymentChoice] = useState('prepay');\n const [theme, setTheme] = useState('dark');\n\n const categories = useMemo(() => ['all', ...Array.from(new Set(PARTS.map((part) => part.category)))], []);\n\n const filteredServices = useMemo(() => {\n const search = priceSearch.trim().toLowerCase();\n return SERVICES.filter((service) => {\n const byTransport = transportFilter === 'all' || service.type === transportFilter || service.type === 'all';\n const bySearch = !search || service.title.toLowerCase().includes(search) || service.category.toLowerCase().includes(search);\n return byTransport && bySearch;\n });\n }, [transportFilter, priceSearch]);\n\n const filteredParts = useMemo(() => {\n return PARTS.filter((part) => {\n const byCategory = partCategory === 'all' || part.category === partCategory;\n const byTransport = transportFilter === 'all' || part.type === transportFilter || part.type === 'all';\n return byCategory && byTransport;\n });\n }, [partCategory, transportFilter]);\n\n const diagnosticEstimate = useMemo(() => {\n const table = {\n scooter: { wheel: [2000, 4500], battery: [5500, 18000], brakes: [1000, 4500], electric: [2500, 12000] },\n moped: { wheel: [3000, 8000], battery: [8000, 28000], brakes: [2500, 7000], electric: [3500, 18000] },\n bike: { wheel: [1000, 3500], battery: [0, 0], brakes: [1000, 4000], electric: [0, 0] },\n ebike: { wheel: [2500, 12000], battery: [7000, 26000], brakes: [1200, 5000], electric: [3000, 16000] }\n };\n const current = table[diagnostics.transport][diagnostics.symptom];\n if (!current || current[1] === 0) return '\u041d\u0443\u0436\u043d\u0430 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430';\n return `\u043e\u0442 ${formatMoney(current[0])} \u0434\u043e ${formatMoney(current[1])}`;\n }, [diagnostics]);\n\n const bookingAmount = paymentChoice === 'full' ? selectedService.price : 1000;\n\n function openBooking(service = selectedService, part = null) {\n setSelectedService(service);\n setSelectedPart(part);\n setBookingStep(1);\n setModal('booking');\n }\n\n function openRoute(coords) {\n window.open(`https:\/\/yandex.ru\/maps\/?rtext=~${encodeURIComponent(coords)}`, '_blank', 'noopener,noreferrer');\n }\n\n function checkStatus() {\n if (orderId.trim() === '123') setStatusData(REPAIR_STATUS);\n else setStatusData({ error: '\u0417\u0430\u043a\u0430\u0437 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0432 \u043a\u0432\u0438\u0442\u0430\u043d\u0446\u0438\u0438.' });\n }\n\n function serviceIcon(type) {\n if (type === 'bike' || type === 'ebike') return 'bike';\n if (type === 'moped') return 'battery';\n if (type === 'truck' || type === 'all') return 'truck';\n return 'zap';\n }\n\n function currentSlots() {\n return SLOTS.find((day) => day.iso === selectedDate) || SLOTS[0];\n }\n\n function navTo(tab) {\n setActiveTab(tab);\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n function LegalNote() {\n return (\n <div className=\"bg-amber-500\/10 border border-amber-500\/20 rounded-3xl p-5 flex gap-4 text-sm text-amber-100 leading-relaxed\">\n <Icon name=\"lock\" className=\"text-amber-400 shrink-0 mt-0.5\" \/>\n <p><b>\u0412\u0430\u0436\u043d\u043e\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435:<\/b> \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0438\u0437 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0434\u0430\u044e\u0442\u0441\u044f. \u041e\u043d\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432 \u043d\u0430\u0448\u0435\u0439 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439.<\/p>\n <\/div>\n );\n }\n\n function Header() {\n const nav = [\n ['home', '\u0413\u043b\u0430\u0432\u043d\u0430\u044f'], ['services', '\u0423\u0441\u043b\u0443\u0433\u0438'], ['prices', '\u041f\u0440\u0430\u0439\u0441'], ['shop', '\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438'],\n ['booking', '\u0417\u0430\u043f\u0438\u0441\u044c'], ['status', '\u0421\u0442\u0430\u0442\u0443\u0441'], ['cabinet', '\u041a\u0430\u0431\u0438\u043d\u0435\u0442'], ['business', 'B2B']\n ];\n return (\n <header className=\"border-b border-white\/5 bg-slate-950\/80 sticky top-0 z-[60] backdrop-blur-xl\">\n <div className=\"max-w-7xl mx-auto px-4 h-20 flex items-center justify-between gap-4\">\n <button className=\"flex items-center gap-2 bg-transparent text-left shrink-0\" onClick={() => navTo('home')}>\n <div className=\"bg-green-500 p-1.5 rounded-lg\"><Icon name=\"zap\" className=\"text-slate-950 w-6 h-6\" fill=\"currentColor\" \/><\/div>\n <span className=\"text-2xl font-black tracking-tighter uppercase italic text-white\">Electro<span className=\"text-green-500\">Fix<\/span><\/span>\n <\/button>\n <nav className=\"hidden lg:flex gap-5 text-[10px] font-black uppercase tracking-[0.18em] overflow-x-auto custom-scroll\" aria-label=\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\">\n {nav.map(([key, label]) => (\n <button key={key} onClick={() => navTo(key)} className={`bg-transparent whitespace-nowrap ${activeTab === key ? 'text-green-500' : 'text-slate-400 hover:text-white'}`}>{label}<\/button>\n ))}\n <\/nav>\n <div className=\"flex items-center gap-3 shrink-0\">\n <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} className=\"hidden sm:flex w-11 h-11 rounded-2xl bg-slate-900 border border-white\/10 items-center justify-center text-slate-400 hover:text-white\" title=\"\u0414\u0435\u043c\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u0442\u0435\u043c\u044b\"><Icon name=\"settings\" size={18} \/><\/button>\n <Button onClick={() => openBooking()} className=\"px-5 py-3\">\u0417\u0430\u043f\u0438\u0441\u044c<\/Button>\n <\/div>\n <\/div>\n <div className=\"lg:hidden px-4 pb-4 overflow-x-auto custom-scroll flex gap-2\">\n {nav.map(([key, label]) => (\n <button key={key} onClick={() => navTo(key)} className={`px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-widest whitespace-nowrap ${activeTab === key ? 'bg-green-500 text-slate-950' : 'bg-slate-900 text-slate-400 border border-white\/10'}`}>{label}<\/button>\n ))}\n <\/div>\n <\/header>\n );\n }\n\n function HomePage() {\n const popular = SERVICES.filter((service) => service.popular).slice(0, 6);\n const steps = [\n { icon: 'search', title: '\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430', text: '\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443, \u044d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0443, \u0410\u041a\u0411, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0438 \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u0434\u0435\u0444\u0435\u043a\u0442\u044b.' },\n { icon: 'message', title: '\u0421\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435', text: '\u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043c\u0435\u0442\u0443. \u0411\u0435\u0437 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u0440\u0435\u043c\u043e\u043d\u0442 \u043d\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c.' },\n { icon: 'wrench', title: '\u0420\u0435\u043c\u043e\u043d\u0442', text: '\u0421\u0442\u0430\u0432\u0438\u043c \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0434 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.' },\n { icon: 'shield', title: '\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f', text: '\u0412\u044b\u0434\u0430\u0451\u043c \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044e \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0435.' }\n ];\n\n return (\n <div className=\"fade-in\">\n <section className=\"max-w-7xl mx-auto px-4 py-16 md:py-28 grid lg:grid-cols-2 gap-16 items-center\">\n <div className=\"space-y-8\">\n <div className=\"inline-flex items-center gap-2 bg-green-500\/10 text-green-400 px-4 py-2 rounded-full text-[10px] font-black uppercase tracking-[0.22em] border border-green-500\/20\">\n <span className=\"w-2 h-2 bg-green-500 rounded-full animate-pulse\"><\/span> \u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c, \u043f\u0440\u0430\u0439\u0441 \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u0440\u0435\u043c\u043e\u043d\u0442\u0430\n <\/div>\n <h1 className=\"text-5xl md:text-8xl font-black italic uppercase leading-[0.86] tracking-tighter text-white\">\n \u0420\u0435\u043c\u043e\u043d\u0442 <br \/>\u044d\u043b\u0435\u043a\u0442\u0440\u043e <br \/><span className=\"text-green-500\">\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430<\/span>\n <\/h1>\n <p className=\"text-slate-400 text-lg md:text-xl max-w-xl font-medium leading-relaxed\">\n \u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u044b, \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043a\u0443\u0442\u0435\u0440\u044b, \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b \u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b. \u0421\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b, \u043e\u043d\u043b\u0430\u0439\u043d-\u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430, \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0430\u044f \u0441\u043c\u0435\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438.\n <\/p>\n <div className=\"flex flex-wrap gap-4\">\n <Button onClick={() => navTo('booking')}>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0435\u043c\u043e\u043d\u0442 <Icon name=\"calendar\" size={18} \/><\/Button>\n <Button variant=\"white\" onClick={() => navTo('prices')}>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0446\u0435\u043d\u044b <Icon name=\"chevronRight\" size={18} \/><\/Button>\n <Button variant=\"ghost\" onClick={() => navTo('locations')}>\u041d\u0430\u0439\u0442\u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0443\u044e <Icon name=\"mapPin\" size={18} \/><\/Button>\n <\/div>\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-3 pt-4\">\n {TRANSPORTS.slice(1).map((item) => (\n <button key={item.id} onClick={() => { setTransportFilter(item.id); navTo('prices'); }} className=\"bg-slate-900\/80 border border-white\/10 p-4 rounded-3xl text-left hover:border-green-500\/40\">\n <Icon name={item.icon} className=\"text-green-500 mb-3\" \/>\n <span className=\"block text-[11px] font-black uppercase tracking-widest text-white leading-snug\">{item.label}<\/span>\n <\/button>\n ))}\n <\/div>\n <\/div>\n\n <div className=\"relative\">\n <div className=\"absolute inset-0 bg-green-500\/10 blur-[120px] rounded-full\"><\/div>\n <div className=\"relative bg-slate-900 border border-white\/10 p-8 md:p-10 rounded-[3rem] shadow-2xl overflow-hidden\">\n <div className=\"absolute inset-0 soft-grid opacity-30\"><\/div>\n <div className=\"relative flex justify-between items-start gap-6 mb-10\">\n <IconWrap icon=\"wrench\" className=\"bg-green-500 text-slate-950\" \/>\n <div className=\"text-right\">\n <p className=\"text-4xl font-black italic tracking-tighter uppercase text-white\">Quick Fix<\/p>\n <p className=\"text-[10px] uppercase font-bold text-slate-500 tracking-widest\">5000+ \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439<\/p>\n <\/div>\n <\/div>\n <div className=\"relative grid grid-cols-2 gap-4 mb-8\">\n {[\n ['\u0421\u0440\u0435\u0434\u043d\u0438\u0439 \u0440\u0435\u043c\u043e\u043d\u0442', '45 \u043c\u0438\u043d'], ['\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f', '\u0434\u043e 90 \u0434\u043d\u0435\u0439'], ['\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0442\u043e\u0432', '11'], ['\u041f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430', '\u043e\u0442 1 000 \u20bd']\n ].map(([label, value]) => (\n <div key={label} className=\"bg-slate-950\/70 p-5 rounded-3xl border border-white\/5\">\n <p className=\"text-[10px] font-black uppercase text-slate-500 mb-2 tracking-widest leading-none\">{label}<\/p>\n <p className=\"text-xl md:text-2xl font-black italic uppercase text-white tracking-tighter\">{value}<\/p>\n <\/div>\n ))}\n <\/div>\n <div className=\"relative bg-green-500\/10 border border-green-500\/20 p-6 rounded-3xl\">\n <div className=\"flex items-center justify-between mb-5\">\n <div>\n <p className=\"text-[10px] text-green-400 uppercase tracking-widest font-black mb-1\">\u0421\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u043a\u0430\u0437\u0430<\/p>\n <p className=\"text-white font-black italic text-2xl tracking-tighter\">\u0422\u0435\u0441\u0442: \u2116123<\/p>\n <\/div>\n <Button onClick={() => { setOrderId('123'); setActiveTab('status'); setTimeout(() => setStatusData(REPAIR_STATUS), 30); }} className=\"py-3 px-4\">\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c<\/Button>\n <\/div>\n <div className=\"h-3 bg-slate-800 rounded-full overflow-hidden\"><div className=\"h-full bg-green-500 w-[48%] rounded-full shadow-[0_0_20px_rgba(34,197,94,.5)]\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <div className=\"marquee-track\">\n <div className=\"marquee-content\">\n {[...''].length === 0 && ['\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u2014 \u043e\u0442 1 500 \u20bd', '\u0417\u0430\u043c\u0435\u043d\u0430 \u043a\u0430\u043c\u0435\u0440\u044b \u2014 \u043e\u0442 2 000 \u20bd', '\u0413\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u2014 \u043e\u0442 3 500 \u20bd', '\u0420\u0435\u043c\u043e\u043d\u0442 \u0410\u041a\u0411 \u2014 \u043e\u0442 5 500 \u20bd', '\u0422\u041e \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430 \u2014 \u043e\u0442 4 500 \u20bd', '\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439', '\u042d\u0432\u0430\u043a\u0443\u0430\u0446\u0438\u044f \u2014 \u043e\u0442 1 200 \u20bd', '\u041e\u043d\u043b\u0430\u0439\u043d-\u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430'].concat(['\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u2014 \u043e\u0442 1 500 \u20bd', '\u0417\u0430\u043c\u0435\u043d\u0430 \u043a\u0430\u043c\u0435\u0440\u044b \u2014 \u043e\u0442 2 000 \u20bd', '\u0413\u0438\u0434\u0440\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044f \u2014 \u043e\u0442 3 500 \u20bd', '\u0420\u0435\u043c\u043e\u043d\u0442 \u0410\u041a\u0411 \u2014 \u043e\u0442 5 500 \u20bd', '\u0422\u041e \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u0430 \u2014 \u043e\u0442 4 500 \u20bd', '\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439', '\u042d\u0432\u0430\u043a\u0443\u0430\u0446\u0438\u044f \u2014 \u043e\u0442 1 200 \u20bd', '\u041e\u043d\u043b\u0430\u0439\u043d-\u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430']).map((text, index) => (\n <span key={index} className=\"mx-10 flex items-center gap-3 text-slate-950 font-black uppercase text-sm tracking-tighter italic whitespace-nowrap\"><Icon name=\"zap\" size={18} fill=\"currentColor\" \/> {text}<\/span>\n ))}\n <\/div>\n <\/div>\n\n <section className=\"max-w-7xl mx-auto px-4 py-20\">\n <SectionTitle eyebrow=\"\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438\" title=\"\u0411\u044b\u0441\u0442\u0440\u044b\u0439\" accent=\"\u0440\u0435\u043c\u043e\u043d\u0442\" text=\"\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0443\u0441\u043b\u0443\u0433 \u0441 \u0446\u0435\u043d\u043e\u0439 \u043e\u0442, \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0435\u0439 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u043a \u0437\u0430\u043f\u0438\u0441\u0438.\" \/>\n <div className=\"grid md:grid-cols-3 gap-6\">\n {popular.map((service) => <ServiceCard key={service.id} service={service} \/>)}\n <\/div>\n <\/section>\n\n <section className=\"max-w-7xl mx-auto px-4 py-20\">\n <SectionTitle eyebrow=\"\u041f\u0440\u043e\u0446\u0435\u0441\u0441\" title=\"\u041a\u0430\u043a \u044d\u0442\u043e\" accent=\"\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\" \/>\n <div className=\"grid md:grid-cols-4 gap-6\">\n {steps.map((step, index) => (\n <div key={step.title} className=\"relative bg-slate-900 border border-white\/10 p-8 rounded-[2.4rem] shadow-xl hover:border-green-500\/40 slide-up\">\n <div className=\"absolute -top-4 -right-4 w-12 h-12 rounded-full bg-slate-800 border border-white\/10 flex items-center justify-center text-slate-500 font-black\">0{index+1}<\/div>\n <IconWrap icon={step.icon} \/>\n <h3 className=\"text-xl font-black uppercase italic tracking-tighter text-white mt-6 mb-3\">{step.title}<\/h3>\n <p className=\"text-slate-400 text-sm leading-relaxed font-medium\">{step.text}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/section>\n\n <TrustAndReviews \/>\n <LocationsPage compact \/>\n <\/div>\n );\n }\n\n function ServiceCard({ service }) {\n return (\n <div className=\"bg-slate-900 border border-white\/10 p-7 rounded-[2.2rem] hover:border-green-500\/40 shadow-xl flex flex-col justify-between gap-8\">\n <div>\n <div className=\"flex items-center justify-between mb-5\">\n <IconWrap icon={serviceIcon(service.type)} \/>\n <span className=\"text-[10px] font-black uppercase tracking-widest text-slate-500\">{service.category}<\/span>\n <\/div>\n <h3 className=\"text-2xl font-black italic uppercase tracking-tighter text-white leading-none mb-4\">{service.title}<\/h3>\n <p className=\"text-slate-400 text-sm leading-relaxed\">{service.desc}<\/p>\n <\/div>\n <div className=\"flex items-end justify-between gap-4 pt-5 border-t border-white\/5\">\n <div>\n <p className=\"text-[10px] font-black uppercase text-slate-500 tracking-widest mb-1\">\u0426\u0435\u043d\u0430 \u043e\u0442<\/p>\n <p className=\"text-3xl font-black italic tracking-tighter text-white\">{formatMoney(service.price)}<\/p>\n <p className=\"text-[10px] font-bold uppercase text-slate-500 mt-2\">{service.time} \u00b7 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f {service.guarantee}<\/p>\n <\/div>\n <Button onClick={() => openBooking(service)} className=\"px-5 py-3\">\u0417\u0430\u043f\u0438\u0441\u044c<\/Button>\n <\/div>\n <\/div>\n );\n }\n\n function ServicesPage() {\n const grouped = TRANSPORTS.slice(1).map((transport) => ({\n ...transport,\n items: SERVICES.filter((service) => service.type === transport.id || (service.type === 'all' && transport.id === 'scooter'))\n }));\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0420\u0430\u0437\u0434\u0435\u043b \u0443\u0441\u043b\u0443\u0433\" title=\"\u0423\u0441\u043b\u0443\u0433\u0438 \u043f\u043e\" accent=\"\u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\" text=\"\u0423\u0441\u043b\u0443\u0433\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u043f\u043e \u0442\u0438\u043f\u0430\u043c \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430. \u0412 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0435\u0441\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0446\u0435\u043d\u0430 \u043e\u0442, \u0441\u0440\u043e\u043a, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u0437\u0430\u043f\u0438\u0441\u0438.\" \/>\n <div className=\"space-y-10\">\n {grouped.map((group) => (\n <div key={group.id} className=\"bg-slate-900\/60 border border-white\/10 rounded-[3rem] p-6 md:p-8\">\n <div className=\"flex items-center gap-4 mb-7\">\n <IconWrap icon={group.icon} \/>\n <h3 className=\"text-3xl font-black italic uppercase tracking-tighter text-white\">{group.label}<\/h3>\n <\/div>\n <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-5\">\n {group.items.map((service) => <ServiceCard key={service.id} service={service} \/>)}\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/section>\n );\n }\n\n function PricesPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u0430\u0439\u0441\" title=\"\u0426\u0435\u043d\u044b \u0432\" accent=\"\u0440\u0443\u0431\u043b\u044f\u0445\" text=\"\u0424\u0438\u043b\u044c\u0442\u0440 \u043f\u043e \u0442\u0438\u043f\u0443 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430, \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u0443\u0441\u043b\u0443\u0433\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438.\" \/>\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8 shadow-2xl\">\n <div className=\"grid lg:grid-cols-[1fr_340px] gap-6 mb-8\">\n <div className=\"flex flex-wrap gap-3\">\n {TRANSPORTS.map((item) => (\n <button key={item.id} onClick={() => setTransportFilter(item.id)} className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2 ${transportFilter === item.id ? 'bg-green-500 text-slate-950' : 'bg-slate-950 text-slate-400 border border-white\/10 hover:text-white'}`}>\n <Icon name={item.icon} size={16} \/> {item.label}\n <\/button>\n ))}\n <\/div>\n <div className=\"relative\">\n <Icon name=\"search\" className=\"absolute left-5 top-1\/2 -translate-y-1\/2 text-slate-500\" size={18} \/>\n <input value={priceSearch} onChange={(event) => setPriceSearch(event.target.value)} placeholder=\"\u041f\u041e\u0418\u0421\u041a \u0423\u0421\u041b\u0423\u0413\u0418\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl pl-12 pr-5 py-4 text-white font-bold placeholder:text-slate-600\" \/>\n <\/div>\n <\/div>\n\n <div className=\"overflow-x-auto custom-scroll\">\n <table className=\"w-full min-w-[860px] border-separate border-spacing-y-3\">\n <thead>\n <tr className=\"text-left text-[10px] font-black uppercase tracking-[0.22em] text-slate-500\">\n <th className=\"px-5 pb-3\">\u0423\u0441\u043b\u0443\u0433\u0430<\/th><th className=\"px-5 pb-3\">\u0422\u0438\u043f<\/th><th className=\"px-5 pb-3\">\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f<\/th><th className=\"px-5 pb-3\">\u0426\u0435\u043d\u0430<\/th><th className=\"px-5 pb-3\">\u0412\u0440\u0435\u043c\u044f<\/th><th className=\"px-5 pb-3\">\u0417\u0430\u043f\u0438\u0441\u044c<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n {filteredServices.map((service) => (\n <tr key={service.id} className=\"bg-slate-950\/70 hover:bg-slate-950\">\n <td className=\"px-5 py-5 rounded-l-2xl\"><div className=\"font-black text-white uppercase italic tracking-tight\">{service.title}<\/div><div className=\"text-xs text-slate-500 mt-1\">{service.desc}<\/div><\/td>\n <td className=\"px-5 py-5 text-slate-300 font-bold\">{TRANSPORTS.find((item) => item.id === service.type)?.label || '\u0412\u0441\u0435'}<\/td>\n <td className=\"px-5 py-5\"><span className=\"px-3 py-1 rounded-full bg-green-500\/10 text-green-400 text-[10px] font-black uppercase tracking-widest\">{service.category}<\/span><\/td>\n <td className=\"px-5 py-5 text-2xl font-black italic text-white\">\u043e\u0442 {formatMoney(service.price)}<\/td>\n <td className=\"px-5 py-5 text-slate-400 font-bold\">{service.time}<\/td>\n <td className=\"px-5 py-5 rounded-r-2xl\"><Button onClick={() => openBooking(service)} className=\"py-3 px-4\">\u0412\u044b\u0431\u0440\u0430\u0442\u044c<\/Button><\/td>\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n <\/div>\n\n <div className=\"mt-8\"><LegalNote \/><\/div>\n <\/div>\n <\/section>\n );\n }\n\n function ShopPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439\" title=\"\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438\" accent=\"\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439\" text=\"\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043c\u0430\u0433\u0430\u0437\u0438\u043d: \u0434\u0435\u0442\u0430\u043b\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0430.\" \/>\n <div className=\"mb-8\"><LegalNote \/><\/div>\n\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8 mb-10\">\n <div className=\"flex flex-col lg:flex-row gap-5 justify-between\">\n <div className=\"flex flex-wrap gap-3\">\n {categories.map((category) => (\n <button key={category} onClick={() => setPartCategory(category)} className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest ${partCategory === category ? 'bg-green-500 text-slate-950' : 'bg-slate-950 text-slate-400 border border-white\/10 hover:text-white'}`}>{category === 'all' ? '\u0412\u0441\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438' : category}<\/button>\n ))}\n <\/div>\n <div className=\"flex flex-wrap gap-3\">\n {TRANSPORTS.map((item) => (\n <button key={item.id} onClick={() => setTransportFilter(item.id)} className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2 ${transportFilter === item.id ? 'bg-blue-500 text-white' : 'bg-slate-950 text-slate-400 border border-white\/10 hover:text-white'}`}><Icon name={item.icon} size={16} \/> {item.label}<\/button>\n ))}\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n {filteredParts.map((part) => <PartCard key={part.id} part={part} \/>)}\n <\/div>\n <\/section>\n );\n }\n\n function PartCard({ part }) {\n const total = part.partPrice + part.installPrice;\n return (\n <div className=\"bg-slate-900 border border-white\/10 rounded-[2.6rem] p-6 shadow-xl hover:border-green-500\/40 flex flex-col gap-6\">\n <div className=\"h-44 rounded-[2rem] bg-slate-950 border border-white\/5 relative overflow-hidden soft-grid flex items-center justify-center\">\n <Icon name=\"package\" size={74} className=\"text-green-500\/50\" \/>\n <span className=\"absolute top-4 left-4 bg-green-500 text-slate-950 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest\">{part.badge}<\/span>\n <span className=\"absolute bottom-4 right-4 bg-slate-900\/90 border border-white\/10 text-slate-300 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest\">{part.stock}<\/span>\n <\/div>\n <div>\n <div className=\"text-[10px] font-black uppercase tracking-[0.24em] text-green-500 mb-3\">{part.category}<\/div>\n <h3 className=\"text-2xl font-black italic uppercase tracking-tighter text-white leading-none mb-4\">{part.name}<\/h3>\n <p className=\"text-slate-400 text-sm leading-relaxed mb-4\">{part.desc}<\/p>\n <div className=\"text-xs text-slate-500 font-bold uppercase tracking-widest\">\u0421\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c: <span className=\"text-slate-300\">{part.compatible}<\/span><\/div>\n <\/div>\n <div className=\"bg-slate-950\/70 border border-white\/5 rounded-3xl p-5 space-y-3\">\n <div className=\"flex justify-between text-sm\"><span className=\"text-slate-500 font-bold\">\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u044c<\/span><span className=\"text-white font-black\">{formatMoney(part.partPrice)}<\/span><\/div>\n <div className=\"flex justify-between text-sm\"><span className=\"text-slate-500 font-bold\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/span><span className=\"text-white font-black\">\u043e\u0442 {formatMoney(part.installPrice)}<\/span><\/div>\n <div className=\"pt-3 border-t border-white\/5 flex justify-between items-end\"><span className=\"text-green-400 text-[10px] font-black uppercase tracking-widest\">\u0418\u0442\u043e\u0433\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439<\/span><span className=\"text-3xl text-white font-black italic tracking-tighter\">\u043e\u0442 {formatMoney(total)}<\/span><\/div>\n <\/div>\n <div className=\"grid grid-cols-2 gap-3 text-[10px] font-black uppercase tracking-widest text-slate-500\">\n <div className=\"bg-slate-950\/40 border border-white\/5 p-3 rounded-2xl\"><Icon name=\"clock\" size={15} className=\"mb-2 text-green-500\" \/>{part.time}<\/div>\n <div className=\"bg-slate-950\/40 border border-white\/5 p-3 rounded-2xl\"><Icon name=\"shield\" size={15} className=\"mb-2 text-green-500\" \/>{part.guarantee}<\/div>\n <\/div>\n <Button onClick={() => openBooking(SERVICES.find((service) => service.category === '\u041a\u043e\u043b\u0451\u0441\u0430') || SERVICES[0], part)} className=\"w-full\">\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443<\/Button>\n <p className=\"text-[10px] text-amber-300 font-bold leading-relaxed\">\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0430 \u043d\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f. \u0417\u0430\u043f\u0447\u0430\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c\u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439.<\/p>\n <\/div>\n );\n }\n\n function BookingPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c\" title=\"\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0438\" accent=\"\u0437\u0430\u043d\u044f\u0442\u044b\u0435 \u0441\u043b\u043e\u0442\u044b\" text=\"\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0442\u0438\u043f \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430, \u0443\u0441\u043b\u0443\u0433\u0443, \u043b\u043e\u043a\u0430\u0446\u0438\u044e, \u0434\u0430\u0442\u0443, \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0432\u0432\u043e\u0434\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u043f\u043b\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0443 \u0438\u043b\u0438 \u0443\u0441\u043b\u0443\u0433\u0443 \u043e\u043d\u043b\u0430\u0439\u043d.\" \/>\n <div className=\"grid lg:grid-cols-[1fr_420px] gap-8\">\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8\">\n <div className=\"grid md:grid-cols-3 gap-4 mb-8\">\n {SLOTS.map((day) => (\n <button key={day.iso} onClick={() => { setSelectedDate(day.iso); setSelectedSlot(''); }} className={`p-5 rounded-3xl text-left border ${selectedDate === day.iso ? 'bg-green-500 border-green-500 text-slate-950' : 'bg-slate-950 border-white\/10 text-white hover:border-green-500\/40'}`}>\n <div className=\"text-xl font-black italic uppercase tracking-tighter\">{day.date}<\/div>\n <div className={`text-[10px] font-black uppercase tracking-widest mt-2 ${selectedDate === day.iso ? 'text-slate-950\/70' : 'text-slate-500'}`}>{day.slots.filter((slot) => slot.free).length} \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u0441\u043b\u043e\u0442\u043e\u0432<\/div>\n <\/button>\n ))}\n <\/div>\n\n <div className=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n {currentSlots().slots.map((slot) => (\n <button key={slot.time} disabled={!slot.free} onClick={() => setSelectedSlot(slot.time)} className={`p-5 rounded-3xl border text-left ${!slot.free ? 'bg-red-500\/5 border-red-500\/20 text-red-300 opacity-60 cursor-not-allowed' : selectedSlot === slot.time ? 'bg-green-500 border-green-500 text-slate-950' : 'bg-slate-950 border-white\/10 text-white hover:border-green-500\/40'}`}>\n <div className=\"flex items-center justify-between mb-3\"><span className=\"text-3xl font-black italic tracking-tighter\">{slot.time}<\/span><Icon name={slot.free ? 'checkCircle' : 'lock'} size={20} \/><\/div>\n <div className=\"text-[10px] font-black uppercase tracking-widest opacity-75\">{slot.free ? `\u0421\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u00b7 ${slot.master}` : '\u0417\u0430\u043d\u044f\u0442\u043e'}<\/div>\n <\/button>\n ))}\n <\/div>\n <\/div>\n\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8 h-fit sticky top-28\">\n <h3 className=\"text-3xl font-black italic uppercase tracking-tighter text-white mb-6\">\u041e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c<\/h3>\n <div className=\"space-y-4 mb-6\">\n <select value={selectedService.id} onChange={(event) => setSelectedService(SERVICES.find((service) => service.id === Number(event.target.value)))} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">\n {SERVICES.map((service) => <option key={service.id} value={service.id}>{service.title}<\/option>)}\n <\/select>\n <select value={selLoc} onChange={(event) => setSelLoc(Number(event.target.value))} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">\n {LOCATIONS.map((loc, index) => <option key={loc.id} value={index}>{loc.name}<\/option>)}\n <\/select>\n <input placeholder=\"\u0418\u043c\u044f\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\" \/>\n <input placeholder=\"\u0422\u0435\u043b\u0435\u0444\u043e\u043d\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\" \/>\n <textarea placeholder=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043c\u043e\u0434\u0435\u043b\u044c, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold h-28 resize-none\"><\/textarea>\n <\/div>\n <div className=\"bg-slate-950\/70 border border-white\/5 rounded-3xl p-5 mb-6\">\n <div className=\"flex justify-between text-sm mb-2\"><span className=\"text-slate-500\">\u0423\u0441\u043b\u0443\u0433\u0430<\/span><span className=\"text-white font-black\">\u043e\u0442 {formatMoney(selectedService.price)}<\/span><\/div>\n <div className=\"flex justify-between text-sm mb-2\"><span className=\"text-slate-500\">\u0414\u0430\u0442\u0430<\/span><span className=\"text-white font-black\">{currentSlots().date}<\/span><\/div>\n <div className=\"flex justify-between text-sm\"><span className=\"text-slate-500\">\u0412\u0440\u0435\u043c\u044f<\/span><span className=\"text-white font-black\">{selectedSlot || '\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0441\u043b\u043e\u0442'}<\/span><\/div>\n <\/div>\n <Button disabled={!selectedSlot} onClick={() => setModal('booking')} className={`w-full ${!selectedSlot ? 'opacity-50 cursor-not-allowed' : ''}`}>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u043a \u043e\u043f\u043b\u0430\u0442\u0435<\/Button>\n <p className=\"text-[10px] text-slate-500 mt-4 leading-relaxed\">\u0417\u0430\u043d\u044f\u0442\u044b\u0435 \u0441\u043b\u043e\u0442\u044b \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u043b\u0438 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0411\u0443\u0444\u0435\u0440 \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0438\u0441\u044f\u043c\u0438 10\u201315 \u043c\u0438\u043d\u0443\u0442 \u0437\u0430\u043b\u043e\u0436\u0435\u043d \u0432 \u0440\u0430\u0441\u043f\u0438\u0441\u0430\u043d\u0438\u0435.<\/p>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n function StatusPage() {\n return (\n <section className=\"max-w-4xl mx-auto px-4 py-20 zoom-in\">\n <SectionTitle eyebrow=\"\u041b\u0438\u0447\u043d\u044b\u0439 \u0442\u0440\u0435\u043a\u0438\u043d\u0433\" title=\"\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430\" accent=\"\u0441\u0442\u0430\u0442\u0443\u0441\u0430\" text=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430. \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 123.\" \/>\n <div className=\"flex gap-2 p-3 bg-slate-900 border border-white\/10 rounded-[2.5rem] mb-10 shadow-2xl ring-8 ring-green-500\/5\">\n <input value={orderId} onChange={(event) => setOrderId(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') checkStatus(); }} placeholder=\"\u041d\u041e\u041c\u0415\u0420 \u0417\u0410\u041a\u0410\u0417\u0410: 123\" className=\"bg-transparent border-none px-6 flex-grow text-xl font-black text-white placeholder:text-slate-700 uppercase min-w-0\" \/>\n <Button onClick={checkStatus} className=\"p-5\"><Icon name=\"search\" \/><\/Button>\n <\/div>\n {statusData && <StatusCard data={statusData} \/>}\n <\/section>\n );\n }\n\n function StatusCard({ data }) {\n if (data.error) {\n return <div className=\"bg-red-500\/10 border border-red-500\/20 p-10 rounded-[3rem] text-center text-red-300\"><Icon name=\"alert\" size={56} className=\"mx-auto mb-5\" \/><p className=\"font-black uppercase tracking-tight text-xl\">{data.error}<\/p><\/div>;\n }\n return (\n <div className=\"bg-slate-900 border border-white\/10 p-6 md:p-10 rounded-[3.5rem] shadow-2xl slide-up\">\n <div className=\"relative flex justify-between mb-16\">\n <div className=\"absolute top-5 left-0 w-full h-1.5 bg-slate-800 rounded-full\"><\/div>\n <div className=\"absolute top-5 left-0 h-1.5 bg-green-500 rounded-full z-10 shadow-[0_0_20px_#22c55e]\" style={{ width: `${(data.current \/ (data.steps.length - 1)) * 100}%` }}><\/div>\n {data.steps.map((step, index) => (\n <div key={step} className=\"relative z-20 flex flex-col items-center gap-5\">\n <div className={`w-12 h-12 rounded-full flex items-center justify-center border-4 ${index <= data.current ? 'bg-green-500 border-slate-950 text-slate-950 scale-110' : 'bg-slate-800 border-slate-900 text-slate-600'}`}>{index < data.current ? <Icon name=\"checkCircle\" \/> : <span className=\"font-black\">{index+1}<\/span>}<\/div>\n <span className={`text-[9px] font-black uppercase tracking-widest text-center max-w-[82px] ${index <= data.current ? 'text-white' : 'text-slate-600'}`}>{step}<\/span>\n <\/div>\n ))}\n <\/div>\n <div className=\"grid md:grid-cols-2 gap-6\">\n <div className=\"bg-slate-950\/60 border border-white\/5 p-7 rounded-3xl relative\">\n <IconWrap icon=\"smartphone\" className=\"bg-green-500 text-slate-950 mb-5\" \/>\n <p className=\"text-[10px] font-black uppercase text-slate-500 tracking-widest mb-3\">\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043c\u0430\u0441\u0442\u0435\u0440\u0430<\/p>\n <p className=\"text-slate-200 leading-relaxed italic\">\u201c{data.masterComment}\u201d<\/p>\n <\/div>\n <div className=\"bg-green-500\/10 border border-green-500\/20 p-7 rounded-3xl flex flex-col justify-between gap-6\">\n <div>\n <p className=\"text-[10px] text-green-400 font-black uppercase tracking-widest mb-2\">\u0421\u043c\u0435\u0442\u0430 \u043a \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044e<\/p>\n <p className=\"text-5xl font-black italic tracking-tighter text-white\">{formatMoney(data.price)}<\/p>\n <p className=\"text-slate-400 text-sm mt-3\">\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f: {data.warranty}<\/p>\n <\/div>\n <div className=\"grid grid-cols-2 gap-3\">\n <Button onClick={() => setModal('payment')}>\u0421\u043e\u0433\u043b\u0430\u0441\u0435\u043d<\/Button>\n <Button variant=\"ghost\">\u0417\u0430\u0434\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441<\/Button>\n <\/div>\n <\/div>\n <\/div>\n <div className=\"mt-6 grid sm:grid-cols-3 gap-4\">\n {data.photos.map((photo) => <div key={photo} className=\"bg-slate-950 border border-white\/5 h-28 rounded-3xl flex flex-col items-center justify-center text-slate-500 text-[10px] font-black uppercase tracking-widest\"><Icon name=\"image\" className=\"mb-2 text-green-500\" \/>{photo}<\/div>)}\n <\/div>\n <\/div>\n );\n }\n\n function CabinetPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f\" title=\"\u041b\u0438\u0447\u043d\u044b\u0439\" accent=\"\u043a\u0430\u0431\u0438\u043d\u0435\u0442\" text=\"\u0412 \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0435 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432\u0438\u0434\u0438\u0442 \u0437\u0430\u043f\u0438\u0441\u0438, \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0440\u0435\u043c\u043e\u043d\u0442\u043e\u0432, \u0441\u0442\u0430\u0442\u0443\u0441, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044e, \u0447\u0435\u043a\u0438, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0430 \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f.\" \/>\n <div className=\"grid lg:grid-cols-[360px_1fr] gap-8\">\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-8 h-fit\">\n <div className=\"flex items-center gap-4 mb-8\">\n <div className=\"w-16 h-16 rounded-3xl bg-green-500 text-slate-950 flex items-center justify-center\"><Icon name=\"user\" size={30} \/><\/div>\n <div><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter\">\u041a\u043b\u0438\u0435\u043d\u0442<\/h3><p className=\"text-slate-500 text-sm\">+7 (999) 000-00-00<\/p><\/div>\n <\/div>\n <div className=\"space-y-3 text-sm font-bold\">\n {['\u041c\u043e\u0438 \u0437\u0430\u043f\u0438\u0441\u0438', '\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u0440\u0435\u043c\u043e\u043d\u0442\u043e\u0432', '\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0438', '\u0427\u0435\u043a\u0438 \u0438 \u043e\u043f\u043b\u0430\u0442\u044b', '\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c'].map((item, index) => <button key={item} className={`w-full text-left p-4 rounded-2xl ${index === 0 ? 'bg-green-500 text-slate-950' : 'bg-slate-950 text-slate-400 border border-white\/5'}`}>{item}<\/button>)}\n <\/div>\n <\/div>\n <div className=\"space-y-6\">\n {[{ title: '\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442 Ninebot G30', status: '\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435', price: 4800, date: '\u0421\u0435\u0433\u043e\u0434\u043d\u044f, 18:30' }, { title: '\u0412\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434 Trek', status: '\u0413\u043e\u0442\u043e\u0432\u043e \u043a \u0432\u044b\u0434\u0430\u0447\u0435', price: 4500, date: '\u0412\u0447\u0435\u0440\u0430' }].map((item) => (\n <div key={item.title} className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-8 flex flex-col md:flex-row justify-between gap-6\">\n <div>\n <span className=\"bg-amber-500\/10 text-amber-300 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest\">{item.status}<\/span>\n <h3 className=\"text-3xl font-black italic uppercase text-white tracking-tighter mt-5 mb-3\">{item.title}<\/h3>\n <p className=\"text-slate-400\">\u0414\u0430\u0442\u0430: {item.date} \u00b7 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0439\u043d\u044b\u0439 \u0441\u0440\u043e\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0437\u0430\u043a\u0430\u0437\u0430.<\/p>\n <\/div>\n <div className=\"md:text-right\"><p className=\"text-4xl font-black italic text-white tracking-tighter mb-4\">{formatMoney(item.price)}<\/p><Button onClick={() => setActiveTab('status')} className=\"py-3 px-4\">\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0437\u0430\u043a\u0430\u0437<\/Button><\/div>\n <\/div>\n ))}\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-8\">\n <h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter mb-6\">QR-\u043a\u043e\u0434 \u0437\u0430\u043a\u0430\u0437\u0430<\/h3>\n <div className=\"flex flex-col md:flex-row gap-6 items-center\"><div className=\"w-40 h-40 bg-white rounded-3xl text-slate-950 flex items-center justify-center\"><Icon name=\"qr\" size={96} \/><\/div><p className=\"text-slate-400 leading-relaxed\">\u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u0451\u043c\u0430 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 QR-\u043a\u043e\u0434. \u041f\u043e \u043d\u0435\u043c\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0443\u0441 \u0440\u0435\u043c\u043e\u043d\u0442\u0430, \u0441\u043c\u0435\u0442\u0430, \u0444\u043e\u0442\u043e\u043e\u0442\u0447\u0451\u0442, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0438 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u043f\u043b\u0430\u0442\u0443.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n function DiagnosticPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041e\u043d\u043b\u0430\u0439\u043d-\u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430\" title=\"\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\" accent=\"\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438\" text=\"\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u0446\u0435\u043d\u043a\u0430 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043e \u0432\u0438\u0437\u0438\u0442\u0430. \u0422\u043e\u0447\u043d\u0430\u044f \u0446\u0435\u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438.\" \/>\n <div className=\"grid lg:grid-cols-2 gap-8\">\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-8 space-y-5\">\n <select value={diagnostics.transport} onChange={(event) => setDiagnostics({ ...diagnostics, transport: event.target.value })} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">\n {TRANSPORTS.slice(1).map((item) => <option key={item.id} value={item.id}>{item.label}<\/option>)}\n <\/select>\n <select value={diagnostics.symptom} onChange={(event) => setDiagnostics({ ...diagnostics, symptom: event.target.value })} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">\n <option value=\"wheel\">\u041a\u043e\u043b\u0435\u0441\u043e \/ \u043f\u043e\u043a\u0440\u044b\u0448\u043a\u0430 \/ \u043a\u0430\u043c\u0435\u0440\u0430<\/option>\n <option value=\"battery\">\u0410\u043a\u043a\u0443\u043c\u0443\u043b\u044f\u0442\u043e\u0440 \/ \u0437\u0430\u0440\u044f\u0434<\/option>\n <option value=\"brakes\">\u0422\u043e\u0440\u043c\u043e\u0437\u0430<\/option>\n <option value=\"electric\">\u042d\u043b\u0435\u043a\u0442\u0440\u0438\u043a\u0430 \/ \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \/ \u0434\u0438\u0441\u043f\u043b\u0435\u0439<\/option>\n <\/select>\n <input placeholder=\"\u0411\u0440\u0435\u043d\u0434 \u0438 \u043c\u043e\u0434\u0435\u043b\u044c\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\" \/>\n <textarea placeholder=\"\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430? \u0411\u044b\u043b \u043b\u0438 \u0440\u0435\u043c\u043e\u043d\u0442 \u0440\u0430\u043d\u0435\u0435?\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold h-32 resize-none\"><\/textarea>\n <div className=\"grid grid-cols-2 gap-4\"><button className=\"bg-slate-950 border border-dashed border-white\/20 p-6 rounded-3xl text-slate-500 font-black uppercase tracking-widest text-[10px]\"><Icon name=\"image\" className=\"mx-auto mb-2\" \/>\u0424\u043e\u0442\u043e<\/button><button className=\"bg-slate-950 border border-dashed border-white\/20 p-6 rounded-3xl text-slate-500 font-black uppercase tracking-widest text-[10px]\"><Icon name=\"file\" className=\"mx-auto mb-2\" \/>\u0412\u0438\u0434\u0435\u043e<\/button><\/div>\n <\/div>\n <div className=\"bg-green-500 text-slate-950 rounded-[3rem] p-8 md:p-10 flex flex-col justify-between gap-10\">\n <div><p className=\"text-[10px] font-black uppercase tracking-[0.3em] opacity-70 mb-4\">\u041e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u043e\u0447\u043d\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/p><h3 className=\"text-5xl md:text-7xl font-black italic uppercase tracking-tighter leading-none\">{diagnosticEstimate}<\/h3><p className=\"mt-8 font-bold leading-relaxed opacity-80\">\u0422\u043e\u0447\u043d\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438. \u041f\u0435\u0440\u0435\u0434 \u0440\u0435\u043c\u043e\u043d\u0442\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043c\u0435\u0442\u0443 \u0438 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442 \u0435\u0451 \u043e\u043d\u043b\u0430\u0439\u043d.<\/p><\/div>\n <Button variant=\"dark\" onClick={() => openBooking(SERVICES[0])}>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0443<\/Button>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n function LocationsPage({ compact = false }) {\n return (\n <section id=\"locations\" className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041b\u043e\u043a\u0430\u0446\u0438\u0438\" title=\"\u041d\u0430\u0448\u0438\" accent=\"\u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0438\u0435\" text=\"\u0410\u0434\u0440\u0435\u0441, \u0447\u0430\u0441\u044b \u0440\u0430\u0431\u043e\u0442\u044b, \u043a\u0430\u0440\u0442\u0430, \u043a\u0430\u043a \u0434\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u0430\u0440\u043a\u043e\u0432\u043a\u0430, \u0443\u0441\u043b\u0443\u0433\u0438 \u0444\u0438\u043b\u0438\u0430\u043b\u0430 \u0438 \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0443\u044e.\" \/>\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] overflow-hidden flex flex-col lg:flex-row shadow-2xl\">\n <div className=\"lg:w-1\/2 p-8 md:p-10\">\n <div className=\"space-y-4 mb-8\">\n {LOCATIONS.map((loc, index) => (\n <button key={loc.id} onClick={() => setSelLoc(index)} className={`w-full text-left p-6 rounded-3xl border flex items-center justify-between gap-4 ${selLoc === index ? 'bg-green-500 border-green-500 text-slate-950' : 'bg-slate-950 border-white\/10 text-white hover:border-white\/20'}`}>\n <div className=\"flex gap-4 items-center\"><Icon name=\"mapPin\" className={selLoc === index ? 'text-slate-950' : 'text-green-500'} \/><div><p className=\"font-black uppercase tracking-tighter text-lg leading-tight\">{loc.name}<\/p><p className={`text-[10px] font-bold uppercase tracking-widest ${selLoc === index ? 'text-slate-950\/60' : 'text-slate-500'}`}>{loc.address}<\/p><\/div><\/div>\n {selLoc === index && <Icon name=\"checkCircle\" \/>}\n <\/button>\n ))}\n <\/div>\n <div className=\"bg-slate-950\/60 p-7 rounded-[2rem] border border-white\/5 space-y-5\">\n <p className=\"text-slate-300 font-medium leading-relaxed italic\">{LOCATIONS[selLoc].desc}<\/p>\n <div className=\"grid sm:grid-cols-2 gap-4 text-sm\"><InfoLine icon=\"clock\" label=\"\u0427\u0430\u0441\u044b\" value={LOCATIONS[selLoc].hours} \/><InfoLine icon=\"navigation\" label=\"\u041c\u0435\u0442\u0440\u043e\" value={LOCATIONS[selLoc].metro} \/><InfoLine icon=\"phone\" label=\"\u0422\u0435\u043b\u0435\u0444\u043e\u043d\" value={LOCATIONS[selLoc].phone} \/><InfoLine icon=\"truck\" label=\"\u041f\u0430\u0440\u043a\u043e\u0432\u043a\u0430\" value={LOCATIONS[selLoc].parking} \/><\/div>\n <div className=\"flex flex-wrap gap-2\">{LOCATIONS[selLoc].services.map((item) => <span key={item} className=\"bg-green-500\/10 text-green-400 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest\">{item}<\/span>)}<\/div>\n <div className=\"grid sm:grid-cols-2 gap-3\"><Button variant=\"white\" onClick={() => openRoute(LOCATIONS[selLoc].coords)}>\u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442<\/Button><Button onClick={() => openBooking()}>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0441\u044e\u0434\u0430<\/Button><\/div>\n <\/div>\n <\/div>\n <div className=\"lg:w-1\/2 min-h-[520px] bg-slate-800 relative overflow-hidden\">\n <div className=\"absolute inset-0 soft-grid opacity-30\"><\/div>\n <div className=\"absolute inset-0 flex items-center justify-center p-12\"><div className=\"w-full h-full relative border-2 border-white\/5 rounded-full flex items-center justify-center\"><div className=\"w-3\/4 h-3\/4 border border-white\/5 rounded-full flex items-center justify-center\"><div className=\"w-1\/2 h-1\/2 border border-white\/5 rounded-full\"><\/div><\/div>{LOCATIONS.map((loc, index) => <button key={loc.id} onClick={() => setSelLoc(index)} className={`absolute bg-transparent ${selLoc === index ? 'scale-125 z-20' : 'scale-100 opacity-50 z-10'}`} style={{ left: loc.pos.x, top: loc.pos.y }}><span className=\"relative flex items-center justify-center\">{selLoc === index && <span className=\"map-dot-pulse\"><\/span>}<span className={`p-4 rounded-full border-2 shadow-2xl ${selLoc === index ? 'bg-green-500 border-white text-slate-950' : 'bg-slate-900 border-slate-700 text-green-500'}`}><Icon name=\"mapPin\" fill=\"currentColor\" \/><\/span><\/span><\/button>)}<\/div><\/div>\n <div className=\"absolute bottom-8 left-8 right-8 p-6 bg-slate-900\/90 backdrop-blur-xl border border-white\/10 rounded-3xl\"><div className=\"text-[10px] text-green-500 font-black uppercase tracking-widest mb-2\">\u0424\u043e\u0442\u043e \u0432\u0445\u043e\u0434\u0430 \/ \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440<\/div><p className=\"text-white font-bold leading-relaxed\">\u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f \u0444\u0430\u0441\u0430\u0434\u0430, \u0432\u0445\u043e\u0434\u0430 \u0438 \u043a\u0440\u0430\u0442\u043a\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u201c\u043a\u0430\u043a \u043d\u0430\u0439\u0442\u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0443\u044e\u201d.<\/p><\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n }\n\n function InfoLine({ icon, label, value }) {\n return <div className=\"flex gap-3\"><Icon name={icon} className=\"text-green-500 shrink-0\" size={18} \/><div><p className=\"text-[9px] font-black uppercase tracking-widest text-slate-500\">{label}<\/p><p className=\"text-slate-200 font-bold leading-snug\">{value}<\/p><\/div><\/div>;\n }\n\n function TrustAndReviews() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0414\u043e\u0432\u0435\u0440\u0438\u0435\" title=\"\u041e\u0442\u0437\u044b\u0432\u044b,\" accent=\"\u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0438 \u043a\u0435\u0439\u0441\u044b\" \/>\n <div className=\"grid lg:grid-cols-3 gap-6 mb-10\">\n {REVIEWS.map((review) => <div key={review.name} className=\"bg-slate-900 border border-white\/10 rounded-[2.4rem] p-7\"><div className=\"flex gap-1 text-yellow-500 mb-5\">{[0,1,2,3,4].map((i) => <Icon key={i} name=\"star\" size={16} fill=\"currentColor\" \/>)}<\/div><p className=\"text-slate-300 leading-relaxed italic mb-6\">\u201c{review.text}\u201d<\/p><p className=\"text-white font-black uppercase tracking-widest text-xs\">{review.name}<\/p><\/div>)}\n <\/div>\n <div className=\"grid lg:grid-cols-3 gap-6\">\n <div className=\"lg:col-span-2 bg-slate-900 border border-white\/10 rounded-[2.4rem] p-8\"><div className=\"flex items-center gap-4 mb-6\"><IconWrap icon=\"wrench\" \/><h3 className=\"text-3xl font-black italic uppercase tracking-tighter text-white\">\u041a\u0435\u0439\u0441 \u0440\u0435\u043c\u043e\u043d\u0442\u0430<\/h3><\/div><div className=\"grid md:grid-cols-2 gap-5 text-sm\"><InfoLine icon=\"alert\" label=\"\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\" value=\"\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u043b\u0441\u044f\" \/><InfoLine icon=\"search\" label=\"\u041f\u0440\u0438\u0447\u0438\u043d\u0430\" value=\"\u041d\u0435\u0438\u0441\u043f\u0440\u0430\u0432\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\" \/><InfoLine icon=\"checkCircle\" label=\"\u0420\u0435\u0448\u0435\u043d\u0438\u0435\" value=\"\u0417\u0430\u043c\u0435\u043d\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u0440\u043e\u0432\u043e\u0434\u043a\u0438\" \/><InfoLine icon=\"shield\" label=\"\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f\" value=\"30 \u0434\u043d\u0435\u0439 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u044b\" \/><\/div><\/div>\n <div className=\"bg-green-500 text-slate-950 rounded-[2.4rem] p-8\"><Icon name=\"shield\" size={44} className=\"mb-6\" \/><h3 className=\"text-3xl font-black italic uppercase tracking-tighter leading-none mb-4\">\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f<\/h3><p className=\"font-bold leading-relaxed opacity-80\">\u041d\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438. \u0423\u0441\u043b\u043e\u0432\u0438\u044f \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0438, \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439.<\/p><\/div>\n <\/div>\n <\/section>\n );\n }\n\n function BusinessPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u041a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c\" title=\"B2B \u0438\" accent=\"\u043f\u0430\u0440\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430\" text=\"\u0420\u0430\u0437\u0434\u0435\u043b \u0434\u043b\u044f \u0441\u043b\u0443\u0436\u0431 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438, \u043f\u0440\u043e\u043a\u0430\u0442\u043e\u0432, \u043a\u0443\u0440\u044c\u0435\u0440\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u043a\u043e\u043c \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430.\" \/>\n <div className=\"grid lg:grid-cols-3 gap-6\">\n {[['\u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0422\u041e','\u041f\u043b\u0430\u043d\u043e\u0432\u043e\u0435 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u0440\u043a\u0430 \u043f\u043e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0443.','calendar'],['\u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c','\u0412\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b \u0434\u043b\u044f \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432.','clock'],['\u041e\u0442\u0447\u0451\u0442\u044b \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b','\u0410\u043a\u0442\u044b, \u0447\u0435\u043a\u0438, \u0441\u0442\u0430\u0442\u0443\u0441\u044b, \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0440\u0435\u043c\u043e\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438.','file'],['\u0421\u0440\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u043c\u043e\u043d\u0442','\u0412\u043d\u0435\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0430\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0438 \u0440\u0435\u043c\u043e\u043d\u0442 \u0441 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c.','zap'],['\u0421\u043a\u043b\u0430\u0434 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439','\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 \u043f\u043e\u0434 \u043f\u0430\u0440\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0430.','package'],['CRM-\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f','\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0437\u0430\u044f\u0432\u043e\u043a, \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 \u0438 \u043e\u043f\u043b\u0430\u0442 \u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.','settings']].map(([title,text,icon]) => <div key={title} className=\"bg-slate-900 border border-white\/10 rounded-[2.4rem] p-8\"><IconWrap icon={icon} \/><h3 className=\"text-2xl font-black italic uppercase tracking-tighter text-white my-5\">{title}<\/h3><p className=\"text-slate-400 leading-relaxed\">{text}<\/p><\/div>)}\n <\/div>\n <div className=\"mt-8 bg-slate-900 border border-white\/10 rounded-[3rem] p-8 md:p-10 flex flex-col md:flex-row items-center justify-between gap-8\"><div><h3 className=\"text-4xl font-black italic uppercase tracking-tighter text-white mb-3\">\u0417\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0434\u043e\u0433\u043e\u0432\u043e\u0440<\/h3><p className=\"text-slate-400\">\u041e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0437\u0430\u044f\u0432\u043a\u0443 \u2014 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u043a\u0430.<\/p><\/div><Button onClick={() => setModal('business')}>\u041e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u044f\u0432\u043a\u0443<\/Button><\/div>\n <\/section>\n );\n }\n\n function AdminPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0414\u0435\u043c\u043e \u0430\u0434\u043c\u0438\u043d-\u043f\u0430\u043d\u0435\u043b\u0438\" title=\"\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\" accent=\"\u0441\u0430\u0439\u0442\u043e\u043c\" text=\"\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438\u0437 \u0430\u0434\u043c\u0438\u043d\u043a\u0438: \u0443\u0441\u043b\u0443\u0433\u0438, \u0446\u0435\u043d\u044b, \u0441\u043b\u043e\u0442\u044b, \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438, \u043a\u043b\u0438\u0435\u043d\u0442\u044b, \u043c\u0430\u0441\u0442\u0435\u0440\u0430, \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u0438 \u043e\u043f\u043b\u0430\u0442\u044b.\" \/>\n <div className=\"grid md:grid-cols-4 gap-5 mb-8\">{ADMIN_ROWS.map((row) => <div key={row.label} className=\"bg-slate-900 border border-white\/10 rounded-[2rem] p-6\"><IconWrap icon={row.icon} \/><p className=\"text-slate-500 text-[10px] font-black uppercase tracking-widest mt-5 mb-2\">{row.label}<\/p><p className=\"text-3xl font-black italic text-white tracking-tighter\">{row.value}<\/p><p className=\"text-slate-500 text-xs mt-2\">{row.detail}<\/p><\/div>)}<\/div>\n <div className=\"bg-slate-900 border border-white\/10 rounded-[3rem] p-6 md:p-8\">\n <div className=\"flex flex-wrap gap-3 mb-8\">{['dashboard','services','parts','slots','clients'].map((mode) => <button key={mode} onClick={() => setAdminMode(mode)} className={`px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest ${adminMode===mode?'bg-green-500 text-slate-950':'bg-slate-950 text-slate-400 border border-white\/10'}`}>{mode}<\/button>)}<\/div>\n <div className=\"grid lg:grid-cols-2 gap-6\"><div className=\"bg-slate-950\/60 rounded-[2rem] p-6 border border-white\/5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter mb-5\">\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h3><div className=\"space-y-4\"><input defaultValue=\"\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0430\u043c\u043e\u043a\u0430\u0442\u0430\" className=\"w-full bg-slate-900 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input defaultValue=\"1 500 \u20bd\" className=\"w-full bg-slate-900 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input defaultValue=\"20\u201340 \u043c\u0438\u043d\" className=\"w-full bg-slate-900 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><Button className=\"w-full\">\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f<\/Button><\/div><\/div><div className=\"bg-slate-950\/60 rounded-[2rem] p-6 border border-white\/5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter mb-5\">\u041b\u043e\u0433\u0438\u043a\u0430 \u0430\u0434\u043c\u0438\u043d\u043a\u0438<\/h3><ul className=\"space-y-4 text-slate-400 leading-relaxed\"><li>\u2022 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0443\u0441\u043b\u0443\u0433\u0430\u043c\u0438, \u043f\u0440\u0430\u0439\u0441\u043e\u043c \u0438 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e.<\/li><li>\u2022 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u044f\u043c\u0438, \u043c\u0430\u0441\u0442\u0435\u0440\u0430\u043c\u0438 \u0438 \u0441\u043b\u043e\u0442\u0430\u043c\u0438.<\/li><li>\u2022 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u043c \u201c\u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439\u201d.<\/li><li>\u2022 \u0421\u0442\u0430\u0442\u0443\u0441\u044b \u0440\u0435\u043c\u043e\u043d\u0442\u0430, \u043e\u043f\u043b\u0430\u0442\u044b, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0438 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f.<\/li><\/ul><\/div><\/div>\n <\/div>\n <\/section>\n );\n }\n\n function LegalPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u042e\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0431\u043b\u043e\u043a\" title=\"\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\" accent=\"\u0443\u0441\u043b\u043e\u0432\u0438\u044f\" text=\"\u041d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u044e\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u043e\u043f\u043b\u0430\u0442\u044b, \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044f \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0435 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.\" \/>\n <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-5\">{['\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438','\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435','\u0423\u0441\u043b\u043e\u0432\u0438\u044f \u043e\u043d\u043b\u0430\u0439\u043d-\u043e\u043f\u043b\u0430\u0442\u044b','\u0423\u0441\u043b\u043e\u0432\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430','\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0439\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f','\u0421\u043e\u0433\u043b\u0430\u0441\u0438\u0435 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445','Cookie policy','\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439'].map((item) => <div key={item} className=\"bg-slate-900 border border-white\/10 rounded-[2rem] p-6\"><IconWrap icon=\"file\" \/><h3 className=\"text-xl font-black italic uppercase text-white tracking-tighter mt-5\">{item}<\/h3><\/div>)}<\/div>\n <\/section>\n );\n }\n\n function AnalyticsPage() {\n return (\n <section className=\"max-w-7xl mx-auto px-4 py-20 slide-up\">\n <SectionTitle eyebrow=\"\u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430\" title=\"\u041c\u0435\u0442\u0440\u0438\u043a\u0438\" accent=\"\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044f\" text=\"\u0414\u0435\u043c\u043e-\u0431\u043b\u043e\u043a \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438: \u0437\u0430\u044f\u0432\u043a\u0438, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438, \u043e\u043f\u043b\u0430\u0442\u044b, \u043e\u0442\u043c\u0435\u043d\u044b, \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043c\u0430\u0441\u0442\u0435\u0440\u043e\u0432.\" \/>\n <div className=\"grid md:grid-cols-3 gap-6\"><div className=\"bg-slate-900 border border-white\/10 rounded-[2.4rem] p-8 md:col-span-2\"><h3 className=\"text-3xl font-black italic uppercase text-white tracking-tighter mb-8\">\u0412\u043e\u0440\u043e\u043d\u043a\u0430<\/h3>{[['\u0412\u0438\u0437\u0438\u0442\u044b',100],['\u041a\u043b\u0438\u043a\u0438 \u201c\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f\u201d',62],['\u0412\u044b\u0431\u043e\u0440 \u0441\u043b\u043e\u0442\u0430',44],['\u041f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430',31]].map(([label,value]) => <div key={label} className=\"mb-6\"><div className=\"flex justify-between text-xs font-black uppercase tracking-widest text-slate-500 mb-2\"><span>{label}<\/span><span>{value}%<\/span><\/div><div className=\"h-3 bg-slate-800 rounded-full overflow-hidden\"><div className=\"h-full bg-green-500 rounded-full\" style={{width:value+'%'}}><\/div><\/div><\/div>)}<\/div><div className=\"bg-green-500 text-slate-950 rounded-[2.4rem] p-8\"><Icon name=\"chart\" size={48} className=\"mb-8\" \/><h3 className=\"text-4xl font-black italic uppercase tracking-tighter leading-none mb-5\">\u041e\u0442\u0447\u0451\u0442\u044b<\/h3><p className=\"font-bold leading-relaxed opacity-80\">\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0437\u0430\u044f\u0432\u043e\u043a, \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b, \u043e\u043f\u043b\u0430\u0442\u044b \u0438 \u043e\u0442\u043c\u0435\u043d\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c \u0441\u0430\u0439\u0442.<\/p><\/div><\/div>\n <\/section>\n );\n }\n\n function BookingModal() {\n const [localName, setLocalName] = useState('');\n const selectedDay = currentSlots();\n const selectedPartTotal = selectedPart ? selectedPart.partPrice + selectedPart.installPrice : 0;\n const total = selectedPart ? selectedPartTotal : selectedService.price;\n const dueNow = paymentChoice === 'full' ? total : 1000;\n\n return (\n <div className=\"fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-6 backdrop-blur-3xl bg-slate-950\/80\">\n <button className=\"absolute inset-0 w-full h-full bg-transparent\" onClick={() => setModal(null)} aria-label=\"\u0417\u0430\u043a\u0440\u044b\u0442\u044c\"><\/button>\n <div className=\"relative bg-slate-900 border border-white\/10 w-full max-w-5xl rounded-[2.5rem] md:rounded-[4rem] p-6 md:p-10 shadow-[0_0_100px_rgba(0,0,0,.5)] zoom-in max-h-[92vh] overflow-auto custom-scroll\">\n <button onClick={() => setModal(null)} className=\"absolute top-6 right-6 bg-transparent text-slate-600 hover:text-white\"><Icon name=\"x\" size={30} \/><\/button>\n <div className=\"mb-8 pr-10\"><p className=\"text-green-500 text-[10px] font-black uppercase tracking-[0.3em] mb-3\">\u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c<\/p><h2 className=\"text-4xl md:text-6xl font-black italic uppercase text-white tracking-tighter leading-none\">\u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 <span className=\"text-green-500\">\u0437\u0430\u044f\u0432\u043a\u0438<\/span><\/h2><\/div>\n <div className=\"grid lg:grid-cols-[1fr_360px] gap-8\">\n <div>\n <div className=\"flex gap-2 mb-6\">{[1,2,3].map((step) => <div key={step} className={`h-2 flex-1 rounded-full ${bookingStep >= step ? 'bg-green-500' : 'bg-slate-800'}`}><\/div>)}<\/div>\n {bookingStep === 1 && <div className=\"space-y-5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter\">1. \u0423\u0441\u043b\u0443\u0433\u0430 \u0438 \u0441\u043b\u043e\u0442<\/h3><select value={selectedService.id} onChange={(e)=>setSelectedService(SERVICES.find(s=>s.id===Number(e.target.value)))} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">{SERVICES.map((s)=><option key={s.id} value={s.id}>{s.title}<\/option>)}<\/select><select value={selLoc} onChange={(e)=>setSelLoc(Number(e.target.value))} className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\">{LOCATIONS.map((l,i)=><option key={l.id} value={i}>{l.name}<\/option>)}<\/select><div className=\"grid sm:grid-cols-3 gap-3\">{SLOTS.map((d)=><button key={d.iso} onClick={()=>{setSelectedDate(d.iso);setSelectedSlot('');}} className={`p-4 rounded-2xl border text-left ${selectedDate===d.iso?'bg-green-500 border-green-500 text-slate-950':'bg-slate-950 border-white\/10 text-white'}`}><b>{d.date}<\/b><br\/><span className=\"text-[10px] uppercase font-black opacity-70\">{d.slots.filter(s=>s.free).length} \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e<\/span><\/button>)}<\/div><div className=\"grid sm:grid-cols-3 gap-3\">{selectedDay.slots.map((slot)=><button key={slot.time} disabled={!slot.free} onClick={()=>setSelectedSlot(slot.time)} className={`p-4 rounded-2xl border ${!slot.free?'bg-red-500\/5 border-red-500\/20 text-red-300 opacity-50':'bg-slate-950 border-white\/10 text-white'} ${selectedSlot===slot.time?'!bg-green-500 !text-slate-950 !border-green-500':''}`}><b>{slot.time}<\/b><br\/><span className=\"text-[10px] uppercase font-black opacity-70\">{slot.free?slot.master:'\u0437\u0430\u043d\u044f\u0442\u043e'}<\/span><\/button>)}<\/div><Button disabled={!selectedSlot} onClick={()=>setBookingStep(2)} className={`w-full ${!selectedSlot?'opacity-50 cursor-not-allowed':''}`}>\u0414\u0430\u043b\u0435\u0435<\/Button><\/div>}\n {bookingStep === 2 && <div className=\"space-y-5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter\">2. \u0414\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/h3><input value={localName} onChange={(e)=>setLocalName(e.target.value)} placeholder=\"\u0418\u043c\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input placeholder=\"\u0422\u0435\u043b\u0435\u0444\u043e\u043d\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input placeholder=\"E-mail\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><input placeholder=\"\u0411\u0440\u0435\u043d\u0434 \u0438 \u043c\u043e\u0434\u0435\u043b\u044c \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold\"\/><textarea placeholder=\"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0435\u0438\u0441\u043f\u0440\u0430\u0432\u043d\u043e\u0441\u0442\u0438 \/ \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\" className=\"w-full bg-slate-950 border border-white\/10 rounded-2xl px-5 py-4 text-white font-bold h-28 resize-none\"><\/textarea><div className=\"grid grid-cols-2 gap-3\"><button className=\"bg-slate-950 border border-dashed border-white\/20 rounded-2xl p-5 text-slate-500 font-black uppercase text-[10px]\"><Icon name=\"image\" className=\"mx-auto mb-2\"\/>\u0424\u043e\u0442\u043e<\/button><button className=\"bg-slate-950 border border-dashed border-white\/20 rounded-2xl p-5 text-slate-500 font-black uppercase text-[10px]\"><Icon name=\"file\" className=\"mx-auto mb-2\"\/>\u0412\u0438\u0434\u0435\u043e<\/button><\/div><label className=\"flex gap-3 text-slate-400 text-sm\"><input type=\"checkbox\" defaultChecked\/> \u0421\u043e\u0433\u043b\u0430\u0441\u0435\u043d \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445<\/label><div className=\"grid grid-cols-2 gap-3\"><Button variant=\"ghost\" onClick={()=>setBookingStep(1)}>\u041d\u0430\u0437\u0430\u0434<\/Button><Button onClick={()=>setBookingStep(3)}>\u041a \u043e\u043f\u043b\u0430\u0442\u0435<\/Button><\/div><\/div>}\n {bookingStep === 3 && <div className=\"space-y-5\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter\">3. \u041e\u043f\u043b\u0430\u0442\u0430<\/h3><div className=\"grid sm:grid-cols-2 gap-4\"><button onClick={()=>setPaymentChoice('prepay')} className={`p-5 rounded-3xl border text-left ${paymentChoice==='prepay'?'bg-green-500 text-slate-950 border-green-500':'bg-slate-950 text-white border-white\/10'}`}><Icon name=\"creditCard\" className=\"mb-4\"\/><b>\u041f\u0440\u0435\u0434\u043e\u043f\u043b\u0430\u0442\u0430<\/b><p className=\"text-xs opacity-70 mt-2\">\u0411\u0440\u043e\u043d\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \/ \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430<\/p><\/button><button onClick={()=>setPaymentChoice('full')} className={`p-5 rounded-3xl border text-left ${paymentChoice==='full'?'bg-green-500 text-slate-950 border-green-500':'bg-slate-950 text-white border-white\/10'}`}><Icon name=\"checkCircle\" className=\"mb-4\"\/><b>\u041f\u043e\u043b\u043d\u0430\u044f \u043e\u043f\u043b\u0430\u0442\u0430<\/b><p className=\"text-xs opacity-70 mt-2\">\u041e\u043f\u043b\u0430\u0442\u0430 \u0443\u0441\u043b\u0443\u0433\u0438 \u0438\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/p><\/button><\/div><div className=\"bg-slate-950 border border-white\/10 rounded-3xl p-6\"><div className=\"flex justify-between mb-3\"><span className=\"text-slate-500\">\u041a \u043e\u043f\u043b\u0430\u0442\u0435 \u0441\u0435\u0439\u0447\u0430\u0441<\/span><b className=\"text-white\">{formatMoney(dueNow)}<\/b><\/div><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0421\u043f\u043e\u0441\u043e\u0431<\/span><b className=\"text-white\">\u041a\u0430\u0440\u0442\u0430 \/ \u0421\u0411\u041f \/ \u042eKassa<\/b><\/div><\/div><div className=\"grid grid-cols-2 gap-3\"><Button variant=\"ghost\" onClick={()=>setBookingStep(2)}>\u041d\u0430\u0437\u0430\u0434<\/Button><Button onClick={()=>{setModal(null); setOrderId('123'); setActiveTab('status'); setStatusData(REPAIR_STATUS); alert('\u0414\u0435\u043c\u043e: \u0437\u0430\u044f\u0432\u043a\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430, \u043d\u043e\u043c\u0435\u0440 \u0437\u0430\u043a\u0430\u0437\u0430 123. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u0451\u0436\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438 CRM.');}}>\u041e\u043f\u043b\u0430\u0442\u0438\u0442\u044c<\/Button><\/div><\/div>}\n <\/div>\n <div className=\"bg-slate-950\/70 border border-white\/5 rounded-[2rem] p-6 h-fit\"><h3 className=\"text-2xl font-black italic uppercase text-white tracking-tighter mb-6\">\u0418\u0442\u043e\u0433\u043e<\/h3>{selectedPart && <div className=\"bg-amber-500\/10 border border-amber-500\/20 rounded-2xl p-4 mb-5 text-amber-100 text-sm\"><b>{selectedPart.name}<\/b><br\/>\u0422\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0430 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430.<\/div>}<div className=\"space-y-4 text-sm\"><div className=\"flex justify-between gap-4\"><span className=\"text-slate-500\">\u0423\u0441\u043b\u0443\u0433\u0430<\/span><b className=\"text-white text-right\">{selectedService.title}<\/b><\/div><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0424\u0438\u043b\u0438\u0430\u043b<\/span><b className=\"text-white\">{LOCATIONS[selLoc].name}<\/b><\/div><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0414\u0430\u0442\u0430 \/ \u0432\u0440\u0435\u043c\u044f<\/span><b className=\"text-white\">{selectedDay.date} {selectedSlot || '\u2014'}<\/b><\/div><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/span><b className=\"text-white\">\u043e\u0442 {formatMoney(total)}<\/b><\/div><div className=\"pt-4 border-t border-white\/10 flex justify-between items-end\"><span className=\"text-green-400 text-[10px] font-black uppercase tracking-widest\">\u0421\u0435\u0439\u0447\u0430\u0441<\/span><span className=\"text-4xl font-black italic text-white tracking-tighter\">{formatMoney(dueNow)}<\/span><\/div><\/div><p className=\"text-slate-500 text-xs leading-relaxed mt-6\">\u041f\u043e\u0441\u043b\u0435 \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0438\u0442\u043e\u0433\u043e\u0432\u0443\u044e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0438 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442 \u0440\u0435\u043c\u043e\u043d\u0442 \u043e\u043d\u043b\u0430\u0439\u043d.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n }\n\n function PaymentModal() {\n return (\n <div className=\"fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-3xl bg-slate-950\/80\"><button className=\"absolute inset-0\" onClick={()=>setModal(null)}><\/button><div className=\"relative bg-slate-900 border border-white\/10 max-w-lg w-full rounded-[3rem] p-8 zoom-in\"><button onClick={()=>setModal(null)} className=\"absolute top-6 right-6 bg-transparent text-slate-500\"><Icon name=\"x\" \/><\/button><IconWrap icon=\"creditCard\" className=\"bg-green-500 text-slate-950 mb-6\" \/><h2 className=\"text-4xl font-black italic uppercase text-white tracking-tighter mb-4\">\u041e\u043d\u043b\u0430\u0439\u043d-\u043e\u043f\u043b\u0430\u0442\u0430<\/h2><p className=\"text-slate-400 leading-relaxed mb-8\">\u0414\u0435\u043c\u043e-\u044d\u043a\u0440\u0430\u043d \u043e\u043f\u043b\u0430\u0442\u044b. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u042eKassa, CloudPayments, Robokassa, \u0421\u0411\u041f, \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0430\u0441\u0441\u0430 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0447\u0435\u043a\u0430.<\/p><div className=\"bg-slate-950 border border-white\/10 rounded-3xl p-6 mb-6\"><div className=\"flex justify-between\"><span className=\"text-slate-500\">\u0421\u0443\u043c\u043c\u0430<\/span><b className=\"text-white text-2xl\">{formatMoney(REPAIR_STATUS.price)}<\/b><\/div><\/div><Button onClick={()=>{setModal(null);alert('\u0414\u0435\u043c\u043e: \u043f\u043b\u0430\u0442\u0451\u0436 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d.')}} className=\"w-full\">\u041e\u043f\u043b\u0430\u0442\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0439 \/ \u0421\u0411\u041f<\/Button><\/div><\/div>\n );\n }\n\n function Footer() {\n return (\n <footer className=\"bg-slate-950 border-t border-white\/5 py-20 mt-12\">\n <div className=\"max-w-7xl mx-auto px-4 grid md:grid-cols-4 gap-10\">\n <div className=\"md:col-span-1\"><div className=\"flex items-center gap-2 mb-6\"><Icon name=\"zap\" className=\"text-green-500\" fill=\"currentColor\" \/><span className=\"text-3xl font-black italic uppercase tracking-tighter text-white\">ElectroFix<\/span><\/div><p className=\"text-slate-500 text-sm leading-relaxed\">\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0430\u044f \u043f\u043e \u0440\u0435\u043c\u043e\u043d\u0442\u0443 \u044d\u043b\u0435\u043a\u0442\u0440\u043e- \u0438 \u0432\u0435\u043b\u043e\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430 \u0441 \u043e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c\u044e, \u043e\u043f\u043b\u0430\u0442\u043e\u0439, \u0441\u0442\u0430\u0442\u0443\u0441\u0430\u043c\u0438 \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u043c \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439.<\/p><\/div>\n <div><h4 className=\"text-[10px] font-black uppercase tracking-[0.3em] text-slate-600 mb-5\">\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b<\/h4><p className=\"text-white font-black text-2xl italic tracking-tighter mb-2\">+7 (495) 000-00-00<\/p><p className=\"text-slate-500 text-sm mb-5\">\u0415\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e 10:00\u201321:00<\/p><div className=\"flex gap-3\"><button className=\"w-12 h-12 bg-slate-900 rounded-2xl flex items-center justify-center text-slate-400 hover:text-slate-950 hover:bg-green-500\"><Icon name=\"phone\" \/><\/button><button className=\"w-12 h-12 bg-slate-900 rounded-2xl flex items-center justify-center text-slate-400 hover:text-slate-950 hover:bg-green-500\"><Icon name=\"message\" \/><\/button><button className=\"w-12 h-12 bg-slate-900 rounded-2xl flex items-center justify-center text-slate-400 hover:text-slate-950 hover:bg-green-500\"><Icon name=\"mail\" \/><\/button><\/div><\/div>\n <div><h4 className=\"text-[10px] font-black uppercase tracking-[0.3em] text-slate-600 mb-5\">\u0420\u0430\u0437\u0434\u0435\u043b\u044b<\/h4><div className=\"grid gap-3 text-sm font-bold text-slate-400\">{['\u0423\u0441\u043b\u0443\u0433\u0438','\u041f\u0440\u0430\u0439\u0441','\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439','\u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c','\u0421\u0442\u0430\u0442\u0443\u0441 \u0440\u0435\u043c\u043e\u043d\u0442\u0430','\u0413\u0430\u0440\u0430\u043d\u0442\u0438\u044f'].map((item)=> <button key={item} onClick={()=>navTo(item==='\u041f\u0440\u0430\u0439\u0441'?'prices':item==='\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439'?'shop':item==='\u041e\u043d\u043b\u0430\u0439\u043d-\u0437\u0430\u043f\u0438\u0441\u044c'?'booking':item==='\u0421\u0442\u0430\u0442\u0443\u0441 \u0440\u0435\u043c\u043e\u043d\u0442\u0430'?'status':'services')} className=\"bg-transparent text-left hover:text-green-500\">{item}<\/button>)}<\/div><\/div>\n <div><h4 className=\"text-[10px] font-black uppercase tracking-[0.3em] text-slate-600 mb-5\">\u042e\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u043e<\/h4><p className=\"text-amber-200 text-sm leading-relaxed bg-amber-500\/10 border border-amber-500\/20 rounded-3xl p-5\">\u0417\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0438\u0437 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0432 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0434\u0430\u0436\u0430 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439 \u043d\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f.<\/p><\/div>\n <\/div>\n <\/footer>\n );\n }\n\n function MainContent() {\n if (activeTab === 'services') return <ServicesPage \/>;\n if (activeTab === 'prices') return <PricesPage \/>;\n if (activeTab === 'shop') return <ShopPage \/>;\n if (activeTab === 'booking') return <BookingPage \/>;\n if (activeTab === 'status') return <StatusPage \/>;\n if (activeTab === 'cabinet') return <CabinetPage \/>;\n if (activeTab === 'business') return <BusinessPage \/>;\n if (activeTab === 'diagnostic') return <DiagnosticPage \/>;\n if (activeTab === 'locations') return <LocationsPage \/>;\n if (activeTab === 'admin') return <AdminPage \/>;\n if (activeTab === 'legal') return <LegalPage \/>;\n if (activeTab === 'analytics') return <AnalyticsPage \/>;\n return <HomePage \/>;\n }\n\n return (\n <div className={`${theme === 'light' ? 'brightness-110' : ''} min-h-screen flex flex-col`}>\n <Header \/>\n <main className=\"flex-grow\"><MainContent \/><\/main>\n <div className=\"fixed bottom-5 left-1\/2 -translate-x-1\/2 z-50 hidden md:flex gap-2 bg-slate-950\/80 backdrop-blur-xl border border-white\/10 rounded-full p-2 shadow-2xl\"><button onClick={()=>navTo('diagnostic')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430<\/button><button onClick={()=>navTo('locations')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u041b\u043e\u043a\u0430\u0446\u0438\u0438<\/button><button onClick={()=>navTo('admin')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u0410\u0434\u043c\u0438\u043d\u043a\u0430<\/button><button onClick={()=>navTo('legal')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u042e\u0440. \u0431\u043b\u043e\u043a<\/button><button onClick={()=>navTo('analytics')} className=\"px-4 py-2 rounded-full bg-slate-900 text-slate-300 text-[10px] font-black uppercase tracking-widest hover:bg-green-500 hover:text-slate-950\">\u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430<\/button><\/div>\n <Footer \/>\n {modal === 'booking' && <BookingModal \/>}\n {modal === 'payment' && <PaymentModal \/>}\n {modal === 'business' && <BookingModal \/>}\n <\/div>\n );\n }\n\n function runSmokeTests() {\n const required = ['zap','wrench','search','clock','shield','creditCard','package','calendar','user','qr','chart'];\n console.assert(Boolean(window.React), 'React \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d');\n console.assert(Boolean(window.ReactDOM), 'ReactDOM \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d');\n console.assert(required.every((name) => ICON_PATHS[name]), '\u0412\u0441\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 SVG-\u0438\u043a\u043e\u043d\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b');\n console.assert(Array.isArray(SERVICES) && SERVICES.length >= 10, '\u0414\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0441\u043b\u0443\u0433 \u0434\u043b\u044f \u043f\u0440\u0430\u0439\u0441\u0430');\n console.assert(Array.isArray(PARTS) && PARTS.length >= 8, '\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0435\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d');\n console.assert(PARTS.every((part) => part.partPrice > 0 && part.installPrice > 0), '\u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0446\u0435\u043d\u0430 \u0434\u0435\u0442\u0430\u043b\u0438 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438');\n console.assert(SLOTS.some((day) => day.slots.some((slot) => slot.free)), '\u0414\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b');\n console.assert(mountNode, '\u0422\u043e\u0447\u043a\u0430 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c');\n }\n\n try {\n runSmokeTests();\n ReactDOMRef.createRoot(mountNode).render(<App \/>);\n } catch (error) {\n console.error('ElectroFix render error:', error);\n if (mountNode) {\n mountNode.innerHTML = '<div style=\"min-height:100vh;display:flex;align-items:center;justify-content:center;color:#fff;background:#020617;font-family:Arial,sans-serif;padding:24px;text-align:center;\"><div><h1 style=\"font-size:28px;margin:0 0 12px;\">\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0430\u0439\u0442\u0430<\/h1><p style=\"color:#94a3b8;margin:0;\">\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438.<\/p><\/div><\/div>';\n }\n }\n })();\n <\/script>\n<\/body>\n<\/html>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":3,"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/remont-ebike.ru\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}