{% extends "base.html" %}
{% load static %}

{% block content %}
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill mb-3">Enterprise Ready AI</span>
                <h1 class="display-4 fw-bold mb-4 text-navy">Scale Your Business with <span class="text-primary">Intelligent Workflows</span></h1>
                <p class="lead text-muted mb-5">The ultimate AI-driven SaaS platform for multitenant organizations. Manage teams, automate documents, and chat with your business intelligence.</p>
                <div class="d-flex gap-3">
                    <a href="#" class="btn btn-primary btn-lg px-5">Start Free Trial</a>
                    <a href="#features" class="btn btn-outline-secondary btn-lg px-5">View Features</a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="glass-card p-0 overflow-hidden shadow-lg">
                    <div class="bg-navy p-3 text-white d-flex align-items-center">
                        <div class="feature-icon bg-primary mb-0 me-3" style="width:30px; height:30px; font-size: 1rem;">AI</div>
                        <h6 class="mb-0">AIBiz Assistant</h6>
                    </div>
                    <div class="chat-container">
                        <div class="chat-messages d-flex flex-column" id="chat-messages">
                            <div class="chat-bubble bubble-ai">
                                Hello! I'm your AIBiz Assistant. How can I help you optimize your business today?
                            </div>
                        </div>
                        <div class="chat-input-area">
                            <div class="input-group">
                                <input type="text" id="chat-input" class="form-control border-0 shadow-none" placeholder="Ask about AI workflows..." aria-label="Chat input">
                                <button class="btn btn-primary rounded-pill px-4 ms-2" type="button" id="send-btn">Send</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="features" class="py-5 bg-white">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Everything You Need to Succeed</h2>
            <p class="text-muted">Powerful tools designed for the modern B2B ecosystem.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">🏢</div>
                    <h5 class="fw-bold">Multitenancy</h5>
                    <p class="text-muted small">Built-in organization management with isolated data and custom roles.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">🤖</div>
                    <h5 class="fw-bold">AI Chat</h5>
                    <p class="text-muted small">Context-aware assistant trained on your business data and workflows.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">📄</div>
                    <h5 class="fw-bold">Doc Ingestion</h5>
                    <p class="text-muted small">Automated summarization and data extraction from complex business documents.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    const chatMessages = document.getElementById('chat-messages');
    const chatInput = document.getElementById('chat-input');
    const sendBtn = document.getElementById('send-btn');

    function addMessage(text, isAi = false) {
        const bubble = document.createElement('div');
        bubble.className = `chat-bubble ${isAi ? 'bubble-ai' : 'bubble-user'}`;
        bubble.innerText = text;
        chatMessages.appendChild(bubble);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    async function handleSend() {
        const message = chatInput.value.trim();
        if (!message) return;

        addMessage(message, false);
        chatInput.value = '';
        
        // Show typing indicator or just wait
        const typingBubble = document.createElement('div');
        typingBubble.className = 'chat-bubble bubble-ai italic text-muted';
        typingBubble.innerText = 'Assistant is thinking...';
        chatMessages.appendChild(typingBubble);

        try {
            const response = await fetch('{% url "ai_chat" %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ message: message })
            });
            const data = await response.json();
            
            chatMessages.removeChild(typingBubble);
            
            if (data.reply) {
                addMessage(data.reply, true);
            } else {
                addMessage('Error: ' + (data.error || 'Unknown error'), true);
            }
        } catch (error) {
            chatMessages.removeChild(typingBubble);
            addMessage('Error connecting to the AI service.', true);
        }
    }

    sendBtn.addEventListener('click', handleSend);
    chatInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') handleSend();
    });
</script>
{% endblock %}
