<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - AI Chat with Llama 3.3 70B</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='/favicon.ico') }}">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- DaisyUI CDN -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.1.5/dist/full.min.css" rel="stylesheet" type="text/css" />
    
    <!-- HTMX CDN -->
    <script src="https://unpkg.com/htmx.org@2.0.6"></script>
    
    <!-- Alpine.js CDN -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Custom Tailwind Config -->
    <script>
        tailwind.config = {
            daisyui: {
                themes: ["light", "dark"],
            },
            theme: {
                extend: {
                    colors: {
                        'ai-blue': '#3B82F6',
                        'ai-purple': '#8B5CF6',
                        'ai-gradient': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
                    }
                }
            }
        }
    </script>
    
    <!-- Markdown Styles -->
    <style>
        .chat-bubble pre {
            background-color: #f3f4f6;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            padding: 1rem;
            margin: 0.5rem 0;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
        }
        
        .chat-bubble code {
            background-color: #f3f4f6;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
        }
        
        .chat-bubble pre code {
            background-color: transparent;
            padding: 0;
        }
        
        .chat-bubble ul, .chat-bubble ol {
            margin: 0.5rem 0;
            padding-left: 1.5rem;
        }
        
        .chat-bubble li {
            margin: 0.25rem 0;
        }
        
        .chat-bubble h1, .chat-bubble h2, .chat-bubble h3, 
        .chat-bubble h4, .chat-bubble h5, .chat-bubble h6 {
            margin: 1rem 0 0.5rem 0;
            font-weight: 600;
        }
        
        .chat-bubble h1 { font-size: 1.5rem; }
        .chat-bubble h2 { font-size: 1.25rem; }
        .chat-bubble h3 { font-size: 1.125rem; }
        
        .chat-bubble blockquote {
            border-left: 4px solid #3b82f6;
            padding-left: 1rem;
            margin: 0.5rem 0;
            font-style: italic;
            color: #6b7280;
        }
        
        .chat-bubble table {
            border-collapse: collapse;
            width: 100%;
            margin: 0.5rem 0;
        }
        
        .chat-bubble th, .chat-bubble td {
            border: 1px solid #e5e7eb;
            padding: 0.5rem;
            text-align: left;
        }
        
        .chat-bubble th {
            background-color: #f9fafb;
            font-weight: 600;
        }
        
        .chat-bubble p {
            margin: 0.5rem 0;
        }
        
        .chat-bubble strong {
            font-weight: 600;
        }
        
        .chat-bubble em {
            font-style: italic;
        }
        
        /* Enhanced chat bubble styling */
        .chat-bubble {
            padding: 1rem 1.25rem !important;
            border-radius: 1.25rem !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
    
    <!-- Alpine.js Data Function -->
    <script>
        function chatData() {
            return {
                messages: [],
                inputMessage: '',
                isLoading: false,
                currentStreamingMessage: null,
                apiKeyAvailable: true,
                init() {
                    this.checkApiKeyStatus();
                },
                async checkApiKeyStatus() {
                    try {
                        const response = await fetch('/api/chat/test');
                        const data = await response.json();
                        this.apiKeyAvailable = data.status === 'success';
                        
                        if (!this.apiKeyAvailable) {
                            this.showApiKeyWarning(data.message || 'OpenRouter API key not configured');
                        }
                    } catch (error) {
                        console.error('Error checking API key status:', error);
                        this.apiKeyAvailable = false;
                        this.showApiKeyWarning('Unable to verify API key configuration');
                    }
                },
                showApiKeyWarning(message) {
                    const warningHtml = `
                        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-700">
                                        <strong>API Key Missing:</strong> ${message}. This demo requires a valid OPENROUTER_API_KEY environment variable.
                                    </p>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    // Insert the warning at the top of the chat container
                    const chatContainer = document.querySelector('.max-w-4xl.mx-auto');
                    if (chatContainer) {
                        chatContainer.insertAdjacentHTML('afterbegin', warningHtml);
                    }
                },
                formatMessage(content) {
                    // Content is already HTML from server-side markdown processing
                    return content;
                },
                sendMessage() {
                    if (!this.inputMessage.trim()) return;
                    
                    if (!this.apiKeyAvailable) {
                        this.showApiKeyWarning('OpenRouter API key not configured');
                        return;
                    }
                    
                    const userMessage = this.inputMessage;
                    this.messages.push({
                        role: 'user',
                        content: userMessage,
                        timestamp: new Date().toLocaleTimeString()
                    });
                    
                    this.inputMessage = '';
                    this.isLoading = true;
                    
                    // Create a new assistant message for streaming
                    this.currentStreamingMessage = {
                        role: 'assistant',
                        content: '',
                        rawContent: '', // Store raw content for proper formatting
                        timestamp: new Date().toLocaleTimeString()
                    };
                    this.messages.push(this.currentStreamingMessage);
                    
                    // Use fetch with streaming for better compatibility
                    fetch('/api/chat/stream', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ message: userMessage })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        
                        const reader = response.body.getReader();
                        const decoder = new TextDecoder();
                        let buffer = '';
                        let currentEvent = null;
                        let currentData = '';
                        
                        // Capture the reference to currentStreamingMessage
                        const streamingMessage = this.currentStreamingMessage;
                        
                        const readStream = () => {
                            return reader.read().then(({ done, value }) => {
                                if (done) {
                                    this.isLoading = false;
                                    this.currentStreamingMessage = null;
                                    return;
                                }
                                
                                buffer += decoder.decode(value, { stream: true });
                                const lines = buffer.split('\n');
                                
                                // Keep the last line in buffer if it's incomplete
                                buffer = lines.pop() || '';
                                
                                for (const line of lines) {
                                    const trimmedLine = line.trim();
                                    if (!trimmedLine) continue; // Skip empty lines
                                    
                                    if (trimmedLine.startsWith('event: ')) {
                                        // Save the current event if we have data
                                        if (currentEvent && currentData) {
                                            processEvent(currentEvent, currentData);
                                        }
                                        currentEvent = trimmedLine.slice(7);
                                        currentData = '';
                                    } else if (trimmedLine.startsWith('data: ')) {
                                        currentData += trimmedLine.slice(6);
                                    }
                                }
                                
                                // Process any remaining event
                                if (currentEvent && currentData) {
                                    processEvent(currentEvent, currentData);
                                }
                                
                                return readStream();
                            });
                        }
                        
                        const processEvent = (eventType, dataStr) => {
                            if (eventType === 'message') {
                                try {
                                    const data = JSON.parse(dataStr);
                                    if (data && data.content && streamingMessage) {
                                        // Server sends pre-formatted HTML content
                                        streamingMessage.content = data.content;
                                        streamingMessage.rawContent = data.raw_content || data.content;
                                    }
                                } catch (e) {
                                    console.error('Error parsing SSE data:', e, 'Data:', dataStr);
                                }
                            } else if (eventType === 'complete') {
                                this.isLoading = false;
                                this.currentStreamingMessage = null;
                            } else if (eventType === 'error') {
                                if (streamingMessage) {
                                    streamingMessage.content = 'Sorry, I encountered an error. Please try again.';
                                }
                                this.isLoading = false;
                                this.currentStreamingMessage = null;
                            }
                        }
                        
                        return readStream();
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        
                        // Check if it's an API key error
                        if (error.message && error.message.includes('API key')) {
                            this.apiKeyAvailable = false;
                            this.showApiKeyWarning('OpenRouter API key not configured');
                        } else {
                            this.currentStreamingMessage.content = 'Sorry, I encountered an error. Please try again.';
                        }
                        
                        this.isLoading = false;
                        this.currentStreamingMessage = null;
                    });
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    {% include 'partials/header.html' %}

    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-ai-blue to-ai-purple text-white py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-5xl font-bold mb-6"> Single Tatami Mat AI</h1>
                <p class="text-xl mb-8 text-blue-100">
                    Just the LLM, plain and simple. Avoid the hassle and stress of hectic information from
                     Internet search
                    or chat history. 
                </p>
                
                <!-- Model Info -->
                <div class="inline-flex items-center bg-white/10 backdrop-blur-sm rounded-lg px-6 py-3 mb-8">
                    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                    <span class="text-lg font-semibold">You can see the entire world in a single tatami mat</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Chat Interface -->
    <section class="py-12">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                                    <div class="card bg-base-100 shadow-xl" 
                 x-data="chatData()">
                
                <!-- Chat Header -->
                <div class="bg-gradient-to-r from-ai-blue to-ai-purple px-6 py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-3">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-white font-semibold text-lg">Single Tatami Mat AI</h3>
                                <p class="text-blue-100 text-sm">Powered by Llama 3.3 70B</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="flex items-center space-x-2">
                                <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                                <span class="text-blue-100 text-sm">Online</span>
                            </div>
                            <button class="btn btn-ghost btn-sm" onclick="document.documentElement.classList.toggle('dark')">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Messages Container -->
                <div class="h-96 overflow-y-auto p-6 space-y-4" 
                     x-ref="messagesContainer"
                     x-init="$watch('messages', () => { 
                        setTimeout(() => { 
                            $refs.messagesContainer.scrollTop = $refs.messagesContainer.scrollHeight 
                        }, 100) 
                     })">
                    
                    <!-- Welcome Message -->
                    <div class="chat chat-start">
                        <div class="chat-bubble bg-gradient-to-r from-blue-100 to-purple-100 text-gray-800 border border-blue-200">
                            <p>👋 Hello! I'm Midori, powered by Llama 3.3 70B. How can I help you today?</p>
                            <p class="text-xs opacity-70 mt-2">Just type your message below to start chatting!</p>
                        </div>
                        <div class="chat-footer opacity-50">Midori</div>
                    </div>
                    
                    <!-- Dynamic Messages -->
                    <template x-for="(message, index) in messages" :key="index">
                        <div class="chat" :class="message.role === 'user' ? 'chat-end' : 'chat-start'">
                            <div class="chat-bubble" 
                                 :class="message.role === 'user' ? 'bg-gradient-to-r from-purple-200 to-pink-200 text-gray-800 border border-purple-300' : 'bg-gradient-to-r from-blue-100 to-purple-100 text-gray-800 border border-blue-200'">
                                <div x-html="formatMessage(message.content)"></div>
                            </div>
                            <div class="chat-footer opacity-50" 
                                 x-text="message.role === 'user' ? 'You' : 'Midori'"></div>
                        </div>
                    </template>
                    
                    <!-- Loading Indicator -->
                    <div x-show="isLoading && !currentStreamingMessage" class="chat chat-start">
                        <div class="chat-bubble bg-gradient-to-r from-blue-100 to-purple-100 text-gray-800 border border-blue-200">
                            <div class="flex items-center space-x-2">
                                <span class="loading loading-dots loading-sm"></span>
                                <span class="text-sm">Midori is thinking...</span>
                            </div>
                        </div>
                        <div class="chat-footer opacity-50">Midori</div>
                    </div>
                    
                    <!-- Streaming Indicator -->
                    <div x-show="isLoading && currentStreamingMessage" class="chat chat-start">
                        <div class="chat-bubble bg-gradient-to-r from-blue-100 to-purple-100 text-gray-800 border border-blue-200">
                            <div class="flex items-center space-x-2">
                                <span class="loading loading-dots loading-sm"></span>
                                <span class="text-sm">Midori is responding...</span>
                            </div>
                        </div>
                        <div class="chat-footer opacity-50">Midori</div>
                    </div>
                </div>
                
                <!-- Input Area -->
                <div class="border-t border-base-300 p-6">
                    <div class="flex space-x-4">
                        <div class="flex-1">
                            <input type="text" 
                                   x-model="inputMessage"
                                   @keyup.enter="sendMessage()"
                                   placeholder="Type your message here..."
                                   class="input input-bordered w-full px-4 py-3"
                                   :disabled="isLoading">
                        </div>
                        <button @click="sendMessage()"
                                :disabled="isLoading || !inputMessage.trim()"
                                class="btn bg-gradient-to-r from-ai-blue to-ai-purple text-white border-0 hover:from-blue-600 hover:to-purple-600 flex items-center gap-2 px-6 py-3 rounded-xl"
                                :class="{ 'loading': isLoading }">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                            </svg>
                            <span x-show="!isLoading">Send</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-4xl font-bold text-center mb-16 text-gray-900">
                Demonstration of Modern Web Technologies
            </h2>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- HTMX Feature -->
                <div class="group" x-data="{ hovered: false }" 
                     @mouseenter="hovered = true" 
                     @mouseleave="hovered = false">
                    <div class="bg-gradient-to-br from-blue-50 to-purple-50 p-8 rounded-xl transition-all duration-300"
                         :class="hovered ? 'shadow-xl scale-105' : 'shadow-lg'">
                        <div class="w-16 h-16 bg-ai-blue rounded-lg flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-900">HTMX Integration</h3>
                        <p class="text-gray-600">
                            Real-time communication with the server using HTMX for seamless chat experience without page refreshes.
                        </p>
                    </div>
                </div>

                <!-- Alpine.js Feature -->
                <div class="group" x-data="{ hovered: false }" 
                     @mouseenter="hovered = true" 
                     @mouseleave="hovered = false">
                    <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-xl transition-all duration-300"
                         :class="hovered ? 'shadow-xl scale-105' : 'shadow-lg'">
                        <div class="w-16 h-16 bg-ai-purple rounded-lg flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-900">Alpine.js Magic</h3>
                        <p class="text-gray-600">
                            Reactive UI components and smooth animations powered by Alpine.js for an interactive chat experience.
                        </p>
                    </div>
                </div>

                <!-- Tailwind Feature -->
                <div class="group" x-data="{ hovered: false }" 
                     @mouseenter="hovered = true" 
                     @mouseleave="hovered = false">
                    <div class="bg-gradient-to-br from-green-50 to-blue-50 p-8 rounded-xl transition-all duration-300"
                         :class="hovered ? 'shadow-xl scale-105' : 'shadow-lg'">
                        <div class="w-16 h-16 bg-gradient-to-br from-ai-blue to-ai-purple rounded-lg flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-900">Tailwind CSS</h3>
                        <p class="text-gray-600">
                            Beautiful, responsive design with utility-first CSS framework for a modern and polished interface.
                        </p>
                    </div>
                </div>

                <!-- DaisyUI Feature -->
                <div class="group" x-data="{ hovered: false }" 
                     @mouseenter="hovered = true" 
                     @mouseleave="hovered = false">
                    <div class="bg-gradient-to-br from-pink-50 to-purple-50 p-8 rounded-xl transition-all duration-300"
                         :class="hovered ? 'shadow-xl scale-105' : 'shadow-lg'">
                        <div class="w-16 h-16 bg-gradient-to-br from-pink-400 to-purple-500 rounded-lg flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-900">DaisyUI Components</h3>
                        <p class="text-gray-600">
                            Professional chat bubbles, buttons, and form elements with built-in theming and responsive design.
                        </p>
                    </div>
                </div>

                <!-- OpenRouter Feature -->
                <div class="group" x-data="{ hovered: false }" 
                     @mouseenter="hovered = true" 
                     @mouseleave="hovered = false">
                    <div class="bg-gradient-to-br from-amber-50 to-orange-50 p-8 rounded-xl transition-all duration-300"
                         :class="hovered ? 'shadow-xl scale-105' : 'shadow-lg'">
                        <div class="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-500 rounded-lg flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-900">OpenRouter</h3>
                        <p class="text-gray-600">
                            AI gateway for developers providing a single, standardized API to access LLMs from multiple providers.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Single Tatami Mat AI Section -->
    <section class="py-20 bg-gradient-to-br from-blue-50 to-purple-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-4xl font-bold mb-8 text-gray-900">
                Single Tatami Mat AI
            </h2>
            <p class="text-xl text-gray-700 leading-relaxed max-w-3xl mx-auto">
                Long for the simpler life? Tired of worrying if you're up to date with the newest online information or what you said in the past?
            </p>
            <p class="text-lg text-gray-600 mt-6 max-w-3xl mx-auto">
                Welcome to Single Tatami Mat AI. The simple life with just the basic answers.
            </p>
            <div class="mt-12 flex justify-center">
                <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg border border-blue-200">
                    <div class="space-y-6">
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                                </svg>
                            </div>
                            <div class="text-left">
                                <h3 class="text-lg font-semibold text-gray-900">No Internet Search</h3>
                                <p class="text-gray-600">Just pure AI reasoning without external distractions</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <div class="text-left">
                                <h3 class="text-lg font-semibold text-gray-900">No Chat History</h3>
                                <p class="text-gray-600">Fresh start every conversation, no baggage from the past</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    {% include 'partials/footer.html' %}


</body>
</html> 