import { notFound } from 'next/navigation';
import { loadImageMapping } from '@/lib/wordpress-content';
import { generateSEOMetadata, generateStructuredData } from '@/lib/seo';
import { getPageBySlug } from '@/lib/wordpress-data-loader';
import { cleanWordPressContent } from '@/lib/clean-wordPress-content';
import { ServicesSection } from '@/components/services-section';
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, Phone, Shield, MapPin } from 'lucide-react';
import { RepairsImageCarousel } from '@/components/repairs-image-carousel';
import { ContactForm } from '@/components/forms/contact-form';
import { PublicInset, 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 generateSEOMetadata({
    title: page.title || 'Vending Machine Repairs',
    description: page.seoDescription || page.excerpt || '',
    excerpt: page.excerpt,
    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();
    }

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

    // Extract FAQs from content
    const faqs: Array<{ question: string; answer: string }> = [];
    let contentWithoutFAQs = page.content || '';
    let contentWithoutVirtualServices = '';
    let virtualServicesContent = '';
    
    if (page.content) {
      const contentStr = String(page.content);
      
      // 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;
        contentWithoutFAQs = contentStr.replace(faqSectionRegex, '').trim();
      }

      // Extract Virtual Services section
      const virtualServicesRegex = /<h2[^>]*>.*?Virtual\s+Services.*?<\/h2>([\s\S]*?)(?=<h2[^>]*>.*?Service\s+Area|$)/i;
      const virtualMatch = contentStr.match(virtualServicesRegex);
      if (virtualMatch) {
        virtualServicesContent = virtualMatch[1];
        // Remove Virtual Services from main content
        contentWithoutVirtualServices = contentWithoutFAQs.replace(virtualServicesRegex, '').trim();
      } else {
        contentWithoutVirtualServices = contentWithoutFAQs;
      }
    }

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

    let structuredData;
    try {
      structuredData = generateStructuredData({
        title: page.title || 'Vending Machine Repairs',
        description: page.seoDescription || page.excerpt || '',
        url: page.link || page.urlPath || `https://rockymountainvending.com/services/repairs/`,
        datePublished: page.date,
        dateModified: page.modified || page.date,
        type: 'WebPage',
      });
    } catch (e) {
      structuredData = {
        '@context': 'https://schema.org',
        '@type': 'WebPage',
        headline: page.title || 'Vending Machine Repairs',
        description: page.seoDescription || '',
        url: `https://rockymountainvending.com/services/repairs/`,
      };
    }

    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">
            <header className="mb-8 text-center">
              <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">
                {page.title || 'Vending Machine Repairs and Service'}
              </h1>
              <p className="text-lg text-muted-foreground max-w-3xl mx-auto leading-relaxed mb-8">
                Rocky Mountain Vending delivers expert <Link href="/services/repairs" className="text-primary hover:underline font-semibold">vending machine repair</Link> and maintenance services to keep your business thriving. From resolving jammed coin slots and refrigeration issues to fixing non-dispensing machines, our skilled technicians ensure reliable performance. For all your <Link href="/services/parts" className="text-primary hover:underline">vending machine parts</Link> needs and professional <Link href="/services/moving" className="text-primary hover:underline">vending machine moving</Link> services, contact us today for fast, professional solutions!
              </p>
            </header>
            {/* Images Carousel */}
            <div className="max-w-4xl mx-auto">
              <RepairsImageCarousel />
            </div>
          </div>
        </section>

        {/* Services Section */}
        <section className="py-20 md:py-28 bg-muted/30">
          <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">Services</h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed mb-8">
                <strong>Our Repair and Maintenance Services Include:</strong>
              </p>
            </div>
            <div className="grid gap-8 md:grid-cols-2 items-start">
              <Card className="border-border/50">
                <CardContent className="pt-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 md:mx-0 rounded-lg overflow-hidden shadow-lg">
                <Image
                  src="https://rockymountainvending.com/wp-content/uploads/elementor/thumbs/Vending-Machine-repairs-e1737751914630-r0hul4xrzal3af9zw0ss3hzq6enyjd5ldxqqylpgnc.webp"
                  alt="Vending machine being repaired"
                  fill
                  className="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">
            <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">Why Choose Rocky Mountain Vending?</h2>
            </div>
            <div className="grid gap-8 md:grid-cols-2 items-start">
              <div className="relative aspect-video rounded-lg overflow-hidden shadow-lg">
                <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="object-cover"
                  sizes="(max-width: 768px) 100vw, 50vw"
                />
              </div>
              <Card className="border-border/50">
                <CardContent className="pt-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">
            <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">Our Complete Service Network</h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed mb-8">
                Rocky Mountain Vending provides comprehensive vending solutions across Utah
              </p>
            </div>
            <div className="grid gap-8 md:grid-cols-3">
              <Card className="border-border/50 hover:border-secondary/50 transition-colors">
                <CardContent className="pt-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="border-border/50 hover:border-secondary/50 transition-colors">
                <CardContent className="pt-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="border-border/50 hover:border-secondary/50 transition-colors">
                <CardContent className="pt-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="border-border/50 hover:border-secondary/50 transition-colors">
                <CardContent className="pt-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="border-border/50 hover:border-secondary/50 transition-colors">
                <CardContent className="pt-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="border-border/50 hover:border-secondary/50 transition-colors">
                <CardContent className="pt-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="border-border/50 hover:border-secondary/50 transition-colors">
                <CardContent className="pt-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" 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="border-border/50">
                <CardHeader>
                  <CardTitle className="text-2xl">Vending Machine Brands We Commonly Service</CardTitle>
                </CardHeader>
                <CardContent className="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="border-border/50">
                <CardHeader>
                  <CardTitle className="text-2xl">Card Reader Brands We Service</CardTitle>
                </CardHeader>
                <CardContent className="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="border-border/50">
                <CardHeader>
                  <CardTitle className="text-2xl">Bill Validator and Coin Mechanism Brands We Service</CardTitle>
                </CardHeader>
                <CardContent className="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="border-border/50">
              <CardContent className="pt-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="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-2xl">What You'll Need</CardTitle>
                  </CardHeader>
                  <CardContent className="pt-6">
                    <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="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-2xl">How to Prepare</CardTitle>
                  </CardHeader>
                  <CardContent className="pt-6">
                    <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="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-2xl">Important Policies</CardTitle>
                  </CardHeader>
                  <CardContent className="pt-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" />
                        <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="border-border/50">
                  <CardHeader>
                    <CardTitle className="text-2xl">Schedule Your Virtual Session Today</CardTitle>
                  </CardHeader>
                  <CardContent className="pt-6">
                    <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();
  }
}