import React from 'react';
import Link from 'next/link';
import { ChevronRight, Laptop, Users, TrendingUp, Brain } from 'lucide-react';
import { Button } from '@/components/ui/Button';

const HomePage = () => {
    return (
        <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">
                    <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
                        <span className="block">Transform Your Business</span>
                        <span className="block text-blue-600">with Techaro Computing Canada</span>
                    </h1>
                    <p className="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
                        We help Canadian businesses leverage cutting-edge technology to drive growth, efficiency, and innovation.
                    </p>
                    <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
                        <div className="rounded-md shadow">
                            <Link href="/contact" passHref>
                                <Button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
                                    Get started
                                    <ChevronRight className="ml-2 -mr-1 h-5 w-5" />
                                </Button>
                            </Link>
                        </div>
                        <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
                            <Link href="/services" passHref>
                                <Button variant="outline" className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
                                    Learn more
                                </Button>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>

            <div className="mt-10">
                <h2 className="text-2xl font-semibold text-gray-900 text-center">Our Services</h2>
                <div className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
                    {[
                        { icon: Laptop, title: "IT Strategy", description: "Align your technology investments with your business goals for maximum impact." },
                        { icon: Users, title: "Digital Transformation", description: "Modernize your operations and customer experiences with cutting-edge digital solutions." },
                        { icon: TrendingUp, title: "Data Analytics", description: "Unlock the power of your data to drive informed decision-making and business growth." }
                    ].map((service, index) => (
                        <div key={index} className="pt-6">
                            <div className="flow-root bg-white rounded-lg px-6 pb-8">
                                <div className="-mt-6">
                                    <div>
                                        <span className="inline-flex items-center justify-center p-3 bg-blue-500 rounded-md shadow-lg">
                                            <service.icon className="h-6 w-6 text-white" />
                                        </span>
                                    </div>
                                    <h3 className="mt-8 text-lg font-medium text-gray-900 tracking-tight">{service.title}</h3>
                                    <p className="mt-5 text-base text-gray-500">{service.description}</p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            <div className="mt-16 bg-blue-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
                <div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
                    <div className="lg:self-center">
                        <h2 className="text-3xl font-extrabold text-white sm:text-4xl">
                            <span className="block">Transform Your Business</span>
                            <span className="block">with Industry-Leading AI Tools</span>
                        </h2>
                        <p className="mt-4 text-lg leading-6 text-blue-200">
                            At Techaro Computing Canada, we offer transformational experiences by leveraging cutting-edge AI technologies. Our solutions empower your business to stay ahead in the rapidly evolving digital landscape.
                        </p>
                        <Link href="/services#ai" passHref>
                            <Button className="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-blue-600 hover:bg-blue-50">
                                Learn about our AI solutions
                            </Button>
                        </Link>
                    </div>
                </div>
                <div className="relative -mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
                    <div className="absolute inset-0 flex items-center justify-center">
                        <Brain className="h-48 w-48 text-blue-100" />
                    </div>
                    <div className="absolute inset-0 bg-blue-600 opacity-25"></div>
                </div>
            </div>
        </div>
    );
};

export default HomePage;