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: "Free Placement",
    description:
      "For qualifying locations, we can place the machines, stock them, and stay responsible for day-to-day service after install.",
    link: "/#how-it-works",
    linkText: "How placement works",
  },
  {
    icon: Wrench,
    title: "Repairs and Services",
    description:
      "We handle repairs, restocking, and routine service so your team does not have to manage the machines.",
    link: "/services/repairs#request-service",
    linkText: "Repair services",
  },
  {
    icon: MonitorSmartphone,
    title: "Machine Visibility",
    description:
      "Machine monitoring helps us catch stock and service issues sooner and reduce unnecessary downtime.",
    link: "/services",
    linkText: "Our services",
  },
  {
    icon: CreditCard,
    title: "All Payment Options",
    description:
      "Machines can be set up for cash, cards, and mobile payments with modern payment hardware.",
    link: "/contact-us#contact-form",
    linkText: "Ask about payment options",
  },
]

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">
              Utah businesses choose Rocky Mountain Vending when they want a
              simpler vending setup, cleaner follow-through, and fewer machine
              headaches for their staff.
            </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>
  )
}