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

const ServiceCard = ({ icon: Icon, title, description }) => (
    <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;