import React from "react";
import Link from "next/link";
import { ChevronRight, Laptop, Users, TrendingUp, Brain } from "lucide-react";
import { Button } from "@/components/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;