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

{% block title %}Secure AI Chat - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Secure, private AI chat solution by AI ML Operations, LLC. Host locally, analyze files
securely, and keep your data safe.{% endblock %}

{% block content %}

<!-- Product Hero Section -->
<div class="product-hero">
  <div class="product-hero-content">
    <h1 class="product-hero-title">Your Private, Secure AI Workspace</h1>
    <p class="product-hero-subtitle">
      Experience the power of a locally hosted Large Language Model.
      Keep your data safe, analyze files securely, and never worry about third-party access.
    </p>
    <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
      <a href="https://chat.aimloperations.com" class="btn">Launch Chat</a>
      <a href="#features" class="btn"
        style="background: transparent; border: 1px solid var(--text-muted); color: var(--text-color);">Learn More</a>
    </div>
  </div>
  <div class="hero-image-container">
    <img src="{% static 'public/img/chat_dashboard.png' %}" alt="Chat Dashboard Interface" class="hero-image">
  </div>
</div>

<!-- Features Section -->
<div id="features" class="section" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">Why Choose Chat?</h2>
    <div class="card-grid">
      <div class="card">
        <h5 class="card-title">🔒 Total Privacy</h5>
        <p class="card-text">
          Hosted locally on your infrastructure. Your data never leaves your control and is never sold to third parties.
        </p>
      </div>
      <div class="card">
        <h5 class="card-title">📄 Smart File Analysis</h5>
        <p class="card-text">
          Upload documents and get instant insights. Perfect for analyzing reports, codebases, and legal documents.
        </p>
      </div>
      <div class="card">
        <h5 class="card-title">⚡ High Performance</h5>
        <p class="card-text">
          Optimized for speed and efficiency, giving you the power of modern LLMs without the latency of cloud APIs.
        </p>
      </div>
    </div>
  </div>
</div>

<!-- Pricing Section -->
<div class="section">
  <div class="container">
    <div class="card"
      style="max-width: 800px; margin: 0 auto; text-align: center; padding: 4rem 2rem; border: 1px solid var(--primary-color);">
      <h2 style="font-size: 2.5rem; margin-bottom: 1rem; color: white;">Simple, Transparent Pricing</h2>
      <div style="font-size: 4rem; font-weight: 800; color: var(--primary-color); margin-bottom: 1rem;">
        $10 <span style="font-size: 1.5rem; color: var(--text-muted); font-weight: 400;">/ user / month</span>
      </div>
      <p style="color: var(--text-muted); margin-bottom: 2.5rem; font-size: 1.1rem;">
        Get full access to all features, including unlimited chats and file analysis.
      </p>
      <a class="btn" href="https://chat.aimloperations.com">Start Your Free Trial</a>
    </div>
  </div>
</div>

{% endblock %}