import type { Metadata } from "next";
import Link from "next/link";
import ProductCard from "../components/ProductCard";
import { InteriorFooter, InteriorHeader } from "../components/InteriorShell";
import { fetchLatestProducts } from "../lib/meshkee";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "ماشین‌آلات صنعت سیم و کابل | سامان اندیش",
  description:
    "جدیدترین ماشین‌آلات و تجهیزات خطوط تولید سیم و کابل سامان اندیش را مشاهده کنید و برای انتخاب، ارزیابی فنی و استعلام قیمت با کارشناسان ما در ارتباط باشید.",
  alternates: {
    canonical: "/products",
  },
};

export default async function ProductsPage() {
  const products = await fetchLatestProducts(24).catch(() => []);

  return (
    <main>
      <InteriorHeader active="products" />

      <section
        className="inner-hero product-list-hero"
        style={{ backgroundImage: 'url("/assets/i8SsUDDMLv.jpg")' }}
      >
        <div className="inner-hero__shade" />
        <div className="container inner-hero__content">
          <span>INDUSTRIAL MACHINERY</span>
          <h1>ماشین‌آلات سیم و کابل</h1>
          <p>جدیدترین تجهیزات موجود برای خطوط تولید صنعتی</p>
          <div>
            <Link href="/">صفحه اصلی</Link>
            <i>/</i>
            <strong>ماشین‌آلات</strong>
          </div>
        </div>
      </section>

      <section className="product-listing">
        <div className="container">
          <div className="product-listing__heading">
            <div>
              <span>NEWEST PRODUCTS</span>
              <h2>جدیدترین ماشین‌آلات</h2>
            </div>
            <p>{products.length} محصول اخیر</p>
          </div>

          {products.length ? (
            <div className="product-grid">
              {products.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          ) : (
            <div className="products-empty">
              در حال حاضر محصولی برای نمایش در دسترس نیست.
            </div>
          )}
        </div>
      </section>

      <InteriorFooter />
    </main>
  );
}