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

export const metadata = buildPageMetadata({
  title: "Landscaping Supplies in Corpus Christi, TX",
  description:
    "Browse flagstone, sand & gravel, boulders & stone, and Mexico Beach Pebbles from Southern Masonry Supply in Corpus Christi, TX.",
  path: "/landscaping-supplies",
  image: "/images/hero_landscaping.png",
});

export default function LandscapingSuppliesPage() {
  const breadcrumbs = [
    { name: "Home", path: "/" },
    { name: "Landscaping Supplies", path: "/landscaping-supplies" },
  ];

  return (
    <>
      <JsonLd
        id="landscaping-breadcrumbs"
        data={breadcrumbSchema(breadcrumbs)}
      />
      <JsonLd
        id="landscaping-item-list"
        data={itemListSchema({
          name: "Landscaping Supplies",
          path: "/landscaping-supplies",
          items: [
            { name: "Mexico Beach Pebbles" },
            { name: '1" - 2" Mexico Beach Pebbles Multicolor' },
            { name: "Mexico Beach Pebbles 40 lb. Bags" },
            { name: "Mexico Beach Pebbles 2 Ton Basket" },
            { name: "Sand & Gravel" },
            { name: "Flagstone" },
            { name: '1" Oklahoma' },
            { name: '1" Oklahoma Silver Mist' },
            { name: '1" Arkansas Chestnut' },
            { name: '1/2" Arkansas Blue' },
            { name: '1" Arkansas Blue' },
            { name: '2" Arkansas Blue' },
            { name: '1/2" Arkansas Brown' },
            { name: '1" Arkansas Brown' },
            { name: '2" Arkansas Brown' },
            { name: '1-1/2" Mexico White' },
            { name: '1-1/2" Mexico Creama' },
            { name: '1" Mexico Rosa Flagstone' },
            { name: '1-1/2" Mexico Rosa Flagstone' },
            { name: '1-1/2" Mexico Gray Flagstone' },
            { name: '1-1/2" Mexico Cafe Flagstone' },
            { name: "Boulders & Stone" },
          ],
        })}
      />

      <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">Landscaping supplies</span>
            </FadeUp>
            <FadeUp delay={0.15}>
              <h1 style={{ marginTop: "1.25rem", marginBottom: "1.75rem" }}>
                {landscapingCategory.title}
              </h1>
            </FadeUp>
            <FadeUp delay={0.25}>
              <p className="hero-copy" style={{ marginBottom: "2rem" }}>
                {landscapingCategory.description}
              </p>
            </FadeUp>
            <FadeUp delay={0.35}>
              <div className="page-hero-meta">
                <span>{siteConfig.cityRegion}</span>
                <span>Bulk bags and by-the-yard options</span>
                <span>Delivery available</span>
              </div>
            </FadeUp>
          </div>

          <FadeIn delay={0.2} className="page-hero-visual">
            <NextImage
              src="/images/hero_landscaping.webp"
              alt="Southern Masonry Supply landscaping gravel and rocks"
              fill
              priority
              sizes="(max-width: 1100px) 100vw, 40vw"
              quality={72}
              className="cover-image"
            />
            <span className="hero-visual-note">
              Flagstone, pebbles, aggregates, and boulders
            </span>
          </FadeIn>
        </div>
      </section>

      <MaterialCatalog
        heroImage={landscapingCategory.heroImage}
        materials={landscapingMaterials}
        intro={landscapingCategory.intro}
        deliveryNote={landscapingCategory.deliveryNote}
      />
    </>
  );
}