'use client'

import { ReactNode } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { CheckCircle2, Wrench, Clock, Phone, Shield } from "lucide-react"

interface RepairsPageProps {
  title: string
  content: ReactNode
}

export function RepairsPage({ title, content }: RepairsPageProps) {
  return (
    <>
      {/* Hero Header */}
      <section className="py-20 md:py-28">
        <div className="container mx-auto px-4">
          <header className="text-center mb-12 md:mb-16 max-w-4xl mx-auto">
            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">
              {typeof title === 'string' ? title.replace(/<[^>]*>/g, '') : title}
            </h1>
            <p className="text-lg text-muted-foreground max-w-3xl mx-auto leading-relaxed text-pretty">
              Rocky Mountain Vending delivers expert vending machine repair 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.
            </p>
          </header>

          {/* Main Content */}
          <div id="request-service" className="scroll-mt-8 max-w-4xl mx-auto">
            <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">
              <div className="text-foreground leading-relaxed space-y-6 text-base md:text-lg">
                {content}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Cards Section */}
      <section className="py-20 md:py-28 bg-muted/30">
        <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 Repair Services</h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed">
            Comprehensive repair and maintenance services to keep your machines running smoothly
          </p>
        </div>

        <div className="container mx-auto px-4">
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Wrench className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Diagnostics & Fixes</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Diagnosing and fixing vending machine errors quickly and efficiently
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Wrench className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Payment Systems</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Bill and coin mechanism repairs, card reader troubleshooting and setup
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Wrench className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Refrigeration</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Refrigeration system maintenance and repair to keep products cold
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Wrench className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Software & Setup</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Software updates, programming, machine calibration and inventory setup
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Shield className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Preventative Maintenance</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Regular maintenance services to prevent issues before they occur
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Wrench className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Card Reader Upgrades</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Credit card reader upgrade and installation for modern payment options
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Why Choose Us Section */}
      <section className="py-20 md:py-28">
        <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>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed">
            Local experts with over 10 years of experience serving Salt Lake City and surrounding areas
          </p>
        </div>

        <div className="container mx-auto px-4">
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <CheckCircle2 className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Local Experts</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Serving Salt Lake City for over 10 years with deep knowledge of local needs
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Clock className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Fast Response Times</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Quick service to minimize downtime and get your machines back in operation
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Wrench className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">All Major Brands</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Experienced technicians familiar with all major vending machine brands
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <CheckCircle2 className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Affordable Service Plans</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Service plans tailored to your needs with competitive pricing
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <Shield className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Preventative Maintenance</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  Regular maintenance services to keep your machines running smoothly
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="pt-6">
                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <CheckCircle2 className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">Expert Problem Solving</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  We've often come in and fixed problems others couldn't fix
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 md:py-28 bg-muted/30">
        <div className="container mx-auto px-4">
          <Card className="border-2 shadow-lg [&>div]:!bg-transparent bg-gradient-to-r from-[var(--primary)] to-[#1d7a35]">
            <CardContent className="p-10 md:p-12 text-center">
              <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 tracking-tight text-balance">
                Ready to Get Your Machine Fixed?
              </h2>
              <p className="text-white/90 mb-8 max-w-2xl mx-auto text-lg leading-relaxed">
                Contact us today for fast, professional solutions. Our expert technicians are ready to help you get your vending machine back up and running.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button asChild size="lg" className="bg-white text-[var(--primary)] hover:bg-white/90 text-lg h-12 px-8 font-semibold">
                  <Link href="#request-service">Request Service</Link>
                </Button>
                <Button asChild size="lg" variant="outline" className="bg-transparent border-2 border-white text-white hover:bg-white/10 text-lg h-12 px-8 font-semibold">
                  <Link href="tel:+14352339668">
                    <Phone className="mr-2 h-5 w-5" />
                    Call (435) 233-9668
                  </Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>
    </>
  )
}