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

{% block title %}Computer Solutions - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Custom computer builds, deployment, and maintenance by AI ML Operations, LLC. From gaming
PCs to AI servers and workstations.{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section" style="height: 40vh; min-height: 300px;">
  <div class="hero-content">
    <h1 class="hero-title">Computer Solutions</h1>
    <p class="hero-subtitle">From Gaming PCs to AI Servers – We Build, Deploy, and Maintain</p>
  </div>
</div>

<!-- About Computer Solutions Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">About Our Computer Solutions</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 procuring, building, deploying, and maintaining computers tailored to your
      specific needs. Whether you're a gamer, a creative professional, or a business requiring high-performance
      workstations or AI servers, we deliver reliable, scalable, and efficient solutions. Our end-to-end service ensures
      your systems are optimized for performance and longevity.
    </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 Builds</h5>
        <p class="card-text">We design and build computers tailored to your specific requirements, from gaming PCs to AI
          servers.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Deployment</h5>
        <p class="card-text">Seamless deployment of systems, ensuring they are ready for immediate use.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Maintenance</h5>
        <p class="card-text">Ongoing support and maintenance to keep your systems running smoothly.</p>
      </div>
    </div>
  </div>
</div>

<!-- Solutions Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">Our Solutions</h2>
    <div class="card-grid">
      <div class="card">
        <img src="{% static 'public/img/computers/card-1.jpg' %}" alt="Gaming PCs"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Gaming PCs</span>
        <p class="card-text">High-performance gaming rigs built for the latest games and VR experiences.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/computers/card-2.jpg' %}" alt="Workstations"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Workstations</span>
        <p class="card-text">Powerful workstations for creative professionals, engineers, and developers.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/computers/card-3.jpg' %}" alt="Storage Servers"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Storage Servers</span>
        <p class="card-text">Scalable storage solutions for data-intensive applications and backups.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/computers/card-4.jpg' %}" alt="AI Servers"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">AI Servers</span>
        <p class="card-text">High-performance servers optimized for AI and machine learning workloads.</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 Upgrade Your Systems?</h2>
    <p class="hero-subtitle" style="margin-bottom: 2rem;">Contact us today to discuss your computer needs.</p>
    <a href="{% url 'contact' %}" class="btn">Get Started</a>
  </div>
</div>
{% endblock %}