import { createFileRoute } from "@tanstack/react-router";
import { PageHero } from "@/components/PageHero";
import { ProductCategories } from "@/components/home/ProductCategories";
import { FeaturedProducts } from "@/components/home/FeaturedProducts";

export const Route = createFileRoute("/products")({
  head: () => ({
    meta: [
      { title: "Products — Interior, Exterior & Industrial Paints | Classic Paints" },
      { name: "description", content: "Explore Classic Paints' full range: interior, exterior, enamel, industrial coatings, primer & putty, waterproofing, wood finish and texture paints." },
      { property: "og:title", content: "Classic Paints Product Range" },
      { property: "og:description", content: "Premium paints engineered for every surface — interior, exterior, industrial, waterproof and more." },
    ],
  }),
  component: ProductsPage,
});

function ProductsPage() {
  return (
    <>
      <PageHero
        eyebrow="Products"
        title={<>A finish for <span className="text-gradient-paint">every surface</span></>}
        description="Decorative beauty and industrial protection — all engineered for Bangladesh's tropical climate."
      />
      <ProductCategories />
      <FeaturedProducts />
    </>
  );
}