'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 } 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 provide comprehensive vending solutions tailored to your specific needs
          </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">100% FREE Service</h3>
              <p className="text-muted-foreground leading-relaxed">
                No upfront costs, installation fees, or monthly charges
              </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 stock, service, and maintain all machines at no cost to you
              </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 state-of-the-art equipment
              </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">
                Wide variety of healthy snacks and beverages available
              </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 Support</h3>
              <p className="text-muted-foreground leading-relaxed">
                Family-owned business with dedicated local customer service
              </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">Flexible Solutions</h3>
              <p className="text-muted-foreground leading-relaxed">
                Customized vending solutions to fit your space and needs
              </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">
              Ready to Get Started?
            </h2>
            <p className="text-white/90 mb-8 max-w-2xl mx-auto text-lg leading-relaxed">
              Contact us today to learn more about our free vending machine services and how we can help your business.
            </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">Contact Us</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="/#request-machine">Get Free Machine</Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </section>
    </div>
  )
}