import Image from "next/legacy/image";
import Link from "next/link";

const ServiceIntro = () => {
  return (
    <section className="tp-service pt-120 pb-120">
    <div className="container">
      <div className="row vertical-column-gap-md">
        <div className="col-12 col-lg-4">
          <div className="tp-service__thumb" style={{ maxWidth: '400px', border: 'none', padding: 0, margin: 0, overflow: 'hidden', borderRadius: '8px' }}>
            <Link href="services">
              <Image
                src="/images/leading.jpg"
                alt="Enterprise Software Solutions"
                width={400}
                height={500}
                objectFit="cover"
                style={{ display: 'block', border: 'none', margin: 0, padding: 0 }}
              />
            </Link>
          </div>
        </div>
        <div className="col-12 col-lg-8">
          <div className="tp-service__content">
            <div className="tp-section-wrapper">
            
              <h2 className="title-anim text-secondary fw-7 mb-30">
                Accelerating Digital Transformation Through<br />
                Mission-Critical Enterprise Software
              </h2>
            </div>
            <div className="pl-50">
              <p className="cur-lg mb-25">
                GNX partners with Fortune 40 companies and global enterprises to architect, 
                develop, and deploy business-critical software solutions that drive measurable 
                results. Our engineering teams deliver secure, scalable, and compliant systems 
                that power digital innovation across industries.
              </p>
              <p className="cur-lg mb-30">
                From cloud-native architectures and enterprise integration platforms to 
                AI-powered analytics and legacy modernization, we provide end-to-end 
                technology solutions that reduce operational costs, enhance efficiency, 
                and deliver competitive advantage.
              </p>
              <div className="tp-service__features mb-40">
                <ul className="list-unstyled">
                  <li className="mb-15">
                    <i className="fa-solid fa-circle-check text-primary me-10"></i>
                    <span className="fw-6">Enterprise-Grade Security & Compliance</span>
                  </li>
                  <li className="mb-15">
                    <i className="fa-solid fa-circle-check text-primary me-10"></i>
                    <span className="fw-6">Scalable Cloud-Native Architectures</span>
                  </li>
                  <li className="mb-15">
                    <i className="fa-solid fa-circle-check text-primary me-10"></i>
                    <span className="fw-6">24/7 Support & Dedicated Engineering Teams</span>
                  </li>
                </ul>
              </div>
              <div className="mt-60">
                <Link href="services" className="btn-anim btn-anim-light">
                  Explore Our Solutions
                  <i className="fa-solid fa-arrow-right"></i>
                  <span></span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  );
};

export default ServiceIntro;