import React from "react";
import Link from "next/link";
import { Cpu, Database, Cloud, Shield, Users, TrendingUp } from "lucide-react";
import { Button } from "@/components/button";

export const metadata = {
  title: "Services",
  description: "Sample everything that Techaro has to offer",
};

const ServiceCard = ({
  icon: Icon,
  title,
  description,
}: {
  icon: any;
  title: string;
  description: string;
}) => (
  <div className="bg-white overflow-hidden shadow rounded-lg">
    <div className="px-4 py-5 sm:p-6">
      <Icon className="h-8 w-8 text-blue-500 mb-4" />
      <h3 className="text-lg font-medium text-gray-900">{title}</h3>
      <p className="mt-2 text-base text-gray-500">{description}</p>
    </div>
  </div>
);

const ServicesPage = () => {
  const services = [
    {
      icon: Cpu,
      title: "AI and Machine Learning",
      description:
        "Leverage cutting-edge AI technologies to automate processes, gain insights, and drive innovation in your business.",
    },
    {
      icon: Database,
      title: "Data Analytics",
      description:
        "Transform your raw data into actionable insights with our advanced analytics solutions.",
    },
    {
      icon: Cloud,
      title: "Cloud Migration",
      description:
        "Seamlessly transition your infrastructure and applications to the cloud for improved scalability and efficiency.",
    },
    {
      icon: Shield,
      title: "Cybersecurity",
      description:
        "Protect your digital assets with our comprehensive cybersecurity services and solutions.",
    },
    {
      icon: Users,
      title: "Digital Transformation",
      description:
        "Modernize your business processes and customer experiences with our digital transformation strategies.",
    },
    {
      icon: TrendingUp,
      title: "IT Strategy Consulting",
      description:
        "Align your technology investments with your business goals to maximize ROI and drive growth.",
    },
  ];

  return (
    <div className="bg-gray-100 min-h-screen">
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold text-gray-900">Our Services</h1>
        </div>
      </header>
      <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
              Comprehensive IT Solutions for Canadian Businesses
            </h2>
            <p className="mt-4 text-xl text-gray-500">
              At Techaro Computing Canada, we offer a wide range of services to
              help your business thrive in the digital age.
            </p>
          </div>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {services.map((service, index) => (
              <ServiceCard key={index} {...service} />
            ))}
          </div>
          <div className="mt-12 text-center">
            <Link href="/contact" passHref>
              <Button className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition duration-300">
                Contact Us for a Consultation
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ServicesPage;