import { generateSEOMetadata, generateStructuredData } from "@/lib/seo"
import { VendingMachinesShowcase } from "@/components/vending-machines-showcase"
import { FeatureCard } from "@/components/feature-card"
import type { Metadata } from "next"
import { PublicPageHeader, PublicSurface } from "@/components/public-surface"
import { GetFreeMachineCta } from "@/components/get-free-machine-cta"
import { Breadcrumbs } from "@/components/breadcrumbs"

export async function generateMetadata(): Promise<Metadata> {
  return generateSEOMetadata({
    title: "Machines We Use | Rocky Mountain Vending",
    description:
      "Learn about the high-quality vending machines and equipment we use at Rocky Mountain Vending, including credit card readers, drop sensors, and specialty equipment.",
    path: "/vending-machines/machines-we-use",
  })
}

export default async function MachinesWeUsePage() {
  try {
    const structuredData = generateStructuredData({
      title: "Machines We Use",
      description:
        "Learn about the high-quality vending machines and equipment we use at Rocky Mountain Vending, including credit card readers, drop sensors, and specialty equipment.",
      url: "https://rockymountainvending.com/vending-machines/machines-we-use/",
      type: "WebPage",
    })

    return (
      <>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
        />
        <div className="container mx-auto px-4 py-10 md:py-14">
          <Breadcrumbs
            className="mb-6"
            items={[
              { label: "Vending Machines", href: "/vending-machines" },
              {
                label: "Machines We Use",
                href: "/vending-machines/machines-we-use",
              },
            ]}
          />
          <PublicPageHeader
            align="center"
            eyebrow="Equipment"
            title="Machines and hardware we trust in the field."
            description="Learn about the machines, payment hardware, and specialty equipment we trust to keep locations running smoothly."
          />

          <section className="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            <FeatureCard
              image="https://rockymountainvending.com/wp-content/uploads/2024/01/Parlevel-Pay-Plus-247x300.jpg"
              alt="Parlevel PayPlus credit card reader screen showing options for inserting, swiping, or tapping a card for payment."
              title="Credit Card Readers"
              description="Our machines use modern NAYAX and Parlevel readers with EMV chip technology, better security, and stronger visibility into machine health and inventory."
              imageWidth={247}
              imageHeight={300}
            />
            <FeatureCard
              image="https://rockymountainvending.com/wp-content/uploads/2024/10/Drop-Sensors-300x225.webp"
              alt="Illustration of a vending machine drop sensor ensuring successful item delivery."
              title="Guaranteed Delivery"
              description="Sensitive drop sensors help make sure customers either receive the item they selected or the charge is reversed appropriately."
              imageWidth={300}
              imageHeight={225}
            />
            <FeatureCard
              image="https://rockymountainvending.com/wp-content/uploads/2024/10/Cash-and-Coins-Accepted-300x225.webp"
              alt="Image showing U.S. dollar bills and coins, symbolizing cash and coin payments accepted by vending machines."
              title="Cash and Coin"
              description="We keep cash and coin acceptance available for locations where that still matters, while also supporting newer payment options."
              imageWidth={300}
              imageHeight={225}
            />
          </section>

          <section className="mt-12 grid gap-6 lg:grid-cols-2">
            <PublicSurface>
              <h2 className="text-3xl font-semibold tracking-tight text-balance">
                Specialty equipment
              </h2>
              <p className="mt-3 text-base leading-relaxed text-muted-foreground">
                We invest in higher-quality tools and machine components so the
                service experience stays cleaner, more dependable, and easier
                for customers to use.
              </p>
              <div className="mt-6 grid gap-6 md:grid-cols-2">
                <FeatureCard
                  image="https://rockymountainvending.com/wp-content/uploads/2024/10/Bill-Recycler-150x150.webp"
                  alt="Bill recycler on a vending machine, designed to accept and dispense U.S. dollar bills."
                  title="Bill Recycler"
                  description="Bill recyclers help high-cash locations run smoothly by improving change availability and reducing downtime from cash-related issues."
                  imageWidth={150}
                  imageHeight={150}
                />
                <FeatureCard
                  image="https://rockymountainvending.com/wp-content/uploads/2024/10/Steam-Cleaner-150x150.jpg"
                  alt="Steam cleaner equipment used for sanitizing and deep cleaning vending machines."
                  title="Steam Cleaner"
                  description="Commercial steam cleaning helps us sanitize and deep-clean machines without relying on harsh chemicals or incomplete wipe-downs."
                  imageWidth={150}
                  imageHeight={150}
                />
              </div>
            </PublicSurface>
            <PublicSurface>
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
                Free Placement
              </p>
              <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
                Want this kind of setup at your location?
              </h2>
              <p className="mt-3 text-base leading-relaxed text-muted-foreground">
                If you&apos;re looking for free placement at your business, tell
                us about your location and we&apos;ll help you choose the right
                mix.
              </p>
              <div className="mt-6 flex flex-wrap gap-3">
                <GetFreeMachineCta buttonLabel="Get Free Placement" />
              </div>
            </PublicSurface>
          </section>

          <section className="mt-12">
            <VendingMachinesShowcase />
          </section>
        </div>
      </>
    )
  } catch (error) {
    if (process.env.NODE_ENV === "development") {
      console.error("Error rendering Machines We Use page:", error)
    }
    return (
      <div className="container mx-auto px-4 py-10 md:py-14">
        <PublicSurface>
          <h1 className="text-4xl font-bold tracking-tight text-balance text-foreground md:text-5xl">
            Error Loading Page
          </h1>
          <p className="mt-4 text-base leading-relaxed text-destructive">
            There was an error loading this page. Please try again later.
          </p>
          {process.env.NODE_ENV === "development" && (
            <pre className="mt-4 overflow-auto rounded-[1.5rem] bg-muted/60 p-4 text-sm">
              {error instanceof Error ? error.message : String(error)}
            </pre>
          )}
        </PublicSurface>
      </div>
    )
  }
}