{% 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 py-5">
        <div class="col-lg-6">
            <h1 class="display-3 fw-bold mb-4 text-white">
                Unlock Your <span class="text-info">Collective Intelligence</span>
            </h1>
            <p class="lead text-secondary mb-5 opacity-75">
                Retrieve, archive, and search through your entire AI chat history from ChatGPT, POE, Merlin, 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 shadow">Get Started</a>
                <a href="#how-it-works" class="btn btn-outline-info 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 p-md-5 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-3 rounded-4 me-4 border border-info border-opacity-25">
                        <i data-lucide="search" class="text-info" size="32"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="bg-secondary bg-opacity-20 p-2 rounded-pill w-75 mb-3"></div>
                        <div class="bg-secondary bg-opacity-10 p-2 rounded-pill w-50"></div>
                    </div>
                </div>
                <div class="border-top border-secondary border-opacity-25 pt-4">
                    <div class="chat-content text-secondary opacity-50">
                        <span class="text-info">></span> Retrieving histories...<br>
                        <span class="text-info">></span> Found 142 chats from ChatGPT<br>
                        <span class="text-info">></span> Found 89 chats from POE<br>
                        <span class="text-info">></span> 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 display-5 text-white">Three Steps to <span class="text-info">Knowledge Mastery</span></h2>
            <p class="text-secondary lead opacity-75">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-3 p-0 d-flex align-items-center justify-content-center" style="width:36px; height:36px; font-weight: bold;">1</span>
                        <h4 class="mb-0 text-white">Connect Engines</h4>
                    </div>
                    <p class="text-secondary mb-0">Link your API keys securely in the dashboard. We support OpenAI, Merlin, POE, and OpenRouter.</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-3 p-0 d-flex align-items-center justify-content-center" style="width:36px; height:36px; font-weight: bold;">2</span>
                        <h4 class="mb-0 text-white">Sync History</h4>
                    </div>
                    <p class="text-secondary mb-0">Click <strong>"Sync Now"</strong> to automatically download and index your recent conversations into your private 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-3 p-0 d-flex align-items-center justify-content-center" style="width:36px; height:36px; font-weight: bold;">3</span>
                        <h4 class="mb-0 text-white">Search & Find</h4>
                    </div>
                    <p class="text-secondary mb-0">Use the powerful search bar to instantly find any past prompt or answer across all connected AI tools.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
