import Image from "next/image";
import Container from "./Container";

const features = [
  {
    icon: "/images/feature-icon-1.png",
    title: "کیفیت تخم و گوشت",
    desc: "ارتقای طعم، رنگ و ارزش تغذیه‌ای",
  },
  {
    icon: "/images/feature-icon-2.png",
    title: "بهره‌وری بالا",
    desc: "مصرف بهینه خوراک و بازده اقتصادی بیشتر",
  },
  {
    icon: "/images/feature-icon-3.png",
    title: "تقویت ایمنی",
    desc: "کاهش بیماری‌ها و تلفات گله",
  },
  {
    icon: "/images/feature-icon-4.png",
    title: "افزایش رشد",
    desc: "بهبود وزن‌گیری سریع و یکنواخت",
  },
];

export default function Features() {
  return (
    <section className="py-16 sm:py-20">
      <Container>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {features.map((f) => (
            <div
              key={f.title}
              className="group rounded-2xl border border-black/5 bg-white p-7 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all"
            >
              <div className="flex h-16 w-16 items-center justify-center rounded-xl bg-primary/5">
                <Image src={f.icon} alt="" width={40} height={40} />
              </div>
              <h3 className="mt-5 text-lg font-bold text-secondary">{f.title}</h3>
              <p className="mt-2 text-sm leading-6 text-foreground">{f.desc}</p>
              <span className="mt-4 inline-flex items-center justify-center h-8 w-8 rounded-full border border-primary/20 text-primary rotate-180 group-hover:bg-primary group-hover:text-white group-hover:rotate-0 transition-all">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                  <path
                    d="M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 1 1-1.4-1.4L18 12.7H4a1 1 0 1 1 0-2h14L13.3 6.7a1 1 0 0 1 0-1.4Z"
                    fill="currentColor"
                  />
                </svg>
              </span>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}
