{"version":3,"sources":["../src/Tour.tsx","../src/index.tsx"],"names":["theme","isVisible"],"mappings":"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","file":"index.mjs","sourcesContent":["// 'use client';\n// import { useState, useEffect, useCallback, useMemo } from 'react';\n// import { createPortal } from 'react-dom';\n// import { motion, AnimatePresence } from 'framer-motion';\n// import { X } from 'lucide-react';\n\n// // Interface for predefined welcome screen configuration\n// export interface PredefinedWelcomeConfig {\n//   title: string;\n//   message: string;\n//   startButtonText?: string;\n//   position?: {\n//     top?: number | string; // e.g., 200, '200px', '50%'\n//     left?: number | string; // e.g., 300, '300px', '50%'\n//     transform?: string; // e.g., 'translate(-50%, -50%)'\n//   };\n//   mobilePosition?: {\n//     top?: number | string;\n//     left?: number | string;\n//     transform?: string;\n//   };\n// }\n\n// // Interface for TourStep with offset for fine-tuning\n// export interface TourStep {\n//   target: string;\n//   content: string;\n//   contentDesktop?: string;\n//   contentMobile?: string;\n//   position?:\n//     | 'top'\n//     | 'top-left'\n//     | 'top-right'\n//     | 'bottom'\n//     | 'bottom-left'\n//     | 'bottom-right'\n//     | 'left'\n//     | 'center-left'\n//     | 'right'\n//     | 'center-right'\n//     | 'center';\n//   customPosition?: {\n//     top?: number | string;\n//     left?: number | string;\n//     transform?: string;\n//   };\n//   offset?: {\n//     x?: number;\n//     y?: number;\n//   };\n//   device?: 'desktop' | 'mobile' | 'both';\n// }\n\n// // Interface for TourProps\n// export interface TourProps {\n//   tourId: string;\n//   steps: TourStep[];\n//   theme: 'light' | 'dark';\n//   deviceMode?: 'desktop' | 'tablet' | 'mobile';\n//   isActive?: boolean;\n//   onComplete?: () => void;\n//   onSkip?: () => void;\n//   onStart?: () => void;\n//   onStepChange?: (stepIndex: number) => void;\n//   welcomeScreen?: {\n//     enabled: boolean;\n//     content?: React.ReactNode | PredefinedWelcomeConfig;\n//   };\n//   buttonLabels?: {\n//     next?: string;\n//     previous?: string;\n//     skip?: string;\n//     finish?: string;\n//     start?: string;\n//   };\n//   showProgressDots?: boolean;\n// }\n\n// /**\n//  * A React component that renders an interactive guided tour with bulletproof z-index handling.\n//  * Uses React portals to render outside the normal DOM hierarchy, preventing any z-index conflicts.\n//  * Styled with Tailwind CSS, with dynamic highlight styles injected for theme support.\n//  */\n// export default function Tour({\n//   tourId,\n//   steps = [],\n//   theme,\n//   deviceMode,\n//   isActive = true,\n//   onComplete,\n//   onSkip,\n//   onStart,\n//   onStepChange,\n//   welcomeScreen = { enabled: false },\n//   buttonLabels = {},\n//   showProgressDots = false,\n// }: TourProps) {\n//   const [currentStep, setCurrentStep] = useState(welcomeScreen.enabled ? -1 : 0);\n//   const [isVisible, setIsVisible] = useState(isActive);\n//   const [tooltipPosition, setTooltipPosition] = useState<{ top: number | string; left: number | string }>({ top: 0, left: 0 });\n//   const [tooltipTransform, setTooltipTransform] = useState<string>('');\n//   const [arrowStyle, setArrowStyle] = useState<React.CSSProperties>({});\n//   const [navigationDirection, setNavigationDirection] = useState<'forward' | 'backward' | null>(null);\n//   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n//   const [welcomeStyle, setWelcomeStyle] = useState<React.CSSProperties>({});\n\n//   // Create and manage portal container\n//   useEffect(() => {\n//     const container = document.createElement('div');\n//     container.id = `tour-portal-${tourId}`;\n//     container.className = 'fixed inset-0 pointer-events-none z-[2147483647]';\n//     document.body.appendChild(container);\n//     setPortalContainer(container);\n\n//     return () => {\n//       if (container && container.parentNode) {\n//         container.parentNode.removeChild(container);\n//       }\n//     };\n//   }, [tourId]);\n\n//   // Inject dynamic styles for highlight effect\n//   useEffect(() => {\n//     if (!isVisible) return;\n\n//     const styleId = `tour-styles-${tourId}`;\n//     let existingStyle = document.getElementById(styleId);\n\n//     if (!existingStyle) {\n//       const style = document.createElement('style');\n//       style.id = styleId;\n//       style.textContent = `\n//         .tour-highlight-${tourId} {\n//           position: relative !important;\n//           z-index: 2147483646 !important;\n//           box-shadow: 0 0 8px 2px rgba(29, 78, 216, 0.5) !important; /* Light theme: bg-blue-700 */\n//           border: 2px solid rgba(29, 78, 216, 0.7) !important;\n//           border-radius: 6px !important;\n//           transition: all 0.3s ease !important;\n//         }\n\n//         .tour-overlay-${tourId} {\n//           pointer-events: auto !important;\n//         }\n\n//         .tour-content-${tourId} {\n//           pointer-events: auto !important;\n//         }\n\n//         [data-theme=\"dark\"] .tour-highlight-${tourId}, .dark .tour-highlight-${tourId} {\n//           box-shadow: 0 0 8px 2px rgba(37, 99, 235, 0.5) !important; /* Dark theme: bg-blue-600 */\n//           border: 2px solid rgba(37, 99, 235, 0.7) !important;\n//         }\n//       `;\n//       document.head.appendChild(style);\n//     }\n\n//     return () => {\n//       const style = document.getElementById(styleId);\n//       if (style && style.parentNode) {\n//         style.parentNode.removeChild(style);\n//       }\n//     };\n//   }, [isVisible, tourId]);\n\n//   // Detect if we're on mobile\n//   const isMobile =\n//     deviceMode === 'mobile' ||\n//     (typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches);\n\n//   // Filter steps based on device\n//   const filteredSteps = useMemo(() => {\n//     return steps.filter((step) => {\n//       if (!step.device || step.device === 'both') return true;\n//       return step.device === (isMobile ? 'mobile' : 'desktop');\n//     });\n//   }, [steps, isMobile]);\n\n//   // Sync isVisible with isActive prop\n//   useEffect(() => {\n//     setIsVisible(isActive);\n//     if (isActive && welcomeScreen.enabled && currentStep === -1) {\n//       onStart?.();\n//     }\n//   }, [isActive, welcomeScreen.enabled, currentStep, onStart]);\n\n//   // Handle responsive welcome screen positioning\n//   useEffect(() => {\n//     if (!isVisible || currentStep !== -1 || !welcomeScreen.enabled) return;\n\n//     const updateResponsiveStyles = () => {\n//       const viewportWidth = window.innerWidth;\n//       const viewportHeight = window.innerHeight;\n\n//       // Welcome screen styles\n//       const config = welcomeScreen.content as PredefinedWelcomeConfig;\n//       const hasCustomPosition = config?.position || (isMobile && config?.mobilePosition);\n\n//       if (hasCustomPosition) {\n//         // Default center position (50% viewport)\n//         let defaultTop = viewportHeight * 0.5;\n//         let defaultLeft = viewportWidth * 0.5;\n//         let transform = 'translate(-50%, -50%)';\n\n//         // User-provided offsets\n//         let userTop: number | string = isMobile && config.mobilePosition?.top ? config.mobilePosition.top : config.position?.top ?? 0;\n//         let userLeft: number | string = isMobile && config.mobilePosition?.left ? config.mobilePosition.left : config.position?.left ?? 0;\n//         let userTransform = isMobile && config.mobilePosition?.transform ? config.mobilePosition.transform : config.position?.transform;\n\n//         // Convert userTop and userLeft to pixels\n//         if (typeof userTop === 'string') {\n//           if (userTop.endsWith('rem')) {\n//             userTop = parseFloat(userTop) * 16;\n//           } else if (userTop.endsWith('%')) {\n//             userTop = (parseFloat(userTop) / 100) * viewportHeight;\n//           } else if (userTop.endsWith('px')) {\n//             userTop = parseFloat(userTop);\n//           }\n//         }\n//         if (typeof userLeft === 'string') {\n//           if (userLeft.endsWith('rem')) {\n//             userLeft = parseFloat(userLeft) * 16;\n//           } else if (userLeft.endsWith('%')) {\n//             userLeft = (parseFloat(userLeft) / 100) * viewportWidth;\n//           } else if (userLeft.endsWith('px')) {\n//             userLeft = parseFloat(userLeft);\n//           }\n//         }\n\n//         // Calculate new position: default + offset\n//         let top = defaultTop + (typeof userTop === 'number' ? userTop : 0);\n//         let left = defaultLeft + (typeof userLeft === 'number' ? userLeft : 0);\n\n//         // Boundary checks\n//         const welcomeWidth = Math.min(viewportWidth * 0.9, 448); // w-[90%] or max-w-md\n//         const welcomeHeight = 300; // Approximate height\n//         if (top < 10) top = 10;\n//         if (top + welcomeHeight > viewportHeight - 10) top = viewportHeight - welcomeHeight - 10;\n//         if (left < 10) left = 10;\n//         if (left + welcomeWidth > viewportWidth - 10) left = viewportWidth - welcomeWidth - 10;\n\n//         setWelcomeStyle({\n//           position: 'absolute',\n//           top,\n//           left,\n//           transform: userTransform ?? transform,\n//         });\n//       } else {\n//         // Default: rely on Flexbox centering\n//         setWelcomeStyle({});\n//       }\n//     };\n\n//     updateResponsiveStyles();\n//     window.addEventListener('resize', updateResponsiveStyles);\n//     return () => window.removeEventListener('resize', updateResponsiveStyles);\n//   }, [isVisible, currentStep, welcomeScreen, isMobile]);\n\n//   // Find the target element\n//   const getTargetElement = (step: TourStep): Element | null => {\n//     const selector = step.target;\n//     let targetElement: Element | null = document.querySelector(selector);\n\n//     if (!targetElement && selector.startsWith('.')) {\n//       const elements = document.querySelectorAll(selector);\n//       targetElement = Array.from(elements).find((el) => {\n//         const rect = el.getBoundingClientRect();\n//         return rect.width > 0 && rect.height > 0 && window.getComputedStyle(el).display !== 'none';\n//       }) || null;\n//     }\n\n//     return targetElement;\n//   };\n\n//   const getStepContent = (step: TourStep): string => {\n//     if (isMobile && step.contentMobile) {\n//       return step.contentMobile;\n//     } else if (!isMobile && step.contentDesktop) {\n//       return step.contentDesktop;\n//     }\n//     return step.content;\n//   };\n\n//   const createArrowStyle = (\n//     position: string,\n//     rect: DOMRect,\n//     targetCenterX: number,\n//     targetCenterY: number,\n//     left: number,\n//     tooltipWidth: number,\n//     theme: string\n//   ): React.CSSProperties => {\n//     const baseArrow: React.CSSProperties = {\n//       position: 'absolute',\n//       width: '0',\n//       height: '0',\n//       borderStyle: 'solid',\n//       zIndex: 1,\n//     };\n\n//     const triangleColor = theme === 'dark' ? '#ffffff' : '#111827';\n//     let arrow: React.CSSProperties = { ...baseArrow };\n\n//     const borderRadiusOffset = '16px';\n//     const cornerVerticalOffset = '-7px';\n\n//     switch (position) {\n//       case 'top':\n//         arrow = {\n//           ...arrow,\n//           bottom: '-7px',\n//           left: '50%',\n//           borderWidth: '7px 7px 0 7px',\n//           borderColor: `${triangleColor} transparent transparent transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'top-left':\n//         arrow = {\n//           ...arrow,\n//           bottom: cornerVerticalOffset,\n//           left: borderRadiusOffset,\n//           borderWidth: '7px 7px 0 7px',\n//           borderColor: `${triangleColor} transparent transparent transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'top-right':\n//         arrow = {\n//           ...arrow,\n//           bottom: cornerVerticalOffset,\n//           right: borderRadiusOffset,\n//           borderWidth: '7px 7px 0 7px',\n//           borderColor: `${triangleColor} transparent transparent transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'bottom':\n//         arrow = {\n//           ...arrow,\n//           top: '-7px',\n//           left: '50%',\n//           borderWidth: '0 7px 7px 7px',\n//           borderColor: `transparent transparent ${triangleColor} transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(-1px -1px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'bottom-left':\n//         arrow = {\n//           ...arrow,\n//           top: '-7px',\n//           left: borderRadiusOffset,\n//           borderWidth: '0 7px 7px 7px',\n//           borderColor: `transparent transparent ${triangleColor} transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(-1px -1px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'bottom-right':\n//         arrow = {\n//           ...arrow,\n//           top: '-7px',\n//           right: borderRadiusOffset,\n//           borderWidth: '0 7px 7px 7px',\n//           borderColor: `transparent transparent ${triangleColor} transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(-1px -1px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'left':\n//         arrow = {\n//           ...arrow,\n//           right: '-7px',\n//           top: '50%',\n//           borderWidth: '7px 7px 7px 0',\n//           borderColor: `transparent ${triangleColor} transparent transparent`,\n//           transform: 'translateY(-50%)',\n//           filter: 'drop-shadow(2px -1px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'center-left':\n//         arrow = {\n//           ...arrow,\n//           left: '-7px',\n//           top: '50%',\n//           borderWidth: '7px 0 7px 7px',\n//           borderColor: `transparent transparent transparent ${triangleColor}`,\n//           transform: 'translateY(-50%)',\n//           filter: 'drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'right':\n//         arrow = {\n//           ...arrow,\n//           left: '-7px',\n//           top: '50%',\n//           borderWidth: '7px 0 7px 7px',\n//           borderColor: `transparent transparent transparent ${triangleColor}`,\n//           transform: 'translateY(-50%)',\n//           filter: 'drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'center-right':\n//         arrow = {\n//           ...arrow,\n//           right: '-7px',\n//           top: '50%',\n//           borderWidth: '7px 7px 7px 0',\n//           borderColor: `transparent ${triangleColor} transparent transparent`,\n//           transform: 'translateY(-50%)',\n//           filter: 'drop-shadow(2px -1px 2px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//     }\n\n//     return arrow;\n//   };\n\n//   // Position tooltip and handle scroll/resize\n//   useEffect(() => {\n//     if (!isVisible || currentStep < 0 || currentStep >= filteredSteps.length) return;\n\n//     const step = filteredSteps[currentStep];\n//     const targetElement = getTargetElement(step);\n\n//     if (!targetElement) {\n//       console.warn(\n//         `Tour target not found: ${step.target} (device: ${step.device || 'both'}, step: ${currentStep + 1}/${filteredSteps.length})`\n//       );\n//       if (navigationDirection !== 'backward' && currentStep < filteredSteps.length - 1) {\n//         setNavigationDirection('forward');\n//         setCurrentStep(currentStep + 1);\n//       }\n//       return;\n//     }\n\n//     const updatePosition = () => {\n//       targetElement.scrollIntoView({\n//         behavior: 'smooth',\n//         block: 'nearest',\n//         inline: 'nearest',\n//       });\n\n//       const headerHeight = 64;\n//       const rect = targetElement.getBoundingClientRect();\n//       if (rect.top < headerHeight) {\n//         window.scrollBy({\n//           top: rect.top - headerHeight,\n//           behavior: 'smooth',\n//         });\n//       }\n\n//       if (step.customPosition) {\n//         setTooltipPosition({\n//           top: step.customPosition.top ?? '50%',\n//           left: step.customPosition.left ?? '50%',\n//         });\n//         setTooltipTransform(step.customPosition.transform ?? '');\n//         setArrowStyle({ display: 'none' });\n//         return;\n//       }\n\n//       if (step.position === 'center') {\n//         setTooltipPosition({ top: '50%', left: '50%' });\n//         setTooltipTransform('translate(-50%, -50%)');\n//         setArrowStyle({ display: 'none' });\n//         return;\n//       }\n\n//       const viewportWidth = window.innerWidth;\n//       const viewportHeight = window.innerHeight;\n//       const tooltipWidth = 320;\n//       const tooltipHeight = 150;\n//       let top: number = 0;\n//       let left: number = 0;\n//       let transform = '';\n//       const position = step.position || 'bottom';\n//       const offsetX = step.offset?.x || 0;\n//       const offsetY = step.offset?.y || 10;\n\n//       const targetCenterX = rect.left + rect.width / 2;\n//       const targetCenterY = rect.top + rect.height / 2;\n\n//       switch (position) {\n//         case 'top':\n//           top = rect.top - tooltipHeight - offsetY;\n//           left = rect.left + rect.width / 2 + offsetX;\n//           transform = 'translateX(-50%)';\n//           break;\n//         case 'top-left':\n//           top = rect.top - tooltipHeight - offsetY;\n//           left = rect.left + offsetX;\n//           transform = '';\n//           break;\n//         case 'top-right':\n//           top = rect.top - tooltipHeight - offsetY;\n//           left = rect.right - tooltipWidth + offsetX;\n//           transform = '';\n//           break;\n//         case 'bottom':\n//           top = rect.bottom + offsetY;\n//           left = rect.left + rect.width / 2 + offsetX;\n//           transform = 'translateX(-50%)';\n//           break;\n//         case 'bottom-left':\n//           top = rect.bottom + offsetY;\n//           left = rect.left + offsetX;\n//           transform = '';\n//           break;\n//         case 'bottom-right':\n//           top = rect.bottom + offsetY;\n//           left = rect.right - tooltipWidth + offsetX;\n//           transform = '';\n//           break;\n//         case 'left':\n//           top = rect.top + rect.height / 2 + offsetY;\n//           left = rect.left - tooltipWidth - 10 + offsetX;\n//           transform = 'translateY(-50%)';\n//           break;\n//         case 'center-left':\n//           top = rect.top + rect.height / 2 + offsetY;\n//           left = rect.left + offsetX;\n//           transform = 'translateY(-50%)';\n//           break;\n//         case 'right':\n//           top = rect.top + rect.height / 2 + offsetY;\n//           left = rect.right + 10 + offsetX;\n//           transform = 'translateY(-50%)';\n//           break;\n//         case 'center-right':\n//           top = rect.top + rect.height / 2 + offsetY;\n//           left = rect.right - tooltipWidth + offsetX;\n//           transform = 'translateY(-50%)';\n//           break;\n//       }\n\n//       if (top < 10) top = 10;\n//       if (top + tooltipHeight > viewportHeight - 10) top = viewportHeight - tooltipHeight - 10;\n//       if (left < 10) left = 10;\n//       if (left + tooltipWidth > viewportWidth - 10) left = viewportWidth - tooltipWidth - 10;\n\n//       setTooltipPosition({ top, left });\n//       setTooltipTransform(transform);\n\n//       const arrow = createArrowStyle(position, rect, targetCenterX, targetCenterY, left, tooltipWidth, theme);\n//       setArrowStyle(arrow);\n//     };\n\n//     updatePosition();\n\n//     const handleResizeOrScroll = () => updatePosition();\n//     window.addEventListener('resize', handleResizeOrScroll);\n//     window.addEventListener('scroll', handleResizeOrScroll);\n\n//     return () => {\n//       window.removeEventListener('resize', handleResizeOrScroll);\n//       window.removeEventListener('scroll', handleResizeOrScroll);\n//     };\n//   }, [currentStep, filteredSteps, isVisible, deviceMode, theme, navigationDirection]);\n\n//   // Highlight the target element\n//   useEffect(() => {\n//     if (!isVisible || currentStep < 0 || currentStep >= filteredSteps.length) return;\n\n//     const step = filteredSteps[currentStep];\n//     const targetElement = getTargetElement(step);\n//     if (!targetElement) return;\n\n//     const highlightClass = `tour-highlight-${tourId}`;\n//     targetElement.classList.add(highlightClass);\n\n//     return () => {\n//       targetElement.classList.remove(highlightClass);\n//     };\n//   }, [currentStep, filteredSteps, isVisible, tourId]);\n\n//   // Keyboard navigation\n//   useEffect(() => {\n//     if (!isVisible) return;\n\n//     const handleKeyDown = (e: KeyboardEvent) => {\n//       if (e.key === 'ArrowRight' || e.key === 'Enter') {\n//         e.preventDefault();\n//         if (currentStep === -1) {\n//           handleStart();\n//         } else {\n//           handleNext();\n//         }\n//       } else if (e.key === 'ArrowLeft' && currentStep > 0) {\n//         e.preventDefault();\n//         handlePrevious();\n//       } else if (e.key === 'Escape') {\n//         e.preventDefault();\n//         handleSkip();\n//       }\n//     };\n\n//     window.addEventListener('keydown', handleKeyDown);\n//     return () => window.removeEventListener('keydown', handleKeyDown);\n//   }, [currentStep, isVisible]);\n\n//   // Notify step change\n//   useEffect(() => {\n//     if (isVisible && currentStep >= 0) {\n//       onStepChange?.(currentStep);\n//     }\n//   }, [currentStep, isVisible, onStepChange]);\n\n//   // Navigation handlers\n//   const completeTour = useCallback(() => {\n//     setIsVisible(false);\n//     setCurrentStep(welcomeScreen.enabled ? -1 : 0);\n//     onComplete?.();\n//   }, [onComplete, welcomeScreen.enabled]);\n\n//   const handleStart = useCallback(() => {\n//     setCurrentStep(0);\n//     setNavigationDirection('forward');\n//     onStart?.();\n//   }, [onStart]);\n\n//   const handleNext = useCallback(() => {\n//     if (currentStep < filteredSteps.length - 1) {\n//       setCurrentStep(currentStep + 1);\n//       setNavigationDirection('forward');\n//     } else {\n//       completeTour();\n//     }\n//   }, [currentStep, filteredSteps.length, completeTour]);\n\n//   const handlePrevious = useCallback(() => {\n//     if (currentStep > 0) {\n//       setCurrentStep(currentStep - 1);\n//       setNavigationDirection('backward');\n//     }\n//   }, [currentStep]);\n\n//   const handleSkip = useCallback(() => {\n//     completeTour();\n//     onSkip?.();\n//   }, [onSkip, completeTour]);\n\n//   if (!isVisible || !portalContainer) return null;\n\n//   const tourContent = (\n//     <AnimatePresence>\n//       <motion.div\n//         className={`tour-overlay-${tourId} fixed inset-0 flex items-center justify-center ${\n//           theme === 'dark' ? 'bg-black/70' : 'bg-black/60'\n//         }`}\n//         initial={{ opacity: 0 }}\n//         animate={{ opacity: 1 }}\n//         exit={{ opacity: 0 }}\n//         // style={{ zIndex: 2147483647 }}\n//       >\n//         {currentStep === -1 && welcomeScreen.enabled ? (\n//           <motion.div\n//             className={`tour-content-${tourId} p-6 rounded-2xl w-[90%] max-w-md backdrop-blur-sm bg-opacity-95 shadow-xl ring-1 ${\n//               theme === 'dark'\n//                 ? 'bg-white text-gray-900 ring-gray-200/50'\n//                 : 'bg-gray-900 text-gray-100 ring-gray-700/50'\n//             }`}\n//             style={welcomeStyle}\n//             initial={{ opacity: 0, scale: 0.95, y: 20 }}\n//             animate={{ opacity: 1, scale: 1, y: 0 }}\n//             exit={{ opacity: 0, scale: 0.95, y: 20 }}\n//             transition={{ duration: 0.3, ease: 'easeOut' }}\n//             role=\"dialog\"\n//             aria-labelledby={`tour-welcome-title-${tourId}`}\n//           >\n//             {welcomeScreen.content &&\n//             typeof welcomeScreen.content === 'object' &&\n//             !Array.isArray(welcomeScreen.content) &&\n//             'title' in welcomeScreen.content &&\n//             'message' in welcomeScreen.content ? (\n//               <>\n//                 <div className=\"flex justify-between items-center mb-4\">\n//                   <h3\n//                     id={`tour-welcome-title-${tourId}`}\n//                     className=\"text-xl font-bold tracking-tight\"\n//                   >\n//                     {(welcomeScreen.content as PredefinedWelcomeConfig).title}\n//                   </h3>\n//                   <button\n//                     onClick={handleSkip}\n//                     className={`p-2 rounded-full transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'text-gray-500 hover:bg-gray-200 hover:text-gray-700'\n//                         : 'text-gray-400 hover:bg-gray-700 hover:text-gray-200'\n//                     }`}\n//                     aria-label=\"Skip tour\"\n//                   >\n//                     <X size={20} />\n//                   </button>\n//                 </div>\n//                 <p className=\"text-base leading-relaxed mb-6 font-medium\">\n//                   {(welcomeScreen.content as PredefinedWelcomeConfig).message}\n//                 </p>\n//                 <div className=\"flex justify-between items-center\">\n//                   <button\n//                     onClick={handleSkip}\n//                     className={`text-sm font-medium transition-colors duration-200 ${\n//                       theme === 'dark' ? 'text-gray-500 hover:text-gray-700' : 'text-gray-400 hover:text-gray-200'\n//                     }`}\n//                   >\n//                     {buttonLabels.skip || 'Skip Tour'}\n//                   </button>\n//                   <button\n//                     onClick={handleStart}\n//                     className={`px-4 py-2 rounded-lg font-medium text-sm text-white transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600'\n//                         : 'bg-gradient-to-r from-blue-700 to-blue-800 hover:from-blue-600 hover:to-blue-700'\n//                     }`}\n//                   >\n//                     {(welcomeScreen.content as PredefinedWelcomeConfig).startButtonText ||\n//                       buttonLabels.start ||\n//                       'Start Tour'}\n//                   </button>\n//                 </div>\n//               </>\n//             ) : (\n//               <>\n//                 {welcomeScreen.content}\n//                 <div className=\"flex justify-between items-center mt-4\">\n//                   <button\n//                     onClick={handleSkip}\n//                     className={`text-sm font-medium transition-colors duration-200 ${\n//                       theme === 'dark' ? 'text-gray-500 hover:text-gray-700' : 'text-gray-400 hover:text-gray-200'\n//                     }`}\n//                   >\n//                     {buttonLabels.skip || 'Skip Tour'}\n//                   </button>\n//                   <button\n//                     onClick={handleStart}\n//                     className={`px-4 py-2 rounded-lg font-medium text-sm text-white transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600'\n//                         : 'bg-gradient-to-r from-blue-700 to-blue-800 hover:from-blue-600 hover:to-blue-700'\n//                     }`}\n//                   >\n//                     {buttonLabels.start || 'Start Tour'}\n//                   </button>\n//                 </div>\n//               </>\n//             )}\n//           </motion.div>\n//         ) : (\n//           currentStep < filteredSteps.length &&\n//           (filteredSteps[currentStep].position === 'center' ? (\n//             <motion.div\n//               className={`tour-content-${tourId} p-6 rounded-2xl max-w-md w-full mx-auto mt-20 backdrop-blur-sm bg-opacity-95 shadow-xl ring-1 ${\n//                 theme === 'dark'\n//                   ? 'bg-white text-gray-900 ring-gray-200/50'\n//                   : 'bg-gray-900 text-gray-100 ring-gray-700/50'\n//               }`}\n//               initial={{ opacity: 0, scale: 0.95, y: 20 }}\n//               animate={{ opacity: 1, scale: 1, y: 0 }}\n//               exit={{ opacity: 0, scale: 0.95, y: 20 }}\n//               transition={{ duration: 0.3, ease: 'easeOut' }}\n//               role=\"dialog\"\n//               aria-labelledby={`tour-step-title-${tourId}-${currentStep}`}\n//             >\n//               <div className=\"flex justify-between items-center mb-4\">\n//                 <h3\n//                   id={`tour-step-title-${tourId}-${currentStep}`}\n//                   className=\"text-xl font-bold tracking-tight\"\n//                 >\n//                   Welcome to the Tour!\n//                 </h3>\n//                 <button\n//                   onClick={handleSkip}\n//                   className={`p-2 rounded-full transition-all duration-200 ${\n//                     theme === 'dark'\n//                       ? 'text-gray-500 hover:bg-gray-200 hover:text-gray-700'\n//                       : 'text-gray-400 hover:bg-gray-700 hover:text-gray-200'\n//                   }`}\n//                   aria-label=\"Skip tour\"\n//                 >\n//                   <X size={20} />\n//                 </button>\n//               </div>\n//               <p className=\"text-base leading-relaxed mb-6 font-medium\">\n//                 {getStepContent(filteredSteps[currentStep])}\n//               </p>\n//               <div className=\"mb-4\">\n//                 <div className=\"relative h-2 rounded-full bg-gray-200 dark:bg-gray-700\">\n//                   <div\n//                     className=\"absolute h-2 bg-blue-500 rounded-full transition-all duration-300\"\n//                     style={{ width: `${((currentStep + 1) / filteredSteps.length) * 100}%` }}\n//                   />\n//                 </div>\n//                 {showProgressDots && (\n//                   <div className=\"flex justify-center gap-2 mt-2\">\n//                     {filteredSteps.map((_, index) => (\n//                       <div\n//                         key={index}\n//                         className={`w-2 h-2 rounded-full ${\n//                           index === currentStep\n//                             ? 'bg-blue-500'\n//                             : theme === 'dark'\n//                             ? 'bg-gray-400'\n//                             : 'bg-gray-500'\n//                         }`}\n//                       />\n//                     ))}\n//                   </div>\n//                 )}\n//               </div>\n//               <div className=\"flex justify-between items-center\">\n//                 <button\n//                   onClick={handleSkip}\n//                   className={`text-sm font-medium transition-colors duration-200 ${\n//                     theme === 'dark' ? 'text-gray-500 hover:text-gray-700' : 'text-gray-400 hover:text-gray-200'\n//                   }`}\n//                 >\n//                   {buttonLabels.skip || 'Skip Tour'}\n//                 </button>\n//                 <div className=\"flex items-center gap-3\">\n//                   <button\n//                     onClick={handlePrevious}\n//                     disabled={currentStep === 0}\n//                     className={`px-4 py-2 rounded-lg font-medium text-sm text-white transition-all duration-200 ${\n//                       currentStep === 0\n//                         ? 'bg-gray-300 text-gray-500 cursor-not-allowed'\n//                         : theme === 'dark'\n//                         ? 'bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-500 hover:to-gray-600'\n//                         : 'bg-gradient-to-r from-gray-700 to-gray-800 hover:from-gray-600 hover:to-gray-700'\n//                     }`}\n//                   >\n//                     {buttonLabels.previous || 'Previous'}\n//                   </button>\n//                   <span\n//                     className={`text-sm font-medium ${\n//                       theme === 'dark' ? 'text-gray-500' : 'text-gray-400'\n//                     }`}\n//                   >\n//                     {currentStep + 1} / {filteredSteps.length}\n//                   </span>\n//                   <button\n//                     onClick={handleNext}\n//                     className={`px-4 py-2 rounded-lg font-medium text-sm text-white transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600'\n//                         : 'bg-gradient-to-r from-blue-700 to-blue-800 hover:from-blue-600 hover:to-blue-700'\n//                     }`}\n//                   >\n//                     {currentStep < filteredSteps.length - 1\n//                       ? buttonLabels.next || 'Next'\n//                       : buttonLabels.finish || 'Finish'}\n//                   </button>\n//                 </div>\n//               </div>\n//             </motion.div>\n//           ) : (\n//             <motion.div\n//               className={`tour-content-${tourId} absolute p-5 rounded-xl max-w-sm min-w-[200px] backdrop-blur-sm bg-opacity-95 shadow-xl ring-1 ${\n//                 theme === 'dark'\n//                   ? 'bg-white text-gray-900 ring-gray-200/50'\n//                   : 'bg-gray-900 text-gray-100 ring-gray-700/50'\n//               }`}\n//               style={{\n//                 top: tooltipPosition.top,\n//                 left: tooltipPosition.left,\n//                 transform: tooltipTransform,\n//                 margin: '0 10px',\n//               }}\n//               initial={{\n//                 opacity: 0,\n//                 y: filteredSteps[currentStep].position?.includes('top')\n//                   ? 10\n//                   : filteredSteps[currentStep].position?.includes('bottom')\n//                   ? -10\n//                   : 0,\n//                 x: filteredSteps[currentStep].position?.includes('left')\n//                   ? 10\n//                   : filteredSteps[currentStep].position?.includes('right')\n//                   ? -10\n//                   : 0,\n//               }}\n//               animate={{ opacity: 1, y: 0, x: 0 }}\n//               exit={{\n//                 opacity: 0,\n//                 y: filteredSteps[currentStep].position?.includes('top')\n//                   ? 10\n//                   : filteredSteps[currentStep].position?.includes('bottom')\n//                   ? -10\n//                   : 0,\n//                 x: filteredSteps[currentStep].position?.includes('left')\n//                   ? 10\n//                   : filteredSteps[currentStep].position?.includes('right')\n//                   ? -10\n//                   : 0,\n//               }}\n//               transition={{ duration: 0.3, ease: 'easeOut' }}\n//               role=\"dialog\"\n//               aria-labelledby={`tour-step-title-${tourId}-${currentStep}`}\n//             >\n//               <div className=\"arrow\" style={arrowStyle} />\n//               <p\n//                 id={`tour-step-title-${tourId}-${currentStep}`}\n//                 className=\"text-base leading-relaxed mb-4 font-medium\"\n//               >\n//                 {getStepContent(filteredSteps[currentStep])}\n//               </p>\n//               <div className=\"mb-3\">\n//                 <div className=\"relative h-1.5 rounded-full bg-gray-200 dark:bg-gray-700\">\n//                   <div\n//                     className=\"absolute h-1.5 bg-blue-500 rounded-full transition-all duration-300\"\n//                     style={{ width: `${((currentStep + 1) / filteredSteps.length) * 100}%` }}\n//                   />\n//                 </div>\n//                 {showProgressDots && (\n//                   <div className=\"flex justify-center gap-1.5 mt-2\">\n//                     {filteredSteps.map((_, index) => (\n//                       <div\n//                         key={index}\n//                         className={`w-1.5 h-1.5 rounded-full ${\n//                           index === currentStep\n//                             ? 'bg-blue-500'\n//                             : theme === 'dark'\n//                             ? 'bg-gray-400'\n//                             : 'bg-gray-500'\n//                         }`}\n//                       />\n//                     ))}\n//                   </div>\n//                 )}\n//               </div>\n//               <div className=\"flex justify-between items-center\">\n//                 <button\n//                   onClick={handleSkip}\n//                   className={`text-sm font-medium transition-colors duration-200 ${\n//                     theme === 'dark' ? 'text-gray-500 hover:text-gray-700' : 'text-gray-400 hover:text-gray-200'\n//                   }`}\n//                 >\n//                   {buttonLabels.skip || 'Skip'}\n//                 </button>\n//                 <div className=\"flex items-center gap-2\">\n//                   <button\n//                     onClick={handlePrevious}\n//                     disabled={currentStep === 0}\n//                     className={`px-3 py-1 rounded-md text-sm font-medium text-white transition-all duration-200 ${\n//                       currentStep === 0\n//                         ? 'bg-gray-300 text-gray-500 cursor-not-allowed'\n//                         : theme === 'dark'\n//                         ? 'bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-500 hover:to-gray-600'\n//                         : 'bg-gradient-to-r from-gray-700 to-gray-800 hover:from-gray-600 hover:to-gray-700'\n//                     }`}\n//                   >\n//                     {buttonLabels.previous || 'Previous'}\n//                   </button>\n//                   <span\n//                     className={`text-xs font-medium ${\n//                       theme === 'dark' ? 'text-gray-500' : 'text-gray-400'\n//                     }`}\n//                   >\n//                     {currentStep + 1} / {filteredSteps.length}\n//                   </span>\n//                   <button\n//                     onClick={handleNext}\n//                     className={`px-3 py-1 rounded-md text-sm font-medium text-white transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600'\n//                         : 'bg-gradient-to-r from-blue-700 to-blue-800 hover:from-blue-600 hover:to-blue-700'\n//                     }`}\n//                   >\n//                     {currentStep < filteredSteps.length - 1\n//                       ? buttonLabels.next || 'Next'\n//                       : buttonLabels.finish || 'Finish'}\n//                   </button>\n//                 </div>\n//               </div>\n//             </motion.div>\n//           ))\n//         )}\n//       </motion.div>\n//     </AnimatePresence>\n//   );\n\n//   return createPortal(tourContent, portalContainer);\n// }\n\n\n\n\n\n\n\n\n\n\n\n\n\n// 'use client';\n// import { useState, useEffect, useCallback, useMemo } from 'react';\n// import { createPortal } from 'react-dom';\n// import { motion, AnimatePresence } from 'framer-motion';\n// import { X } from 'lucide-react';\n\n// // Interface for predefined welcome screen configuration\n// export interface PredefinedWelcomeConfig {\n//   title: string;\n//   message: string;\n//   startButtonText?: string;\n//   position?: {\n//     top?: number | string; // e.g., 200, '200px', '50%'\n//     left?: number | string; // e.g., 300, '300px', '50%'\n//     transform?: string; // e.g., 'translate(-50%, -50%)'\n//   };\n//   mobilePosition?: {\n//     top?: number | string;\n//     left?: number | string;\n//     transform?: string;\n//   };\n// }\n\n// // Interface for TourStep with offset for fine-tuning\n// export interface TourStep {\n//   target: string;\n//   content: string;\n//   contentDesktop?: string;\n//   contentMobile?: string;\n//   position?:\n//     | 'top'\n//     | 'top-left'\n//     | 'top-right'\n//     | 'bottom'\n//     | 'bottom-left'\n//     | 'bottom-right'\n//     | 'left'\n//     | 'center-left'\n//     | 'right'\n//     | 'center-right'\n//     | 'center';\n//   customPosition?: {\n//     top?: number | string;\n//     left?: number | string;\n//     transform?: string;\n//   };\n//   offset?: {\n//     x?: number;\n//     y?: number;\n//   };\n//   device?: 'desktop' | 'mobile' | 'both';\n// }\n\n// // Interface for TourProps\n// export interface TourProps {\n//   tourId: string;\n//   steps: TourStep[];\n//   theme: 'light' | 'dark';\n//   deviceMode?: 'desktop' | 'tablet' | 'mobile';\n//   isActive?: boolean;\n//   onComplete?: () => void;\n//   onSkip?: () => void;\n//   onStart?: () => void;\n//   onStepChange?: (stepIndex: number) => void;\n//   welcomeScreen?: {\n//     enabled: boolean;\n//     content?: React.ReactNode | PredefinedWelcomeConfig;\n//   };\n//   buttonLabels?: {\n//     next?: string;\n//     previous?: string;\n//     skip?: string;\n//     finish?: string;\n//     start?: string;\n//   };\n//   showProgressDots?: boolean;\n// }\n\n// /**\n//  * A React component that renders an interactive guided tour with bulletproof z-index handling.\n//  * Uses React portals to render outside the normal DOM hierarchy, preventing any z-index conflicts.\n//  * Styled with Tailwind CSS, with dynamic highlight styles injected for theme support.\n//  */\n// export default function Tour({\n//   tourId,\n//   steps = [],\n//   theme,\n//   deviceMode,\n//   isActive = true,\n//   onComplete,\n//   onSkip,\n//   onStart,\n//   onStepChange,\n//   welcomeScreen = { enabled: false },\n//   buttonLabels = {},\n//   showProgressDots = false,\n// }: TourProps) {\n//   const [currentStep, setCurrentStep] = useState(welcomeScreen.enabled ? -1 : 0);\n//   const [isVisible, setIsVisible] = useState(isActive);\n//   const [tooltipPosition, setTooltipPosition] = useState<{ top: number | string; left: number | string }>({ top: 0, left: 0 });\n//   const [tooltipTransform, setTooltipTransform] = useState<string>('');\n//   const [arrowStyle, setArrowStyle] = useState<React.CSSProperties>({});\n//   const [navigationDirection, setNavigationDirection] = useState<'forward' | 'backward' | null>(null);\n//   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n//   const [welcomeStyle, setWelcomeStyle] = useState<React.CSSProperties>({});\n\n//   // Create and manage portal container\n//   useEffect(() => {\n//     const container = document.createElement('div');\n//     container.id = `tour-portal-${tourId}`;\n//     container.className = 'fixed inset-0 pointer-events-none z-[2147483647]';\n//     document.body.appendChild(container);\n//     setPortalContainer(container);\n\n//     return () => {\n//       if (container && container.parentNode) {\n//         container.parentNode.removeChild(container);\n//       }\n//     };\n//   }, [tourId]);\n\n//   // Inject dynamic styles for highlight effect\n//   useEffect(() => {\n//     if (!isVisible) return;\n\n//     const styleId = `tour-styles-${tourId}`;\n//     let existingStyle = document.getElementById(styleId);\n\n//     if (!existingStyle) {\n//       const style = document.createElement('style');\n//       style.id = styleId;\n//       style.textContent = `\n//         .tour-highlight-${tourId} {\n//           position: relative !important;\n//           z-index: 2147483646 !important;\n//           box-shadow: 0 0 8px 2px rgba(29, 78, 216, 0.5) !important; /* Light theme: bg-blue-700 */\n//           border: 2px solid rgba(29, 78, 216, 0.7) !important;\n//           border-radius: 6px !important;\n//           transition: all 0.3s ease !important;\n//         }\n\n//         .tour-overlay-${tourId} {\n//           pointer-events: auto !important;\n//         }\n\n//         .tour-content-${tourId} {\n//           pointer-events: auto !important;\n//         }\n\n//         [data-theme=\"dark\"] .tour-highlight-${tourId}, .dark .tour-highlight-${tourId} {\n//           box-shadow: 0 0 8px 2px rgba(37, 99, 235, 0.5) !important; /* Dark theme: bg-blue-600 */\n//           border: 2px solid rgba(37, 99, 235, 0.7) !important;\n//         }\n//       `;\n//       document.head.appendChild(style);\n//     }\n\n//     return () => {\n//       const style = document.getElementById(styleId);\n//       if (style && style.parentNode) {\n//         style.parentNode.removeChild(style);\n//       }\n//     };\n//   }, [isVisible, tourId]);\n\n//   // Detect if we're on mobile\n//   const isMobile =\n//     deviceMode === 'mobile' ||\n//     (typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches);\n\n//   // Filter steps based on device\n//   const filteredSteps = useMemo(() => {\n//     return steps.filter((step) => {\n//       if (!step.device || step.device === 'both') return true;\n//       return step.device === (isMobile ? 'mobile' : 'desktop');\n//     });\n//   }, [steps, isMobile]);\n\n//   // Sync isVisible with isActive prop\n//   useEffect(() => {\n//     setIsVisible(isActive);\n//     if (isActive && welcomeScreen.enabled && currentStep === -1) {\n//       onStart?.();\n//     }\n//   }, [isActive, welcomeScreen.enabled, currentStep, onStart]);\n\n//   // Handle responsive welcome screen positioning\n//   useEffect(() => {\n//     if (!isVisible || currentStep !== -1 || !welcomeScreen.enabled) return;\n\n//     const updateResponsiveStyles = () => {\n//       const viewportWidth = window.innerWidth;\n//       const viewportHeight = window.innerHeight;\n\n//       // Welcome screen styles\n//       const config = welcomeScreen.content as PredefinedWelcomeConfig;\n//       const hasCustomPosition = config?.position || (isMobile && config?.mobilePosition);\n\n//       if (hasCustomPosition) {\n//         // Default center position (50% viewport)\n//         let defaultTop = viewportHeight * 0.5;\n//         let defaultLeft = viewportWidth * 0.5;\n//         let transform = 'translate(-50%, -50%)';\n\n//         // User-provided offsets\n//         let userTop: number | string = isMobile && config.mobilePosition?.top ? config.mobilePosition.top : config.position?.top ?? 0;\n//         let userLeft: number | string = isMobile && config.mobilePosition?.left ? config.mobilePosition.left : config.position?.left ?? 0;\n//         let userTransform = isMobile && config.mobilePosition?.transform ? config.mobilePosition.transform : config.position?.transform;\n\n//         // Convert userTop and userLeft to pixels\n//         if (typeof userTop === 'string') {\n//           if (userTop.endsWith('rem')) {\n//             userTop = parseFloat(userTop) * 16;\n//           } else if (userTop.endsWith('%')) {\n//             userTop = (parseFloat(userTop) / 100) * viewportHeight;\n//           } else if (userTop.endsWith('px')) {\n//             userTop = parseFloat(userTop);\n//           }\n//         }\n//         if (typeof userLeft === 'string') {\n//           if (userLeft.endsWith('rem')) {\n//             userLeft = parseFloat(userLeft) * 16;\n//           } else if (userLeft.endsWith('%')) {\n//             userLeft = (parseFloat(userLeft) / 100) * viewportWidth;\n//           } else if (userLeft.endsWith('px')) {\n//             userLeft = parseFloat(userLeft);\n//           }\n//         }\n\n//         // Calculate new position: default + offset\n//         let top = defaultTop + (typeof userTop === 'number' ? userTop : 0);\n//         let left = defaultLeft + (typeof userLeft === 'number' ? userLeft : 0);\n\n//         // Boundary checks\n//         const welcomeWidth = Math.min(viewportWidth * 0.9, 448); // w-[90%] or max-w-md\n//         const welcomeHeight = 300; // Approximate height\n//         if (top < 10) top = 10;\n//         if (top + welcomeHeight > viewportHeight - 10) top = viewportHeight - welcomeHeight - 10;\n//         if (left < 10) left = 10;\n//         if (left + welcomeWidth > viewportWidth - 10) left = viewportWidth - welcomeWidth - 10;\n\n//         setWelcomeStyle({\n//           position: 'absolute',\n//           top,\n//           left,\n//           transform: userTransform ?? transform,\n//         });\n//       } else {\n//         // Default: rely on Flexbox centering\n//         setWelcomeStyle({});\n//       }\n//     };\n\n//     updateResponsiveStyles();\n//     window.addEventListener('resize', updateResponsiveStyles);\n//     return () => window.removeEventListener('resize', updateResponsiveStyles);\n//   }, [isVisible, currentStep, welcomeScreen, isMobile]);\n\n//   // Find the target element\n//   const getTargetElement = (step: TourStep): Element | null => {\n//     const selector = step.target;\n//     let targetElement: Element | null = document.querySelector(selector);\n\n//     if (!targetElement && selector.startsWith('.')) {\n//       const elements = document.querySelectorAll(selector);\n//       targetElement = Array.from(elements).find((el) => {\n//         const rect = el.getBoundingClientRect();\n//         return rect.width > 0 && rect.height > 0 && window.getComputedStyle(el).display !== 'none';\n//       }) || null;\n//     }\n\n//     return targetElement;\n//   };\n\n//   const getStepContent = (step: TourStep): string => {\n//     if (isMobile && step.contentMobile) {\n//       return step.contentMobile;\n//     } else if (!isMobile && step.contentDesktop) {\n//       return step.contentDesktop;\n//     }\n//     return step.content;\n//   };\n\n//   const createArrowStyle = (\n//     position: string,\n//     rect: DOMRect,\n//     targetCenterX: number,\n//     targetCenterY: number,\n//     left: number,\n//     tooltipWidth: number,\n//     theme: string\n//   ): React.CSSProperties => {\n//     const baseArrow: React.CSSProperties = {\n//       position: 'absolute',\n//       width: '0',\n//       height: '0',\n//       borderStyle: 'solid',\n//       zIndex: 1,\n//     };\n\n//     const triangleColor = theme === 'dark' ? '#ffffff' : '#111827';\n//     let arrow: React.CSSProperties = { ...baseArrow };\n\n//     const borderRadiusOffset = '16px';\n//     const cornerVerticalOffset = '-7px';\n\n//     switch (position) {\n//       case 'top':\n//         arrow = {\n//           ...arrow,\n//           bottom: '-7px',\n//           left: '50%',\n//           borderWidth: '7px 7px 0 7px',\n//           borderColor: `${triangleColor} transparent transparent transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'top-left':\n//         arrow = {\n//           ...arrow,\n//           bottom: cornerVerticalOffset,\n//           left: borderRadiusOffset,\n//           borderWidth: '7px 7px 0 7px',\n//           borderColor: `${triangleColor} transparent transparent transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'top-right':\n//         arrow = {\n//           ...arrow,\n//           bottom: cornerVerticalOffset,\n//           right: borderRadiusOffset,\n//           borderWidth: '7px 7px 0 7px',\n//           borderColor: `${triangleColor} transparent transparent transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'bottom':\n//         arrow = {\n//           ...arrow,\n//           top: '-7px',\n//           left: '50%',\n//           borderWidth: '0 7px 7px 7px',\n//           borderColor: `transparent transparent ${triangleColor} transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(-1px -1px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'bottom-left':\n//         arrow = {\n//           ...arrow,\n//           top: '-7px',\n//           left: borderRadiusOffset,\n//           borderWidth: '0 7px 7px 7px',\n//           borderColor: `transparent transparent ${triangleColor} transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(-1px -1px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'bottom-right':\n//         arrow = {\n//           ...arrow,\n//           top: '-7px',\n//           right: borderRadiusOffset,\n//           borderWidth: '0 7px 7px 7px',\n//           borderColor: `transparent transparent ${triangleColor} transparent`,\n//           transform: 'translateX(-50%)',\n//           filter: 'drop-shadow(-1px -1px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'left':\n//         arrow = {\n//           ...arrow,\n//           right: '-7px',\n//           top: '50%',\n//           borderWidth: '7px 7px 7px 0',\n//           borderColor: `transparent ${triangleColor} transparent transparent`,\n//           transform: 'translateY(-50%)',\n//           filter: 'drop-shadow(2px -1px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'center-left':\n//         arrow = {\n//           ...arrow,\n//           left: '-7px',\n//           top: '50%',\n//           borderWidth: '7px 0 7px 7px',\n//           borderColor: `transparent transparent transparent ${triangleColor}`,\n//           transform: 'translateY(-50%)',\n//           filter: 'drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'right':\n//         arrow = {\n//           ...arrow,\n//           left: '-7px',\n//           top: '50%',\n//           borderWidth: '7px 0 7px 7px',\n//           borderColor: `transparent transparent transparent ${triangleColor}`,\n//           transform: 'translateY(-50%)',\n//           filter: 'drop-shadow(-1px 2px 3px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//       case 'center-right':\n//         arrow = {\n//           ...arrow,\n//           right: '-7px',\n//           top: '50%',\n//           borderWidth: '7px 7px 7px 0',\n//           borderColor: `transparent ${triangleColor} transparent transparent`,\n//           transform: 'translateY(-50%)',\n//           filter: 'drop-shadow(2px -1px 2px rgba(0, 0, 0, 0.1))',\n//         };\n//         break;\n//     }\n\n//     return arrow;\n//   };\n\n//   // Position tooltip and handle scroll/resize\n//   useEffect(() => {\n//     if (!isVisible || currentStep < 0 || currentStep >= filteredSteps.length) return;\n\n//     const step = filteredSteps[currentStep];\n//     const targetElement = getTargetElement(step);\n\n//     if (!targetElement) {\n//       console.warn(\n//         `Tour target not found: ${step.target} (device: ${step.device || 'both'}, step: ${currentStep + 1}/${filteredSteps.length})`\n//       );\n//       if (navigationDirection !== 'backward' && currentStep < filteredSteps.length - 1) {\n//         setNavigationDirection('forward');\n//         setCurrentStep(currentStep + 1);\n//       }\n//       return;\n//     }\n\n//     const updatePosition = () => {\n//       targetElement.scrollIntoView({\n//         behavior: 'smooth',\n//         block: 'nearest',\n//         inline: 'nearest',\n//       });\n\n//       const headerHeight = 64;\n//       const rect = targetElement.getBoundingClientRect();\n//       if (rect.top < headerHeight) {\n//         window.scrollBy({\n//           top: rect.top - headerHeight,\n//           behavior: 'smooth',\n//         });\n//       }\n\n//       if (step.customPosition) {\n//         setTooltipPosition({\n//           top: step.customPosition.top ?? '50%',\n//           left: step.customPosition.left ?? '50%',\n//         });\n//         setTooltipTransform(step.customPosition.transform ?? '');\n//         setArrowStyle({ display: 'none' });\n//         return;\n//       }\n\n//       if (step.position === 'center') {\n//         setTooltipPosition({ top: '50%', left: '50%' });\n//         setTooltipTransform('translate(-50%, -50%)');\n//         setArrowStyle({ display: 'none' });\n//         return;\n//       }\n\n//       const viewportWidth = window.innerWidth;\n//       const viewportHeight = window.innerHeight;\n//       const tooltipWidth = 320;\n//       const tooltipHeight = 150;\n//       let top: number = 0;\n//       let left: number = 0;\n//       let transform = '';\n//       const position = step.position || 'bottom';\n//       const offsetX = step.offset?.x || 0;\n//       const offsetY = step.offset?.y || 10;\n\n//       const targetCenterX = rect.left + rect.width / 2;\n//       const targetCenterY = rect.top + rect.height / 2;\n\n//       switch (position) {\n//         case 'top':\n//           top = rect.top - tooltipHeight - offsetY;\n//           left = rect.left + rect.width / 2 + offsetX;\n//           transform = 'translateX(-50%)';\n//           break;\n//         case 'top-left':\n//           top = rect.top - tooltipHeight - offsetY;\n//           left = rect.left + offsetX;\n//           transform = '';\n//           break;\n//         case 'top-right':\n//           top = rect.top - tooltipHeight - offsetY;\n//           left = rect.right - tooltipWidth + offsetX;\n//           transform = '';\n//           break;\n//         case 'bottom':\n//           top = rect.bottom + offsetY;\n//           left = rect.left + rect.width / 2 + offsetX;\n//           transform = 'translateX(-50%)';\n//           break;\n//         case 'bottom-left':\n//           top = rect.bottom + offsetY;\n//           left = rect.left + offsetX;\n//           transform = '';\n//           break;\n//         case 'bottom-right':\n//           top = rect.bottom + offsetY;\n//           left = rect.right - tooltipWidth + offsetX;\n//           transform = '';\n//           break;\n//         case 'left':\n//           top = rect.top + rect.height / 2 + offsetY;\n//           left = rect.left - tooltipWidth - 10 + offsetX;\n//           transform = 'translateY(-50%)';\n//           break;\n//         case 'center-left':\n//           top = rect.top + rect.height / 2 + offsetY;\n//           left = rect.left + offsetX;\n//           transform = 'translateY(-50%)';\n//           break;\n//         case 'right':\n//           top = rect.top + rect.height / 2 + offsetY;\n//           left = rect.right + 10 + offsetX;\n//           transform = 'translateY(-50%)';\n//           break;\n//         case 'center-right':\n//           top = rect.top + rect.height / 2 + offsetY;\n//           left = rect.right - tooltipWidth + offsetX;\n//           transform = 'translateY(-50%)';\n//           break;\n//       }\n\n//       if (top < 10) top = 10;\n//       if (top + tooltipHeight > viewportHeight - 10) top = viewportHeight - tooltipHeight - 10;\n//       if (left < 10) left = 10;\n//       if (left + tooltipWidth > viewportWidth - 10) left = viewportWidth - tooltipWidth - 10;\n\n//       setTooltipPosition({ top, left });\n//       setTooltipTransform(transform);\n\n//       const arrow = createArrowStyle(position, rect, targetCenterX, targetCenterY, left, tooltipWidth, theme);\n//       setArrowStyle(arrow);\n//     };\n\n//     updatePosition();\n\n//     const handleResizeOrScroll = () => updatePosition();\n//     window.addEventListener('resize', handleResizeOrScroll);\n//     window.addEventListener('scroll', handleResizeOrScroll);\n\n//     return () => {\n//       window.removeEventListener('resize', handleResizeOrScroll);\n//       window.removeEventListener('scroll', handleResizeOrScroll);\n//     };\n//   }, [currentStep, filteredSteps, isVisible, deviceMode, theme, navigationDirection]);\n\n//   // Highlight the target element\n//   useEffect(() => {\n//     if (!isVisible || currentStep < 0 || currentStep >= filteredSteps.length) return;\n\n//     const step = filteredSteps[currentStep];\n//     const targetElement = getTargetElement(step);\n//     if (!targetElement) return;\n\n//     const highlightClass = `tour-highlight-${tourId}`;\n//     targetElement.classList.add(highlightClass);\n\n//     return () => {\n//       targetElement.classList.remove(highlightClass);\n//     };\n//   }, [currentStep, filteredSteps, isVisible, tourId]);\n\n//   // Keyboard navigation\n//   useEffect(() => {\n//     if (!isVisible) return;\n\n//     const handleKeyDown = (e: KeyboardEvent) => {\n//       if (e.key === 'ArrowRight' || e.key === 'Enter') {\n//         e.preventDefault();\n//         if (currentStep === -1) {\n//           handleStart();\n//         } else {\n//           handleNext();\n//         }\n//       } else if (e.key === 'ArrowLeft' && currentStep > 0) {\n//         e.preventDefault();\n//         handlePrevious();\n//       } else if (e.key === 'Escape') {\n//         e.preventDefault();\n//         handleSkip();\n//       }\n//     };\n\n//     window.addEventListener('keydown', handleKeyDown);\n//     return () => window.removeEventListener('keydown', handleKeyDown);\n//   }, [currentStep, isVisible]);\n\n//   // Notify step change\n//   useEffect(() => {\n//     if (isVisible && currentStep >= 0) {\n//       onStepChange?.(currentStep);\n//     }\n//   }, [currentStep, isVisible, onStepChange]);\n\n//   // Navigation handlers\n//   const completeTour = useCallback(() => {\n//     setIsVisible(false);\n//     setCurrentStep(welcomeScreen.enabled ? -1 : 0);\n//     onComplete?.();\n//   }, [onComplete, welcomeScreen.enabled]);\n\n//   const handleStart = useCallback(() => {\n//     setCurrentStep(0);\n//     setNavigationDirection('forward');\n//     onStart?.();\n//   }, [onStart]);\n\n//   const handleNext = useCallback(() => {\n//     if (currentStep < filteredSteps.length - 1) {\n//       setCurrentStep(currentStep + 1);\n//       setNavigationDirection('forward');\n//     } else {\n//       completeTour();\n//     }\n//   }, [currentStep, filteredSteps.length, completeTour]);\n\n//   const handlePrevious = useCallback(() => {\n//     if (currentStep > 0) {\n//       setCurrentStep(currentStep - 1);\n//       setNavigationDirection('backward');\n//     }\n//   }, [currentStep]);\n\n//   const handleSkip = useCallback(() => {\n//     completeTour();\n//     onSkip?.();\n//   }, [onSkip, completeTour]);\n\n//   if (!isVisible || !portalContainer) return null;\n\n//   const tourContent = (\n//     <AnimatePresence>\n//       <motion.div\n//         className={`tour-overlay-${tourId} fixed inset-0 flex items-center justify-center ${\n//           theme === 'dark' ? 'bg-black/70' : 'bg-black/60'\n//         }`}\n//         initial={{ opacity: 0 }}\n//         animate={{ opacity: 1 }}\n//         exit={{ opacity: 0 }}\n//         // style={{ zIndex: 2147483647 }}\n//       >\n//         {currentStep === -1 && welcomeScreen.enabled ? (\n//           <motion.div\n//             className={`tour-content-${tourId} p-6 rounded-2xl w-[90%] max-w-md backdrop-blur-sm bg-opacity-95 shadow-xl ring-1 ${\n//               theme === 'dark'\n//                 ? 'bg-white text-gray-900 ring-gray-200/50'\n//                 : 'bg-gray-900 text-gray-100 ring-gray-700/50'\n//             }`}\n//             style={welcomeStyle}\n//             initial={{ opacity: 0, scale: 0.95, y: 20 }}\n//             animate={{ opacity: 1, scale: 1, y: 0 }}\n//             exit={{ opacity: 0, scale: 0.95, y: 20 }}\n//             transition={{ duration: 0.3, ease: 'easeOut' }}\n//             role=\"dialog\"\n//             aria-labelledby={`tour-welcome-title-${tourId}`}\n//           >\n//             {welcomeScreen.content &&\n//             typeof welcomeScreen.content === 'object' &&\n//             !Array.isArray(welcomeScreen.content) &&\n//             'title' in welcomeScreen.content &&\n//             'message' in welcomeScreen.content ? (\n//               <>\n//                 <div className=\"flex justify-between items-center mb-4\">\n//                   <h3\n//                     id={`tour-welcome-title-${tourId}`}\n//                     className=\"text-xl font-bold tracking-tight\"\n//                   >\n//                     {(welcomeScreen.content as PredefinedWelcomeConfig).title}\n//                   </h3>\n//                   <button\n//                     onClick={handleSkip}\n//                     className={`p-2 rounded-full transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'text-gray-500 hover:bg-gray-200 hover:text-gray-700'\n//                         : 'text-gray-400 hover:bg-gray-700 hover:text-gray-200'\n//                     }`}\n//                     aria-label=\"Skip tour\"\n//                   >\n//                     <X size={20} />\n//                   </button>\n//                 </div>\n//                 <p className=\"text-base leading-relaxed mb-6 font-medium\">\n//                   {(welcomeScreen.content as PredefinedWelcomeConfig).message}\n//                 </p>\n//                 <div className=\"flex justify-between items-center\">\n//                   <button\n//                     onClick={handleSkip}\n//                     className={`text-sm font-medium transition-colors duration-200 ${\n//                       theme === 'dark' ? 'text-gray-500 hover:text-gray-700' : 'text-gray-400 hover:text-gray-200'\n//                     }`}\n//                   >\n//                     {buttonLabels.skip || 'Skip Tour'}\n//                   </button>\n//                   <button\n//                     onClick={handleStart}\n//                     className={`px-4 py-2 rounded-lg font-medium text-sm text-white transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600'\n//                         : 'bg-gradient-to-r from-blue-700 to-blue-800 hover:from-blue-600 hover:to-blue-700'\n//                     }`}\n//                   >\n//                     {(welcomeScreen.content as PredefinedWelcomeConfig).startButtonText ||\n//                       buttonLabels.start ||\n//                       'Start Tour'}\n//                   </button>\n//                 </div>\n//               </>\n//             ) : (\n//               <>\n//                 {welcomeScreen.content}\n//                 <div className=\"flex justify-between items-center mt-4\">\n//                   <button\n//                     onClick={handleSkip}\n//                     className={`text-sm font-medium transition-colors duration-200 ${\n//                       theme === 'dark' ? 'text-gray-500 hover:text-gray-700' : 'text-gray-400 hover:text-gray-200'\n//                     }`}\n//                   >\n//                     {buttonLabels.skip || 'Skip Tour'}\n//                   </button>\n//                   <button\n//                     onClick={handleStart}\n//                     className={`px-4 py-2 rounded-lg font-medium text-sm text-white transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600'\n//                         : 'bg-gradient-to-r from-blue-700 to-blue-800 hover:from-blue-600 hover:to-blue-700'\n//                     }`}\n//                   >\n//                     {buttonLabels.start || 'Start Tour'}\n//                   </button>\n//                 </div>\n//               </>\n//             )}\n//           </motion.div>\n//         ) : (\n//           currentStep < filteredSteps.length &&\n//           (filteredSteps[currentStep].position === 'center' ? (\n//             <motion.div\n//               className={`tour-content-${tourId} p-6 rounded-2xl max-w-md w-full mx-auto mt-20 backdrop-blur-sm bg-opacity-95 shadow-xl ring-1 ${\n//                 theme === 'dark'\n//                   ? 'bg-white text-gray-900 ring-gray-200/50'\n//                   : 'bg-gray-900 text-gray-100 ring-gray-700/50'\n//               }`}\n//               initial={{ opacity: 0, scale: 0.95, y: 20 }}\n//               animate={{ opacity: 1, scale: 1, y: 0 }}\n//               exit={{ opacity: 0, scale: 0.95, y: 20 }}\n//               transition={{ duration: 0.3, ease: 'easeOut' }}\n//               role=\"dialog\"\n//               aria-labelledby={`tour-step-title-${tourId}-${currentStep}`}\n//             >\n//               <div className=\"flex justify-between items-center mb-4\">\n//                 <h3\n//                   id={`tour-step-title-${tourId}-${currentStep}`}\n//                   className=\"text-xl font-bold tracking-tight\"\n//                 >\n//                   Welcome to the Tour!\n//                 </h3>\n//                 <button\n//                   onClick={handleSkip}\n//                   className={`p-2 rounded-full transition-all duration-200 ${\n//                     theme === 'dark'\n//                       ? 'text-gray-500 hover:bg-gray-200 hover:text-gray-700'\n//                       : 'text-gray-400 hover:bg-gray-700 hover:text-gray-200'\n//                   }`}\n//                   aria-label=\"Skip tour\"\n//                 >\n//                   <X size={20} />\n//                 </button>\n//               </div>\n//               <p className=\"text-base leading-relaxed mb-6 font-medium\">\n//                 {getStepContent(filteredSteps[currentStep])}\n//               </p>\n//               <div className=\"mb-4\">\n//                 <div className=\"relative h-2 rounded-full bg-gray-200 dark:bg-gray-700\">\n//                   <div\n//                     className=\"absolute h-2 bg-blue-500 rounded-full transition-all duration-300\"\n//                     style={{ width: `${((currentStep + 1) / filteredSteps.length) * 100}%` }}\n//                   />\n//                 </div>\n//                 {showProgressDots && (\n//                   <div className=\"flex justify-center gap-2 mt-2\">\n//                     {filteredSteps.map((_, index) => (\n//                       <div\n//                         key={index}\n//                         className={`w-2 h-2 rounded-full ${\n//                           index === currentStep\n//                             ? 'bg-blue-500'\n//                             : theme === 'dark'\n//                             ? 'bg-gray-400'\n//                             : 'bg-gray-500'\n//                         }`}\n//                       />\n//                     ))}\n//                   </div>\n//                 )}\n//               </div>\n//               <div className=\"flex justify-between items-center\">\n//                 <button\n//                   onClick={handleSkip}\n//                   className={`text-sm font-medium transition-colors duration-200 ${\n//                     theme === 'dark' ? 'text-gray-500 hover:text-gray-700' : 'text-gray-400 hover:text-gray-200'\n//                   }`}\n//                 >\n//                   {buttonLabels.skip || 'Skip Tour'}\n//                 </button>\n//                 <div className=\"flex items-center gap-3\">\n//                   <button\n//                     onClick={handlePrevious}\n//                     disabled={currentStep === 0}\n//                     className={`px-4 py-2 rounded-lg font-medium text-sm text-white transition-all duration-200 ${\n//                       currentStep === 0\n//                         ? 'bg-gray-300 text-gray-500 cursor-not-allowed'\n//                         : theme === 'dark'\n//                         ? 'bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-500 hover:to-gray-600'\n//                         : 'bg-gradient-to-r from-gray-700 to-gray-800 hover:from-gray-600 hover:to-gray-700'\n//                     }`}\n//                   >\n//                     {buttonLabels.previous || 'Previous'}\n//                   </button>\n//                   <span\n//                     className={`text-sm font-medium ${\n//                       theme === 'dark' ? 'text-gray-500' : 'text-gray-400'\n//                     }`}\n//                   >\n//                     {currentStep + 1} / {filteredSteps.length}\n//                   </span>\n//                   <button\n//                     onClick={handleNext}\n//                     className={`px-4 py-2 rounded-lg font-medium text-sm text-white transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600'\n//                         : 'bg-gradient-to-r from-blue-700 to-blue-800 hover:from-blue-600 hover:to-blue-700'\n//                     }`}\n//                   >\n//                     {currentStep < filteredSteps.length - 1\n//                       ? buttonLabels.next || 'Next'\n//                       : buttonLabels.finish || 'Finish'}\n//                   </button>\n//                 </div>\n//               </div>\n//             </motion.div>\n//           ) : (\n//             <motion.div\n//               className={`tour-content-${tourId} absolute p-5 rounded-xl max-w-sm min-w-[200px] backdrop-blur-sm bg-opacity-95 shadow-xl ring-1 ${\n//                 theme === 'dark'\n//                   ? 'bg-white text-gray-900 ring-gray-200/50'\n//                   : 'bg-gray-900 text-gray-100 ring-gray-700/50'\n//               }`}\n//               style={{\n//                 top: tooltipPosition.top,\n//                 left: tooltipPosition.left,\n//                 transform: tooltipTransform,\n//                 margin: '0 10px',\n//               }}\n//               initial={{\n//                 opacity: 0,\n//                 y: filteredSteps[currentStep].position?.includes('top')\n//                   ? 10\n//                   : filteredSteps[currentStep].position?.includes('bottom')\n//                   ? -10\n//                   : 0,\n//                 x: filteredSteps[currentStep].position?.includes('left')\n//                   ? 10\n//                   : filteredSteps[currentStep].position?.includes('right')\n//                   ? -10\n//                   : 0,\n//               }}\n//               animate={{ opacity: 1, y: 0, x: 0 }}\n//               exit={{\n//                 opacity: 0,\n//                 y: filteredSteps[currentStep].position?.includes('top')\n//                   ? 10\n//                   : filteredSteps[currentStep].position?.includes('bottom')\n//                   ? -10\n//                   : 0,\n//                 x: filteredSteps[currentStep].position?.includes('left')\n//                   ? 10\n//                   : filteredSteps[currentStep].position?.includes('right')\n//                   ? -10\n//                   : 0,\n//               }}\n//               transition={{ duration: 0.3, ease: 'easeOut' }}\n//               role=\"dialog\"\n//               aria-labelledby={`tour-step-title-${tourId}-${currentStep}`}\n//             >\n//               <div className=\"arrow\" style={arrowStyle} />\n//               <p\n//                 id={`tour-step-title-${tourId}-${currentStep}`}\n//                 className=\"text-base leading-relaxed mb-4 font-medium\"\n//               >\n//                 {getStepContent(filteredSteps[currentStep])}\n//               </p>\n//               <div className=\"mb-3\">\n//                 <div className=\"relative h-1.5 rounded-full bg-gray-200 dark:bg-gray-700\">\n//                   <div\n//                     className=\"absolute h-1.5 bg-blue-500 rounded-full transition-all duration-300\"\n//                     style={{ width: `${((currentStep + 1) / filteredSteps.length) * 100}%` }}\n//                   />\n//                 </div>\n//                 {showProgressDots && (\n//                   <div className=\"flex justify-center gap-1.5 mt-2\">\n//                     {filteredSteps.map((_, index) => (\n//                       <div\n//                         key={index}\n//                         className={`w-1.5 h-1.5 rounded-full ${\n//                           index === currentStep\n//                             ? 'bg-blue-500'\n//                             : theme === 'dark'\n//                             ? 'bg-gray-400'\n//                             : 'bg-gray-500'\n//                         }`}\n//                       />\n//                     ))}\n//                   </div>\n//                 )}\n//               </div>\n//               <div className=\"flex justify-between items-center\">\n//                 <button\n//                   onClick={handleSkip}\n//                   className={`text-sm font-medium transition-colors duration-200 ${\n//                     theme === 'dark' ? 'text-gray-500 hover:text-gray-700' : 'text-gray-400 hover:text-gray-200'\n//                   }`}\n//                 >\n//                   {buttonLabels.skip || 'Skip'}\n//                 </button>\n//                 <div className=\"flex items-center gap-2\">\n//                   <button\n//                     onClick={handlePrevious}\n//                     disabled={currentStep === 0}\n//                     className={`px-3 py-1 rounded-md text-sm font-medium text-white transition-all duration-200 ${\n//                       currentStep === 0\n//                         ? 'bg-gray-300 text-gray-500 cursor-not-allowed'\n//                         : theme === 'dark'\n//                         ? 'bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-500 hover:to-gray-600'\n//                         : 'bg-gradient-to-r from-gray-700 to-gray-800 hover:from-gray-600 hover:to-gray-700'\n//                     }`}\n//                   >\n//                     {buttonLabels.previous || 'Previous'}\n//                   </button>\n//                   <span\n//                     className={`text-xs font-medium ${\n//                       theme === 'dark' ? 'text-gray-500' : 'text-gray-400'\n//                     }`}\n//                   >\n//                     {currentStep + 1} / {filteredSteps.length}\n//                   </span>\n//                   <button\n//                     onClick={handleNext}\n//                     className={`px-3 py-1 rounded-md text-sm font-medium text-white transition-all duration-200 ${\n//                       theme === 'dark'\n//                         ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600'\n//                         : 'bg-gradient-to-r from-blue-700 to-blue-800 hover:from-blue-600 hover:to-blue-700'\n//                     }`}\n//                   >\n//                     {currentStep < filteredSteps.length - 1\n//                       ? buttonLabels.next || 'Next'\n//                       : buttonLabels.finish || 'Finish'}\n//                   </button>\n//                 </div>\n//               </div>\n//             </motion.div>\n//           ))\n//         )}\n//       </motion.div>\n//     </AnimatePresence>\n//   );\n\n//   return createPortal(tourContent, portalContainer);\n// }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'use client';\nimport { useState, useEffect, useCallback, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { X } from 'lucide-react';\n\n// Interface definitions\nexport interface PredefinedWelcomeConfig {\n  title: string;\n  message: string;\n  startButtonText?: string;\n  position?: { top?: number | string; left?: number | string; transform?: string };\n  mobilePosition?: { top?: number | string; left?: number | string; transform?: string };\n}\n\nexport interface TourStep {\n  target: string;\n  content: string;\n  contentDesktop?: string;\n  contentMobile?: string;\n  position?:\n    | 'top'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'left'\n    | 'center-left'\n    | 'right'\n    | 'center-right'\n    | 'center';\n  customPosition?: { top?: number | string; left?: number | string; transform?: string };\n  offset?: { x?: number; y?: number };\n  device?: 'desktop' | 'mobile' | 'both';\n}\n\nexport interface TourProps {\n  tourId: string;\n  steps: TourStep[];\n  theme: 'light' | 'dark';\n  deviceMode?: 'desktop' | 'tablet' | 'mobile';\n  isActive?: boolean;\n  onComplete?: () => void;\n  onSkip?: () => void;\n  onStart?: () => void;\n  onStepChange?: (stepIndex: number) => void;\n  welcomeScreen?: { enabled: boolean; content?: React.ReactNode | PredefinedWelcomeConfig };\n  buttonLabels?: { next?: string; previous?: string; skip?: string; finish?: string; start?: string };\n  showProgressDots?: boolean;\n}\n\nexport default function Tour({\n  tourId,\n  steps = [],\n  theme,\n  deviceMode = 'desktop',\n  isActive = true,\n  onComplete,\n  onSkip,\n  onStart,\n  onStepChange,\n  welcomeScreen = { enabled: false },\n  buttonLabels = {},\n  showProgressDots = false,\n}: TourProps) {\n  const [currentStep, setCurrentStep] = useState(welcomeScreen.enabled ? -1 : 0);\n  const [isVisible, setIsVisible] = useState(isActive);\n  const [tooltipPosition, setTooltipPosition] = useState<{ top: number | string; left: number | string }>({ top: 0, left: 0 });\n  const [tooltipTransform, setTooltipTransform] = useState<string>('');\n  const [arrowStyle, setArrowStyle] = useState<React.CSSProperties>({});\n  const [navigationDirection, setNavigationDirection] = useState<'forward' | 'backward' | null>(null);\n  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n  const [welcomeStyle, setWelcomeStyle] = useState<React.CSSProperties>({});\n  const [zIndex, setZIndex] = useState(2147483646);\n  const [validSteps, setValidSteps] = useState<TourStep[]>(steps);\n  const [isDomReady, setIsDomReady] = useState(false);\n  const highlightedElements = useRef<Map<Element, { originalOverflow: string }>>(new Map());\n\n  // Wait for element with retries\n  const waitForElement = useCallback((selector: string, timeout = 5000): Promise<Element | null> => {\n    return new Promise((resolve) => {\n      const startTime = Date.now();\n      const check = () => {\n        const element = document.querySelector(selector);\n        if (element) return resolve(element);\n        if (Date.now() - startTime > timeout) return resolve(null);\n        setTimeout(check, 500);\n      };\n      if (document.readyState === 'complete') check();\n      else window.addEventListener('load', check, { once: true });\n    });\n  }, []);\n\n  // Create portal container and handle z-index\n  useEffect(() => {\n    const container = document.createElement('div');\n    container.id = `tour-portal-${tourId}`;\n    container.className = 'fixed inset-0 pointer-events-none';\n    document.body.appendChild(container);\n    setPortalContainer(container);\n\n    const originalBodyOverflow = document.body.style.overflow;\n    const originalHtmlOverflow = document.documentElement.style.overflow;\n    document.body.style.overflow = 'visible';\n    document.documentElement.style.overflow = 'visible';\n\n    const updateZIndex = () => {\n      const elements = document.querySelectorAll('*');\n      let maxZIndex = 2147483646;\n      elements.forEach((el) => {\n        const z = parseInt(window.getComputedStyle(el).zIndex, 10);\n        if (!isNaN(z) && z > maxZIndex && z < 2147483647) maxZIndex = z;\n      });\n      setZIndex(maxZIndex + 1);\n    };\n    updateZIndex();\n\n    const observer = new MutationObserver(updateZIndex);\n    observer.observe(document.body, { childList: true, subtree: true });\n\n    return () => {\n      if (container && container.parentNode) {\n        container.parentNode.removeChild(container);\n      }\n      document.body.style.overflow = originalBodyOverflow;\n      document.documentElement.style.overflow = originalHtmlOverflow;\n      observer.disconnect();\n    };\n  }, [tourId]);\n\n  // Validate steps and ensure DOM readiness\n  useEffect(() => {\n    if (!isVisible) return;\n\n    const validateSteps = async () => {\n      const valid = [];\n      for (const step of steps) {\n        const element = await waitForElement(step.target);\n        if (element) valid.push(step);\n      }\n      setValidSteps(valid);\n      setIsDomReady(true);\n      if (valid.length === 0 && steps.length > 0) {\n        console.warn('No valid tour steps found. Tour will not proceed.');\n        setIsVisible(false);\n        onSkip?.();\n      }\n    };\n\n    validateSteps();\n\n    const observer = new MutationObserver(() => validateSteps());\n    observer.observe(document.body, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n  }, [steps, isVisible, waitForElement, onSkip]);\n\n  // Inject dynamic highlight styles\n  useEffect(() => {\n    if (!isVisible || !isDomReady) return;\n\n    const styleId = `tour-styles-${tourId}`;\n    let existingStyle = document.getElementById(styleId);\n\n    if (!existingStyle) {\n      const style = document.createElement('style');\n      style.id = styleId;\n      style.textContent = `\n        .tour-highlight-${tourId} {\n          position: relative !important;\n          z-index: ${zIndex - 1} !important;\n          box-shadow: 0 0 8px 2px rgba(29, 78, 216, 0.5) !important;\n          border: 2px solid rgba(29, 78, 216, 0.7) !important;\n          border-radius: 6px !important;\n          transition: all 0.3s ease !important;\n        }\n        .tour-overlay-${tourId} {\n          pointer-events: auto !important;\n          z-index: ${zIndex} !important;\n          isolation: isolate;\n        }\n        .tour-content-${tourId} {\n          pointer-events: auto !important;\n          z-index: ${zIndex + 1} !important;\n          isolation: isolate;\n        }\n        .tour-arrow-${tourId} {\n          z-index: ${zIndex + 2} !important;\n        }\n        [data-theme=\"dark\"] .tour-highlight-${tourId}, .dark .tour-highlight-${tourId} {\n          box-shadow: 0 0 8px 2px rgba(37, 99, 235, 0.5) !important;\n          border: 2px solid rgba(37, 99, 235, 0.7) !important;\n        }\n        .tour-overlay-${tourId}:not([style*=\"opacity: 1\"]) .tour-highlight-${tourId} {\n          box-shadow: none !important;\n          border: none !important;\n          z-index: auto !important;\n        }\n      `;\n      document.head.appendChild(style);\n    }\n\n    return () => {\n      const style = document.getElementById(styleId);\n      if (style && style.parentNode) {\n        style.parentNode.removeChild(style);\n      }\n    };\n  }, [isVisible, isDomReady, tourId, zIndex]);\n\n  // Detect device mode\n  const isMobile = deviceMode === 'mobile' || deviceMode === 'tablet';\n\n  // Filter steps based on device\n  const filteredSteps = useMemo(() => {\n    return validSteps.filter((step) => {\n      if (!step.device || step.device === 'both') return true;\n      return step.device === (isMobile ? 'mobile' : 'desktop');\n    });\n  }, [validSteps, isMobile]);\n\n  // Sync isVisible with isActive prop\n  useEffect(() => {\n    setIsVisible(isActive && isDomReady);\n    if (isActive && welcomeScreen.enabled && currentStep === -1 && isDomReady) {\n      onStart?.();\n    }\n  }, [isActive, welcomeScreen.enabled, currentStep, onStart, isDomReady]);\n\n  // Handle welcome screen positioning\n  useEffect(() => {\n    if (!isVisible || currentStep !== -1 || !welcomeScreen.enabled || !isDomReady) return;\n\n    const updateResponsiveStyles = () => {\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      const config = welcomeScreen.content as PredefinedWelcomeConfig;\n      const hasCustomPosition = config?.position || (isMobile && config?.mobilePosition);\n\n      let top = viewportHeight * 0.5;\n      let left = viewportWidth * 0.5;\n      let transform = 'translate(-50%, -50%)';\n\n      if (hasCustomPosition) {\n        let userTop = isMobile && config.mobilePosition?.top ? config.mobilePosition.top : config.position?.top ?? 0;\n        let userLeft = isMobile && config.mobilePosition?.left ? config.mobilePosition.left : config.position?.left ?? 0;\n        let userTransform = isMobile && config.mobilePosition?.transform ? config.mobilePosition.transform : config.position?.transform;\n\n        if (typeof userTop === 'string') {\n          userTop = parseFloat(userTop) * (userTop.endsWith('%') ? viewportHeight / 100 : userTop.endsWith('rem') ? 16 : 1);\n        }\n        if (typeof userLeft === 'string') {\n          userLeft = parseFloat(userLeft) * (userLeft.endsWith('%') ? viewportWidth / 100 : userLeft.endsWith('rem') ? 16 : 1);\n        }\n\n        top += typeof userTop === 'number' ? userTop : 0;\n        left += typeof userLeft === 'number' ? userLeft : 0;\n\n        const welcomeWidth = Math.min(viewportWidth * 0.9, 448);\n        const welcomeHeight = 300;\n        top = Math.max(10, Math.min(top, viewportHeight - welcomeHeight - 10));\n        left = Math.max(10, Math.min(left, viewportWidth - welcomeWidth - 10));\n\n        setWelcomeStyle({\n          position: 'absolute',\n          top,\n          left,\n          transform: userTransform ?? transform,\n        });\n      } else {\n        setWelcomeStyle({ top: '50%', left: '50%', transform });\n      }\n    };\n\n    updateResponsiveStyles();\n    const debouncedUpdate = debounce(updateResponsiveStyles, 100);\n    window.addEventListener('resize', debouncedUpdate);\n    return () => window.removeEventListener('resize', debouncedUpdate);\n  }, [isVisible, currentStep, welcomeScreen, isMobile, isDomReady]);\n\n  // Debounce utility\n  const debounce = (func: Function, wait: number) => {\n    let timeout: NodeJS.Timeout;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = setTimeout(() => func(...args), wait);\n    };\n  };\n\n  // Find target element\n  const getTargetElement = useCallback(async (step: TourStep): Promise<Element | null> => {\n    let targetElement = await waitForElement(step.target);\n    if (!targetElement && step.target.startsWith('.')) {\n      const elements = document.querySelectorAll(step.target);\n      targetElement = Array.from(elements).find((el) => {\n        const rect = el.getBoundingClientRect();\n        return rect.width > 0 && rect.height > 0 && window.getComputedStyle(el).display !== 'none';\n      }) || null;\n    }\n    return targetElement;\n  }, [waitForElement]);\n\n  // Get step content\n  const getStepContent = (step: TourStep): string => {\n    if (isMobile && step.contentMobile) return step.contentMobile;\n    if (!isMobile && step.contentDesktop) return step.contentDesktop;\n    return step.content;\n  };\n\n  // Create arrow styles\n  const createArrowStyle = useCallback(\n    (position: string, theme: string): React.CSSProperties => {\n      const baseArrow: React.CSSProperties = {\n        position: 'absolute',\n        width: 0,\n        height: 0,\n        borderStyle: 'solid',\n        zIndex: zIndex + 2,\n      };\n      const triangleColor = theme === 'dark' ? '#ffffff' : '#111827';\n\n      switch (position) {\n        case 'top':\n          return {\n            ...baseArrow,\n            bottom: '-7px',\n            left: '50%',\n            borderWidth: '7px 7px 0 7px',\n            borderColor: `${triangleColor} transparent transparent transparent`,\n            transform: 'translateX(-50%)',\n          };\n        case 'bottom':\n          return {\n            ...baseArrow,\n            top: '-7px',\n            left: '50%',\n            borderWidth: '0 7px 7px 7px',\n            borderColor: `transparent transparent ${triangleColor} transparent`,\n            transform: 'translateX(-50%)',\n          };\n        case 'left':\n          return {\n            ...baseArrow,\n            right: '-7px',\n            top: '50%',\n            borderWidth: '7px 7px 7px 0',\n            borderColor: `transparent ${triangleColor} transparent transparent`,\n            transform: 'translateY(-50%)',\n          };\n        case 'right':\n          return {\n            ...baseArrow,\n            left: '-7px',\n            top: '50%',\n            borderWidth: '7px 0 7px 7px',\n            borderColor: `transparent transparent transparent ${triangleColor}`,\n            transform: 'translateY(-50%)',\n          };\n        default:\n          return { display: 'none' };\n      }\n    },\n    [zIndex]\n  );\n\n  // Ensure element visibility\n  const ensureVisible = useCallback((element: Element) => {\n    element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });\n    const rect = element.getBoundingClientRect();\n    const isVisible = rect.top >= 0 && rect.left >= 0 && \n      rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;\n    if (!isVisible) {\n      window.scrollBy({ top: rect.top - 50, left: rect.left - 50, behavior: 'smooth' });\n    }\n    let parent = element.parentElement;\n    while (parent && parent !== document.body) {\n      const parentStyle = window.getComputedStyle(parent);\n      if (parentStyle.overflow === 'auto' || parentStyle.overflow === 'scroll') {\n        parent.scrollIntoView({ behavior: 'smooth', block: 'center' });\n      }\n      parent = parent.parentElement;\n    }\n  }, []);\n\n  // Clear all highlights\n  const clearAllHighlights = useCallback(() => {\n    const highlightClass = `tour-highlight-${tourId}`;\n    highlightedElements.current.forEach(({ originalOverflow }, element) => {\n      element.classList.remove(highlightClass);\n      const parent = element.parentElement;\n      if (parent && originalOverflow) {\n        parent.style.overflow = originalOverflow;\n      }\n    });\n    highlightedElements.current.clear();\n  }, [tourId]);\n\n  // Position tooltip\n  useEffect(() => {\n    if (!isVisible || currentStep < 0 || currentStep >= filteredSteps.length || !isDomReady) return;\n\n    const step = filteredSteps[currentStep];\n    let isMounted = true;\n\n    const updatePosition = async () => {\n      const targetElement = await getTargetElement(step);\n      if (!targetElement || !isMounted) {\n        console.warn(`Tour target not found: ${step.target}`);\n        if (navigationDirection !== 'backward' && currentStep < filteredSteps.length - 1) {\n          setNavigationDirection('forward');\n          setCurrentStep(currentStep + 1);\n        } else {\n          setIsVisible(false);\n          onComplete?.();\n        }\n        return;\n      }\n\n      ensureVisible(targetElement);\n      const rect = targetElement.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      const tooltipWidth = 320;\n      const tooltipHeight = 150;\n      let top: number = 0;\n      let left: number = 0;\n      let transform = '';\n      const position = step.position || 'bottom';\n      const offsetX = step.offset?.x || 0;\n      const offsetY = step.offset?.y || 10;\n\n      if (step.customPosition) {\n        setTooltipPosition({\n          top: step.customPosition.top ?? '50%',\n          left: step.customPosition.left ?? '50%',\n        });\n        setTooltipTransform(step.customPosition.transform ?? '');\n        setArrowStyle({ display: 'none' });\n        return;\n      }\n\n      if (position === 'center') {\n        setTooltipPosition({ top: '50%', left: '50%' });\n        setTooltipTransform('translate(-50%, -50%)');\n        setArrowStyle({ display: 'none' });\n        return;\n      }\n\n      switch (position) {\n        case 'top':\n          top = rect.top - tooltipHeight - offsetY;\n          left = rect.left + rect.width / 2 + offsetX;\n          transform = 'translateX(-50%)';\n          break;\n        case 'bottom':\n          top = rect.bottom + offsetY;\n          left = rect.left + rect.width / 2 + offsetX;\n          transform = 'translateX(-50%)';\n          break;\n        case 'left':\n          top = rect.top + rect.height / 2 + offsetY;\n          left = rect.left - tooltipWidth - 10 + offsetX;\n          transform = 'translateY(-50%)';\n          break;\n        case 'right':\n          top = rect.top + rect.height / 2 + offsetY;\n          left = rect.right + 10 + offsetX;\n          transform = 'translateY(-50%)';\n          break;\n        case 'top-left':\n          top = rect.top - tooltipHeight - offsetY;\n          left = rect.left + offsetX;\n          transform = 'translateX(-10%)';\n          break;\n        case 'top-right':\n          top = rect.top - tooltipHeight - offsetY;\n          left = rect.right + offsetX;\n          transform = 'translateX(-90%)';\n          break;\n        case 'bottom-left':\n          top = rect.bottom + offsetY;\n          left = rect.left + offsetX;\n          transform = 'translateX(-10%)';\n          break;\n        case 'bottom-right':\n          top = rect.bottom + offsetY;\n          left = rect.right + offsetX;\n          transform = 'translateX(-90%)';\n          break;\n        case 'center-left':\n          top = rect.top + rect.height / 2 + offsetY;\n          left = rect.left - tooltipWidth - 10 + offsetX;\n          transform = 'translateY(-50%)';\n          break;\n        case 'center-right':\n          top = rect.top + rect.height / 2 + offsetY;\n          left = rect.right + 10 + offsetX;\n          transform = 'translateY(-50%)';\n          break;\n      }\n\n      top = Math.max(10, Math.min(top, viewportHeight - tooltipHeight - 10));\n      left = Math.max(10, Math.min(left, viewportWidth - tooltipWidth - 10));\n\n      setTooltipPosition({ top, left });\n      setTooltipTransform(transform);\n      setArrowStyle(createArrowStyle(position, theme));\n    };\n\n    updatePosition();\n    const debouncedUpdate = debounce(updatePosition, 100);\n    window.addEventListener('resize', debouncedUpdate);\n    window.addEventListener('scroll', debouncedUpdate);\n\n    return () => {\n      isMounted = false;\n      window.removeEventListener('resize', debouncedUpdate);\n      window.removeEventListener('scroll', debouncedUpdate);\n    };\n  }, [isVisible, currentStep, filteredSteps, theme, navigationDirection, createArrowStyle, getTargetElement, ensureVisible, isDomReady]);\n\n  // Highlight target element and adjust parent overflow\n  useEffect(() => {\n    if (!isVisible || currentStep < 0 || currentStep >= filteredSteps.length || !isDomReady) {\n      clearAllHighlights();\n      return;\n    }\n\n    const step = filteredSteps[currentStep];\n    let isMounted = true;\n\n    const highlightElement = async () => {\n      const targetElement = await getTargetElement(step);\n      if (!targetElement || !isMounted) return;\n\n      clearAllHighlights();\n\n      const highlightClass = `tour-highlight-${tourId}`;\n      targetElement.classList.add(highlightClass);\n\n      const parent = targetElement.parentElement;\n      let originalOverflow = '';\n      if (parent) {\n        originalOverflow = window.getComputedStyle(parent).overflow;\n        if (originalOverflow.includes('hidden')) {\n          parent.style.overflow = 'visible';\n        }\n      }\n\n      highlightedElements.current.set(targetElement, { originalOverflow });\n\n      return () => {\n        if (isMounted) {\n          targetElement.classList.remove(highlightClass);\n          if (parent && originalOverflow) {\n            parent.style.overflow = originalOverflow;\n          }\n          highlightedElements.current.delete(targetElement);\n        }\n      };\n    };\n\n    highlightElement();\n\n    return () => {\n      isMounted = false;\n    };\n  }, [currentStep, filteredSteps, isVisible, tourId, getTargetElement, isDomReady, clearAllHighlights]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    if (!isVisible || !isDomReady) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowRight' || e.key === 'Enter') {\n        e.preventDefault();\n        if (currentStep === -1) {\n          handleStart();\n        } else {\n          handleNext();\n        }\n      } else if (e.key === 'ArrowLeft' && currentStep > 0) {\n        e.preventDefault();\n        handlePrevious();\n      } else if (e.key === 'Escape') {\n        e.preventDefault();\n        handleSkip();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [currentStep, isVisible, isDomReady]);\n\n  // Notify step change\n  useEffect(() => {\n    if (isVisible && currentStep >= 0 && isDomReady) {\n      onStepChange?.(currentStep);\n    }\n  }, [currentStep, isVisible, onStepChange, isDomReady]);\n\n  // Navigation handlers\n  const completeTour = useCallback(() => {\n    clearAllHighlights();\n    setIsVisible(false);\n    setCurrentStep(welcomeScreen.enabled ? -1 : 0);\n    onComplete?.();\n  }, [onComplete, welcomeScreen.enabled, clearAllHighlights]);\n\n  const handleStart = useCallback(() => {\n    setCurrentStep(0);\n    setNavigationDirection('forward');\n    onStart?.();\n  }, [onStart]);\n\n  const handleNext = useCallback(() => {\n    if (currentStep < filteredSteps.length - 1) {\n      setCurrentStep(currentStep + 1);\n      setNavigationDirection('forward');\n    } else {\n      completeTour();\n    }\n  }, [currentStep, filteredSteps.length, completeTour]);\n\n  const handlePrevious = useCallback(() => {\n    if (currentStep > 0) {\n      setCurrentStep(currentStep - 1);\n      setNavigationDirection('backward');\n    }\n  }, [currentStep]);\n\n  const handleSkip = useCallback(() => {\n    completeTour();\n    onSkip?.();\n  }, [onSkip, completeTour]);\n\n  if (!isVisible || !portalContainer || !isDomReady || filteredSteps.length === 0) return null;\n\n  const tourContent = (\n    <AnimatePresence>\n      <motion.div\n        className={`tour-overlay-${tourId} fixed inset-0 flex items-center justify-center ${\n          theme === 'dark' ? 'bg-gray-900/80' : 'bg-gray-900/60'\n        }`}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        exit={{ opacity: 0 }}\n        style={{ zIndex }}\n      >\n        {currentStep === -1 && welcomeScreen.enabled ? (\n          <motion.div\n            className={`tour-content-${tourId} p-6 rounded-xl w-[90%] max-w-md backdrop-blur-sm shadow-lg ring-1 ${\n              theme === 'dark' ? 'bg-gray-800 text-white ring-gray-700/50' : 'bg-white text-gray-900 ring-gray-200/50'\n            }`}\n            style={welcomeStyle}\n            initial={{ opacity: 0, scale: 0.95, y: '2rem' }}\n            animate={{ opacity: 1, scale: 1, y: 0 }}\n            exit={{ opacity: 0, scale: 0.95, y: '2rem' }}\n            transition={{ duration: 0.3, ease: 'easeOut' }}\n            role=\"dialog\"\n            aria-labelledby={`tour-welcome-title-${tourId}`}\n          >\n            {welcomeScreen.content && typeof welcomeScreen.content === 'object' && 'title' in welcomeScreen.content ? (\n              <>\n                <div className=\"flex justify-between items-center mb-4\">\n                  <h3 id={`tour-welcome-title-${tourId}`} className=\"text-lg font-semibold\">\n                    {(welcomeScreen.content as PredefinedWelcomeConfig).title}\n                  </h3>\n                  <button\n                    onClick={handleSkip}\n                    className={`p-1 rounded-full transition-colors ${\n                      theme === 'dark' ? 'text-gray-400 hover:bg-gray-700' : 'text-gray-500 hover:bg-gray-100'\n                    }`}\n                    aria-label=\"Skip tour\"\n                  >\n                    <X size={20} />\n                  </button>\n                </div>\n                <p className=\"text-sm mb-6\">\n                  {(welcomeScreen.content as PredefinedWelcomeConfig).message}\n                </p>\n                <div className=\"flex justify-between items-center\">\n                  <button\n                    onClick={handleSkip}\n                    className={`text-sm font-medium transition-colors ${\n                      theme === 'dark' ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700'\n                    }`}\n                  >\n                    {buttonLabels.skip || 'Skip Tour'}\n                  </button>\n                  <button\n                    onClick={handleStart}\n                    className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${\n                      theme === 'dark'\n                        ? 'bg-blue-600 text-white hover:bg-blue-500 hover:text-gray-900'\n                        : 'bg-blue-700 text-white hover:bg-blue-600'\n                    }`}\n                  >\n                    {(welcomeScreen.content as PredefinedWelcomeConfig).startButtonText || buttonLabels.start || 'Start Tour'}\n                  </button>\n                </div>\n              </>\n            ) : (\n              <>\n                {welcomeScreen.content}\n                <div className=\"flex justify-between items-center mt-6\">\n                  <button\n                    onClick={handleSkip}\n                    className={`text-sm font-medium transition-colors ${\n                      theme === 'dark' ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700'\n                    }`}\n                  >\n                    {buttonLabels.skip || 'Skip Tour'}\n                  </button>\n                  <button\n                    onClick={handleStart}\n                    className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${\n                      theme === 'dark'\n                        ? 'bg-blue-600 text-white hover:bg-blue-500 hover:text-gray-900'\n                        : 'bg-blue-700 text-white hover:bg-blue-600'\n                    }`}\n                  >\n                    {buttonLabels.start || 'Start Tour'}\n                  </button>\n                </div>\n              </>\n            )}\n          </motion.div>\n        ) : (\n          currentStep < filteredSteps.length && (\n            <motion.div\n              className={`tour-content-${tourId} absolute p-5 rounded-xl max-w-sm w-full min-w-[200px] backdrop-blur-sm shadow-lg ring-1 ${\n                theme === 'dark' ? 'bg-gray-800 text-white ring-gray-700/50' : 'bg-white text-gray-900 ring-gray-200/50'\n              }`}\n              style={{\n                top: `${tooltipPosition.top}px`,\n                left: `${tooltipPosition.left}px`,\n                transform: tooltipTransform,\n                margin: '0 10px',\n                zIndex: zIndex + 1,\n              }}\n              initial={{\n                opacity: 0,\n                y: filteredSteps[currentStep].position?.includes('top') ? '0.6rem' : '-0.6rem',\n                x: filteredSteps[currentStep].position?.includes('left') ? '0.6rem' : '-0.6rem',\n              }}\n              animate={{ opacity: 1, y: 0, x: 0 }}\n              exit={{\n                opacity: 0,\n                y: filteredSteps[currentStep].position?.includes('top') ? '0.6rem' : '-0.6rem',\n                x: filteredSteps[currentStep].position?.includes('left') ? '0.6rem' : '-0.6rem',\n              }}\n              transition={{ duration: 0.3, ease: 'easeOut' }}\n              role=\"dialog\"\n              aria-labelledby={`tour-step-title-${tourId}-${currentStep}`}\n            >\n              <div className={`arrow tour-arrow-${tourId}`} style={arrowStyle} />\n              <p id={`tour-step-title-${tourId}-${currentStep}`} className=\"text-sm mb-4\">\n                {getStepContent(filteredSteps[currentStep])}\n              </p>\n              <div className=\"mb-3\">\n                <div className=\"relative h-1.5 rounded-full bg-gray-200 dark:bg-gray-700\">\n                  <div\n                    className=\"absolute h-1.5 bg-blue-500 rounded-full transition-all duration-300\"\n                    style={{ width: `${((currentStep + 1) / filteredSteps.length) * 100}%` }}\n                  />\n                </div>\n                {showProgressDots && (\n                  <div className=\"flex justify-center gap-1.5 mt-2\">\n                    {filteredSteps.map((_, index) => (\n                      <div\n                        key={index}\n                        className={`w-1.5 h-1.5 rounded-full transition-colors ${\n                          index === currentStep ? 'bg-blue-500' : 'bg-gray-400'\n                        }`}\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n              <div className=\"flex justify-between items-center\">\n                <button\n                  onClick={handleSkip}\n                  className={`text-sm font-medium transition-colors ${\n                    theme === 'dark' ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700'\n                  }`}\n                >\n                  {buttonLabels.skip || 'Skip'}\n                </button>\n                <div className=\"flex items-center gap-2\">\n                  <button\n                    onClick={handlePrevious}\n                    disabled={currentStep === 0}\n                    className={`px-3 py-1 rounded-md text-sm font-medium transition-all ${\n                      currentStep === 0\n                        ? 'bg-gray-400 text-gray-600 cursor-not-allowed'\n                        : theme === 'dark'\n                        ? 'bg-gray-600 text-white hover:bg-gray-500 hover:text-gray-100'\n                        : 'bg-gray-700 text-white hover:bg-gray-600'\n                    }`}\n                  >\n                    {buttonLabels.previous || 'Previous'}\n                  </button>\n                  <span className=\"text-xs text-gray-400\">\n                    {currentStep + 1} / {filteredSteps.length}\n                  </span>\n                  <button\n                    onClick={handleNext}\n                    className={`px-3 py-1 rounded-md text-sm font-medium transition-all ${\n                      theme === 'dark'\n                        ? 'bg-blue-600 text-white hover:bg-blue-500 hover:text-gray-900'\n                        : 'bg-blue-700 text-white hover:bg-blue-600'\n                    }`}\n                  >\n                    {currentStep < filteredSteps.length - 1\n                      ? buttonLabels.next || 'Next'\n                      : buttonLabels.finish || 'Finish'}\n                  </button>\n                </div>\n              </div>\n            </motion.div>\n          )\n        )}\n      </motion.div>\n    </AnimatePresence>\n  );\n\n  return createPortal(tourContent, portalContainer);\n}","import Tour from './Tour';\nexport type { TourProps, TourStep, PredefinedWelcomeConfig } from './Tour';\nexport { Tour };\nexport default Tour;"]}