'use client'

import { Button } from "@/components/ui/button"
import { VendingMachinesShowcase } from "@/components/vending-machines-showcase"
import { CheckCircle2, CreditCard, 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"

export function VendingMachinesPage() {
  return (
    <div className="container mx-auto px-4 py-10 md:py-14">
      <PublicPageHeader
        align="center"
        eyebrow="Machine Options"
        title="Modern vending machines built for reliable everyday use."
        description="Browse the machines we use, the features we prioritize, and the support that comes with every 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 choose our machines?</h2>
          <div className="mt-6 grid gap-5 md:grid-cols-2">
            {[
              ["100% FREE service", "No upfront costs, installation fees, or monthly charges for qualifying businesses."],
              ["Modern technology", "Current equipment with reliable performance and updated features."],
              ["Cashless payments", "Integrated card readers and secure payment options for modern locations."],
              ["Full service and support", "Maintenance, restocking, and local follow-up are part of the experience."],
            ].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">Get Started</p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">Ready to talk through the right machine setup?</h2>
          <p className="mt-3 text-base leading-relaxed text-muted-foreground">
            We can help with free placement, sales questions, feature comparisons, and planning the best layout for your location.
          </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">Contact Us</Link>
            </Button>
            <GetFreeMachineCta buttonLabel="Get Free Machine" 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 support 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">
            {[
              [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."],
            ].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>
  )
}