import Image from "next/image";
import { articles } from "@/data/home";

export function Articles() {
  return (
    <section id="articles" className="section bg-surface">
      <div className="container-page">
        <div className="section-head">
          <p className="section-kicker">Insights</p>
          <h2 className="section-title">مقالات</h2>
          <p className="section-desc">
            نکات تخصصی برای خرید هوشمندانه و ارتقاء خطوط تولید صنعتی.
          </p>
        </div>

        <div className="grid gap-5 md:grid-cols-3">
          {articles.map((article) => (
            <a
              key={article.id}
              href={article.href}
              className="group block overflow-hidden border border-line transition hover:border-brand/40"
            >
              <div className="relative aspect-[16/10] overflow-hidden bg-[#e8eef4]">
                <Image
                  src={article.image}
                  alt={article.title}
                  fill
                  className="object-cover transition duration-500 group-hover:scale-[1.04]"
                  sizes="(max-width: 768px) 100vw, 33vw"
                />
              </div>
              <div className="p-5">
                <h3 className="text-base font-extrabold leading-7 text-brand-ink transition group-hover:text-brand">
                  {article.title}
                </h3>
                <span className="mt-4 inline-flex items-center gap-2 text-sm font-bold text-brand">
                  بیشتر بخوانید
                  <span aria-hidden>←</span>
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}