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

const categories = [
  { title: "مکمل ویتامینه مرغ گوشتی", img: "/images/category-1.jpg" },
  { title: "سبوس برنج فراوری شده", img: "/images/category-2.jpg" },
  { title: "مکمل غذایی دام", img: "/images/category-3.jpg" },
  { title: "کنسانتره طیور", img: "/images/category-4.jpg" },
  { title: "کنسانتره گوسفند", img: "/images/category-5.jpg" },
  { title: "مکمل معدنی مرغ گوشتی", img: "/images/category-6.jpg" },
  { title: "مکمل گوسفند", img: "/images/category-7.jpg" },
  { title: "مکمل زنبور عسل", img: "/images/category-8.jpg" },
  { title: "مکمل معدنی مرغ تخمگذار", img: "/images/category-9.jpg" },
  { title: "مکمل ویتامینه مرغ تخمگذار", img: "/images/category-10.jpg" },
];

export default function Categories() {
  return (
    <section className="py-16 sm:py-20 bg-surface">
      <Container>
        <div className="text-center max-w-xl mx-auto">
          <span className="text-sm font-bold text-accent">آراد آریسمان</span>
          <h2 className="mt-3 text-3xl sm:text-4xl font-extrabold text-primary">
            تغذیه مطمئن، پرورش موفق
          </h2>
          <p className="mt-4 text-foreground">
            دسته‌بندی کامل محصولات ما برای طیور، دام و زنبور عسل
          </p>
        </div>

        <div className="mt-12 flex gap-5 overflow-x-auto pb-4 snap-x snap-mandatory [scrollbar-width:thin]">
          {categories.map((c) => (
            <a
              key={c.title}
              href="#products"
              className="group relative shrink-0 snap-start w-[220px] sm:w-[240px] aspect-[3/4] rounded-2xl overflow-hidden shadow-md"
            >
              <Image
                src={c.img}
                alt={c.title}
                fill
                className="object-cover group-hover:scale-105 transition-transform duration-500"
                sizes="240px"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-secondary/90 via-secondary/20 to-transparent" />
              <span className="absolute bottom-5 inset-x-4 text-white font-bold text-lg leading-7">
                {c.title}
              </span>
            </a>
          ))}
        </div>
      </Container>
    </section>
  );
}
