import { Container } from "@/components/Container";
import { GlassBox } from "@/components/GlassBox";
import { Placeholder } from "@/components/Placeholder";
import { customerPortalUrl } from "@/lib/config";
import { sampleProducts } from "@/lib/data";

export function ProductStrip() {
  return (
    <section className="py-20 sm:py-24">
      <Container>
        <div className="mb-10 flex items-end justify-between gap-4">
          <div>
            <p className="section-kicker">Catalog</p>
            <h2 className="mt-3 text-3xl font-extrabold">نمونه‌ قطعات</h2>
            <p className="mt-2 max-w-xl text-[14px] leading-7 text-muted">
              تصاویر فروشگاه روی پس‌زمینه سفید از بک‌اند خوانده می‌شوند. تا اتصال، همین گروه‌ها به‌عنوان نمونه آمده‌اند.
            </p>
          </div>
          <a href={customerPortalUrl} className="hidden rounded-xl bg-ink px-5 py-3 text-[13px] text-white hover:bg-brand sm:inline-flex">
            ورود به فروشگاه
          </a>
        </div>

        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 lg:gap-5">
          {sampleProducts.map((product) => (
            <a key={product.id} href={customerPortalUrl} className="group relative block">
              <div className="relative aspect-[4/5] overflow-hidden rounded-2xl">
                <Placeholder
                  src={product.image}
                  alt={product.title}
                  className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <GlassBox
                  frostSrc={product.image}
                  className="absolute inset-x-0 bottom-0 z-10 !rounded-none !rounded-b-2xl px-3 py-2.5 text-right"
                >
                  <h3 className="truncate text-[12px] font-bold leading-5 sm:text-[13px]">{product.title}</h3>
                  <p className="mt-0.5 font-latin text-[9px] tracking-[0.2em] text-muted uppercase">Coming soon</p>
                </GlassBox>
              </div>
            </a>
          ))}
        </div>
      </Container>
    </section>
  );
}