// Mobile App Component
const { useState, useEffect } = React;

const MobileApp = () => {
    const [activeTab, setActiveTab] = useState('home');
    const [menuOpen, setMenuOpen] = useState(false);
    const [languageMenuOpen, setLanguageMenuOpen] = useState(false);
    const [currentLanguage, setCurrentLanguage] = useState('en');
    
    // Initialize language and add listener for language changes
    useEffect(() => {
        // Initialize language
        if (window.initLanguage) {
            const initialLang = window.initLanguage();
            setCurrentLanguage(initialLang);
        }
        
        // Listen for language changes
        const handleLanguageChange = (event) => {
            setCurrentLanguage(event.detail.language);
        };
        
        document.addEventListener('languageChanged', handleLanguageChange);
        
        // Clean up
        return () => {
            document.removeEventListener('languageChanged', handleLanguageChange);
        };
    }, []);
    
    // Define animation styles
    const fadeIn = {
        animation: 'fadeIn 0.5s ease-out forwards',
    };
    
    const slideUp = {
        animation: 'slideUp 0.5s ease-out forwards',
    };
    
    const pulseStyle = {
        animation: 'pulse 2s infinite',
    };
    
    // Handle tab change
    const handleTabChange = (tab) => {
        setActiveTab(tab);
    };
    
    // Toggle menu
    const toggleMenu = () => {
        setMenuOpen(!menuOpen);
    };
    
    return (
        <div className="mobile-container">
            {/* Improved header with logo and hamburger menu */}
            <header style={{
                background: 'linear-gradient(135deg, #6366f1, #4f46e5)',
                position: 'fixed',
                top: 0,
                left: 0,
                right: 0,
                height: '60px',
                zIndex: 50,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '0 16px',
                color: 'white',
                boxShadow: '0 4px 12px rgba(79, 70, 229, 0.2)'
            }}>
                <div onClick={toggleMenu} style={{ 
                    width: '32px', 
                    height: '32px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    cursor: 'pointer',
                    borderRadius: '8px',
                    background: 'rgba(255, 255, 255, 0.1)',
                    backdropFilter: 'blur(5px)',
                }}>
                    <i className="fas fa-bars" style={{ fontSize: '18px' }}></i>
                </div>
                
                <div style={{ 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center'
                }}>
                    <img 
                        src="assets/img/logo.png" 
                        alt="BeAnormal Logo" 
                        style={{ 
                            height: '28px',
                            filter: 'brightness(0) invert(1)'
                        }}
                        onError={(e) => {
                            e.target.onerror = null;
                            e.target.style.display = 'none';
                            e.target.nextSibling.style.display = 'block';
                        }}
                    />
                    <span style={{ 
                        display: 'none',
                        fontSize: '20px', 
                        fontWeight: '700',
                        background: 'linear-gradient(to right, #fff, #e0e7ff)',
                        WebkitBackgroundClip: 'text',
                        WebkitTextFillColor: 'transparent'
                    }}>BeAnormal</span>
                </div>
                
                <div style={{
                    display: 'flex',
                    alignItems: 'center'
                }}>
                    {/* Language Switcher Button */}
                    <div 
                        style={{ 
                            width: '32px', 
                            height: '32px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            cursor: 'pointer',
                            borderRadius: '8px',
                            background: 'rgba(255, 255, 255, 0.1)',
                            backdropFilter: 'blur(5px)',
                            marginRight: '8px',
                            fontSize: '18px'
                        }}
                        onClick={() => setLanguageMenuOpen(true)}
                    >
                        {currentLanguage === 'en' && '🇬🇧'}
                        {currentLanguage === 'es' && '🇪🇸'}
                        {currentLanguage === 'fr' && '🇫🇷'}
                        {currentLanguage === 'tr' && '🇹🇷'}
                        {currentLanguage === 'it' && '🇮🇹'}
                        {currentLanguage === 'ru' && '🇷🇺'}
                        {currentLanguage === 'ar' && '🇸🇦'}
                    </div>
                    
                    {/* Notifications Button */}
                    <div style={{ 
                        width: '32px', 
                        height: '32px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        cursor: 'pointer',
                        borderRadius: '8px',
                        background: 'rgba(255, 255, 255, 0.1)',
                        backdropFilter: 'blur(5px)',
                        position: 'relative'
                    }}>
                        <i className="fas fa-bell" style={{ fontSize: '18px' }}></i>
                        <span style={{
                            position: 'absolute',
                            top: '-2px',
                            right: '-2px',
                            width: '14px',
                            height: '14px',
                            borderRadius: '50%',
                            background: '#ef4444',
                            border: '2px solid #4f46e5',
                            fontSize: '8px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>2</span>
                    </div>
                </div>
            </header>
            
            {/* Language Switcher Overlay */}
            {languageMenuOpen && (
                <div onClick={() => setLanguageMenuOpen(false)} style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    background: 'rgba(0,0,0,0.5)',
                    zIndex: 50,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    ...fadeIn
                }}>
                    <div onClick={e => e.stopPropagation()}>
                        <LanguageSwitcher onClose={() => setLanguageMenuOpen(false)} />
                    </div>
                </div>
            )}
            
            {/* Menu overlay */}
            {menuOpen && (
                <div onClick={toggleMenu} style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    background: 'rgba(0,0,0,0.5)',
                    zIndex: 40,
                    ...fadeIn
                }}>
                    <div onClick={e => e.stopPropagation()} style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '80%',
                        maxWidth: '300px',
                        height: '100%',
                        background: 'white',
                        boxShadow: '0 0 20px rgba(0,0,0,0.2)',
                        padding: '20px',
                        transform: 'translateX(-100%)',
                        ...slideUp,
                        animation: 'slideInRight 0.3s forwards'
                    }}>
                        <div style={{ 
                            display: 'flex', 
                            alignItems: 'center', 
                            marginBottom: '24px',
                            paddingBottom: '16px',
                            borderBottom: '1px solid #f3f4f6'
                        }}>
                            <img 
                                src="assets/img/logo.png" 
                                alt="BeAnormal Logo" 
                                style={{ height: '32px', marginRight: '12px' }}
                                onError={(e) => {
                                    e.target.onerror = null;
                                    e.target.style.display = 'none';
                                    e.target.nextSibling.style.display = 'inline';
                                }}
                            />
                            <span style={{ 
                                display: 'none',
                                fontSize: '22px', 
                                fontWeight: '700',
                                background: 'linear-gradient(to right, #4f46e5, #7c3aed)',
                                WebkitBackgroundClip: 'text',
                                WebkitTextFillColor: 'transparent'
                            }}>BeAnormal</span>
                        </div>
                        
                        <div style={{ marginBottom: '32px' }}>
                            <div style={{ fontSize: '12px', color: '#9ca3af', marginBottom: '12px', letterSpacing: '0.05em' }}>MENU</div>
                            
                            {[
                                { id: 'home', name: 'Home', icon: 'fa-home' },
                                { id: 'speed-test', name: 'Speed Test', icon: 'fa-gauge-high' },
                                { id: 'seo-check', name: 'SEO Check', icon: 'fa-magnifying-glass' },
                                { id: 'web-scraping', name: 'Web Scraping', icon: 'fa-spider' },
                                { id: 'security', name: 'Security Test', icon: 'fa-shield-alt', soon: true },
                                { id: 'api-testing', name: 'API Testing', icon: 'fa-cloud', soon: true }
                            ].map(item => (
                                <div 
                                    key={item.id}
                                    onClick={() => !item.soon && handleTabChange(item.id)}
                                    style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                        padding: '12px 16px',
                                        borderRadius: '8px',
                                        marginBottom: '8px',
                                        cursor: 'pointer',
                                        background: activeTab === item.id ? '#f3f4f6' : 'transparent',
                                        position: 'relative'
                                    }}
                                >
                                    <div style={{
                                        width: '32px',
                                        height: '32px',
                                        borderRadius: '8px',
                                        background: activeTab === item.id ? '#6366f1' : '#f3f4f6',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        marginRight: '16px',
                                        color: activeTab === item.id ? 'white' : '#6b7280'
                                    }}>
                                        <i className={`fas ${item.icon}`}></i>
                                    </div>
                                    <span style={{ color: activeTab === item.id ? '#111827' : '#4b5563', fontWeight: activeTab === item.id ? '600' : '500' }}>
                                        {item.name}
                                    </span>
                                    {item.soon && (
                                        <span style={{
                                            position: 'absolute',
                                            right: '16px',
                                            fontSize: '10px',
                                            fontWeight: '600',
                                            color: 'white',
                                            background: '#ef4444',
                                            padding: '2px 6px',
                                            borderRadius: '4px'
                                        }}>SOON</span>
                                    )}
                                </div>
                            ))}
                        </div>
                        
                        <div style={{ marginBottom: '32px' }}>
                            <div style={{ fontSize: '12px', color: '#9ca3af', marginBottom: '12px', letterSpacing: '0.05em' }}>ACCOUNT</div>
                            
                            {[
                                { id: 'settings', name: 'Settings', icon: 'fa-cog' },
                                { id: 'help', name: 'Help & Support', icon: 'fa-question-circle' }
                            ].map(item => (
                                <div key={item.id} style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    padding: '12px 16px',
                                    borderRadius: '8px',
                                    marginBottom: '8px',
                                    cursor: 'pointer'
                                }}>
                                    <div style={{
                                        width: '32px',
                                        height: '32px',
                                        borderRadius: '8px',
                                        background: '#f3f4f6',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        marginRight: '16px',
                                        color: '#6b7280'
                                    }}>
                                        <i className={`fas ${item.icon}`}></i>
                                    </div>
                                    <span style={{ color: '#4b5563' }}>{item.name}</span>
                                </div>
                            ))}
                        </div>
                        
                        <div style={{
                            padding: '16px',
                            borderRadius: '12px',
                            background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
                            color: 'white',
                            boxShadow: '0 4px 12px rgba(79, 70, 229, 0.3)'
                        }}>
                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
                                <i className="fas fa-crown" style={{ color: '#FFD700', marginRight: '8px' }}></i>
                                <span style={{ fontWeight: '600' }}>Upgrade to Pro</span>
                            </div>
                            <p style={{ fontSize: '12px', opacity: 0.9, marginBottom: '12px' }}>
                                Get unlimited tests, advanced features, and priority support.
                            </p>
                            <button style={{
                                width: '100%',
                                padding: '8px',
                                borderRadius: '8px',
                                background: 'rgba(255, 255, 255, 0.2)',
                                border: 'none',
                                color: 'white',
                                fontWeight: '600',
                                cursor: 'pointer',
                                backdropFilter: 'blur(4px)'
                            }}>Learn More</button>
                        </div>
                    </div>
                </div>
            )}
            
            <main style={{
                paddingTop: '60px',
                paddingBottom: '70px',
                minHeight: '100vh',
                background: '#f8fafc',
                overflow: 'auto'
            }}>
                {activeTab === 'speed-test' && <MobileSpeedTest />}
                {activeTab === 'seo-check' && <MobileSeoCheck />}
                {activeTab === 'web-scraping' && <MobileWebScraping />}
                {activeTab === 'home' && (
                    <>
                        {/* Hero Section */}
                        <div style={{
                            background: 'linear-gradient(135deg, #6366f1, #7c3aed)',
                            color: 'white',
                            padding: '20px',
                            borderRadius: '0 0 30px 30px',
                            textAlign: 'center',
                            marginBottom: '24px',
                            boxShadow: '0 4px 20px rgba(79, 70, 229, 0.2)',
                            position: 'relative',
                            overflow: 'hidden'
                        }}>
                            <div style={{
                                position: 'absolute',
                                top: '-20%',
                                right: '-20%',
                                width: '60%',
                                height: '60%',
                                background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%)',
                                borderRadius: '50%'
                            }}></div>
                            
                            <div style={{
                                position: 'absolute',
                                bottom: '-10%',
                                left: '-10%',
                                width: '40%',
                                height: '40%',
                                background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%)',
                                borderRadius: '50%'
                            }}></div>
                            
                            <div style={{ position: 'relative', zIndex: 2 }}>
                                <h1 style={{ 
                                    fontSize: '28px', 
                                    fontWeight: '800', 
                                    marginBottom: '8px',
                                    textShadow: '0 2px 4px rgba(0,0,0,0.1)'
                                }}>
                                    Web Testing Tools
                                </h1>
                                
                                <p style={{ 
                                    fontSize: '16px',
                                    opacity: 0.9,
                                    marginBottom: '24px',
                                    fontWeight: '300'
                                }}>
                                    For developers & marketers
                                </p>
                                
                                <div style={{ 
                                    background: 'rgba(255,255,255,0.15)',
                                    borderRadius: '12px',
                                    padding: '10px 16px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    backdropFilter: 'blur(10px)',
                                    border: '1px solid rgba(255,255,255,0.2)',
                                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                                    margin: '0 auto',
                                    maxWidth: '320px'
                                }}>
                                    <input 
                                        type="text" 
                                        placeholder="Search tools..." 
                                        style={{
                                            background: 'transparent',
                                            border: 'none',
                                            color: 'white',
                                            width: '100%',
                                            outline: 'none',
                                            fontSize: '14px',
                                            padding: '0'
                                        }}
                                    />
                                    <i className="fas fa-search" style={{ color: 'white', opacity: 0.8 }}></i>
                                </div>
                            </div>
                        </div>
                        
                        {/* Stats/Numbers Section */}
                        <div style={{ 
                            display: 'flex', 
                            justifyContent: 'space-around',
                            padding: '0 16px',
                            marginBottom: '32px'
                        }}>
                            {[
                                { label: 'Users', value: '150K+', icon: 'fa-users' },
                                { label: 'Tests Run', value: '5M+', icon: 'fa-vial' },
                                { label: 'Countries', value: '120+', icon: 'fa-globe' }
                            ].map((stat, index) => (
                                <div key={index} style={{
                                    textAlign: 'center',
                                    flex: 1
                                }}>
                                    <div style={{
                                        width: '40px',
                                        height: '40px',
                                        borderRadius: '12px',
                                        background: 'white',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        margin: '0 auto 8px',
                                        boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
                                        color: '#6366f1'
                                    }}>
                                        <i className={`fas ${stat.icon}`}></i>
                                    </div>
                                    
                                    <div style={{ 
                                        fontSize: '16px', 
                                        fontWeight: '700',
                                        color: '#111827',
                                        marginBottom: '2px'
                                    }}>
                                        {stat.value}
                                    </div>
                                    
                                    <div style={{ 
                                        fontSize: '12px', 
                                        color: '#6b7280'
                                    }}>
                                        {stat.label}
                                    </div>
                                </div>
                            ))}
                        </div>
                        
                        {/* Tool Cards - 2x2 grid with improved design */}
                        <div style={{ 
                            padding: '0 16px', 
                            marginBottom: '32px'
                        }}>
                            <h2 style={{ 
                                fontSize: '18px',
                                fontWeight: '700',
                                marginBottom: '16px',
                                color: '#111827'
                            }}>
                                Popular Tools
                            </h2>
                            
                            <div style={{ 
                                display: 'grid', 
                                gridTemplateColumns: '1fr 1fr',
                                gap: '16px',
                                marginBottom: '16px'
                            }}>
                                {[
                                    {
                                        name: 'Web Scraping',
                                        description: 'Test scraping with multiple engines',
                                        icon: 'fa-spider',
                                        color: 'linear-gradient(135deg, #a5b4fc, #6366f1)',
                                        id: 'web-scraping'
                                    },
                                    {
                                        name: 'Speed Test',
                                        description: 'Check your connection speed',
                                        icon: 'fa-gauge-high',
                                        color: 'linear-gradient(135deg, #22d3ee, #0ea5e9)',
                                        id: 'speed-test'
                                    },
                                    {
                                        name: 'SEO Check',
                                        description: 'Analyze website SEO score',
                                        icon: 'fa-magnifying-glass',
                                        color: 'linear-gradient(135deg, #fbbf24, #f97316)',
                                        id: 'seo-check'
                                    },
                                    {
                                        name: 'Security',
                                        description: 'Find security issues',
                                        icon: 'fa-shield-alt',
                                        color: 'linear-gradient(135deg, #a3e635, #16a34a)',
                                        id: 'security',
                                        soon: true
                                    }
                                ].map((tool, index) => (
                                    <div 
                                        key={index}
                                        onClick={() => !tool.soon && handleTabChange(tool.id)}
                                        style={{
                                            background: 'white',
                                            borderRadius: '16px',
                                            padding: '20px',
                                            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',
                                            display: 'flex',
                                            flexDirection: 'column',
                                            alignItems: 'center',
                                            position: 'relative',
                                            overflow: 'hidden',
                                            cursor: tool.soon ? 'default' : 'pointer',
                                            transition: 'transform 0.2s, box-shadow 0.2s',
                                        }}
                                    >
                                        {tool.soon && (
                                            <div style={{
                                                position: 'absolute',
                                                top: '10px',
                                                right: '10px',
                                                background: '#ef4444',
                                                color: 'white',
                                                fontSize: '10px',
                                                fontWeight: '700',
                                                padding: '3px 8px',
                                                borderRadius: '6px',
                                                zIndex: 2,
                                                boxShadow: '0 2px 4px rgba(239, 68, 68, 0.3)',
                                                textTransform: 'uppercase',
                                                letterSpacing: '0.03em',
                                                ...pulseStyle
                                            }}>
                                                Soon
                                            </div>
                                        )}
                                        
                                        <div style={{
                                            width: '56px',
                                            height: '56px',
                                            borderRadius: '16px',
                                            background: tool.color,
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            color: 'white',
                                            fontSize: '24px',
                                            marginBottom: '16px',
                                            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
                                            position: 'relative',
                                            overflow: 'hidden'
                                        }}>
                                            <div style={{
                                                position: 'absolute',
                                                top: '0',
                                                left: '0',
                                                right: '0',
                                                bottom: '0',
                                                background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%)',
                                                borderRadius: '16px'
                                            }}></div>
                                            <i className={`fas ${tool.icon}`}></i>
                                        </div>
                                        
                                        <h3 style={{ 
                                            fontSize: '16px',
                                            fontWeight: '700',
                                            marginBottom: '4px',
                                            color: '#111827',
                                            textAlign: 'center'
                                        }}>
                                            {tool.name}
                                        </h3>
                                        
                                        <p style={{ 
                                            fontSize: '12px',
                                            color: '#6b7280',
                                            textAlign: 'center',
                                            lineHeight: 1.4
                                        }}>
                                            {tool.description}
                                        </p>
                                    </div>
                                ))}
                            </div>
                        </div>
                        
                        {/* Features Section */}
                        <div style={{ 
                            padding: '0 16px', 
                            marginBottom: '32px'
                        }}>
                            <h2 style={{ 
                                fontSize: '18px',
                                fontWeight: '700',
                                marginBottom: '16px',
                                color: '#111827'
                            }}>
                                Why BeAnormal?
                            </h2>
                            
                            <div style={{ 
                                background: 'white',
                                borderRadius: '16px',
                                padding: '8px',
                                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
                                marginBottom: '16px'
                            }}>
                                {[
                                    { title: 'Multiple test engines', description: 'Test with Puppeteer, Playwright, Selenium & more', icon: 'fa-code-branch' },
                                    { title: 'Advanced analysis', description: 'Get detailed reports with actionable insights', icon: 'fa-chart-line' },
                                    { title: 'Free to use', description: 'Core features available without cost', icon: 'fa-gift' }
                                ].map((feature, index) => (
                                    <div key={index} style={{
                                        display: 'flex',
                                        padding: '16px',
                                        borderBottom: index < 2 ? '1px solid #f3f4f6' : 'none'
                                    }}>
                                        <div style={{
                                            width: '40px',
                                            height: '40px',
                                            borderRadius: '12px',
                                            background: '#f3f4f6',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            marginRight: '16px',
                                            color: '#6366f1',
                                            flexShrink: 0
                                        }}>
                                            <i className={`fas ${feature.icon}`}></i>
                                        </div>
                                        
                                        <div>
                                            <h3 style={{ 
                                                fontSize: '15px',
                                                fontWeight: '600',
                                                marginBottom: '4px',
                                                color: '#111827'
                                            }}>
                                                {feature.title}
                                            </h3>
                                            
                                            <p style={{ 
                                                fontSize: '13px',
                                                color: '#6b7280',
                                                lineHeight: 1.4
                                            }}>
                                                {feature.description}
                                            </p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                        
                        {/* Pro Section */}
                        <div style={{ 
                            padding: '0 16px', 
                            marginBottom: '24px'
                        }}>
                            <div style={{
                                background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
                                borderRadius: '16px',
                                padding: '24px',
                                color: 'white',
                                boxShadow: '0 8px 24px rgba(79, 70, 229, 0.3)',
                                position: 'relative',
                                overflow: 'hidden'
                            }}>
                                <div style={{
                                    position: 'absolute',
                                    top: '0',
                                    right: '0',
                                    width: '150px',
                                    height: '150px',
                                    background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%)',
                                    borderRadius: '50%'
                                }}></div>
                                
                                <div style={{ position: 'relative', zIndex: 2 }}>
                                    <div style={{ 
                                        display: 'flex', 
                                        alignItems: 'center',
                                        marginBottom: '16px'
                                    }}>
                                        <i className="fas fa-crown" style={{ 
                                            fontSize: '24px', 
                                            color: '#FFD700',
                                            marginRight: '12px',
                                            filter: 'drop-shadow(0 0 6px rgba(255, 215, 0, 0.6))'
                                        }}></i>
                                        <h3 style={{ 
                                            fontSize: '20px',
                                            fontWeight: '700'
                                        }}>
                                            Upgrade to Pro
                                        </h3>
                                    </div>
                                    
                                    <p style={{ 
                                        fontSize: '14px',
                                        marginBottom: '20px',
                                        opacity: 0.9,
                                        lineHeight: 1.6
                                    }}>
                                        Get unlimited tests, advanced features, and priority support.
                                    </p>
                                    
                                    <div style={{ 
                                        display: 'flex', 
                                        flexDirection: 'column',
                                        gap: '12px',
                                        marginBottom: '20px'
                                    }}>
                                        {[
                                            'Unlimited tests & reports',
                                            'Advanced security scanning',
                                            'Priority support',
                                            'API access'
                                        ].map((feature, index) => (
                                            <div key={index} style={{ 
                                                display: 'flex',
                                                alignItems: 'center'
                                            }}>
                                                <i className="fas fa-check-circle" style={{ 
                                                    color: '#a5b4fc',
                                                    marginRight: '8px',
                                                    fontSize: '16px'
                                                }}></i>
                                                <span style={{ fontSize: '14px' }}>{feature}</span>
                                            </div>
                                        ))}
                                    </div>
                                    
                                    <button style={{
                                        width: '100%',
                                        padding: '12px',
                                        borderRadius: '12px',
                                        background: 'white',
                                        border: 'none',
                                        color: '#4f46e5',
                                        fontWeight: '700',
                                        fontSize: '15px',
                                        cursor: 'pointer',
                                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center'
                                    }}>
                                        <i className="fas fa-crown" style={{ 
                                            color: '#FFD700',
                                            marginRight: '8px'
                                        }}></i>
                                        Get Pro Now
                                    </button>
                                </div>
                            </div>
                        </div>
                    </>
                )}
            </main>
            
            {/* Improved bottom navigation */}
            <nav style={{
                position: 'fixed',
                bottom: 0,
                left: 0,
                right: 0,
                height: '70px',
                background: 'white',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-around',
                padding: '0 16px',
                boxShadow: '0 -4px 10px rgba(0, 0, 0, 0.05)',
                borderTopLeftRadius: '24px',
                borderTopRightRadius: '24px',
                zIndex: 40
            }}>
                {[
                    { id: 'home', icon: 'fa-home', label: 'Home' },
                    { id: 'speed-test', icon: 'fa-gauge-high', label: 'Speed' },
                    { id: 'seo-check', icon: 'fa-magnifying-glass', label: 'SEO' },
                    { id: 'web-scraping', icon: 'fa-spider', label: 'Scraping' },
                    { id: 'more', icon: 'fa-ellipsis-h', label: 'More' }
                ].map((tab, index) => (
                    <div 
                        key={tab.id}
                        onClick={() => handleTabChange(tab.id)}
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flex: 1,
                            position: 'relative',
                            height: '100%',
                            cursor: 'pointer'
                        }}
                    >
                        <div style={{
                            width: '48px',
                            height: '48px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            borderRadius: '12px',
                            background: activeTab === tab.id ? 'rgba(99, 102, 241, 0.1)' : 'transparent',
                            color: activeTab === tab.id ? '#6366f1' : '#6b7280',
                            marginBottom: '2px',
                            transition: 'all 0.2s ease',
                            transform: activeTab === tab.id ? 'translateY(-8px)' : 'translateY(0)',
                            boxShadow: activeTab === tab.id ? '0 4px 8px rgba(99, 102, 241, 0.2)' : 'none'
                        }}>
                            <i className={`fas ${tab.icon}`} style={{ 
                                fontSize: activeTab === tab.id ? '20px' : '18px',
                                transition: 'font-size 0.2s ease'
                            }}></i>
                        </div>
                        
                        <span style={{
                            fontSize: '12px',
                            color: activeTab === tab.id ? '#6366f1' : '#6b7280',
                            fontWeight: activeTab === tab.id ? '600' : '500',
                            transition: 'all 0.2s ease',
                            opacity: activeTab === tab.id ? 1 : 0.8,
                            transform: activeTab === tab.id ? 'translateY(-4px)' : 'translateY(0)'
                        }}>
                            {tab.label}
                        </span>
                        
                        {activeTab === tab.id && (
                            <div style={{
                                position: 'absolute',
                                bottom: '12px',
                                width: '5px',
                                height: '5px',
                                borderRadius: '50%',
                                background: '#6366f1',
                                transition: 'all 0.2s ease'
                            }}></div>
                        )}
                    </div>
                ))}
            </nav>
            
            {/* CSS Animations */}
            <style>
                {`
                    @keyframes fadeIn {
                        from { opacity: 0; }
                        to { opacity: 1; }
                    }
                    
                    @keyframes slideUp {
                        from { transform: translateY(20px); opacity: 0; }
                        to { transform: translateY(0); opacity: 1; }
                    }
                    
                    @keyframes slideInRight {
                        from { transform: translateX(-100%); }
                        to { transform: translateX(0); }
                    }
                    
                    @keyframes pulse {
                        0% { opacity: 1; }
                        50% { opacity: 0.6; }
                        100% { opacity: 1; }
                    }
                    
                    @keyframes spin {
                        0% { transform: rotate(0deg); }
                        100% { transform: rotate(360deg); }
                    }
                `}
            </style>
        </div>
    );
};

// Export the component
window.MobileApp = MobileApp;