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

{% block title %}Home - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Forward-deployed AI engineering by AI ML Operations, LLC. We embed with your team to build and deploy custom agentic workflows, integrations, and production AI systems.{% endblock %}
{% block og_title %}Forward-Deployed AI Engineering - AI ML Operations, LLC{% endblock %}
{% block og_description %}We embed with your team to architect, build, and deploy custom AI workflows that solve real operational bottlenecks.{% endblock %}
{% block twitter_title %}Forward-Deployed AI Engineering - AI ML Operations, LLC{% endblock %}
{% block twitter_description %}We embed with your team to architect, build, and deploy custom AI workflows that solve real operational bottlenecks.{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section">
  <canvas id="hero-canvas"></canvas>
  <div class="hero-content">
    <h1 class="hero-title">AI ML Operations</h1>
    <p class="hero-subtitle hero-subtitle--wide">
      Forward-deployed AI engineering. We embed with your team to architect, build, and deploy custom AI workflows that solve complex operational bottlenecks.
    </p>
    <div class="hero-cta">
      <a href="{% url 'forward_deployed' %}" class="btn btn-secondary">See How We Deploy</a>
    </div>
  </div>
</div>

<!-- About Us Section -->
<div class="section" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">About Us</h2>
    <p style="text-align: center; max-width: 820px; margin: 0 auto; color: var(--text-muted); font-size: 1.1rem;">
      At AI ML Operations, we deliver production-ready AI by embedding with your team—not handing off strategy decks.
      With over a decade of experience, we audit your real workflows, integrate with your infrastructure, and deploy
      agentic automation and machine learning where it creates measurable impact. You reduce time-to-value without building
      a full-time specialized AI engineering org from scratch.
    </p>
  </div>
</div>

<!-- How We Work -->
<!-- <div id="how-we-work" class="section" style="background: var(--surface-color);"> -->
  <div id="how-we-work" class="section" >
  <div class="container">
    <h2 class="section-title">How We Work</h2>
    <div class="card-grid card-grid--steps">
      <div class="card">
        <span class="card-step-num">01</span>
        <span class="card-title">Embed</span>
        <p class="card-text">Work alongside your team—onsite or remote—to understand operations and constraints.</p>
      </div>
      <div class="card">
        <span class="card-step-num">02</span>
        <span class="card-title">Map</span>
        <p class="card-text">Document workflows, data flows, and integration points across your stack.</p>
      </div>
      <div class="card">
        <span class="card-step-num">03</span>
        <span class="card-title">Build</span>
        <p class="card-text">Ship agents, orchestration, and integrations tailored to your environment.</p>
      </div>
      <div class="card">
        <span class="card-step-num">04</span>
        <span class="card-title">Deploy</span>
        <p class="card-text">Launch to production with monitoring, analytics, and a clean handoff.</p>
      </div>
      <div class="card">
        <span class="card-step-num">05</span>
        <span class="card-title">Monitor</span>
        <p class="card-text">Track performance, refine workflows, and iterate for continuous improvement.</p>
      </div>
      <div class="card">
        <span class="card-step-num">06</span>
        <span class="card-title">Handoff</span>
        <p class="card-text">Transfer ownership and documentation to your team for ongoing maintenance.</p>
      </div>
    </div>
    <p style="text-align: center; margin-top: 2.5rem;">
      <a href="{% url 'forward_deployed' %}" class="text-cyber-cyan" style="font-weight: 600;">Learn more about forward-deployed AI →</a>
    </p>
  </div>
</div>

<!-- Workflow Transformations -->
<!-- <div id="case-studies" class="section">
  <div class="container">
    <h2 class="section-title">Workflow Transformations</h2>
    <p style="text-align: center; max-width: 720px; margin: -1.5rem auto 2.5rem; color: var(--text-muted); font-size: 1.05rem;">
      Real deployments, real outcomes—problem, deployment, and measurable results.
    </p>
    <div class="card-grid">
      <div class="card case-study-placeholder">
        <span class="case-study-label">Coming Soon</span>
        <h5 class="card-title">Client Workflow #1</h5>
        <p class="card-text"><strong>Problem:</strong> Manual process consuming hours each week.</p>
        <p class="card-text"><strong>Deployment:</strong> Embedded engineering, mapped data, built automated agent workflow.</p>
        <p class="card-text"><strong>Outcome:</strong> Testimonials and metrics arriving soon.</p>
      </div>
      <div class="card case-study-placeholder">
        <span class="case-study-label">Coming Soon</span>
        <h5 class="card-title">Client Workflow #2</h5>
        <p class="card-text"><strong>Problem:</strong> Disconnected tools and no path from LLM pilots to production.</p>
        <p class="card-text"><strong>Deployment:</strong> Integrated orchestration into existing operations.</p>
        <p class="card-text"><strong>Outcome:</strong> Case study in progress—check back shortly.</p>
      </div>
    </div>
  </div>
</div> -->

<!-- Services Section -->
<div class="section" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">Our Services</h2>
    <p style="text-align: center; max-width: 640px; margin: -1.5rem auto 2rem; color: var(--text-muted);">
      Core delivery: embedded AI engineering and production agents.
    </p>
    <div class="card-grid">

      <a href="{% url 'forward_deployed' %}" class="card card-featured">
        <span class="card-badge">Primary</span>
        <span class="card-title">Forward-Deployed AI</span>
        <p class="card-text">Embed with your team to map bottlenecks, build integrations, and deploy custom AI workflows in your environment.</p>
      </a>

      <a href="{% url 'bot' %}" class="card card-featured">
        <span class="card-badge">Primary</span>
        <span class="card-title">AI Agents &amp; Automation</span>
        <p class="card-text">Proprietary web-hosted agents for your workflows and conversations—scalable hosting plus performance and real-time analytics.</p>
      </a>

      <a href="{% url 'web_design' %}" class="card">
        <span class="card-badge">Primary</span>
        <span class="card-title">Web Design and Hosting</span>
        <p class="card-text">Modern websites with reliable hosting for your online presence.</p>
      </a>

      <a href="{% url 'ml_model' %}" class="card">
        <span class="card-title">ML Model Creation</span>
        <p class="card-text">Custom models designed for deployment inside your pipelines—not experiments that never ship.</p>
      </a>

      <a href="{% url 'chat' %}" class="card">
        <span class="card-title">Secure AI Chat</span>
        <p class="card-text">Hosted LLM workspace with privacy-first architecture—an example of how we deliver scalable, observable AI products.</p>
      </a>

      <a href="{% url 'ai_sensor' %}" class="card">
        <span class="card-title">AI Sensor Algorithms</span>
        <p class="card-text">Intelligent algorithms for sensor data processing, real-time insights, and IoT applications.</p>
      </a>

      <a href="{% url 'ai_education' %}" class="card">
        <span class="card-title">AI Education</span>
        <p class="card-text">Tailored AI training for your team—in-person or virtual.</p>
      </a>

      <a href="{% url 'computers' %}" class="card">
        <span class="card-title">Computer Builds</span>
        <p class="card-text">Servers and workstations for compute, storage, and local inference workloads.</p>
      </a>

      <a href="{% url 'file_hosting' %}" class="card">
        <span class="card-title">File Hosting</span>
        <p class="card-text">Secure, scalable file hosting to store and share your data.</p>
      </a>

    </div>
  </div>
</div>

<script src="{% static 'public/js/animation.js' %}"></script>
{% endblock %}