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

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

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 leading-relaxed">
            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) => (
            <Link key={index} href={feature.link}>
              <Card className="border-border/50 hover:border-secondary/50 transition-all hover:shadow-lg h-full cursor-pointer">
                <CardContent className="pt-6 flex flex-col h-full">
                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                    <feature.icon className="h-6 w-6 text-primary" />
                  </div>
                  <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                  <p className="text-muted-foreground text-sm leading-relaxed flex-grow">{feature.description}</p>
                  <p className="text-primary text-sm font-medium mt-4 hover:underline">
                    {feature.linkText} →
                  </p>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}