import { Container } from '@/src/components/container';
import { cn } from '@/src/utils/shadcn';
import Image from 'next/image';
import { FaCheckCircle } from 'react-icons/fa';
import { FaHandPointRight } from 'react-icons/fa6';

const commonImageClasses = cn('rounded-10 object-cover object-center');

export function Workflow() {
  return (
    <section className="overflow-hidden ">
      {/* Section 2 */}
      <div className="relative grid gap-6 bg-gradient-to-t from-blue-200 to-gray-300">
        <Container>
          <div className="mb-8 grid grid-cols-1 gap-6 pb-32 pt-32 lg:grid-cols-[1fr_2fr]">
            {/* Paragraphs on the left */}
            <div className="mr-0 flex flex-col gap-4 lg:mr-10">
              <div
                className="lg:order-2"
                data-aos="fade-left"
                data-aos-delay="200"
              >
                <h3 className="mb-5 mt-8 text-md font-bold leading-[1.25] text-primary md:text-lg">
                 ServiceNow Creator Workflows: Transform Ideas into Impactful Applications 
                </h3>
                <p className="text-justify leading-relaxed text-black">
                  At Scitech, we helped our client unlock the full potential of their teams by leveraging ServiceNow creator workflows, driving digital transformation across their organization. By reimagining their internal processes and empowering employees to create custom solutions, we enabled them to streamline operations, boost productivity, and deliver measurable ROI. 
                </p>
                <p className="text mt-6  text-black">
                  We don’t just implement technology—we collaborate with you to understand your unique challenges and provide tailored solutions that accelerate growth and innovation. Our deep expertise in ServiceNow ensures that your workflows are not only efficient but also scalable, setting the foundation for long-term success. 
                </p>

                
                {/* <p className="mt-4 text-justify leading-relaxed text-black">
                  Partner with us to elevate your ITBM processes and make the
                  most of ServiceNow’s capabilities to drive meaningful
                  improvements in your IT operations.
                </p> */}
              </div>
            </div>
            {/* Image on the right */}
            <div className="relative h-64 w-full lg:h-auto">
              <Image
                src="/assets/images/service-details/workflow.png"
                alt="project 3"
                className={commonImageClasses}
                layout="fill"
                sizes="100vw"
              />
            </div>
          </div>
        </Container>
      </div>

      <Container>
        <div
          className="flex justify-center lg:order-2"
          data-aos="fade-left"
          data-aos-delay="200"
        >
          <h1 className="pb-10 pt-32 text-center text-xl font-bold leading-[1.25] text-primary md:text-xl">
            Why Choose Creator Workflows? 
          </h1>
        </div>

        <div className="my-3 mb-16 grid grid-cols-1 gap-5 md:grid-cols-2 lg:gap-16 2xl:grid-cols-3">
          {/* Card 1 */}
          <div className="card transform rounded-lg bg-white p-5 shadow-lg transition-all hover:scale-105 hover:shadow-2xl">
            <div className="flex items-center gap-4">
              <span className="flex-none text-base/[1] text-primary">
                <FaCheckCircle />
              </span>
              <h3 className="flex-1 text-md font-bold text-accent-700 dark:text-white">
                Boost Productivity and Innovation
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              Let your employees focus on meaningful, high-impact tasks by automating repetitive processes. With the App Engine's low-code capabilities, creating workflows becomes up to 4x faster than traditional development models. 
            </p>
          </div>

          {/* Card 2 */}
          <div className="card transform rounded-lg bg-white p-5 shadow-lg transition-all hover:scale-105 hover:shadow-2xl">
            <div className="flex items-center gap-4">
              <span className="flex-none text-base/[1] text-primary">
                <FaCheckCircle />
              </span>
              <h3 className="flex-1 text-md font-bold text-accent-700 dark:text-white">
               Accelerate Digital Transformation 
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              Say goodbye to outdated tools like emails and spreadsheets. Our ServiceNow solutions centralize operations, connect teams, and provide the visibility needed for strategic application development—all on a unified platform. 
            </p>
          </div>

          {/* Card 3 */}
          <div className="card transform rounded-lg bg-white p-5 shadow-lg transition-all hover:scale-105 hover:shadow-2xl">
            <div className="flex items-center gap-4">
              <span className="flex-none text-base/[1] text-primary">
                <FaCheckCircle />
              </span>
              <h3 className="flex-1 text-md font-bold text-accent-700 dark:text-white">
                Enhance ROI Across the Board
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              Empower your teams with efficient workflows that deliver measurable results. Organizations using ServiceNow Creator Workflows report seeing a 230% ROI after streamlining their operations and focusing on business growth. 
            </p>
          </div>
          {/* Card 4 */}
          <div className="card transform rounded-lg bg-white p-5 shadow-lg transition-all hover:scale-105 hover:shadow-2xl">
            <div className="flex items-center gap-4">
              <span className="flex-none text-base/[1] text-primary">
                <FaCheckCircle />
              </span>
              <h3 className="flex-1 text-md font-bold text-accent-700 dark:text-white">
                Custom Automation
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              From concept to deployment, we work closely with your IT and business teams to craft tailored solutions. By embracing low-code development, you can reimagine how your organization approaches digital workflows—empowering every team to innovate. 
            </p>
          </div>
          {/* Card 5 */}
          <div className="card transform rounded-lg bg-white p-5 shadow-lg transition-all hover:scale-105 hover:shadow-2xl">
            <div className="flex items-center gap-4">
              <span className="flex-none text-base/[1] text-primary">
                <FaCheckCircle />
              </span>
              <h3 className="flex-1 text-md font-bold text-accent-700 dark:text-white">
                Low-Code Solutions with the App Engine 
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              Simplify application development with an intuitive drag-and-drop interface. Whether you're starting from scratch or enhancing existing solutions, we help you build workflows that fit your unique business needs. 
            </p>
          </div>
          {/* Card 6 */}
          <div className="card transform rounded-lg bg-white p-5 shadow-lg transition-all hover:scale-105 hover:shadow-2xl">
            <div className="flex items-center gap-4">
              <span className="flex-none text-base/[1] text-primary">
                <FaCheckCircle />
              </span>
              <h3 className="flex-1 text-md font-bold text-accent-700 dark:text-white">
                Third-Party App Integrations
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              ServiceNow integrates with a variety of third-party applications,
              including Slack, Microsoft Teams, and ServiceNow Store apps. These
              integrations enable real-time collaboration, notifications, and
              data sharing across platforms.
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}