import NextImage from "next/image";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { JsonLd } from "@/components/json-ld";
import { MaterialCatalog } from "@/components/material-catalog";
import {
  masonryCategory,
  siteConfig,
} from "@/data/site-content";
import { breadcrumbSchema, buildPageMetadata, itemListSchema } from "@/lib/seo";
import { masonryMaterials } from "@/data/site-content";
import { FadeUp, FadeIn } from "@/components/page-hero-motion";

export const metadata = buildPageMetadata({
  title: "Masonry Supplies in Corpus Christi, TX",
  description:
    "Browse masonry tools and bagged cement from Southern Masonry Supply in Corpus Christi, TX.",
  path: "/masonry-supplies",
  image: "/images/hero_masonry.png",
});

export default function MasonrySuppliesPage() {
  const breadcrumbs = [
    { name: "Home", path: "/" },
    { name: "Masonry Supplies", path: "/masonry-supplies" },
  ];

  return (
    <>
      <JsonLd id="masonry-breadcrumbs" data={breadcrumbSchema(breadcrumbs)} />
      <JsonLd
        id="masonry-item-list"
        data={itemListSchema({
          name: "Masonry Supplies",
          path: "/masonry-supplies",
          items: [
            { name: "Masonry Tools" },
            { name: "Bagged Cement" },
            { name: "Alamo Type N Masonry Cement" },
            { name: "Alamo White Portland Cement" },
            { name: "Alamo White Masonry Cement" },
            { name: "Alamo Portland Cement Type IL" },
            { name: "Alamo Masonry Cement Type N" },
          ],
        })}
      />

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

      <section className="page-hero">
        <div className="container page-hero-shell">
          <div className="page-hero-copy">
            <FadeUp delay={0.05}>
              <span className="eyebrow">Masonry supplies</span>
            </FadeUp>
            <FadeUp delay={0.15}>
              <h1 style={{ marginTop: "1.25rem", marginBottom: "1.75rem" }}>{masonryCategory.title}</h1>
            </FadeUp>
            <FadeUp delay={0.25}>
              <p className="hero-copy" style={{ marginBottom: "2rem" }}>
                {masonryCategory.description}
              </p>
            </FadeUp>
            <FadeUp delay={0.35}>
              <div className="page-hero-meta">
                <span>{siteConfig.cityRegion}</span>
                <span>Quote-first service</span>
                <span>Delivery available</span>
              </div>
            </FadeUp>
          </div>

          <FadeIn delay={0.2} className="page-hero-visual">
            <NextImage
              src="/images/hero_masonry.webp"
              alt="Southern Masonry Supply tools and cement"
              fill
              priority
              sizes="(max-width: 1100px) 100vw, 40vw"
              quality={72}
              className="cover-image"
            />
            <span className="hero-visual-note">
              Tools, cement, and fast follow-up quoting
            </span>
          </FadeIn>
        </div>
      </section>

      <MaterialCatalog
        heroImage={masonryCategory.heroImage}
        materials={masonryMaterials}
        intro={masonryCategory.intro}
        deliveryNote={masonryCategory.deliveryNote}
      />
    </>
  );
}