import { Container } from '@/src/components/container';
import { cn } from '@/src/utils/shadcn';
import Image from 'next/image';
import { FaCogs, FaHdd, FaShieldAlt } from 'react-icons/fa';
import { FaHeadset, FaNetworkWired } from 'react-icons/fa6';

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

export function Support() {
  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-16 pt-16 md:pb-32 md:pt-32 lg:grid-cols-[1fr_2fr]">
            {/* Paragraphs on the left */}
            <div className="mr-0 flex flex-col gap-4 px-4 lg:mr-10">
              <div
                className="lg:order-2"
                data-aos="fade-left"
                data-aos-delay="200"
              >
                <h3 className="mb-3 text-lg font-bold leading-[1.25] text-primary md:text-xl">
                  Technical Support Services
                </h3>
                <p className="text-justify text-sm leading-relaxed text-black md:text-base">
                  At Scitech Consulting and Solutions, we offer comprehensive
                  Managed Support Services designed to ensure the seamless
                  operation of your IT infrastructure. Our proactive approach
                  focuses on maintaining system reliability, enhancing
                  performance, and allowing you to concentrate on your core
                  business objectives.
                </p>
                <p className="mt-4 text-justify text-sm leading-relaxed text-black md:text-base">
                  With our expertise, we empower organizations to embrace cloud
                  transformation by implementing tailored solutions that align
                  with their unique goals. From strategy to deployment and
                  optimization, we ensure a smooth transition to the cloud,
                  enabling businesses to unlock unparalleled efficiency,
                  security, and performance.
                </p>
              </div>
            </div>

            {/* Image on the right */}
            <div className="relative h-48 w-full md:h-64 lg:h-auto">
              <Image
                src="/assets/images/service-details/technical.png"
                alt="project 3"
                className={commonImageClasses}
                layout="fill"
                sizes="100vw"
              />
            </div>
          </div>
        </Container>
      </div>

      {/* Updated Cards Section */}
      <Container>
        <div
          className="flex justify-center px-4 "
          data-aos="fade-left"
          data-aos-delay="200"
        >
          <h1 className="pb-8 pt-8 text-center text-lg font-bold text-primary md:text-xl lg:pt-16">
            Our Managed Support Services Include
          </h1>
        </div>

        <div className="grid grid-cols-1 gap-8 px-4 pb-10 sm:gap-10 md:grid-cols-2 lg:grid-cols-3">
          {[
            {
              title: '24/7 Monitoring and Maintenance',
              description:
                'We continuously oversee your systems to detect and address potential issues before they impact your operations, ensuring optimal performance around the clock.',
              icon: <FaCogs />,
            },
            {
              title: 'Help Desk Support',
              description:
                'Our dedicated support team is available to assist with technical issues, providing prompt resolutions to minimize downtime and maintain productivity.',
              icon: <FaHeadset />,
            },
            {
              title: 'Security Management',
              description:
                'We implement robust security measures, including regular updates and threat assessments, to protect your data and IT environment from emerging cyber threats.',
              icon: <FaShieldAlt />,
            },
            {
              title: 'Backup and Disaster Recovery',
              description:
                'Our services include regular data backups and comprehensive disaster recovery planning to safeguard your information and ensure business continuity in the event of unforeseen incidents.',
              icon: <FaHdd />,
            },
            {
              title: 'Network Management',
              description:
                'We manage and optimize your network infrastructure to ensure reliable connectivity and efficient data flow across your organization.',
              icon: <FaNetworkWired />,
            },

            // {
            //   title: 'Cybersecurity Solutions',
            //   description:
            //     'Our robust security frameworks protect your digital assets, ensuring compliance with industry standards and safeguarding against emerging threats.',
            //   icon: <FaShieldAlt />,
            // },
          ].map((item) => (
            <div
              key={item.title}
              className="group relative rounded-xl border border-gray-200 bg-white p-6 shadow-lg transition-transform duration-300 hover:scale-105 hover:shadow-xl"
            >
              {/* Icon or Image Section */}
              <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-primary/10 text-2xl text-primary transition-transform duration-300 group-hover:scale-110">
                {item.icon}
              </div>

              {/* Title */}
              <h3 className="text-center text-lg font-semibold text-gray-800 group-hover:text-primary">
                {item.title}
              </h3>

              {/* Description */}
              <p className="mt-4 text-center text-sm text-gray-600">
                {item.description}
              </p>

              {/* Hover Effect Overlay */}
              <div className="absolute inset-0 scale-95 rounded-xl bg-gradient-to-b from-transparent via-primary/5 to-primary/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}