{% extends "base.html" %}
{% load static %}
{% block path %}  url({% static 'public/img/bg4.jpeg' %}) {% endblock %}

{% block content %}

  <!-- Hero Section -->
  <div class="hero-section" >
    <h1>Chat</h1>
    <p>Your Private, Secure, and Powerful LLM Solution</p>
  </div>

  <!-- Product Description Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">What is Chat?</h2>
      <p class="flow-text">
        Chat is a closed-source Large Language Model (LLM) designed specifically for small and medium businesses. Hosted locally, Chat ensures that all your data remains private and secure. With Chat, your data is never sold or accessed by third parties—ever. You retain full control over your accounts and data. Chat also includes advanced file analysis capabilities, making it a versatile tool for your business needs.
      </p>
    </div>
  </div>

  <!-- Features Section -->
  <div class="section grey lighten-3">
    <div class="row container">
      <h2 class="header">Key Features</h2>
      <div class="col s12 m4">
      
          <div class="center">
            <i class="material-icons feature-icon">lock</i>
            <h5>Local Hosting</h5>
            <p>All data is stored and processed locally, ensuring maximum privacy and security.</p>
          </div>
      
        
          
          
          
        
      </div>
      <div class="col s12 m4">
        <div class="center">
          <i class="material-icons feature-icon">security</i>
          <h5>No Third-Party Access</h5>
          <p>Your data is never sold or accessed by third parties for any reason.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="center">
          <i class="material-icons feature-icon">folder</i>
          <h5>File Analysis</h5>
          <p>Analyze files directly within the platform for seamless integration into your workflows.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Pricing Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">Pricing</h2>
      
      <div class="col s12 m6">
        <div class="screenshot-img">
          <img src="{% static 'public/img/chat_screenshot.png' %}" style="width: 100%;">
      </div>
      </div>
      <div class="col s12 m6">
        <div class="pricing-card blue-grey lighten-5">
            <h4>$10</h4>
            <p>per user per month</p>
            <p>Start with a free trial to experience the power of Chat.</p>
            <a class="btn waves-effect waves-light" href="{% url 'contact' %}">Inquire Now</a>
            </div>
      </div>
      
    </div>
  </div>

  <!-- Product Images Section -->
  <!-- <div class="section grey lighten-3">
    <div class="row container">
      <h2 class="header">Product Images</h2>
      <div class="col s12 m4">
        <img src="https://via.placeholder.com/400x300" alt="Chat Interface" class="responsive-img materialboxed">
      </div>
      <div class="col s12 m4">
        <img src="https://via.placeholder.com/400x300" alt="File Analysis" class="responsive-img materialboxed">
      </div>
      <div class="col s12 m4">
        <img src="https://via.placeholder.com/400x300" alt="Dashboard" class="responsive-img materialboxed">
      </div>
    </div>
  </div> -->

{% endblock %}