{% extends "base.html" %}

{% block title %}Welcome to AI Chat Archive{% endblock %}

{% block content %}
<div class="container">
    <!-- Hero Section -->
    <div class="row min-vh-75 align-items-center">
        <div class="col-lg-6">
            <h1 class="display-3 fw-bold mb-4">
                Unlock Your <span class="text-info">Collective Intelligence</span>
            </h1>
            <p class="lead text-secondary mb-5">
                Retrieve, archive, and search through your entire AI chat history from ChatGPT, Bing, and more. 
                One unified search for all your past conversations.
            </p>
            <div class="d-flex gap-3">
                <a href="{% url 'login' %}" class="btn btn-cyan btn-lg px-5 py-3">Get Started</a>
                <a href="#how-it-works" class="btn btn-outline-light btn-lg px-5 py-3">How it Works</a>
            </div>
        </div>
        <div class="col-lg-6 mt-5 mt-lg-0">
            <div class="glass-card p-4 position-relative overflow-hidden">
                <div class="bg-info position-absolute top-0 end-0 p-5 rounded-circle" style="filter: blur(80px); opacity: 0.1;"></div>
                <div class="d-flex align-items-center mb-4">
                    <div class="bg-info bg-opacity-10 p-2 rounded-3 me-3">
                        <i data-lucide="search" class="text-info"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="bg-secondary bg-opacity-20 p-2 rounded w-75 mb-2"></div>
                        <div class="bg-secondary bg-opacity-10 p-2 rounded w-50"></div>
                    </div>
                </div>
                <div class="border-top border-secondary pt-4">
                    <div class="chat-content text-secondary opacity-50">
                        > Retrieving histories...<br>
                        > Found 142 chats from ChatGPT<br>
                        > Found 89 chats from Perplexity<br>
                        > Indexing for rapid search...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- How It Works Section -->
    <div id="how-it-works" class="py-5 mt-5">
        <div class="text-center mb-5">
            <h2 class="fw-bold h1">Three Steps to <span class="text-info">Knowledge Mastery</span></h2>
            <p class="text-secondary">Our platform bridges the gap between AI silos and your team's memory.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="glass-card p-4 h-100 border-top border-info border-3">
                    <div class="mb-3 d-flex align-items-center">
                        <span class="badge bg-info text-dark rounded-circle me-2 p-2" style="width:32px; height:32px; display:flex; align-items:center; justify-content:center;">1</span>
                        <h5 class="mb-0">Connect Engines</h5>
                    </div>
                    <p class="text-secondary mb-0">Use the <strong>"Connect AI"</strong> button in your dashboard to link your API keys securely. We support OpenAI, Anthropic, and Perplexity.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="glass-card p-4 h-100 border-top border-info border-3">
                    <div class="mb-3 d-flex align-items-center">
                        <span class="badge bg-info text-dark rounded-circle me-2 p-2" style="width:32px; height:32px; display:flex; align-items:center; justify-content:center;">2</span>
                        <h5 class="mb-0">Sync History</h5>
                    </div>
                    <p class="text-secondary mb-0">Click <strong>"Fetch Latest"</strong> to automatically download and index your recent conversations into your private company vault.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="glass-card p-4 h-100 border-top border-info border-3">
                    <div class="mb-3 d-flex align-items-center">
                        <span class="badge bg-info text-dark rounded-circle me-2 p-2" style="width:32px; height:32px; display:flex; align-items:center; justify-content:center;">3</span>
                        <h5 class="mb-0">Search & Find</h5>
                    </div>
                    <p class="text-secondary mb-0">Use the <strong>Search Bar</strong> to instantly find any past prompt or answer across all connected AI tools, including file attachments.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Grid -->
    <div id="features" class="py-5 mt-5">
        <div class="row g-4">
            <div class="col-md-4">
                <div class="glass-card p-4 h-100">
                    <i data-lucide="database" class="text-info mb-3" size="32"></i>
                    <h4>Unified Storage</h4>
                    <p class="text-secondary">Centralize all your AI interactions in one secure, company-owned vault.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="glass-card p-4 h-100">
                    <i data-lucide="zap" class="text-info mb-3" size="32"></i>
                    <h4>Instant Search</h4>
                    <p class="text-secondary">Powerful keyword and similarity search powered by optimized database indexes.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="glass-card p-4 h-100">
                    <i data-lucide="shield" class="text-info mb-3" size="32"></i>
                    <h4>Multi-tenant</h4>
                    <p class="text-secondary">Enterprise-grade isolation ensuring your company's data stays private.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}