import React from "react";
import digitalMarketing from "../assets/digitalMarketing.png"
import socialMediaMarketing from "../assets/socialMediaMarketing.png"

function ServiceCard(props) {
  return (
    <div
      className={`rounded-xl bg-white p-6 text-center shadow-xl ${props.animationDelay}`}
    >
      <div
        className={`mx-auto flex h-16 w-16 -translate-y-12 transform items-center justify-center rounded-full shadow-lg ${props.backgroundColor} ${props.shadowEffect}`}
      >
        {props.icon}
      </div>
      <h1 className=" mb-3 pt-2  font-sans text-2xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900 ">
        {props.title}
      </h1>
      <p className="px-4 text-gray-500">{props.description}</p>
    </div>
  );
}

function Services() {
  return (
    <div className="h-full min-h-screen w-full bg-gray-800 pt-12 p-10 md:px-48">
      <div className="grid gap-14 md:grid-cols-3 md:gap-5">
        <ServiceCard
          animationDelay="data-aos-delay='0'"
          backgroundColor="bg-teal-500"
          shadowEffect="shadow-teal-500/40"
          icon={
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.87 28.87" id="whatsapp"><g data-name="Layer 2"><g data-name="Layer 1"><rect width="28.87" height="28.87" fill="#189d0e" rx="6.48" ry="6.48"></rect><path fill="#fff" fill-rule="evenodd" d="m7.09 21.82.23-.87c.24-.89.49-1.77.72-2.66a.65.65 0 0 0 0-.43 7.32 7.32 0 1 1 3.16 3.08.73.73 0 0 0-.45 0c-1.98.44-3.26.8-3.66.88zm1.71-1.68c.73-.19 1.4-.36 2.07-.54a.6.6 0 0 1 .5.07 6 6 0 0 0 4.05.77 6.12 6.12 0 1 0-6.31-3.09 1.28 1.28 0 0 1 .14 1.16c-.18.49-.25 1.04-.45 1.63z"></path><path fill="#fff" fill-rule="evenodd" d="M16.37 17.89c-1.43-.05-3.71-1.18-5.27-3.89a2.2 2.2 0 0 1 .34-2.81 1 1 0 0 1 .94-.14c.08 0 .16.13.2.22.21.47.41.95.59 1.43.1.26-.08.5-.45.92a.32.32 0 0 0 0 .42 5 5 0 0 0 2.54 2.18.3.3 0 0 0 .39-.1c.58-.71.64-.92 1-.78 1.48.71 1.59.74 1.6.9a1.61 1.61 0 0 1-1.88 1.65z"></path></g></g></svg>
          }
          title="WhatsApp marketing "
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo iure inventore amet modi accusantium vero perspiciatis, incidunt dicta sed aspernatur!"
        />
        <ServiceCard
          animationDelay="data-aos-delay='150'"
          backgroundColor="bg-rose-500"
          shadowEffect="shadow-rose-500/40"
          icon={
         <img src={digitalMarketing}/>
          }
          title="Digital Marketing"
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo iure inventore amet modi accusantium vero perspiciatis, incidunt dicta sed aspernatur!"
        />
        <ServiceCard
          animationDelay="data-aos-delay='300'"
          backgroundColor="bg-sky-500"
          shadowEffect="shadow-sky-500/40"
          icon={
           <img src={socialMediaMarketing} />
          }
          title="Social media marketing"
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo iure inventore amet modi accusantium vero perspiciatis, incidunt dicta sed aspernatur!"
        />
      </div>
    </div>
  );
}

export default Services;