"use client";

import React from "react";
import Link from "next/link";
import Image from "next/image";

const OurExpertise: React.FC = () => {
  return (
    <section
      className="our-mission-area pb-100"
      aria-labelledby="expertise-heading"
    >
      <div className="container-fluid">
        <div className="row align-items-center">
          {/* Content */}

          <div className="col-lg-6 col-md-12">
            <div className="our-mission-content">
              <div className="content">
                <span className="sub-title">
                  <Image
                    src="/img/star-icon.png"
                    alt=""
                    width={32}
                    height={34}
                  />
                  Our Expertise
                </span>

                <h2
                  id="expertise-heading"
                  data-aos="fade-right"
                  data-aos-duration="800"
                >
                  Magento eCommerce Development Solutions For Growing Businesses
                </h2>

                <p data-aos="fade-right" data-aos-duration="800">
                  We build powerful Magento eCommerce platforms that help
                  businesses create secure, scalable, and high-performing online
                  stores.
                </p>

                <p data-aos="fade-right" data-aos-duration="800">
                  Our Magento developers deliver custom themes, extensions,
                  integrations, migrations, and optimization solutions tailored
                  to your business requirements.
                </p>

                <p data-aos="fade-right" data-aos-duration="800">
                  With extensive eCommerce experience, we help global brands
                  improve customer experience, increase conversions, and achieve
                  sustainable digital growth.
                </p>

                <div
                  className="magento-certification"
                  aria-label="Magento certified development partner"
                >
                  <Image
                    src="/img/our-expertise/magento_certified.webp"
                    alt="Magento certified development expertise"
                    width={500}
                    height={34}
                    loading="lazy"
                  />
                </div>

                <Link
                  href="/service/cms-ecommerce/magento-development/"
                  className="default-btn"
                  aria-label="Explore Magento eCommerce development services"
                >
                  <i className="flaticon-right" aria-hidden="true" />
                  Explore Magento Services
                  <span />
                </Link>
              </div>
            </div>
          </div>

          {/* Image */}

          <div className="col-lg-6 col-md-12">
            <div
              className="our-mission-image"
              data-aos="fade-up"
              data-aos-duration="800"
            >
              <Image
                src="/img/our-expertise/magento_ecommerce.webp"
                alt="Magento eCommerce development platform solutions"
                width={400}
                height={577}
              />

              <div className="shape" aria-hidden="true">
                <Image
                  src="/img/our-expertise/our-mission-shape1.png"
                  alt=""
                  width={919}
                  height={875}
                  loading="lazy"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default OurExpertise;