import React from "react";

import imageConnection from "@/images/zigzag-connection.png";
import imageGraph from "@/images/zigzag-graph.png";
import imageStreamLine from "@/images/zigzag-streamline.png";
import Image from "next/image";
import { SourceModal } from "@/types";
import Link from "next/link";

const FeaturesZigzag = () => {
  const tryItOnClick = () => {
    const signUpModal = document.getElementById("sign-up-modal");
    if (!signUpModal) return;
    signUpModal.setAttribute("name", SourceModal.TryIt);
    signUpModal.removeAttribute("price_id");
    signUpModal.click();
  };

  return (
    <section>
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <div className="py-12 md:py-20 border-t border-gray-800">
          {/* Section header */}
          <div className="max-w-4xl mx-auto text-center pb-12 md:pb-16 group">
            <button
              onClick={tryItOnClick}
              className="inline-flex text-lg font-semibold py-2 px-[7rem] m-2 bg-base-content bg-gradient-to-r from-primary to-secondary rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
            >
              Try it!
            </button>
            <h1 className="mb-4 text-black dark:text-black ">
              One Form, Zero Data Reentry
            </h1>
            <p className="text-xl text-black dark:text-black ">
              Enter data once and let our app do the rest. We&apos;ll send the
              information to your business systems, so that you don&apos;t need
              to do it more than once.
            </p>
          </div>

          {/* Items */}
          <div className="grid gap-14 text-center md:text-left">
            {/* 1st item */}
            <div className="md:grid md:grid-cols-12 md:gap-6 items-center">
              {/* Image */}
              <div
                className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1"
                data-aos="fade-up"
              >
                <Image
                  className="max-w-full mx-auto md:max-w-none h-auto"
                  src={imageStreamLine}
                  height="317"
                  alt="Features 01"
                />
              </div>
              {/* Content */}
              <div
                className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6"
                data-aos="fade-right"
              >
                <div className="md:pr-4 lg:pr-12 xl:pr-16">
                  <div className="font-architects-daughter text-xl text-pink-500 mb-2">
                    Revolutionize Your Workflow
                  </div>
                  <h2 className="text-3xl mb-3 text-black 
                    Streamline Your Data Collection Process
                  </h2>
                  <p className="text-lg text-black  mb-4">
                    Sign365 removes collecting and filling forms from your
                    workflow through it&apos;s iOS app. You can now fill and
                    sign your forms without needing to do the work twice.
                  </p>
                  <ul className="text-lg text-black 
                    <li className="flex items-center mb-2">
                      <span>
                        We give you the app to collect your surveys and forms.
                        You tell us where you want the information to go and we
                        send it.
                      </span>
                    </li>
                    <li className="flex items-center mb-2">
                      <span>
                        Is your GTO or labour hire company needing some forms to
                        collect information? We offer{" "}
                        <Link
                          className="text-secondary"
                          href="/blogs/free-group-training-forms"
                        >
                          free templates
                        </Link>{" "}
                        and give you the tools to make your own.
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            {/* 2nd item */}
            <div className="md:grid md:grid-cols-12 md:gap-6 items-center">
              {/* Image */}
              <div
                className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 rtl"
                data-aos="fade-up"
              >
                <Image
                  className="max-w-full mx-auto md:max-w-none h-auto"
                  src={imageGraph}
                  height="370"
                  alt="Features 02"
                />
              </div>
              {/* Content */}
              <div
                className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6"
                data-aos="fade-left"
              >
                <div className="md:pl-4 lg:pl-12 xl:pl-16">
                  <div className="font-architects-daughter text-xl text-pink-500 mb-2">
                    More speed. Less spend
                  </div>
                  <h2 className="text-3xl mb-3 text-black ">
                    Save Time and Money
                  </h2>
                  <p className="text-lg text-black  mb-4">
                    Sign365 reduces your work hours by giving you an assistant
                    to do all your paperwork. Got forms to store? Let{" "}
                    <a
                      className="text-secondary"
                      href={
                        "https://apps.apple.com/us/app/sign365/id1562845428"
                      }
                    >
                      the app
                    </a>{" "}
                    do it!
                  </p>
                  <ul className="text-lg text-black  ml-4 -mb-2 ">
                    <li className="flex items-center mb-2">
                      <span>
                        Get the app to collect info and free up time to focus on
                        other business operations.
                      </span>
                    </li>
                    <li className="flex items-center mb-2">
                      <span>
                        <a
                          className="text-secondary"
                          href={
                            "https://apps.apple.com/us/app/sign365/id1562845428"
                          }
                        >
                          The app
                        </a>{" "}
                        stores your forms offline and then sends them when you
                        are back online. You don&apos;t need someone to send the
                        forms for you. You don&apos;t need someone to scan for
                        you. Sign365 does it.
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            {/* 3rd item */}
            <div className="md:grid md:grid-cols-12 md:gap-6 items-center">
              {/* Image */}
              <div
                className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-5 lg:col-span-6 mb-8 md:mb-0 md:order-1"
                data-aos="fade-up"
              >
                <Image
                  className="max-w-full mx-auto aspect-square md:max-w-none h-[20rem] w-auto"
                  src={imageConnection}
                  width="540"
                  height="405"
                  alt="Features 03"
                />
              </div>
              {/* Content */}
              <div
                className="max-w-xl md:max-w-none md:w-full mx-auto md:col-span-7 lg:col-span-6"
                data-aos="fade-right"
              >
                <div className="md:pr-4 lg:pr-12 xl:pr-16">
                  <div className="font-architects-daughter text-xl text-pink-500 mb-2">
                    Unlock Seamless Business Operations
                  </div>
                  <h2 className="text-3xl mb-3 text-black ">
                    Connect to Over 1000 Apps
                  </h2>
                  <p className="text-lg text-black  mb-4">
                    Sign365 can submit information to over 1000 apps. Whether
                    you use Salesforce, Hubspot, or any other business app,
                    Sign365 has got you covered.
                  </p>
                  <ul className="text-lg text-black  ml-4 -mb-2">
                    <li className="flex items-center mb-2">
                      <span>
                        Sign365 lets you choose where to store your forms. You
                        can choose which apps to connect to yourself. Or let us
                        do the heavy lifting!
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FeaturesZigzag;