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



// AI Solutions: Innovating how we reach audiences—because the future is now.

const FeatureContent = [
  {
    icon: "60",
    meta: "Paid Search",
    subTitle: `Capturing attention when it matters most`,
  },
  {
    icon: "61",
    meta: "Paid Display",
    subTitle: ` Making your brand unmissable.`,
  },
  {
    icon: "62",
    meta: "Sponsored Content",
    subTitle: `Seamlessly blending your message into the conversation.`,
  },
  {
    icon: "60",
    meta: "Content Creation",
    subTitle: `Crafting compelling narratives through AI-driven insightsm`,
  },
  {
    icon: "61",
    meta: "Influencer Campaigns",
    subTitle: `Harnessing the voices that matter.`,
  },
  {
    icon: "62",
    meta: "Analytics",
    subTitle: ` Fine-tuning every campaign to maximize impact.`,
  },
];

const FeaturesEight = () => {
  return (
      <>
      <div style={{  lineHeight : 1, padding: 1, textAlign: 'center' }}>
        <div  className="title-style-five"><h2>Our Services</h2></div>
        <div className="font-rubik">We're not just signing contracts; we're forging partnerships. Our services include: </div>
      </div>
        <div className="row justify-content-center">
          {FeatureContent.map((val, i) => (
              <div
                  className="col-lg-4 col-md-6"
                  key={i}
                  data-aos="fade-up"
                  data-aos-duration="1200"
              >
                <div className="block-style-thirteen">
                  <div className="icon">
                    <Image width={78} height={78} style={{objectFit:'contain'}}     src={`/images/icon/${val.icon}.svg`} alt="icon" />
                  </div>
                  <div className="title font-rubik">{val.meta}</div>
                  <p>{val.subTitle}</p>
                </div>
              </div>
          ))}
        </div>
      </>
  );
};

export default FeaturesEight;