import Card from "./ServiceCard";
import AnaliseImg from "../../../assets/imgs/Analise.jpg";
import CreateImg from "../../../assets/imgs/Create.jpg";
import ScaleImg from "../../../assets/imgs/Scale.jpg";
import ExecuteImg from "../../../assets/imgs/Execute.jpg";
import { useTranslation } from "react-i18next";

const MarketingCards = () => {
  const { t } = useTranslation();

  return (
    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
      <Card
        title={t("services.cards.marketing.card1.title")}
        description={t("services.cards.marketing.card1.description")}
        imgSrc={AnaliseImg}
        delay="0s"
      />
      <Card
        title={t("services.cards.marketing.card2.title")}
        description={t("services.cards.marketing.card2.description")}
        imgSrc={CreateImg}
        delay="0.2s"
      />
      <Card
        title={t("services.cards.marketing.card3.title")}
        description={t("services.cards.marketing.card3.description")}
        imgSrc={ScaleImg}
        delay="0.4s"
      />
      <Card
        title={t("services.cards.marketing.card4.title")}
        description={t("services.cards.marketing.card4.description")}
        imgSrc={ExecuteImg}
        delay="0.6s"
      />
    </div>
  );
};

export default MarketingCards;
