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

{% block content %}
<!-- Hero Section -->
<div class="hero-section">
    <h1>Agentic Bots</h1>
    <p class="flow-text">Intelligent Bots for Automation and Engagement</p>
  </div>

  <!-- About Agentic Bots Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">About Agentic Bots</h2>
      <p class="flow-text">
        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 grey lighten-3">
    <div class="row container">
      <h2 class="header">What We Offer</h2>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">smart_toy</i>
          <h5>Custom Bot Development</h5>
          <p>Tailored bots designed to meet your unique business requirements.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">integration_instructions</i>
          <h5>Platform Integration</h5>
          <p>Bots that integrate with Telegram or other platforms of your choice.</p>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="icon-block">
          <i class="material-icons">settings</i>
          <h5>Hosting & Maintenance</h5>
          <p>We host and maintain your bots, ensuring they run smoothly 24/7.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Applications Section -->
  <div class="section white">
    <div class="row container">
      <h2 class="header">Applications</h2>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/bot/card-1.jpg' %}"  height="225" width="400" alt="Customer Support">
          </div>
          <div class="card-content">
            <span class="card-title">Customer Support</span>
            <p>Automate responses and provide instant support to your customers.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/bot/card-2.jpg' %}"  height="225" width="400" alt="Data Collection">
          </div>
          <div class="card-content">
            <span class="card-title">Data Collection</span>
            <p>Gather and organize data efficiently using intelligent bots.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="{% static 'public/img/bot/card-3.jpg' %}"  height="225" width="400" alt="Process Automation">
          </div>
          <div class="card-content">
            <span class="card-title">Process Automation</span>
            <p>Streamline workflows and reduce manual effort with automated bots.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Call to Action Section -->
  <div class="section blue-grey darken-3 white-text">
    <div class="row container center">
      <h2 class="header">Ready to Automate?</h2>
      <p class="flow-text">Contact us today to create your custom agentic bot.</p>
      <a href="{% url 'contact' %}" class="btn-large waves-effect waves-light white blue-grey-text text-darken-3">Get Started</a>
    </div>
  </div>
{% endblock %}