class CustomAbout extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <section id="about" class="py-16">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="grid md:grid-cols-2 gap-12 items-center">
                        <div class="order-2 md:order-1">
                            <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">About YAPPERTAR-ai & DeepSeek</h2>
                            
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Quantum Mind Model</h3>
                                <p class="text-gray-600 dark:text-gray-300 mb-4">
                                    Our AI implements quantum cognition principles, allowing simultaneous evaluation of multiple hypotheses and probabilistic reasoning that mimics human intuition at scale.
                                </p>
                            </div>
                            
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Deep Search Technology</h3>
                                <p class="text-gray-600 dark:text-gray-300 mb-4">
                                    Combining neural networks with symbolic AI, we enable semantic understanding of queries and context-aware information retrieval across the entire web.
                                </p>
                            </div>
                            
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Developed by FantomInsight</h3>
                                <p class="text-gray-600 dark:text-gray-300">
                                    Our team of quantum computing and AI experts have created this platform to push the boundaries of machine cognition and information processing.
                                </p>
                            </div>
                        </div>
                        
                        <div class="order-1 md:order-2">
                            <div class="bg-gray-100 dark:bg-gray-700 p-8 rounded-xl shadow-lg">
                                <div class="mb-6">
                                    <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 gradient-text">Technology Stack</h3>
                                    <ul class="space-y-3">
                                        <li class="flex items-center">
                                            <i data-feather="check-circle" class="text-primary-500 mr-2"></i>
                                            <span class="text-gray-700 dark:text-gray-300">Quantum-inspired algorithms</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i data-feather="check-circle" class="text-primary-500 mr-2"></i>
                                            <span class="text-gray-700 dark:text-gray-300">Transformer architectures</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i data-feather="check-circle" class="text-primary-500 mr-2"></i>
                                            <span class="text-gray-700 dark:text-gray-300">Knowledge graph integration</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i data-feather="check-circle" class="text-primary-500 mr-2"></i>
                                            <span class="text-gray-700 dark:text-gray-300">Federated learning system</span>
                                        </li>
                                        <li class="flex items-center">
                                            <i data-feather="check-circle" class="text-primary-500 mr-2"></i>
                                            <span class="text-gray-700 dark:text-gray-300">Privacy-preserving design</span>
                                        </li>
                                    </ul>
                                </div>
                                
                                <div>
                                    <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 gradient-text">Key Capabilities</h3>
                                    <div class="grid grid-cols-2 gap-4">
                                        <div class="bg-primary-50 dark:bg-gray-600 p-3 rounded-lg">
                                            <i data-feather="compass" class="text-primary-500 dark:text-secondary-400 mb-2"></i>
                                            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Context-aware search</p>
                                        </div>
                                        <div class="bg-primary-50 dark:bg-gray-600 p-3 rounded-lg">
                                            <i data-feather="activity" class="text-primary-500 dark:text-secondary-400 mb-2"></i>
                                            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Real-time adaptation</p>
                                        </div>
                                        <div class="bg-primary-50 dark:bg-gray-600 p-3 rounded-lg">
                                            <i data-feather="bar-chart-2" class="text-primary-500 dark:text-secondary-400 mb-2"></i>
                                            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Multi-dimensional analysis</p>
                                        </div>
                                        <div class="bg-primary-50 dark:bg-gray-600 p-3 rounded-lg">
                                            <i data-feather="lock" class="text-primary-500 dark:text-secondary-400 mb-2"></i>
                                            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Secure operations</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}

customElements.define('custom-about', CustomAbout);