"use client"

import { Button } from "@/components/ui/button"
import { VendingMachinesShowcase } from "@/components/vending-machines-showcase"
import {
  CheckCircle2,
  CreditCard,
  type LucideIcon,
  MonitorSmartphone,
  Package,
  Wrench,
} from "lucide-react"
import Link from "next/link"
import {
  PublicInset,
  PublicPageHeader,
  PublicSurface,
} from "@/components/public-surface"
import { GetFreeMachineCta } from "@/components/get-free-machine-cta"
import { Breadcrumbs } from "@/components/breadcrumbs"

export function VendingMachinesPage() {
  const featureCards: Array<[LucideIcon, string, string]> = [
    [
      Package,
      "Healthy Options",
      "Wide selection of nutritious snacks and beverages.",
    ],
    [
      CreditCard,
      "Cashless Payment",
      "Accept cards and mobile payments with modern hardware.",
    ],
    [
      Wrench,
      "Easy Maintenance",
      "Remote monitoring and quick service response when issues come up.",
    ],
    [
      MonitorSmartphone,
      "Smart Technology",
      "Track inventory and sales with better visibility.",
    ],
  ]

  return (
    <div className="public-page">
      <Breadcrumbs
        className="mb-6"
        items={[{ label: "Vending Machines", href: "/vending-machines" }]}
      />
      <PublicPageHeader
        align="center"
        eyebrow="Machine Options"
        title="Modern vending machines built for reliable everyday use."
        description="Explore the snack, beverage, and combo machines we place, how we match them to a location, and what ongoing restocking and service look like after installation."
      />

      <div className="mt-10">
        <VendingMachinesShowcase />
      </div>

      <section className="mt-12 grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
        <PublicSurface>
          <h2 className="text-3xl font-semibold tracking-tight text-balance">
            Why businesses choose our vending setup
          </h2>
          <div className="mt-6 grid gap-5 md:grid-cols-2">
            {[
              [
                "Machine planning by location",
                "We look at traffic, audience, and space before recommending a snack, beverage, or combo setup.",
              ],
              [
                "Modern equipment",
                "We use dependable machines with updated payment hardware and features that work well in busy locations.",
              ],
              [
                "Cashless-ready checkout",
                "Integrated card readers and mobile payment options make the machines easier for customers to use.",
              ],
              [
                "Ongoing local service",
                "After installation, we stay responsible for restocking, routine service, and follow-up when machines need attention.",
              ],
            ].map(([title, body]) => (
              <div
                key={title}
                className="flex items-start gap-4 rounded-[1.5rem] border border-border/60 bg-white p-5 shadow-sm"
              >
                <CheckCircle2 className="mt-0.5 h-6 w-6 shrink-0 text-primary" />
                <div>
                  <h3 className="text-lg font-semibold text-foreground">
                    {title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                    {body}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </PublicSurface>

        <PublicSurface>
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
            Next Step
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
            Need help choosing the right machine setup?
          </h2>
          <p className="mt-3 text-base leading-relaxed text-muted-foreground">
            We can help you compare free placement and direct purchase options,
            narrow down the right machine type, and choose a layout that fits
            your space and traffic.
          </p>
          <div className="mt-6 flex flex-col gap-3 sm:flex-row">
            <Button asChild size="lg" className="h-11 rounded-full px-6">
              <Link href="/contact-us#contact-form">Talk to Our Team</Link>
            </Button>
            <GetFreeMachineCta
              buttonLabel="See If Your Location Qualifies"
              className="h-11 px-6"
              variant="outline"
            />
          </div>
        </PublicSurface>
      </section>

      <section className="mt-12">
        <PublicSurface>
          <h2 className="text-3xl font-semibold tracking-tight text-balance">
            Our services around the machines
          </h2>
          <div className="mt-6 grid gap-5 md:grid-cols-3">
            {[
              {
                icon: Wrench,
                title: "Repairs & Maintenance",
                body: "Expert service to keep machines running smoothly.",
                href: "/services/repairs",
                cta: "Repairs",
              },
              {
                icon: MonitorSmartphone,
                title: "Moving Services",
                body: "Safe and efficient vending machine relocation when layouts change.",
                href: "/services/moving",
                cta: "Moving",
              },
              {
                icon: CreditCard,
                title: "Parts & Manuals",
                body: "Replacement parts, manuals, and machine resources for major brands.",
                href: "/manuals",
                cta: "Manuals",
              },
            ].map((service) => (
              <PublicInset
                key={service.title}
                className="h-full p-5 text-center"
              >
                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                  <service.icon className="h-6 w-6" />
                </div>
                <h3 className="mt-4 text-xl font-semibold">{service.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {service.body}
                </p>
                <Button
                  asChild
                  variant="outline"
                  className="mt-5 h-10 rounded-full px-4"
                >
                  <Link href={service.href}>{service.cta}</Link>
                </Button>
              </PublicInset>
            ))}
          </div>
        </PublicSurface>
      </section>

      <section className="mt-12">
        <PublicSurface>
          <h2 className="text-3xl font-semibold tracking-tight text-balance">
            Machine features customers ask about most
          </h2>
          <div className="mt-6 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
            {featureCards.map(([Icon, title, body]) => (
              <PublicInset key={title} className="h-full p-5 text-center">
                <Icon className="mx-auto h-10 w-10 text-primary" />
                <h3 className="mt-4 text-lg font-semibold">{title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {body}
                </p>
              </PublicInset>
            ))}
          </div>
        </PublicSurface>
      </section>
    </div>
  )
}