Rocky_Mountain_Vending/app/blog/abandoned-vending-machines/page.tsx

import { notFound } from "next/navigation"
import { loadImageMapping } from "@/lib/wordpress-content"
import { buildAbsoluteUrl } from "@/lib/seo-registry"
import { generateSEOMetadata, generateStructuredData } from "@/lib/seo"
import { getPageBySlug } from "@/lib/wordpress-data-loader"
import { cleanWordPressContent } from "@/lib/clean-wordPress-content"
import { Breadcrumbs } from "@/components/breadcrumbs"
import {
  PublicInset,
  PublicPageHeader,
  PublicProse,
  PublicSurface,
} from "@/components/public-surface"
import type { Metadata } from "next"
import Link from "next/link"

const WORDPRESS_SLUG = "abandoned-vending-machines"

export async function generateMetadata(): Promise<Metadata> {
  const page = getPageBySlug(WORDPRESS_SLUG)

  if (!page) {
    return {
      title: "Page Not Found | Rocky Mountain Vending",
    }
  }

  return generateSEOMetadata({
    title: page.title || "Abandoned Vending Machines",
    description: page.seoDescription || page.excerpt || "",
    excerpt: page.excerpt,
    date: page.date,
    modified: page.modified,
    image: page.images?.[0]?.localPath,
    path: "/blog/abandoned-vending-machines",
  })
}

export default async function AbandonedVendingMachinesPage() {
  try {
    const page = getPageBySlug(WORDPRESS_SLUG)

    if (!page) {
      notFound()
    }

    let imageMapping: any = {}
    try {
      imageMapping = loadImageMapping()
    } catch (e) {
      imageMapping = {}
    }

    const content = page.content ? (
      <div className="max-w-none">
        {cleanWordPressContent(String(page.content), {
          imageMapping,
          pageTitle: page.title,
        })}
      </div>
    ) : (
      <p className="text-muted-foreground">No content available.</p>
    )

    let structuredData
    try {
      structuredData = generateStructuredData({
        title: page.title || "Abandoned Vending Machines",
        description: page.seoDescription || page.excerpt || "",
        url: buildAbsoluteUrl("/blog/abandoned-vending-machines"),
        datePublished: page.date,
        dateModified: page.modified || page.date,
        type: "WebPage",
      })
    } catch (e) {
      structuredData = {
        "@context": "https://schema.org",
        "@type": "WebPage",
        headline: page.title || "Abandoned Vending Machines",
        description: page.seoDescription || "",
        url: buildAbsoluteUrl("/blog/abandoned-vending-machines"),
      }
    }

    return (
      <>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
        />
        <article className="container mx-auto max-w-5xl px-4 py-10 md:py-14">
          <Breadcrumbs
            className="mb-6"
            items={[
              { label: "Blog", href: "/blog" },
              {
                label: page.title || "Abandoned Vending Machines",
                href: "/blog/abandoned-vending-machines",
              },
            ]}
          />
          <PublicPageHeader
            eyebrow="Article"
            title={page.title || "Abandoned Vending Machines"}
            description={
              page.seoDescription ||
              page.excerpt ||
              "Guidance, next steps, and practical considerations from Rocky Mountain Vending."
            }
            align="center"
            className="mx-auto mb-10 max-w-3xl"
          />
          <PublicSurface className="p-5 md:p-7 lg:p-9">
            <PublicProse className="mx-auto max-w-3xl">{content}</PublicProse>
          </PublicSurface>
          <PublicInset className="mx-auto mt-8 max-w-4xl border-primary/12 bg-[linear-gradient(180deg,rgba(41,160,71,0.06),rgba(255,255,255,0.84))] p-5 md:p-6">
            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
                  Need Help With A Machine Situation?
                </p>
                <h2 className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
                  Get the right kind of support quickly
                </h2>
                <p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
                  Reach out if you need help with abandoned machines, service questions,
                  moving help, or figuring out the right next step for your location.
                </p>
              </div>
              <div className="flex flex-col gap-3 sm:flex-row">
                <Link
                  href="/contact-us#contact-form"
                  className="inline-flex min-h-11 items-center justify-center rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
                >
                  Talk to Our Team
                </Link>
                <Link
                  href="/services/repairs"
                  className="inline-flex min-h-11 items-center justify-center rounded-full border border-border bg-white px-5 text-sm font-medium text-foreground transition hover:border-primary/35 hover:text-primary"
                >
                  Explore Repair Help
                </Link>
              </div>
            </div>
          </PublicInset>
        </article>
      </>
    )
  } catch (error) {
    if (process.env.NODE_ENV === "development") {
      console.error("Error rendering Abandoned Vending Machines page:", error)
    }
    notFound()
  }
}