import { Card, CardContent } from "@/components/ui/card"
import { Wrench, MonitorSmartphone, CreditCard, Sparkles } from "lucide-react"

const features = [
  {
    icon: Sparkles,
    title: "Zero Cost Installation",
    description:
      "Get your vending machine installed completely free. No upfront costs, no hidden fees, no commitments.",
  },
  {
    icon: Wrench,
    title: "Full Maintenance Support",
    description: "We handle all repairs, restocking, and maintenance. Your only job is to enjoy the convenience.",
  },
  {
    icon: MonitorSmartphone,
    title: "24/7 Remote Monitoring",
    description: "Advanced monitoring systems ensure machines are always stocked and functioning properly.",
  },
  {
    icon: CreditCard,
    title: "All Payment Options",
    description: "Accept cash, credit cards, mobile payments, and more. Modern cashless payment technology included.",
  },
]

export function FeaturesSection() {
  return (
    <section className="py-20 md:py-28 bg-muted/30">
      <div className="container mx-auto px-4">
        <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">
            We make vending simple, reliable, and completely hassle-free for your business.
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {features.map((feature, index) => (
            <Card key={index} 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-secondary/10">
                  <feature.icon className="h-6 w-6 text-secondary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}