import { generateSEOMetadata, generateStructuredData } from '@/lib/seo';
import { VendingMachinesShowcase } from '@/components/vending-machines-showcase';
import { FeatureCard } from '@/components/feature-card';
import type { Metadata } from 'next';

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.',
  });
}

export default async function MachinesWeUsePage() {
  try {
    // Generate structured data
    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) }}
        />
        <article className="container mx-auto px-4 py-8 md:py-12 max-w-6xl">
          <header className="mb-12 md:mb-16 text-center">
            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">Vending Machines</h1>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed">
              Only The Best for Your Location
            </p>
          </header>
          
          {/* Features Grid */}
          <div className="grid md:grid-cols-2 gap-6 mb-16">
            <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="Enhanced Payment Flexibility: Our vending machines are equipped with advanced NAYAX and Parlevel credit card readers, seamlessly integrated with Parlevel's Vending Management System (VMS). These cutting-edge readers use EMV chip technology to enhance transaction security, offering users greater peace of mind. Our system also streamlines inventory management, quickly resolves machine issues, and allows for the use of personalized pre-paid gift cards. Parlevel's VMS, backed by robust management tools and dependable hardware, is essential to our commitment to offering secure and varied payment options while maintaining the highest operational standards."
              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="Purchase with Confidence: Our vending machines are equipped with highly sensitive sensors that ensure you receive the item you select. In the rare case that a product isn't dispensed, the machine is designed either to prevent the charge or to issue a prompt refund. This system demonstrates our commitment to providing a reliable and customer-friendly vending experience, ensuring you can shop with complete peace of mind."
              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="Cash-Friendly Vending Options: Our vending machines are built to support both cash and coin payments, providing a convenient and flexible option for all customers. With the ability to accept multiple U.S. dollar denominations, they ensure smooth and hassle-free transactions. Whether you prefer using bills or coins, our vending machines are designed with your convenience in mind. This feature highlights our dedication to offering a user-friendly and accessible vending experience for everyone."
              imageWidth={300}
              imageHeight={225}
            />
          </div>

          {/* Specialty Equipment Section */}
          <section className="mb-16">
            <h2 className="text-2xl md:text-3xl font-semibold text-center mb-8 tracking-tight text-balance">Specialty Equipment</h2>
            <p className="text-muted-foreground text-center mb-8 leading-relaxed max-w-3xl mx-auto">
              At Rocky Mountain Vending, we invest in high-quality equipment to deliver the best service with minimal interruptions. For locations that handle a lot of cash, we use bill recyclers to ensure customers can easily use $1, $2, $5, $10, or $20 bills without worry. This flexibility improves convenience and keeps transactions smooth. Additionally, we use commercial-grade steam cleaners to thoroughly sanitize our machines, a step many vendors overlook. Our commitment to using the best tools ensures a clean, efficient, and hassle-free vending experience.
            </p>

            <div className="grid md:grid-cols-2 gap-6">
              <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="The MEI Bill Recycler is an essential upgrade for high-cash locations, accepting $1, $2, $5, $10, and $20 bills while recycling $1 or $5 bills for future transactions. It features a bright, low-powered LED bezel that illuminates and clearly displays which bill denominations are currently accepted, improving user experience and ensuring efficient transactions. This reduces downtime by preventing cash shortages and minimizing machine jams. With tamper-evident sensors and high-capacity bill storage, it's ideal for businesses requiring reliable, hassle-free vending machine operations."
                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="We use a commercial-grade steam cleaner to ensure that our vending machines are not only visually appealing but also fully sanitized. Drink machines, in particular, can accumulate sticky residue from spills or explosions, making them hard to clean on-site. With powerful steam reaching temperatures of up to 310°F and operating at 75 PSI, this cleaner is ideal for deep cleaning, removing dirt, grease, and bacteria without harsh chemicals. Its continuous refill feature allows us to provide thorough cleanings quickly and efficiently, maintaining both hygiene and appearance."
                imageWidth={150}
                imageHeight={150}
              />
            </div>
          </section>

          {/* Machines Showcase */}
          <VendingMachinesShowcase />

          {/* CRM Form */}
          <section className="mt-16">
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="p-8">
                <div className="text-center mb-6">
                  <h3 className="text-2xl font-bold mb-2">Get Your Free Vending Machine</h3>
                  <p className="text-muted-foreground">
                    Fill out the form below and we'll contact you within 24 hours to discuss your needs.
                  </p>
                </div>
                <iframe
                  src="https://link.sluice-box.io/widget/form/T76mIdPvC5iBwAI2wFPg"
                  style={{ width: "100%", height: "650px", border: "none", borderRadius: "4px" }}
                  id="inline-T76mIdPvC5iBwAI2wFPg"
                  data-layout="{'id':'INLINE'}"
                  data-trigger-type="alwaysShow"
                  data-trigger-value=""
                  data-activation-type="alwaysActivated"
                  data-activation-value=""
                  data-deactivation-type="neverDeactivate"
                  data-deactivation-value=""
                  data-form-name="Request Machine Short"
                  data-height="638"
                  data-layout-iframe-id="inline-T76mIdPvC5iBwAI2wFPg"
                  data-form-id="T76mIdPvC5iBwAI2wFPg"
                  title="Request Free Vending Machine Form"
                />
              </CardContent>
            </Card>
          </section>
        </article>
        {/* Form Script */}
        <script src="https://link.sluice-box.io/js/form_embed.js" strategy="afterInteractive" />
      </>
    );
  } catch (error) {
    // Silently return error fallback in production
    if (process.env.NODE_ENV === 'development') {
      console.error('Error rendering Machines We Use page:', error);
    }
    return (
      <div className="container mx-auto px-4 py-8 md:py-12">
        <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">Error Loading Page</h1>
        <p className="text-destructive mb-4">There was an error loading this page. Please try again later.</p>
        {process.env.NODE_ENV === 'development' && (
          <pre className="mt-4 p-4 bg-muted rounded text-sm overflow-auto">
            {error instanceof Error ? error.message : String(error)}
          </pre>
        )}
      </div>
    );
  }
}