import AnimationTextHead from "@/app/component/AnimationTextHead";
import UnderlineLG from "../icons/UnderlineLG";
import TickOrangeA from "../icons/TickOrangeA";

const ourServices = [
  { text: "جستجوی سریع پزشک" },
  { text: "جستجوی کلینیک و مراکز درمانی" },
  { text: "نوبت‌گیری راحت و آسان" },
  { text: "داشبورد تخصصی بیمار", link: "https://clinic-pro.ir/" },
  { text: "داشبورد تخصصی پزشک", link: "https://clinic-pro.ir/" },
  { text: "پشتیبانی و یادآوری نوبت" },
];

function Services() {
  return (
    <div className="mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]">
      <div className="flex justify-center">
        <AnimationTextHead text="خدمات ما">
          <UnderlineLG />
        </AnimationTextHead>
      </div>
      <ul
        className="mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px] gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3"
      >
        {ourServices.map((item, idx) => (
          <li key={idx} className="flex items-start justify-start gap-[8px]">
            <TickOrangeA />
            {item.link ? (
              <a
                href={item.link}
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#525252] text-[16px] font-medium hover:text-[#F17732] transition-colors"
              >
                {item.text}
              </a>
            ) : (
              <p className="text-[#525252] text-[16px] font-medium">{item.text}</p>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Services;