import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { JsonLd } from "@/components/json-ld";
import { breadcrumbSchema, buildPageMetadata, itemListSchema } from "@/lib/seo";

export const metadata = buildPageMetadata({
  title: "Masonry & Landscaping Supplies in Corpus Christi, TX",
  description:
    "Browse masonry supplies and landscaping supplies from Southern Masonry Supply in Corpus Christi, TX.",
  path: "/products",
  image: "/images/hero_main.png",
});

type ProductsPageProps = {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
};

function firstValue(value: string | string[] | undefined) {
  return Array.isArray(value) ? value[0] : value;
}

export default async function ProductsPage({
  searchParams,
}: ProductsPageProps) {
  const params = await searchParams;
  const category = firstValue(params.category)?.toLowerCase();

  if (category === "masonry" || category === "tools") {
    redirect("/masonry-supplies#catalog");
  }

  if (
    category === "stone" ||
    category === "natural-stone" ||
    category === "landscaping"
  ) {
    redirect("/landscaping-supplies#catalog");
  }

  const breadcrumbs = [
    { name: "Home", path: "/" },
    { name: "Products", path: "/products" },
  ];

  return (
    <>
      <JsonLd id="products-breadcrumbs" data={breadcrumbSchema(breadcrumbs)} />
      <JsonLd
        id="products-item-list"
        data={itemListSchema({
          name: "Masonry & Landscaping Supplies",
          path: "/products",
          items: [
            { name: "Masonry Supplies", path: "/masonry-supplies" },
            { name: "Landscaping Supplies", path: "/landscaping-supplies" },
            { name: "Contact Us", path: "/contact" },
          ],
        })}
      />

      <div className="breadcrumb-strip">
        <div className="container">
          <Breadcrumbs items={breadcrumbs} />
        </div>
      </div>

      <section className="section bg-soft">
        <div className="container">
          <div className="inventory-overview-header">
            <span className="eyebrow">Masonry & Landscaping Supplies</span>
            <h1>Masonry &amp; Landscaping Supplies</h1>
            <p>
              Southern Masonry Supply offers masonry supplies and landscaping
              supplies in Corpus Christi, TX and surrounding cities. Browse the
              catalog that matches your project and get in touch for delivery
              information.
            </p>
          </div>

          <div className="inventory-overview-grid">
            <article className="inventory-overview-card">
              <div className="inventory-overview-media">
                <Image
                  src="/images/hero_masonry.webp"
                  alt="Masonry supplies and tools"
                  fill
                  sizes="(max-width: 900px) 100vw, 50vw"
                  quality={72}
                  className="cover-image"
                />
              </div>
              <div className="inventory-overview-copy">
                <span className="not-found-card-label">Masonry supplies</span>
                <h2>Masonry tools and bagged cement.</h2>
                <p>
                  Browse masonry tools and bagged cement from Southern Masonry
                  Supply.
                </p>
                <div
                  className="inventory-chip-list"
                  aria-label="Masonry highlights"
                >
                  <span className="inventory-chip">Masonry Tools</span>
                  <span className="inventory-chip">Bagged Cement</span>
                  <span className="inventory-chip">Get in Touch</span>
                </div>
                <Link
                  href="/masonry-supplies#catalog"
                  className="button button-primary"
                >
                  Open masonry catalog
                </Link>
              </div>
            </article>

            <article className="inventory-overview-card">
              <div className="inventory-overview-media">
                <Image
                  src="/images/hero_landscaping.webp"
                  alt="Natural stone and landscaping materials"
                  fill
                  sizes="(max-width: 900px) 100vw, 50vw"
                  quality={72}
                  className="cover-image"
                />
              </div>
              <div className="inventory-overview-copy">
                <span className="not-found-card-label">Natural stone</span>
                <h2>Flagstone, gravel, pebbles, and boulders.</h2>
                <p>
                  Browse Mexico Beach Pebbles, Sand &amp; Gravel, Flagstone,
                  and Boulders &amp; Stone from Southern Masonry Supply.
                </p>
                <div
                  className="inventory-chip-list"
                  aria-label="Landscaping highlights"
                >
                  <span className="inventory-chip">Mexico Beach Pebbles</span>
                  <span className="inventory-chip">Flagstone</span>
                  <span className="inventory-chip">Sand &amp; Gravel</span>
                  <span className="inventory-chip">Boulders &amp; Stone</span>
                </div>
                <Link
                  href="/landscaping-supplies#catalog"
                  className="button button-secondary"
                >
                  Open landscaping catalog
                </Link>
              </div>
            </article>
          </div>

          <div className="inventory-overview-header" style={{ marginTop: "3rem" }}>
            <p>
              Delivery is also available and quoted at time of purchase. For
              flagstone there is a minimum of one ton, and for landscaping
              aggregates there is a 3 yard minimum.
            </p>
            <Link href="/contact" className="button button-outline">
              Contact us
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}