'use client'
import Image from "next/image";
import React from "react";

const FeatureContent = [
    {
        icon: "20",
        meta: "SEO",
        subTitle: `Mastering search engines to boost your visibility.`,
        dataDelay: "0",
    },
    {
        icon: "21",
        meta: "Public Relations",
        subTitle: `Connecting you with the media that can elevate your voice.`,
        dataDelay: "100",
    },
    {
        icon: "22",
        meta: "Design & Events",
        subTitle: `Crafting memorable experiences that leave a mark.`,
        dataDelay: "300",
    },
    {
        icon: "23",
        meta: "Special Projects",
        subTitle: `Whether it’s an app or a website, we bring your vision to life with flair.`,
        dataDelay: "300",
    },
];

const ContentsPartnersSection = () => {
    return (
        <div className="row justify-content-center">
            {FeatureContent.map((val, i) => (
                <div
                    className="col-lg-3 col-md-6"
                    key={i}
                    data-aos="fade-up"
                    data-aos-duration="1200"
                    data-aos-delay={val.dataDelay}
                >
                    <div className="block-style-five">
                        <div className="icon">
                            <Image width={72} height={72} style={{objectFit:'contain'}}     src={`/images/icon/${val.icon}.svg`} alt="icon" />
                        </div>
                        <h6 className="title">
                            <span>{val.meta}</span>
                        </h6>
                        <p>{val.subTitle}</p>
                    </div>
                </div>
            ))}
        </div>
    );
};

export default ContentsPartnersSection;