'use client'

import { Card, CardContent } from "@/components/ui/card"
import { Star } from "lucide-react"

export function ReviewsPage() {
  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">
            Customer Reviews
          </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 mt-6 text-pretty leading-relaxed">
            Read authentic customer reviews and testimonials about Rocky Mountain Vending&apos;s exceptional vending services in Utah. Discover why businesses trust us for free vending machines, reliable service, and outstanding customer support across Salt Lake City, Ogden, Provo, and surrounding areas.
          </p>
        </header>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {/* Review 1 */}
          <Card className="border-border/50 hover:border-secondary/50 transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center gap-1 mb-4">
                {[1, 2, 3, 4, 5].map((i) => (
                  <Star key={i} className="w-5 h-5" />
                ))}
              </div>
              <p className="text-foreground font-semibold mb-2">Excellent Service!</p>
              <p className="text-muted-foreground leading-relaxed">
                Rocky Mountain Vending has been fantastic for our office. The machines are always well-stocked and working perfectly. Highly recommend!
              </p>
              <p className="text-sm text-muted-foreground mt-4 font-medium">
                — Sarah M., Salt Lake City
              </p>
            </CardContent>
          </Card>

          {/* Review 2 */}
          <Card className="border-border/50 hover:border-secondary/50 transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center gap-1 mb-4">
                {[1, 2, 3, 4, 5].map((i) => (
                  <Star key={i} className="w-5 h-5" />
                ))}
              </div>
              <p className="text-foreground font-semibold mb-2">Professional and Reliable</p>
              <p className="text-muted-foreground leading-relaxed">
                We&apos;ve been working with Rocky Mountain Vending for over a year now. Their team is professional, responsive, and always goes above and beyond.
              </p>
              <p className="text-sm text-muted-foreground mt-4 font-medium">
                — John D., Ogden
              </p>
            </CardContent>
          </Card>

          {/* Review 3 */}
          <Card className="border-border/50 hover:border-secondary/50 transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center gap-1 mb-4">
                {[1, 2, 3, 4, 5].map((i) => (
                  <Star key={i} className="w-5 h-5" />
                ))}
              </div>
              <p className="text-foreground font-semibold mb-2">Great Selection</p>
              <p className="text-muted-foreground leading-relaxed">
                Our employees love the healthy snack options and variety available. The free installation and maintenance service is a huge plus for our business.
              </p>
              <p className="text-sm text-muted-foreground mt-4 font-medium">
                — Michelle R., Provo
              </p>
            </CardContent>
          </Card>

          {/* Review 4 */}
          <Card className="border-border/50 hover:border-secondary/50 transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center gap-1 mb-4">
                {[1, 2, 3, 4, 5].map((i) => (
                  <Star key={i} className="w-5 h-5" />
                ))}
              </div>
              <p className="text-foreground font-semibold mb-2">Outstanding Customer Service</p>
              <p className="text-muted-foreground leading-relaxed">
                Whenever we have an issue, the team responds quickly and resolves it the same day. It&apos;s rare to find this level of service today.
              </p>
              <p className="text-sm text-muted-foreground mt-4 font-medium">
                — David K., Sandy
              </p>
            </CardContent>
          </Card>

          {/* Review 5 */}
          <Card className="border-border/50 hover:border-secondary/50 transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center gap-1 mb-4">
                {[1, 2, 3, 4, 5].map((i) => (
                  <Star key={i} className="w-5 h-5" />
                ))}
              </div>
              <p className="text-foreground font-semibold mb-2">Highly Recommended</p>
              <p className="text-muted-foreground leading-relaxed">
                Best vending service we&apos;ve ever used. Free machines, regular restocking, and great communication. What more could you ask for?
              </p>
              <p className="text-sm text-muted-foreground mt-4 font-medium">
                — Lisa T., West Valley City
              </p>
            </CardContent>
          </Card>

          {/* Review 6 */}
          <Card className="border-border/50 hover:border-secondary/50 transition-colors">
            <CardContent className="p-6">
              <div className="flex items-center gap-1 mb-4">
                {[1, 2, 3, 4, 5].map((i) => (
                  <Star key={i} className="w-5 h-5" />
                ))}
              </div>
              <p className="text-foreground font-semibold mb-2">Local Business We Trust</p>
              <p className="text-muted-foreground leading-relaxed">
                Supporting a local, family-owned business feels good. They really care about their customers and it shows in everything they do.
              </p>
              <p className="text-sm text-muted-foreground mt-4 font-medium">
                — Robert P., Bountiful
              </p>
            </CardContent>
          </Card>
        </div>

        <section className="mt-20 max-w-6xl mx-auto">
          <div className="border border-border/40 rounded-lg bg-secondary/5 p-8 md:p-12">
            <h2 className="text-3xl font-bold tracking-tight md:text-4xl mb-6 text-balance">
              Why Customers Choose Rocky Mountain Vending
            </h2>
            <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 mb-8" />
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">100% FREE Installation</h3>
                <p className="text-lg text-muted-foreground text-pretty leading-relaxed">
                  No upfront costs or hidden fees. We provide and install vending machines at no charge to your business.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Regular Restocking & Maintenance</h3>
                <p className="text-lg text-muted-foreground text-pretty leading-relaxed">
                  Our team regularly services and restocks machines to ensure they&apos;re always fully operational and meeting customer needs.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Wide Product Variety</h3>
                <p className="text-lg text-muted-foreground text-pretty leading-relaxed">
                  From traditional snacks and beverages to healthy options, we customize product selection to match your customers&apos; preferences.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Fast, Local Support</h3>
                <p className="text-lg text-muted-foreground text-pretty leading-relaxed">
                  Based in Utah, we provide quick response times and personalized service. Call us anytime at (435) 233-9668.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-3 text-foreground">Flexible Service Options</h3>
                <p className="text-lg text-muted-foreground text-pretty leading-relaxed">
                  Whether you need one machine or multiple locations, we scale to meet your business needs and growth.
                </p>
              </div>
            </div>
          </div>
        </section>

        <section className="mt-20 max-w-6xl mx-auto">
          <div className="text-center">
            <h2 className="text-3xl font-bold tracking-tight md:text-4xl mb-6 text-balance">
              Share Your Experience
            </h2>
            <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 mb-8" />
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8 text-pretty leading-relaxed">
              We value your feedback and are constantly improving our services. Whether you&apos;re a current customer or considering Rocky Mountain Vending for your business, we&apos;d love to hear from you.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Card className="border-secondary/20 bg-secondary/5 p-6 flex-1">
                <CardContent className="p-0">
                  <h3 className="text-xl font-semibold mb-3 text-foreground">Current Customer</h3>
                  <p className="text-muted-foreground leading-relaxed mb-4">
                    Share your experience with our services and help us serve you better.
                  </p>
                </CardContent>
              </Card>
              <Card className="border-secondary/20 bg-secondary/5 p-6 flex-1">
                <CardContent className="p-0">
                  <h3 className="text-xl font-semibold mb-3 text-foreground">Business Inquiry</h3>
                  <p className="text-muted-foreground leading-relaxed mb-4">
                    Learn how we can provide free vending solutions for your business.
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>
      </div>
    </div>
  )
}


