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

{% block title %}AI Education - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Empower your business with AI knowledge. AI ML Operations, LLC offers custom AI courses,
workshops, and training for teams.{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section" style="height: 40vh; min-height: 300px;">
  <div class="hero-content">
    <h1 class="hero-title">AI Education</h1>
    <p class="hero-subtitle">Empowering Businesses with AI Knowledge</p>
  </div>
</div>

<!-- About AI Education Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">About AI Education</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 believe that understanding AI is the first step toward leveraging its power. Our AI
      Education service is designed to equip businesses with the knowledge and skills needed to integrate AI into their
      workflows effectively. We offer tailored courses, hands-on workshops, and ongoing support to ensure your team is
      confident and capable in using AI technologies.
    </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 Courses</h5>
        <p class="card-text">Tailored AI courses designed to meet your business needs and goals.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Hands-On Workshops</h5>
        <p class="card-text">Interactive sessions to apply AI concepts in real-world scenarios.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Ongoing Support</h5>
        <p class="card-text">Continuous learning and support to keep your team up-to-date.</p>
      </div>
    </div>
  </div>
</div>

<!-- Course Highlights Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">Course Highlights</h2>
    <div class="card-grid">
      <div class="card">
        <img src="{% static 'public/img/ai_education/card-1.jpg' %}" alt="AI Fundamentals"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">AI Fundamentals</span>
        <p class="card-text">Learn the basics of AI, including machine learning, neural networks, and data
          preprocessing.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/ai_education/card-2.jpg' %}" alt="AI for Business"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">AI for Business</span>
        <p class="card-text">Discover how AI can optimize operations, improve decision-making, and drive innovation.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/ai_education/card-3.jpg' %}" alt="Advanced AI Techniques"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Advanced AI Techniques</span>
        <p class="card-text">Dive deep into advanced topics like deep learning, natural language processing, and
          computer vision.</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 Transform Your Business?</h2>
    <p class="hero-subtitle" style="margin-bottom: 2rem;">Contact us today to schedule your AI Education sessions.</p>
    <a href="{% url 'contact' %}"
      style="display: inline-block; padding: 1rem 2rem; background: var(--primary-color); color: black; font-weight: bold; border-radius: 30px; text-transform: uppercase;">Get
      Started</a>
  </div>
</div>
{% endblock %}