"use client"

import { ReactNode } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { GetFreeMachineCta } from "@/components/get-free-machine-cta"
import Link from "next/link"
import { CheckCircle2 } from "lucide-react"

interface WhoWeServePageProps {
  title: string
  content: ReactNode
}

export function WhoWeServePage({ title, content }: WhoWeServePageProps) {
  return (
    <div className="container mx-auto px-4 py-8 md:py-12 max-w-5xl">
      {/* Header */}
      <header className="text-center mb-12 md:mb-16">
        <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">
          {title}
        </h1>
        <div className="w-24 h-1 bg-gradient-to-r from-[var(--link-hover-color)] to-[var(--link-hover-color-dark)] mx-auto rounded-full" />
      </header>

      {/* Main Content */}
      <div className="mb-20">
        <div className="prose prose-lg max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-a:text-foreground prose-a:transition-colors">
          <div className="text-foreground leading-relaxed space-y-6 text-base md:text-lg">
            {content}
          </div>
        </div>
      </div>

      {/* Benefits Section */}
      <section className="mb-20">
        <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">
            We match the machine mix, product selection, and service schedule
            to the way your location actually runs
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2">
          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 w-6 h-6 mt-1">
              <CheckCircle2 className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-xl mb-2 text-foreground">
                Placement for Qualifying Locations
              </h3>
              <p className="text-muted-foreground leading-relaxed">
                If your location qualifies, we can place and service machines
                without pushing daily management onto your staff
              </p>
            </div>
          </div>

          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 w-6 h-6 mt-1">
              <CheckCircle2 className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-xl mb-2 text-foreground">
                Regular Maintenance
              </h3>
              <p className="text-muted-foreground leading-relaxed">
                We handle stocking, cleaning, and routine service so your team
                can stay focused on the work your location is there to do
              </p>
            </div>
          </div>

          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 w-6 h-6 mt-1">
              <CheckCircle2 className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-xl mb-2 text-foreground">
                Modern Technology
              </h3>
              <p className="text-muted-foreground leading-relaxed">
                Cashless payment options and dependable equipment built for
                everyday use
              </p>
            </div>
          </div>

          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 w-6 h-6 mt-1">
              <CheckCircle2 className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-xl mb-2 text-foreground">
                Healthy Options
              </h3>
              <p className="text-muted-foreground leading-relaxed">
                Product mixes can include traditional favorites, drinks, and
                healthier options
              </p>
            </div>
          </div>

          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 w-6 h-6 mt-1">
              <CheckCircle2 className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-xl mb-2 text-foreground">
                Local Service
              </h3>
              <p className="text-muted-foreground leading-relaxed">
                Local service with responsive follow-up when a machine needs
                attention
              </p>
            </div>
          </div>

          <div className="flex items-start gap-4">
            <div className="flex-shrink-0 w-6 h-6 mt-1">
              <CheckCircle2 className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-xl mb-2 text-foreground">
                Machine Options That Match Your Location
              </h3>
              <p className="text-muted-foreground leading-relaxed">
                Machine types, product mixes, and service plans can be matched
                to your space, traffic, and audience
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="text-center">
        <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">
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 tracking-tight text-balance">
              Tell us about your location
            </h2>
            <p className="text-white/90 mb-8 max-w-2xl mx-auto text-lg leading-relaxed">
              Tell us about your location and we&apos;ll help you decide
              whether free placement, machine sales, or repair service makes
              the most sense.
            </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="/contact-us">Talk to Our Team</Link>
              </Button>
              <GetFreeMachineCta
                buttonLabel="See If Your Location Qualifies"
                className="h-12 border-2 border-white bg-transparent px-8 text-lg font-semibold text-white hover:bg-white/10"
                variant="outline"
              />
            </div>
          </CardContent>
        </Card>
      </section>
    </div>
  )
}