import React from "react";
import iconClipboard from "@/images/icon-clipboard.svg";
import iconClock from "@/images/icon-clock.svg";
import iconLink from "@/images/icon-link.svg";
import iconUsDollar from "@/images/icon-us-dollar.svg";
import iconUser from "@/images/icon-user.svg";
import iconVector from "@/images/icon-vector.svg";
import Image from "next/image";

const FeaturesBlocks = () => {
  return (
    <section>
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <div className="py-8 md:py-10">
          {/* Section header */}
          <div className="max-w-3xl mx-auto text-center pb-6 md:pb-8">
            <h2 className="mb-4 text-black dark:text-white">
              Say Goodbye To Manual Data Entry With Sign365.
            </h2>
          </div>

          {/* Items */}
          <div
            className="max-w-sm mx-auto grid gap-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-16 items-start md:max-w-2xl lg:max-w-none"
            data-aos-id-blocks
          >
            {/* 1st item */}
            <div
              className="relative flex flex-col items-center"
              data-aos="fade-up"
              data-aos-anchor="[data-aos-id-blocks]"
            >
              <div className="relative flex items-center justify-center  mb-4">
                <svg
                  className="w-16 h-16"
                  viewBox="0 0 64 64"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                  <rect
                    className="fill-current text-pink-550"
                    width="64"
                    height="64"
                    rx="32"
                  />
                </svg>
                <Image
                  className="absolute w-[50%]"
                  src={iconClipboard}
                  alt="Enter Data Once"
                />
              </div>
              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
                Enter Data Once
              </h3>
              <p className="text-lg text-black dark:text-gray-200 text-center">
                Say goodbye to manual data entry with Sign365&apos;s offline
                forms. Enter data once and let our app do the rest. We&apos;ll
                send the information to your business systems, saving you time
                and effort.
              </p>
            </div>

            {/* 2nd item */}
            <div
              className="relative flex flex-col items-center"
              data-aos="fade-up"
              data-aos-delay="200"
              data-aos-anchor="[data-aos-id-blocks]"
            >
              <div className="relative flex items-center justify-center  mb-4">
                <svg
                  className="w-16 h-16"
                  viewBox="0 0 64 64"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                  <rect
                    className="fill-current text-pink-550"
                    width="64"
                    height="64"
                    rx="32"
                  />
                </svg>
                <Image
                  className="absolute w-[50%]"
                  src={iconLink}
                  alt="Connect To Over 1000 Apps"
                />
              </div>
              <h3 className="text-xl text-black mb-2 text-center dark:text-white">
                Connect To Over 1000 Apps
              </h3>
              <p className="text-lg text-black dark:text-gray-200 text-center">
                Sign365 can submit information to over 1000 apps. Whether you
                use Salesforce, Hubspot, or any other business app, Sign365 has
                got you covered.
              </p>
            </div>

            {/* 3rd item */}
            <div
              className="relative flex flex-col items-center"
              data-aos="fade-up"
              data-aos-delay="400"
              data-aos-anchor="[data-aos-id-blocks]"
            >
              <div className="relative flex items-center justify-center  mb-4">
                <svg
                  className="w-16 h-16"
                  viewBox="0 0 64 64"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                  <rect
                    className="fill-current text-pink-550"
                    width="64"
                    height="64"
                    rx="32"
                  />
                </svg>
                <Image
                  className="absolute w-[40%]"
                  src={iconClock}
                  alt="Start Time Saving"
                />
              </div>
              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
                Start Time Saving
              </h3>
              <p className="text-lg text-black dark:text-gray-200 text-center">
                With Sign365, you&apos;ll save valuable time that you can then
                invest in other aspects of your business. Our offline forms
                collect and send your data, so you can complete more tasks
                faster.
              </p>
            </div>

            {/* 4th item */}
            <div
              className="relative flex flex-col items-center"
              data-aos="fade-up"
              data-aos-delay="600"
              data-aos-anchor="[data-aos-id-blocks]"
            >
              <div className="relative flex items-center justify-center  mb-4">
                <svg
                  className="w-16 h-16"
                  viewBox="0 0 64 64"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                  <rect
                    className="fill-current text-pink-550"
                    width="64"
                    height="64"
                    rx="32"
                  />
                </svg>
                <Image
                  className="absolute w-[40%]"
                  src={iconUsDollar}
                  alt="Start Saving Money"
                />
              </div>
              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
                Start Saving Money
              </h3>
              <p className="text-lg text-black dark:text-gray-200 text-center">
                Sign365&apos;s offline forms can help you save money on staffing
                and data entry costs. By automating your data collection, you
                can reduce labor costs and increase profits.
              </p>
            </div>

            {/* 5th item */}
            <div
              className="relative flex flex-col items-center"
              data-aos="fade-up"
              data-aos-delay="800"
              data-aos-anchor="[data-aos-id-blocks]"
            >
              <div className="relative flex items-center justify-center  mb-4">
                <svg
                  className="w-16 h-16"
                  viewBox="0 0 64 64"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                  <rect
                    className="fill-current text-pink-550"
                    width="64"
                    height="64"
                    rx="32"
                  />
                </svg>
                <Image
                  className="absolute w-[40%]"
                  src={iconVector}
                  alt="Your Forms Your Way"
                />
              </div>
              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
                Your Forms Your Way
              </h3>
              <p className="text-lg text-black dark:text-gray-200 text-center">
                With Sign365, you have full control over your offline forms.
                Create forms that for your business needs and customise them to
                match your brand. Get started with Sign365 today and start
                collecting data the way you want.
              </p>
            </div>

            {/* 6th item */}
            <div
              className="relative flex flex-col items-center"
              data-aos="fade-up"
              data-aos-delay="1000"
              data-aos-anchor="[data-aos-id-blocks]"
            >
              <div className="relative flex items-center justify-center  mb-4">
                <svg
                  className="w-16 h-16"
                  viewBox="0 0 64 64"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                  <rect
                    className="fill-current text-pink-550"
                    width="64"
                    height="64"
                    rx="32"
                  />
                </svg>
                <Image
                  className="absolute w-[40%]"
                  src={iconUser}
                  alt="Collect Customer Info"
                />
              </div>
              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
                Collect Customer Info
              </h3>
              <p className="text-lg text-black dark:text-gray-200 text-center">
                Sign365&apos;s offline digital forms capture accurate and secure
                customer information. You can customise your forms to send
                information where you need it. Ensuring you have the insights to
                make informed business decisions.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FeaturesBlocks;