import { createFileRoute } from "@tanstack/react-router";
import { SubPageLayout } from "@/components/sub-page-layout";

export const Route = createFileRoute("/projects")({
  head: () => ({
    meta: [
      { title: "Projects — Promist Misting Installations" },
      { name: "description", content: "A selection of misting system installations delivered by Promist across the region." },
      { property: "og:title", content: "Projects" },
      { property: "og:description", content: "Recent Promist misting installations." },
    ],
  }),
  component: Projects,
});

const IMGS = [
  "/wp-uploads/2016/03/commercial-misting.jpg",
  "/wp-uploads/2017/04/residential.jpg",
  "/wp-uploads/2017/04/commercial.jpg",
  "/wp-uploads/2017/04/industrial.jpg",
  "/wp-uploads/2017/04/project1.jpg",
  "/wp-uploads/2017/04/project2.jpg",
  "/wp-uploads/2017/04/project3.jpg",
  "/wp-uploads/2017/04/project4.jpg",
  "/wp-uploads/2017/04/project5.jpg",
  "/wp-uploads/2017/04/project6.jpg",
  "/wp-uploads/2017/04/new-banner.jpg",
  "/wp-uploads/2020/04/banner-sanitz.jpg",
  "/wp-uploads/2020/04/image-002.png",
  "/wp-uploads/2017/05/pm-a18s.jpg",
  "/wp-uploads/2017/04/banner4.jpg",
];

function Projects() {
  return (
    <SubPageLayout
      eyebrow="Projects"
      title="Selected installations."
      lede="A cross-section of Promist deployments — residential, commercial and industrial."
    >
      <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-2">
        {IMGS.map((src, i) => (
          <a key={src} href={src} className="group relative overflow-hidden aspect-square">
            <img src={src} alt={`Promist project ${i + 1}`} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
            <div className="absolute inset-0 bg-brand-red/0 group-hover:bg-brand-red/30 transition-colors" />
          </a>
        ))}
      </div>
    </SubPageLayout>
  );
}
