{% load static %}
<!DOCTYPE html>
<html lang="en" data-theme="dim">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mnemosyne — Knowledge Library</title>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen flex flex-col">

<!-- Hero -->
<div class="hero min-h-screen bg-base-200">
    <div class="hero-content text-center">
        <div class="max-w-lg">
            <h1 class="text-5xl font-bold">Mnemosyne</h1>
            <p class="py-6 text-lg text-base-content/80">
                Your personal knowledge library — organise, embed, and retrieve
                content across books, music, film, art, and journals.
            </p>
            <a href="{% url 'account_login' %}" class="btn btn-primary btn-lg">Log In</a>
        </div>
    </div>
</div>

<!-- Features -->
<div class="bg-base-100 py-16 px-4">
    <div class="container mx-auto">
        <h2 class="text-3xl font-bold text-center mb-10">Features</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div class="card bg-base-200 shadow">
                <div class="card-body items-center text-center">
                    <h3 class="card-title">Content Library</h3>
                    <p>Organise fiction, technical references, music, film, art, and journals in a graph-powered knowledge base.</p>
                </div>
            </div>
            <div class="card bg-base-200 shadow">
                <div class="card-body items-center text-center">
                    <h3 class="card-title">LLM Manager</h3>
                    <p>Manage LLM APIs, track token usage and costs, and configure system-wide embedding and chat models.</p>
                </div>
            </div>
            <div class="card bg-base-200 shadow">
                <div class="card-body items-center text-center">
                    <h3 class="card-title">Secure Keys</h3>
                    <p>Store and manage your personal API keys with Fernet encryption. Integrated with Themis identity.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="footer footer-center bg-base-200 text-base-content p-4">
    <span>&copy; {% now "Y" %} Ouranos — Mnemosyne</span>
</footer>

</body>
</html>
