import { Wrench, MonitorSmartphone, CreditCard, Sparkles } from "lucide-react"
import Link from "next/link"
import { PublicInset, PublicSurface } from "@/components/public-surface"

const features = [
  {
    icon: Sparkles,
    title: "Zero Cost Installation",
    description:
      "Get your vending machine installed completely free. No upfront costs, hidden fees, or awkward setup process.",
    link: "/about",
    linkText: "Learn more",
  },
  {
    icon: Wrench,
    title: "Full Maintenance Support",
    description: "We handle repairs, restocking, and service so your location stays easy to manage.",
    link: "/services/repairs",
    linkText: "Repair services",
  },
  {
    icon: MonitorSmartphone,
    title: "24/7 Remote Monitoring",
    description: "Advanced monitoring helps us keep machines stocked and working with fewer interruptions.",
    link: "/services",
    linkText: "Our services",
  },
  {
    icon: CreditCard,
    title: "All Payment Options",
    description: "Cash, cards, and mobile payments are supported with modern payment hardware.",
    link: "/contact-us#contact-form",
    linkText: "Contact us",
  },
]

export function FeaturesSection() {
  return (
    <section className="py-20 md:py-28 bg-muted/30">
      <div className="container mx-auto px-4">
        <PublicSurface className="p-6 md:p-8">
          <div className="text-center mb-10 md:mb-12">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">Why Rocky</p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-balance md:text-4xl lg:text-5xl">
              Why businesses choose Rocky Mountain Vending
            </h2>
            <p className="mx-auto mt-3 max-w-2xl text-lg text-muted-foreground text-pretty leading-relaxed">
              One visual system, one service standard, and a much more polished way to explain what makes our vending support easy to trust.
            </p>
          </div>

          <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
            {features.map((feature) => (
              <Link key={feature.title} href={feature.link} className="group block h-full">
                <PublicInset className="flex h-full flex-col p-5 transition-all group-hover:-translate-y-0.5 group-hover:shadow-md">
                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <feature.icon className="h-6 w-6" />
                  </div>
                  <h3 className="text-xl font-semibold">{feature.title}</h3>
                  <p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
                  <p className="mt-5 text-sm font-medium text-primary transition group-hover:translate-x-0.5">
                    {feature.linkText} →
                  </p>
                </PublicInset>
              </Link>
            ))}
          </div>
        </PublicSurface>
      </div>
    </section>
  )
}