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

{% block title %}ML Model Creation - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Custom Machine Learning model creation by AI ML Operations, LLC. We design models for
supervised, unsupervised, and reinforcement learning.{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section" style="height: 40vh; min-height: 300px;">
  <div class="hero-content">
    <h1 class="hero-title">ML Model Creation</h1>
    <p class="hero-subtitle">Tailored Machine Learning Models for Any Problem Set</p>
  </div>
</div>

<!-- About ML Model Creation Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">About ML Model Creation</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 specialize in creating custom machine learning models to solve complex problems across
      industries. With extensive expertise in supervised, unsupervised, and reinforcement learning, we design models
      that deliver accurate, scalable, and actionable insights. Whether you need predictive analytics, pattern
      recognition, or decision-making systems, we provide end-to-end solutions tailored to your needs.
    </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">Supervised Learning</h5>
        <p class="card-text">Create models for classification, regression, and prediction tasks.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Unsupervised Learning</h5>
        <p class="card-text">Discover patterns and insights from unlabeled data.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Reinforcement Learning</h5>
        <p class="card-text">Develop systems that learn and adapt through interaction.</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/ml_models/card-1.jpg' %}" alt="Predictive Analytics"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Predictive Analytics</span>
        <p class="card-text">Forecast trends and outcomes with high accuracy.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/ml_models/card-2.jpg' %}" alt="Fraud Detection"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Fraud Detection</span>
        <p class="card-text">Identify and prevent fraudulent activities in real-time.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/ml_models/card-3.jpg' %}" alt="Recommendation Systems"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Recommendation Systems</span>
        <p class="card-text">Personalize user experiences with intelligent recommendations.</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 Solve Your Problem?</h2>
    <p class="hero-subtitle" style="margin-bottom: 2rem;">Contact us today to create your custom ML model.</p>
    <a href="{% url 'contact' %}" class="btn">Get Started</a>
  </div>
</div>
{% endblock %}