import { createFileRoute } from "@tanstack/react-router";
import { PageHero, Section, CTA } from "@/components/page-shell";

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 = [
  "https://promistcool.com/wp-content/uploads/2017/04/banner4.jpg",
  "https://promistcool.com/wp-content/uploads/2017/04/banner2.jpg",
  "https://promistcool.com/wp-content/uploads/2017/04/banner3.jpg",
  "https://promistcool.com/wp-content/uploads/2020/04/banner-sanitz.jpg",
  "https://promistcool.com/wp-content/uploads/2017/04/new-banner.jpg",
  "https://promistcool.com/wp-content/uploads/2016/03/commercial-misting.jpg",
  "https://promistcool.com/wp-content/uploads/2016/03/industrial-misting.jpg",
  "https://promistcool.com/wp-content/uploads/2016/03/humidification-misting.jpg",
];

function Projects() {
  return (
    <>
      <PageHero
        eyebrow="Projects"
        title="Selected installations."
        lede="A cross-section of Promist deployments — residential, commercial and industrial."
      />
      <Section>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-1">
          {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>
      </Section>
      <CTA />
    </>
  );
}