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 Integration() {
  return (
    <section className="overflow-hidden">
      {/* Section 2 */}
      <div className="relative grid gap-6 bg-gradient-to-t from-gray-200 to-green-100">
        <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 Integration
                </h3>
                <p className="text-justify leading-relaxed text-black">
                  At Scitech Consulting and Solutions, we empower businesses to
                  seamlessly connect their systems and processes with
                  Integration solutions powered by ServiceNow. Our integration
                  services enable smooth data exchange, automate workflows, and
                  enhance collaboration across platforms, ensuring your
                  operations run efficiently and effectively.
                </p>
                <p className="text mt-6 mb-4 font-bold text-black">
                  Why ServiceNow Integration is Crucial for Your Business
                </p>

                {[
                  'Enhance Data Connectivity',
                  'Automate Workflows',
                  'Improve Cross-Platform Collaboration',
                  'Drive Operational Efficiency',
                ].map((text) => (
                  <div className="flex items-center gap-4" key={text}>
                    <span className="flex-none text-base/[1] text-primary">
                      <FaHandPointRight />
                    </span>
                    <p className="flex-1  text-black ">{text}</p>
                  </div>
                ))}
                {/* <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/integration2.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">
            End-to-End ServiceNow Integration Solutions 
          </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">
                Integration Hub
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              ServiceNow Integration Hub provides pre-built spokes and flow
              actions to automate common integrations with external applications
              like Microsoft Teams, Salesforce, and GitHub. It simplifies
              complex integrations using a no-code/low-code approach within Flow
              Designer.
            </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">
                MID Server
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              A MID Server is a lightweight Java application that facilitates
              communication between ServiceNow and on-premises systems behind a
              firewall. It enables integrations like Discovery, Orchestration,
              and event monitoring by securely transmitting data. MID Servers
              ensure secure connectivity and compliance with security standards.
            </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">
                Event Management Integrations
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              Event Management integrates with monitoring tools like Splunk,
              SolarWinds, or Nagios to collect and correlate events. ServiceNow
              transforms these events into actionable incidents or alerts. This
              provides a unified view of IT operations and improves incident
              response times.
            </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">
                SSO and Identity Management
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              ServiceNow integrates with identity providers like Okta, Azure AD,
              and LDAP for Single Sign-On (SSO) and user provisioning. This
              enables secure and seamless access to the platform, ensuring
              compliance with authentication and authorization policies. It
              enhances user experience and reduces administrative effort.
            </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">
                Custom Integration using APIs
              </h3>
            </div>
            <p className="p-2 text-justify leading-relaxed">
              ServiceNow supports custom integrations via REST or SOAP APIs to
              connect with any third-party application. Developers can create,
              read, update, or delete data programmatically in ServiceNow
              tables. This flexibility enables tailored solutions for 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>
  );
}