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

@Component({
  selector: 'app-features',
  standalone: true,
  imports: [CommonModule],
  template: `
    <section id="features" class="py-20" data-aos="fade-up">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold text-center">Why Choose Us</h2>
        <p class="mt-4 text-center text-gray-600">
          Discover the benefits of partnering with Bay Area Affiliates, Inc.
        </p>
        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- Feature Item 1 -->
          <div class="flex items-center" data-aos="fade-up">
            <div class="text-blue-900 text-3xl mr-4">
              <i class="fas fa-check-circle"></i>
            </div>
            <div>
              <h3 class="text-xl font-semibold">Experienced Team</h3>
              <p class="text-gray-600">Over 25 years of expertise in IT services and solutions.</p>
            </div>
          </div>

          <!-- Feature Item 2 -->
          <div class="flex items-center" data-aos="fade-up">
            <div class="text-blue-900 text-3xl mr-4">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div>
              <h3 class="text-xl font-semibold">Secure Solutions</h3>
              <p class="text-gray-600">Top-notch security measures to protect your business data.</p>
            </div>
          </div>

          <!-- Feature Item 3 -->
          <div class="flex items-center" data-aos="fade-up">
            <div class="text-blue-900 text-3xl mr-4">
              <i class="fas fa-cogs"></i>
            </div>
            <div>
              <h3 class="text-xl font-semibold">Customized Solutions</h3>
              <p class="text-gray-600">Tailored IT strategies to meet your unique business requirements.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  `
})
export class FeaturesComponent {}