import { VisionData } from '@/data/vision/v1';
import { ImageProps } from '@/src/common-types';
import { Container } from '@/src/components/container';
import { SectionHeading } from '@/src/components/section-heading';
import { SectionHeadingWithoutStylingProps } from '@/src/components/section-heading/interface';
import { BREAKPOINTS } from '@/src/themes/interface';
import Image from 'next/image';
import { FaRocket, FaCogs, FaHandshake } from 'react-icons/fa'; // Importing icons

export interface VisionSectionProps {
  sectionHeading: SectionHeadingWithoutStylingProps;
  // image: Omit<ImageProps, 'width' | 'height'>;
}

export function Vision() {
  const { sectionHeading } = VisionData;
  return (
    <section className="section-padding-primary">
      <div className="relative py-[60px]">
        {/* Image area */}
        <div className="absolute right-0 top-0 z-1 h-full w-full overflow-hidden bg-red-500 md:w-[56%] md:rounded-r-5">
          <Image
            src="/assets/images/about/vission.png"
            alt="alt"
            fill
            className="object-cover"
            sizes={`(min-width: ${BREAKPOINTS.md}) 60vw, 100vw`}
          />
        </div>

        <Container>
          <div className=" md:w-1/2">
            <div className="relative z-[2] rounded-5 bg-white p-10 shadow-1 dark:bg-accent-700 lg:p-[60px]">
              <div className="mb-30px">
                <SectionHeading {...sectionHeading} />
                <p className="text-justify">
                  At SciTech Consulting & Solutions Ltd., our vision is to
                  become a global leader in delivering cloud-based solutions
                  that redefine how businesses operate. We strive to create a
                  future where organizations achieve seamless integration,
                  operational excellence, and sustainable growth through the
                  power of innovative cloud technologies.
                </p>
                <p className="mt-4  text-justify">
                  We aim to empower our clients with innovative, user-friendly,
                  and scalable solutions that enhance productivity, drive
                  digital transformation, and create lasting value. By fostering
                  a culture of excellence, collaboration, and continuous
                  improvement, we envision being the trusted partner for
                  businesses worldwide in their journey toward achieving
                  operational resilience and technological advancement.
                </p>

                {/* Icons and sentence */}
                <div className="mb-4 mt-8 flex flex-wrap justify-between">
                  <div className="mb-4 flex w-1/3 flex-col items-center md:mb-0">
                    <FaRocket size={40} className="text-blue-500" />
                    <p className="mt-2 text-center">Innovation</p>
                  </div>
                  <div className="mb-4 flex w-1/3 flex-col items-center md:mb-0">
                    <FaCogs size={40} className="text-green-500" />
                    <p className="mt-2 text-center">Scalability</p>
                  </div>
                  <div className="flex w-1/3 flex-col items-center">
                    <FaHandshake size={40} className="text-yellow-500" />
                    <p className="mt-2 text-center">Relationship</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </div>
    </section>
  );
}