'use client'

import { Card, CardContent } from "@/components/ui/card"
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"

export function VendingMachinesPage() {
  return (
    <div className="container mx-auto px-4 py-16 md:py-24">
      <div className="max-w-6xl mx-auto">
        <header className="text-center mb-12 md:mb-16">
          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">
            Vending Machines
          </h1>
          <div className="w-24 h-1 bg-gradient-to-r from-[var(--link-hover-color)] to-[var(--link-hover-color-dark)] mx-auto rounded-full" />
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed mt-6">
            Browse our selection of high-quality vending machines for your business. We offer the latest technology with cashless payment options and advanced features.
          </p>
        </header>

        <VendingMachinesShowcase />

        <section className="mt-16 md:mt-24">
          <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-8 text-balance border-b border-border pb-4 text-center">
            Why Choose Our Machines?
          </h2>
          <div className="grid gap-6 md:grid-cols-2 mb-12">
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 w-6 h-6 mt-1">
                <CheckCircle2 className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold text-xl mb-2 text-foreground">100% FREE Service</h3>
                <p className="text-muted-foreground leading-relaxed">
                  No upfront costs, installation fees, or monthly charges for qualifying businesses
                </p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 w-6 h-6 mt-1">
                <CheckCircle2 className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold text-xl mb-2 text-foreground">Modern Technology</h3>
                <p className="text-muted-foreground leading-relaxed">
                  State-of-the-art machines with advanced features and reliable performance
                </p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 w-6 h-6 mt-1">
                <CheckCircle2 className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold text-xl mb-2 text-foreground">Cashless Payments</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Integrated credit card readers for convenient, secure transactions
                </p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 w-6 h-6 mt-1">
                <CheckCircle2 className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold text-xl mb-2 text-foreground">Full Service & Support</h3>
                <p className="text-muted-foreground leading-relaxed">
                  Regular maintenance, restocking, and 24/7 customer support included
                </p>
              </div>
            </div>
          </div>

          <Card className="border-2 shadow-lg [&>div]:!bg-transparent bg-gradient-to-r from-[var(--primary)] to-[#1d7a35]">
            <CardContent className="p-10 md:p-12 text-center">
              <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 tracking-tight text-balance">
                Ready to Get Started?
              </h2>
              <p className="text-white/90 mb-8 max-w-2xl mx-auto text-lg leading-relaxed">
                Contact us today to learn more about our free vending machine services and how we can help your business.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button asChild size="lg" className="bg-white text-[var(--primary)] hover:bg-white/90 text-lg h-12 px-8 font-semibold">
                  <Link href="/contact-us">Contact Us</Link>
                </Button>
                <Button asChild size="lg" variant="outline" className="bg-transparent border-2 border-white text-white hover:bg-white/10 text-lg h-12 px-8 font-semibold">
                  <Link href="/#request-machine">Get Free Machine</Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </section>

        <section className="mt-16 md:mt-24">
          <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-8 text-balance border-b border-border pb-4 text-center">
            Our Services
          </h2>
          <div className="grid gap-6 md:grid-cols-3 mb-12">
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="p-6 text-center">
                <Wrench className="w-12 h-12 text-primary mx-auto mb-4" />
                <h3 className="font-semibold text-xl mb-2">Repairs & Maintenance</h3>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  Expert repair services to keep your machines running smoothly
                </p>
                <Button asChild variant="outline" className="w-full">
                  <Link href="/services">Learn More</Link>
                </Button>
              </CardContent>
            </Card>
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="p-6 text-center">
                <MonitorSmartphone className="w-12 h-12 text-primary mx-auto mb-4" />
                <h3 className="font-semibold text-xl mb-2">Moving Services</h3>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  Safe and efficient vending machine relocation
                </p>
                <Button asChild variant="outline" className="w-full">
                  <Link href="/services">Learn More</Link>
                </Button>
              </CardContent>
            </Card>
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="p-6 text-center">
                <CreditCard className="w-12 h-12 text-primary mx-auto mb-4" />
                <h3 className="font-semibold text-xl mb-2">Parts & Supplies</h3>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  Quality replacement parts and accessories
                </p>
                <Button asChild variant="outline" className="w-full">
                  <Link href="/manuals">Shop Parts</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </section>

        <section className="mt-16 md:mt-24">
          <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-8 text-balance border-b border-border pb-4 text-center">
            Machine Features
          </h2>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-12">
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="p-6 text-center">
                <Package className="w-10 h-10 text-primary mx-auto mb-3" />
                <h3 className="font-semibold text-lg mb-2">Healthy Options</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  Wide selection of nutritious snacks and beverages
                </p>
              </CardContent>
            </Card>
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="p-6 text-center">
                <CreditCard className="w-10 h-10 text-primary mx-auto mb-3" />
                <h3 className="font-semibold text-lg mb-2">Cashless Payment</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  Accept credit/debit cards and mobile payments
                </p>
              </CardContent>
            </Card>
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="p-6 text-center">
                <Wrench className="w-10 h-10 text-primary mx-auto mb-3" />
                <h3 className="font-semibold text-lg mb-2">Easy Maintenance</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  Remote monitoring and quick service response
                </p>
              </CardContent>
            </Card>
            <Card className="border-border/50 hover:border-secondary/50 transition-colors">
              <CardContent className="p-6 text-center">
                <MonitorSmartphone className="w-10 h-10 text-primary mx-auto mb-3" />
                <h3 className="font-semibold text-lg mb-2">Smart Technology</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  Track inventory and sales in real-time
                </p>
              </CardContent>
            </Card>
          </div>
        </section>
      </div>
    </div>
  )
}