import { notFound } from "next/navigation"
import {
  generateRegistryMetadata,
  generateRegistryStructuredData,
} from "@/lib/seo"
import { getPageBySlug } from "@/lib/wordpress-data-loader"
import { FAQSection } from "@/components/faq-section"
import { ServiceAreasSection } from "@/components/service-areas-section"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  CheckCircle2,
  Wrench,
  Clock,
  MapPin,
} from "lucide-react"
import { RepairsImageCarousel } from "@/components/repairs-image-carousel"
import { ContactForm } from "@/components/forms/contact-form"
import { Breadcrumbs } from "@/components/breadcrumbs"
import {
  PublicInset,
  PublicPageHeader,
  PublicSectionHeader,
  PublicSurface,
} from "@/components/public-surface"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
import { businessConfig } from "@/lib/seo-config"
import type { Metadata } from "next"

const WORDPRESS_SLUG = "vending-machine-repairs"

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

  if (!page) {
    return {
      title: "Vending Machine Repairs | Rocky Mountain Vending",
      description:
        "Professional vending machine repair services in Utah. Expert technicians for all vending machine types.",
    }
  }

  return generateRegistryMetadata("repairs", {
    date: page.date,
    modified: page.modified,
    image: page.images?.[0]?.localPath,
  })
}

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

    if (!page) {
      notFound()
    }

    // Extract FAQs from content
    const faqs: Array<{ question: string; answer: string }> = []
    let virtualServicesContent = ""

    if (page.content) {
      const contentStr = String(page.content)
      let strippedContent = contentStr

      // Extract FAQ items from accordion structure
      const questionMatches = contentStr.matchAll(
        /<span class="ekit-accordion-title">([^<]+)<\/span>/g
      )
      const answerMatches = contentStr.matchAll(
        /<div class="elementskit-card-body ekit-accordion--content">([\s\S]*?)<\/div>\s*<\/div>\s*<!-- \.elementskit-card END -->/g
      )

      const questions = Array.from(questionMatches).map((m) => m[1].trim())
      const answers = Array.from(answerMatches).map((m) => {
        let answer = m[1].trim()
        answer = answer
          .replace(/\n\s*\n/g, "\n")
          .replace(/>\s+</g, "><")
          .trim()
        return answer
      })

      // Match questions with answers and clean HTML entities
      questions.forEach((question, index) => {
        if (answers[index]) {
          // Clean HTML entities from questions (e.g., &#039; -> ')
          const cleanQuestion = question
            .replace(/&#039;/g, "'")
            .replace(/&quot;/g, '"')
            .replace(/&amp;/g, "&")
            .replace(/&lt;/g, "<")
            .replace(/&gt;/g, ">")
            .replace(/&nbsp;/g, " ")
            .trim()
          faqs.push({ question: cleanQuestion, answer: answers[index] })
        }
      })

      // Remove FAQ section from content if FAQs were found
      if (faqs.length > 0) {
        const faqSectionRegex =
          /<h2[^>]*>.*?Answers\s+To\s+Common\s+Questions.*?<\/h2>[\s\S]*?(?=<h2[^>]*>.*?Virtual\s+Services|<h2[^>]*>.*?Service\s+Area|$)/i
        strippedContent = contentStr.replace(faqSectionRegex, "").trim()
      }

      // Extract Virtual Services section
      const virtualServicesRegex =
        /<h2[^>]*>.*?Virtual\s+Services.*?<\/h2>([\s\S]*?)(?=<h2[^>]*>.*?Service\s+Area|$)/i
      const virtualMatch = strippedContent.match(virtualServicesRegex)
      if (virtualMatch) {
        virtualServicesContent = virtualMatch[1]
      }
    }

    const structuredData = generateRegistryStructuredData("repairs", {
      datePublished: page.date,
      dateModified: page.modified || page.date,
    })

    const excerpt = String(page.excerpt || "")
      .replace(/<[^>]+>/g, " ")
      .replace(/\s+/g, " ")
      .trim()

    const surfaceCardClass =
      "rounded-[var(--public-surface-radius)] border border-border/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,251,243,0.96))] shadow-[var(--public-surface-shadow)]"
    const insetCardClass =
      "rounded-[var(--public-inset-radius)] border border-border/60 bg-white/95 shadow-[0_10px_28px_rgba(15,23,42,0.06)]"

    return (
      <>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
        />
        {/* Hero Header */}
        <section className="py-20 md:py-28 bg-background">
          <div className="container mx-auto px-4 max-w-4xl">
            <Breadcrumbs
              className="mb-6"
              items={[
                { label: "Services", href: "/services" },
                { label: "Repairs", href: "/services/repairs" },
              ]}
            />
            <PublicPageHeader
              align="center"
              className="mb-8"
              eyebrow="Repair Services"
              title="Vending machine repairs and service for Utah businesses"
              description={
                "Get help with payment issues, refrigeration problems, machine errors, and ongoing maintenance from a local vending service team."
              }
            >
              <p className="mx-auto max-w-3xl text-base leading-relaxed text-muted-foreground md:text-lg">
                {excerpt ||
                  "Rocky Mountain Vending helps businesses across Davis, Salt Lake, and Utah counties keep machines running with practical repair, maintenance, and support guidance."}
              </p>
            </PublicPageHeader>
            {/* Images Carousel */}
            <PublicSurface className="mx-auto max-w-4xl p-4 md:p-5">
              <RepairsImageCarousel />
            </PublicSurface>
          </div>
        </section>

        <section className="py-16 md:py-20 bg-background">
          <div className="container mx-auto grid max-w-6xl gap-6 px-4 lg:grid-cols-[1.08fr_0.92fr]">
            <PublicSurface className="h-full">
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
                Repair Overview
              </p>
              <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
                Clear next steps when a machine is down, rejecting payments, or
                needs service.
              </h2>
              <p className="mt-4 text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
                We help with common vending issues like bill acceptor problems,
                refrigeration failures, card reader troubleshooting, controller
                errors, and recurring maintenance needs. If the issue can be
                handled virtually, we can talk through that too.
              </p>
              <div className="mt-6 flex flex-col gap-3 sm:flex-row">
                <Link
                  href="#request-service"
                  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:opacity-95"
                >
                  Request Service
                </Link>
                <Link
                  href="/services/parts"
                  className="inline-flex min-h-11 items-center justify-center rounded-full border border-border bg-background px-5 text-sm font-medium text-foreground transition hover:border-primary/35 hover:text-primary"
                >
                  Need Parts Instead?
                </Link>
              </div>
            </PublicSurface>
            <PublicInset className="h-full p-5 md:p-6">
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
                Before You Reach Out
              </p>
              <h2 className="mt-3 text-2xl font-semibold tracking-tight text-balance">
                The more detail you share, the faster we can point you in the
                right direction.
              </h2>
              <ul className="mt-5 space-y-3">
                <li className="flex items-start gap-3">
                  <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                  <span className="text-sm leading-6 text-muted-foreground">
                    Include the machine model, brand, and whether the issue is
                    intermittent or constant.
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                  <span className="text-sm leading-6 text-muted-foreground">
                    Tell us if the problem is payment-related, refrigeration,
                    dispensing, display errors, or a recent setup change.
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                  <span className="text-sm leading-6 text-muted-foreground">
                    Photos or short videos can make remote triage much easier
                    before an on-site visit is scheduled.
                  </span>
                </li>
              </ul>
            </PublicInset>
          </div>
        </section>

        {/* Services Section */}
        <section className="py-20 md:py-28 bg-muted/30">
          <div className="container mx-auto px-4 max-w-6xl">
            <PublicSectionHeader
              eyebrow="Service Scope"
              title="Repair and maintenance support"
              description="Our repair and maintenance services cover the most common machine, payment, and refrigeration issues businesses call us about."
              className="mx-auto mb-12 max-w-3xl text-center md:mb-16"
            />
            <div className="grid gap-8 md:grid-cols-2 items-start">
              <Card className={surfaceCardClass}>
                <CardContent className="p-6">
                  <ul className="space-y-4">
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Diagnosing and fixing vending machine errors
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Bill and coin mechanism repairs
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Refrigeration system maintenance and repair
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Card reader troubleshooting and setup
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Software updates and programming
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Machine calibration and inventory setup
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Preventative maintenance services
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Credit card reader upgrade and installation
                      </span>
                    </li>
                  </ul>
                </CardContent>
              </Card>
              <div className="relative aspect-[4/3] max-w-md mx-auto overflow-hidden rounded-[1.75rem] border border-border/60 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,244,236,0.94))] p-3 shadow-[0_18px_40px_rgba(15,23,42,0.08)] md:mx-0">
                <Image
                  src="https://rockymountainvending.com/wp-content/uploads/elementor/thumbs/Vending-Machine-repairs-e1737751914630-r0hul4xrzal3af9zw0ss3hzq6enyjd5ldxqqylpgnc.webp"
                  alt="Vending machine being repaired"
                  fill
                  className="rounded-[1rem] object-cover"
                  sizes="(max-width: 768px) 100vw, 400px"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Why Choose Section */}
        <section className="py-20 md:py-28">
          <div className="container mx-auto px-4 max-w-6xl">
            <PublicSectionHeader
              eyebrow="Why Rocky"
              title="Why businesses call Rocky Mountain Vending for repairs"
              description="This page should feel connected to the rest of the Services family while still making the repair value proposition obvious."
              className="mx-auto mb-12 max-w-3xl text-center md:mb-16"
            />
            <div className="grid gap-8 md:grid-cols-2 items-start">
              <div className="relative aspect-video overflow-hidden rounded-[1.75rem] border border-border/60 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(247,244,236,0.94))] p-3 shadow-[0_18px_40px_rgba(15,23,42,0.08)]">
                <Image
                  src="https://rockymountainvending.com/wp-content/uploads/elementor/thumbs/Coin-Mech-with-Low-Battery-e1737751934594-r0hulnqjrzatqmiou8xbhd8y243atb884isgk4xl6w.webp"
                  alt="Coin mech with low battery"
                  fill
                  className="rounded-[1rem] object-cover"
                  sizes="(max-width: 768px) 100vw, 50vw"
                />
              </div>
              <Card className={surfaceCardClass}>
                <CardContent className="p-6">
                  <ul className="space-y-4">
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Local experts serving Salt Lake City for over 10 years
                        experience
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Fast response times to minimize downtime
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Experienced technicians familiar with all major vending
                        machine brands
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Affordable service plans tailored to your needs
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        Preventative maintenance services
                      </span>
                    </li>
                    <li className="flex items-start gap-3">
                      <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-foreground">
                        We've often come in and fixed problems others couldn't
                        fix
                      </span>
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* How It Works Section */}

        {/* Related Services Section */}
        <section className="py-20 md:py-28 bg-background">
          <div className="container mx-auto px-4 max-w-6xl">
            <PublicSectionHeader
              eyebrow="Connected Services"
              title="Our complete service network"
              description="Repairs should still point cleanly to the rest of the family, including moving, parts, and city-based support."
              className="mx-auto mb-12 max-w-3xl text-center md:mb-16"
            />
            <div className="grid gap-8 md:grid-cols-3">
              <Card className={`${insetCardClass} hover:border-primary/30`}>
                <CardContent className="p-8 text-center">
                  <Wrench className="h-12 w-12 text-primary mx-auto mb-4" />
                  <h3 className="text-xl font-semibold mb-3">
                    Vending Machine Parts
                  </h3>
                  <p className="text-muted-foreground mb-6">
                    Quality replacement parts and components for all major
                    vending machine brands
                  </p>
                  <Link
                    href="/services/parts"
                    className="inline-flex items-center gap-2 text-primary hover:underline font-medium"
                  >
                    View Parts Services <ArrowRight className="h-4 w-4" />
                  </Link>
                </CardContent>
              </Card>
              <Card className={`${insetCardClass} hover:border-primary/30`}>
                <CardContent className="p-8 text-center">
                  <MapPin className="h-12 w-12 text-primary mx-auto mb-4" />
                  <h3 className="text-xl font-semibold mb-3">Service Areas</h3>
                  <p className="text-muted-foreground mb-6">
                    Serving 20+ cities across Utah with free delivery and
                    installation
                  </p>
                  <Link
                    href="/service-areas"
                    className="inline-flex items-center gap-2 text-primary hover:underline font-medium"
                  >
                    View Service Areas <ArrowRight className="h-4 w-4" />
                  </Link>
                </CardContent>
              </Card>
              <Card className={`${insetCardClass} hover:border-primary/30`}>
                <CardContent className="p-8 text-center">
                  <Clock className="h-12 w-12 text-primary mx-auto mb-4" />
                  <h3 className="text-xl font-semibold mb-3">
                    Moving Services
                  </h3>
                  <p className="text-muted-foreground mb-6">
                    Professional vending machine relocation and installation
                    services
                  </p>
                  <Link
                    href="/services/moving"
                    className="inline-flex items-center gap-2 text-primary hover:underline font-medium"
                  >
                    View Moving Services <ArrowRight className="h-4 w-4" />
                  </Link>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        <section
          id="how-it-works"
          className="py-20 md:py-28 bg-muted/30 scroll-mt-24"
        >
          <div className="container mx-auto px-4 max-w-6xl">
            <div className="text-center mb-12 md:mb-16">
              <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
                How It Works
              </h2>
            </div>
            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4 mb-12">
              <Card className={`${insetCardClass} h-full hover:border-primary/30`}>
                <CardContent className="p-8">
                  <div className="mb-6">
                    <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary text-primary-foreground text-2xl font-bold">
                      01
                    </div>
                  </div>
                  <h3 className="text-xl font-semibold mb-3">
                    Fill Out the Form
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    Start by filling out the service form with as much detail as
                    possible about your vending machine and the issue you're
                    experiencing. By providing detailed information upfront, you
                    help us save you time and money by allowing our technicians
                    to potentially diagnose the issue before arriving.
                  </p>
                </CardContent>
              </Card>
              <Card className={`${insetCardClass} h-full hover:border-primary/30`}>
                <CardContent className="p-8">
                  <div className="mb-6">
                    <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary text-primary-foreground text-2xl font-bold">
                      02
                    </div>
                  </div>
                  <h3 className="text-xl font-semibold mb-3">
                    We'll Review Your Request
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    Once we receive your request, our team will review it and
                    contact you to confirm whether the issue can be resolved
                    virtually or needs in-person service.
                  </p>
                </CardContent>
              </Card>
              <Card className={`${insetCardClass} h-full hover:border-primary/30`}>
                <CardContent className="p-8">
                  <div className="mb-6">
                    <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary text-primary-foreground text-2xl font-bold">
                      03
                    </div>
                  </div>
                  <h3 className="text-xl font-semibold mb-3">
                    Schedule Your Service
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    After reviewing your request, we'll help you schedule an
                    in-person service visit or a virtual session via Google
                    Meet. Virtual sessions will include payment details before
                    you can schedule a time. You won't be charged until you
                    select a time that works for you.
                  </p>
                </CardContent>
              </Card>
              <Card className={`${insetCardClass} h-full hover:border-primary/30`}>
                <CardContent className="p-8">
                  <div className="mb-6">
                    <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary text-primary-foreground text-2xl font-bold">
                      04
                    </div>
                  </div>
                  <h3 className="text-xl font-semibold mb-3">
                    Get Your Machine Back Up and Running
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    Our expert technicians will repair your vending machine or
                    guide you step-by-step during the virtual session.
                  </p>
                </CardContent>
              </Card>
            </div>

            {/* Request Service Form */}
            <div
              id="request-service"
              className="max-w-3xl mx-auto scroll-mt-24"
            >
              <div className="text-center mb-8">
                <h3 className="text-2xl font-bold tracking-tight mb-2 text-balance">
                  Request Service
                </h3>
                <p className="text-muted-foreground">
                  Tell us what your machine is doing and our team will help you
                  figure out the fastest next step.
                </p>
              </div>
              <PublicSurface className="space-y-6 p-5 md:p-7">
                <PublicInset className="flex flex-col gap-3 p-5 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
                  <div>
                    <p className="font-semibold text-foreground">
                      Before you submit
                    </p>
                    <p className="mt-1 leading-relaxed">
                      Include the machine model, what it is doing, and whether
                      you need on-site help or virtual support.
                    </p>
                  </div>
                  <div className="flex flex-col gap-2 text-left md:text-right">
                    <a
                      href={businessConfig.publicCallUrl}
                      className="font-medium text-foreground hover:text-primary"
                    >
                      Call {businessConfig.publicCallNumber}
                    </a>
                    <a
                      href={businessConfig.publicSmsUrl}
                      className="font-medium text-foreground hover:text-primary"
                    >
                      Text photos or videos
                    </a>
                  </div>
                </PublicInset>
                <ContactForm defaultIntent="Repairs" />
              </PublicSurface>
            </div>
          </div>
        </section>

        {/* Brands Section */}
        <section className="py-20 md:py-28 bg-background">
          <div className="container mx-auto px-4 max-w-4xl">
            <div className="text-center mb-12 md:mb-16">
              <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
                Brands We Commonly Service
              </h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed mb-8">
                If you don't see your brand listed, feel free to reach out! We
                may still be able to service it, but there are some brands we
                may not support.{" "}
                <Link
                  href="/contact-us"
                  className="text-primary hover:underline"
                >
                  Contact us
                </Link>
                , and we'll let you know how we can help.
              </p>
            </div>
            <div className="grid gap-8 md:grid-cols-3">
              {/* Vending Machine Brands */}
              <Card className={surfaceCardClass}>
                <CardHeader>
                  <CardTitle className="text-2xl">
                    Vending Machine Brands We Commonly Service
                  </CardTitle>
                </CardHeader>
                <CardContent className="px-6 pb-6 pt-0">
                  <ul className="space-y-2">
                    <li>• AMS (Automated Merchandising Systems)</li>
                    <li>• AP (Automatic Products)</li>
                    <li>• Cavalier</li>
                    <li>• CPI (Crane Payment Innovations)</li>
                    <li>• Crane National Vendors</li>
                    <li>• Dixie-Narco</li>
                    <li>• GPL (General Products Limited)</li>
                    <li>• HealthyYOU Vending</li>
                    <li>• National Vendors</li>
                    <li>• Quick Fresh Vending</li>
                    <li>• Royal Vendors</li>
                    <li>• Seaga</li>
                    <li>• USI (United Standard Industries)</li>
                    <li>• Vendo</li>
                  </ul>
                </CardContent>
              </Card>

              {/* Card Reader Brands */}
              <Card className={surfaceCardClass}>
                <CardHeader>
                  <CardTitle className="text-2xl">
                    Card Reader Brands We Service
                  </CardTitle>
                </CardHeader>
                <CardContent className="px-6 pb-6 pt-0">
                  <ul className="space-y-2">
                    <li>• Nayax</li>
                    <li>• USA Technologies/Cantaloupe</li>
                    <li>• Parlevel/365 Markets</li>
                  </ul>
                </CardContent>
              </Card>

              {/* Bill Validator and Coin Mechanism Brands */}
              <Card className={surfaceCardClass}>
                <CardHeader>
                  <CardTitle className="text-2xl">
                    Bill Validator and Coin Mechanism Brands We Service
                  </CardTitle>
                </CardHeader>
                <CardContent className="px-6 pb-6 pt-0">
                  <ul className="space-y-2">
                    <li>• CPI (Crane Payment Innovations)</li>
                    <li>• Coinco (PayComplete)</li>
                    <li>• Conlux</li>
                    <li>• Currenza</li>
                    <li>• ICT (Innovative Concepts in Technology)</li>
                    <li>• MEI (Mars Electronics International)</li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* Technologies Section */}
        <section className="py-20 md:py-28 bg-muted/30">
          <div className="container mx-auto px-4 max-w-4xl">
            <div className="text-center mb-12 md:mb-16">
              <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
                Technologies and Protocols We Service
              </h2>
            </div>
            <Card className={surfaceCardClass}>
              <CardContent className="p-6">
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  At Rocky Mountain Vending, we support three key vending
                  machine technologies to boost your business profitability. The
                  MDB (Multi-Drop Bus) protocol connects payment systems
                  seamlessly, ensuring smooth transactions. DEX (Data Exchange)
                  provides remote auditing of sales and inventory, helping you
                  optimize stock and reduce waste. CCI (Crane Connectivity
                  Interface) enhances cashless payments and telemetry,
                  increasing convenience and revenue potential. Together, these
                  technologies streamline operations and maximize your earnings.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start gap-3">
                    <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                    <span className="text-foreground">
                      <strong>CCI (Crane Connectivity Interface)</strong> – A
                      modern protocol for enhanced cashless payments and
                      telemetry integration; we can provide limited support.
                    </span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                    <span className="text-foreground">
                      <strong>DEX (Data Exchange)</strong> – A standard protocol
                      for auditing sales and inventory data remotely.
                    </span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                    <span className="text-foreground">
                      <strong>MDB (Multi-Drop Bus)</strong> – The
                      industry-standard protocol for connecting payment systems
                      to vending controllers.
                    </span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </section>

        {/* FAQ Section */}
        {faqs.length > 0 && <FAQSection faqs={faqs} />}

        {/* Virtual Services Section */}
        {virtualServicesContent && (
          <section className="py-20 md:py-28 bg-muted/30">
            <div className="container mx-auto px-4 max-w-4xl">
              <div className="text-center mb-12 md:mb-16">
                <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance">
                  Virtual Services
                </h2>
              </div>
              <div className="space-y-8">
                {/* How It Works */}
                <div className="prose prose-lg max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-a:text-foreground prose-a:hover:text-secondary prose-a:transition-colors">
                  <h3 className="text-2xl font-bold mb-4">How It Works</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Virtual support is a convenient way to resolve vending
                    machine issues remotely. Through a{" "}
                    <strong>Google Meet session</strong>, our expert technicians
                    will guide you step-by-step to troubleshoot and repair your
                    machine. This saves time and allows you to get back to
                    business quickly without waiting for an onsite visit.
                  </p>
                </div>

                {/* Required Tools Card */}
                <Card className={surfaceCardClass}>
                  <CardHeader>
                    <CardTitle className="text-2xl">What You'll Need</CardTitle>
                  </CardHeader>
                  <CardContent className="px-6 pb-6 pt-2">
                    <p className="text-muted-foreground mb-4 leading-relaxed">
                      To make the most of your virtual session, it's important
                      to be prepared with the necessary tools. Having the right
                      equipment on hand ensures we can troubleshoot effectively
                      and minimize delays.
                    </p>
                    <p className="text-muted-foreground mb-4 leading-relaxed">
                      <strong className="text-foreground">
                        Required Tools:
                      </strong>
                    </p>
                    <ul className="space-y-2">
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                        <span className="text-foreground">
                          Multimeter (to test electrical components)
                        </span>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                        <span className="text-foreground">
                          11/32" Deep Socket Nut Driver (in case we need to
                          remove the bill or coin mechs)
                        </span>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                        <span className="text-foreground">
                          #2 Phillips Screwdriver
                        </span>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                        <span className="text-foreground">Socket Set</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                        <span className="text-foreground">Pliers</span>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                        <span className="text-foreground">
                          Any additional tools you would typically need to
                          service a vending machine
                        </span>
                      </li>
                    </ul>
                    <p className="text-muted-foreground mt-4 text-sm leading-relaxed">
                      Not having the right tools on hand will make it so we
                      won't be able to help you. There might be more tools that
                      you will need. In that case we if we know of these we will
                      advise you in advance of what you will need to get. Please
                      ensure you have these and are comfortable using these
                      tools. We can't do HVAC refill repairs.
                    </p>
                  </CardContent>
                </Card>

                {/* How to Prepare Card */}
                <Card className={surfaceCardClass}>
                  <CardHeader>
                    <CardTitle className="text-2xl">How to Prepare</CardTitle>
                  </CardHeader>
                  <CardContent className="px-6 pb-6 pt-2">
                    <ol className="space-y-4">
                      <li className="text-foreground">
                        <strong>Be On-Site with Your Machine:</strong>
                        <span className="text-muted-foreground block mt-2">
                          Ensure you're at the location of the vending machine
                          during the session.
                        </span>
                      </li>
                      <li className="text-foreground">
                        <strong>Stable Internet Connection:</strong>
                        <span className="text-muted-foreground block mt-2">
                          Make sure you have a stable internet connection for
                          the Google Meet call.
                        </span>
                      </li>
                      <li className="text-foreground">
                        <strong>Camera Device:</strong>
                        <span className="text-muted-foreground block mt-2">
                          Use a device with a camera so you can show our
                          technician the machine and any issues in real-time.
                        </span>
                      </li>
                    </ol>
                  </CardContent>
                </Card>

                {/* Important Policies Card */}
                <Card className={surfaceCardClass}>
                  <CardHeader>
                    <CardTitle className="text-2xl">
                      Important Policies
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="px-6 pb-6 pt-2">
                    <ul className="space-y-4">
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                        <div>
                          <strong className="text-foreground">Payment:</strong>
                          <span className="text-muted-foreground">
                            {" "}
                            All virtual sessions must be paid for upfront.
                          </span>
                        </div>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                        <div>
                          <strong className="text-foreground">
                            Session Duration:
                          </strong>
                          <span className="text-muted-foreground">
                            {" "}
                            Sessions are scheduled in 30-minute increments.
                            Additional time can be purchased if needed.
                          </span>
                        </div>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                        <div>
                          <strong className="text-foreground">
                            Cancellation Policy:
                          </strong>
                          <span className="text-muted-foreground">
                            {" "}
                            Cancellations must be made at least 48 hours in
                            advance to avoid being charged. We will send
                            reminders and confirmations with links to
                            reschedule.
                          </span>
                        </div>
                      </li>
                      <li className="flex items-start gap-3">
                        <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0 mt-0.5" />
                        <div>
                          <strong className="text-foreground">No-Shows:</strong>
                          <span className="text-muted-foreground">
                            {" "}
                            If you miss your scheduled session, the full amount
                            will still be billed.
                          </span>
                        </div>
                      </li>
                    </ul>
                  </CardContent>
                </Card>

                {/* Schedule Your Virtual Session Today */}
                <Card className={surfaceCardClass}>
                  <CardHeader>
                    <CardTitle className="text-2xl">
                      Schedule Your Virtual Session Today
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="px-6 pb-6 pt-2">
                    <p className="text-muted-foreground leading-relaxed mb-4">
                      Ready to get started? Fill out our{" "}
                      <Link
                        href="#request-service"
                        className="text-primary hover:underline font-semibold"
                      >
                        Service Request Form
                      </Link>{" "}
                      and select "Virtual Support" to book your session. Our
                      technicians are here to help you get your vending machine
                      up and running as quickly as possible.
                    </p>
                  </CardContent>
                </Card>
              </div>
            </div>
          </section>
        )}

        {/* Service Areas Section */}
        <ServiceAreasSection />
      </>
    )
  } catch (error) {
    if (process.env.NODE_ENV === "development") {
      console.error("Error rendering Repairs page:", error)
    }
    notFound()
  }
}