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

{% block title %}AI Agents & Automation - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Custom proprietary AI agents for workflow automation and conversations. Web-hosted, scalable, with real-time performance analytics by AI ML Operations, LLC.{% endblock %}
{% block og_title %}AI Agents & Automation - AI ML Operations, LLC{% endblock %}
{% block og_description %}Proprietary web-hosted AI agents with scalable hosting and real-time performance analytics.{% endblock %}

{% block content %}
<div class="hero-section" style="height: 45vh; min-height: 320px;">
  <div class="hero-content">
    <h1 class="hero-title">AI Agents &amp; Automation</h1>
    <p class="hero-subtitle hero-subtitle--wide">
      Proprietary agents built for your workflows and conversations—hosted, scalable, and observable.
    </p>
    <div class="hero-cta">
      <a href="{% url 'contact' %}?subject=AI%20Agents" class="btn">Build Your Agent</a>
      <a href="{% url 'forward_deployed' %}" class="btn btn-secondary">Forward-Deployed AI</a>
    </div>
  </div>
</div>

<div class="section">
  <div class="container">
    <h2 class="section-title">About Our AI Agents</h2>
    <p style="text-align: center; max-width: 820px; margin: 0 auto; color: var(--text-muted); font-size: 1.1rem;">
      We design and deploy proprietary AI agents that automate tasks, support customers, and orchestrate multi-step workflows.
      Agents are web-hosted and built to scale with your business. As part of our forward-deployed engagements—or as standalone
      products—we integrate with your platforms (including Telegram and custom channels) and give you visibility into how
      agents perform in the real world.
    </p>
  </div>
</div>

<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 Agent Development</h5>
        <p class="card-text">Agents tailored to your data, policies, and workflows—not generic chatbots.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Web-Hosted &amp; Scalable</h5>
        <p class="card-text">Production hosting and maintenance so your agents stay available 24/7.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Analytics &amp; Insights</h5>
        <p class="card-text">Real-time performance metrics and conversation analytics so you can improve outcomes continuously.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Platform Integration</h5>
        <p class="card-text">Telegram, web embeds, APIs, and custom channels connected to your operations.</p>
      </div>
    </div>
  </div>
</div>

<div class="section">
  <div class="container">
    <h2 class="section-title">How We Build</h2>
    <p style="text-align: center; max-width: 820px; margin: 0 auto 2.5rem; color: var(--text-muted); font-size: 1.05rem;">
      Robust agentic orchestration—not simple API wrappers. Representative stack:
    </p>
    <div class="card-grid card-grid--stack">
      <div class="card">
        <span class="card-title">LangChain &amp; LangGraph</span>
        <p class="card-text">Stateful agent workflows and multi-step orchestration.</p>
      </div>
      <div class="card">
        <span class="card-title">LangSmith</span>
        <p class="card-text">Tracing, evaluation, and observability for LLM pipelines.</p>
      </div>
      <div class="card">
        <span class="card-title">Pydantic AI</span>
        <p class="card-text">Type-safe agents with structured inputs and outputs.</p>
      </div>
      <div class="card">
        <span class="card-title">Pipecat AI</span>
        <p class="card-text">Real-time voice and multimodal conversation pipelines.</p>
      </div>
      <div class="card">
        <span class="card-title">Model Context Protocol (MCP)</span>
        <p class="card-text">Standardized tool and data access for agent systems.</p>
      </div>
      <div class="card">
        <span class="card-title">Local &amp; Self-Hosted LLM Inference</span>
        <p class="card-text">On-prem and air-gapped deployment for sensitive workloads.</p>
      </div>
    </div>
  </div>
</div>

<div class="section" style="background: var(--surface-color);">
  <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 escalate intelligently when human judgment is required.</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 structure data from conversations and workflows automatically.</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">Multi-step agent workflows that reduce manual effort across departments.</p>
      </div>
    </div>
  </div>
</div>

<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;">Tell us the workflow you want an agent to own—we will design, deploy, and monitor it.</p>
    <a href="{% url 'contact' %}?subject=AI%20Agents" class="btn">Get Started</a>
  </div>
</div>
{% endblock %}