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

{% block title %}Agentic Bots - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Intelligent agentic bots for automation and engagement. AI ML Operations, LLC develops
custom bots for Telegram and other platforms.{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section" style="height: 40vh; min-height: 300px;">
  <div class="hero-content">
    <h1 class="hero-title">Agentic Bots</h1>
    <p class="hero-subtitle">Intelligent Bots for Automation and Engagement</p>
  </div>
</div>

<!-- About Agentic Bots Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">About Agentic Bots</h2>
    <p style="text-align: center; max-width: 800px; margin: 0 auto; color: var(--text-muted); font-size: 1.1rem;">
      At AI ML Operations, we create intelligent, agentic bots designed to automate tasks, engage users, and streamline
      workflows. Our bots currently integrate seamlessly with Telegram, but we can customize them to suit your specific
      platform or needs. Whether you need a bot for customer support, data collection, or process automation, we deliver
      solutions that are reliable, scalable, and easy to use.
    </p>
  </div>
</div>

<!-- Features Section -->
<div class="section" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">What We Offer</h2>
    <div class="card-grid">
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Custom Bot Development</h5>
        <p class="card-text">Tailored bots designed to meet your unique business requirements.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Platform Integration</h5>
        <p class="card-text">Bots that integrate with Telegram or other platforms of your choice.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Hosting & Maintenance</h5>
        <p class="card-text">We host and maintain your bots, ensuring they run smoothly 24/7.</p>
      </div>
    </div>
  </div>
</div>

<!-- Applications Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">Applications</h2>
    <div class="card-grid">
      <div class="card">
        <img src="{% static 'public/img/bot/card-1.jpg' %}" alt="Customer Support"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Customer Support</span>
        <p class="card-text">Automate responses and provide instant support to your customers.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/bot/card-2.jpg' %}" alt="Data Collection"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Data Collection</span>
        <p class="card-text">Gather and organize data efficiently using intelligent bots.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/bot/card-3.jpg' %}" alt="Process Automation"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Process Automation</span>
        <p class="card-text">Streamline workflows and reduce manual effort with automated bots.</p>
      </div>
    </div>
  </div>
</div>

<!-- Call to Action Section -->
<div class="section" style="text-align: center;">
  <div class="container">
    <h2 class="section-title">Ready to Automate?</h2>
    <p class="hero-subtitle" style="margin-bottom: 2rem;">Contact us today to create your custom agentic bot.</p>
    <a href="{% url 'contact' %}" class="btn">Get Started</a>
  </div>
</div>
{% endblock %}