// src/app/components/services/services.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-services',
  standalone: true,
  imports: [CommonModule],
  template: `
    <section id="services" class="py-20 bg-gray-100" data-aos="fade-up">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold text-center">Our Services</h2>
        <p class="mt-4 text-center text-gray-600">
          Comprehensive IT solutions tailored to your business needs.
          Read concrete examples of these topics in our
          <a href="#blog" class="text-blue-900 underline">Latest Insights</a>
          section.
        </p>
        <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <!-- Service Item 1 -->
          <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
            <div class="text-blue-900 text-4xl mb-4">
              <i class="fas fa-window-maximize"></i>
            </div>
            <h3 class="text-xl font-semibold mb-2">Windows 11 Transition</h3>
            <p class="text-gray-600">
              Upgrade to Windows 11 before October 2025 to ensure continued security support and take advantage of the latest features.
            </p>
          </div>

          <!-- Service Item 2 -->
          <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
            <div class="text-blue-900 text-4xl mb-4">
              <i class="fas fa-globe"></i>
            </div>
            <h3 class="text-xl font-semibold mb-2">Web Services</h3>
            <p class="text-gray-600">
              Web design, domain registration, email services, and more to establish and enhance your online presence.
            </p>
          </div>

          <!-- Service Item 3 -->
          <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
            <div class="text-blue-900 text-4xl mb-4">
              <i class="fas fa-tachometer-alt"></i>
            </div>
            <h3 class="text-xl font-semibold mb-2">Performance Upgrades</h3>
            <p class="text-gray-600">
              Enhance your desktops and laptops with SSDs, maintain your Windows installations, and achieve dramatic performance boosts.
            </p>
          </div>

          <!-- Service Item 4 -->
          <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
            <div class="text-blue-900 text-4xl mb-4">
              <i class="fas fa-print"></i>
            </div>
            <h3 class="text-xl font-semibold mb-2">Printer & Scanner Installation</h3>
            <p class="text-gray-600">
              Professional installation and configuration of printers and scanners to ensure seamless integration into your workflow.
            </p>
          </div>
                    <!-- Service Item 4 -->
                    <div
                        class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"
                        data-aos="fade-up"
                    >
                        <div class="text-blue-900 text-4xl mb-4">
                            <i class="fas fa-desktop"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">
                            New/Refurbished Desktop Hardware
                        </h3>
                        <p class="text-gray-600">
                            Supply and installation of new or refurbished
                            desktop hardware, tailored to meet your business
                            requirements.
                        </p>
                    </div>          
                    <!-- Service Item 5 -->
                    <div
                        class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"
                        data-aos="fade-up"
                    >
                        <div class="text-blue-900 text-4xl mb-4">
                            <i class="fas fa-shield-virus"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">VPN Setup</h3>
                        <p class="text-gray-600">
                            Configure Virtual Private Networks to allow secure
                            remote access to your internal network from
                            anywhere.
                        </p>
                    </div>
                    <!-- Service Item 6 -->
                    <div
                        class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"
                        data-aos="fade-up"
                    >
                        <div class="text-blue-900 text-4xl mb-4">
                            <i class="fas fa-network-wired"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">
                            Network Infrastructure Support
                        </h3>
                        <p class="text-gray-600">
                            Robust network solutions to ensure connectivity,
                            security, and efficiency, including routers, access
                            points, and switches.
                        </p>
                    </div>
                    <!-- Service Item 7 -->
                    <div
                        class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"
                        data-aos="fade-up"
                    >
                        <div class="text-blue-900 text-4xl mb-4">
                            <i class="fas fa-hdd"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2">
                            Network Attached Storage
                        </h3>
                        <p class="text-gray-600">
                            Selection, setup, and maintenance of Network
                            Attached Storage solutions to provide scalable and
                            reliable data storage.
                        </p>
                    </div>          
        </div>
      </div>
    </section>
  `
})
export class ServicesComponent {}