<?php

require __DIR__ . '/../config/app.php';
require aof_template_path("common/header.php");
?>

<!-- Hero Section -->
<!-- <section class="bg-[#0e2341] text-white py-4 px-4 text-center">
<p class="text-xl md:text-1xl max-w-3xl mx-auto font-semibold mb-1">All-in-One IT & Security Solutions — Tailored for Your Business Needs</p>
</section> -->
  




<!-- Features Highlights -->
<section class="py-12 px-4 bg-white">
  <div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8 text-center">
    <div>
      <i class="fas fa-shield-alt text-blue-600 text-4xl mb-4"></i>
      <h3 class="text-xl font-semibold mb-2">All-in-One IT & Security</h3>
      <p>One provider, complete coverage. No outsourcing. No gaps.</p>
    </div>
    <div>
      <i class="fas fa-headset text-green-600 text-4xl mb-4"></i>
      <h3 class="text-xl font-semibold mb-2">24/7 Support & Monitoring</h3>
      <p>Always on watch. We act fast to prevent and resolve threats.</p>
    </div>
    <div>
      <i class="fas fa-tools text-yellow-600 text-4xl mb-4"></i>
      <h3 class="text-xl font-semibold mb-2">Proactive Maintenance</h3>
      <p>We fix problems before they become downtime for your business.</p>
    </div>
  </div>
</section>

<!-- Services & Contact -->
<section class="bg-gray-100 py-16 px-4">
  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-12">
    <!-- Services in Card Format -->
    <div class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-8">
      <?php
      $services = [
        ['title' => 'Network Monitoring & Management', 'desc' => 'We perform deep network monitoring using SNMP, Syslog, and Traps with visibility into traffic via NetFlow, sFlow, and IPFix protocols, ensuring continuous performance and threat detection.', 'icon' => 'fas fa-network-wired'],
        ['title' => 'Mobile Device Management', 'desc' => 'Centralized management for mobile and infrastructure endpoints. Our NinjaOne MDM manages Android, Apple, Windows, macOS, Linux devices, VMs, and network equipment via a single console.', 'icon' => 'fas fa-mobile-alt'],
        ['title' => 'Help Desk & Remote Access', 'desc' => 'Quick, reliable remote support for all IT issues. Our system ensures minimal downtime and maximum efficiency for your staff.', 'icon' => 'fas fa-headset'],
        ['title' => 'Patch Management', 'desc' => 'Stay updated and secure with automated patching of operating systems and third-party software across your organization.', 'icon' => 'fas fa-download'],
        ['title' => 'Layered Security Approach', 'desc' => 'From endpoint antivirus and firewall monitoring to backup tracking and traffic analysis, we approach security from every angle.', 'icon' => 'fas fa-layer-group'],
        ['title' => 'IT Consulting', 'desc' => 'Strategic IT planning from seasoned experts. We\'ll evaluate your current systems and build scalable, secure solutions for future growth.', 'icon' => 'fas fa-user-tie']
      ];

      foreach ($services as $service): ?>
        <div class="bg-white p-6 rounded-card shadow-md hover:shadow-xl transition-shadow">
          <div class="text-primary text-3xl mb-4"><i class="<?= $service['icon'] ?>"></i></div>
          <h3 class="text-xl font-semibold mb-2"><?= $service['title'] ?></h3>
          <p><?= $service['desc'] ?></p>
        </div>
      <?php endforeach; ?>
    </div>

    <!-- Quick Connect Panel -->
    <div class="w-full">
      <?php require aof_template_path("common/quick-connect.php"); ?>
    </div>
  </div>
</section>

<div class="industry-served mt-10 px-10 lg:px-28 shadow-md mb-2">
  <div class="typing-container w-full">
    <h2 id="hero-heading" class="text-3xl font-extrabold mb-10 text-primary mx-auto text-center">Industries Served</h2>
  </div>

  <section id="industries">
    <div class="">
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-8 text-center mb-3">
        <div class="space-y-3 p-4 rounded-lg bg-white transition-all duration-300 hover:bg-blue-50 hover:-translate-y-1">
          <i class="fas fa-laptop-code text-4xl text-primary"></i>
          <h3 class="font-semibold text-slate-800">IT</h3>
        </div>
        <div class="space-y-3 p-4 rounded-lg bg-white transition-all duration-300 hover:bg-blue-50 hover:-translate-y-1">
          <i class="fas fa-building text-4xl text-primary"></i>
          <h3 class="font-semibold text-slate-800">Realty</h3>
        </div>
        <div class="space-y-3 p-4 rounded-lg bg-white transition-all duration-300 hover:bg-blue-50 hover:-translate-y-1">
          <i class="fas fa-calculator text-4xl text-primary"></i>
          <h3 class="font-semibold text-slate-800">Accounting</h3>
        </div>
        <div class="space-y-3 p-4 rounded-lg bg-white transition-all duration-300 hover:bg-blue-50 hover:-translate-y-1">
          <i class="fas fa-gas-pump text-4xl text-primary"></i>
          <h3 class="font-semibold text-slate-800">Oil &amp; Gas</h3>
        </div>
        <div class="space-y-3 p-4 rounded-lg bg-white transition-all duration-300 hover:bg-blue-50 hover:-translate-y-1">
          <i class="fas fa-folder-open text-4xl text-primary"></i>
          <h3 class="font-semibold text-slate-800">Case Studies</h3>
        </div>
      </div>
    </div>
  </section>
</div>


<?php require aof_template_path("common/footer.php"); ?>