'use client'

import { useEffect } from "react"
import { Star } from "lucide-react"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { PublicInset, PublicPageHeader, PublicSurface } from "@/components/public-surface"

const reviews = [
  {
    title: "Excellent Service!",
    body: "Rocky Mountain Vending has been fantastic for our office. The machines are always well-stocked and working perfectly.",
    author: "Sarah M., Salt Lake City",
  },
  {
    title: "Professional and Reliable",
    body: "We've been working with Rocky Mountain Vending for over a year now. Their team is responsive and easy to work with.",
    author: "John D., Ogden",
  },
  {
    title: "Great Selection",
    body: "Our employees love the healthy snack options and variety available. The free installation and maintenance service is a huge plus.",
    author: "Michelle R., Provo",
  },
  {
    title: "Outstanding Customer Service",
    body: "Whenever we have an issue, the team responds quickly and resolves it the same day. It's rare to find this level of service today.",
    author: "David K., Sandy",
  },
  {
    title: "Highly Recommended",
    body: "Best vending service we've ever used. Free machines, regular restocking, and great communication.",
    author: "Lisa T., West Valley City",
  },
  {
    title: "Local Business We Trust",
    body: "Supporting a local, family-owned business feels good. They care about their customers and it shows in everything they do.",
    author: "Robert P., Bountiful",
  },
]

export function ReviewsPage() {
  useEffect(() => {
    const existingScript = document.querySelector('script[data-rocky-reviews-widget="true"]')
    if (existingScript) {
      return
    }

    const script = document.createElement("script")
    script.src = "https://reputationhub.site/reputation/assets/review-widget.js"
    script.type = "text/javascript"
    script.dataset.rockyReviewsWidget = "true"
    document.body.appendChild(script)

    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script)
      }
    }
  }, [])

  return (
    <div className="container mx-auto px-4 py-10 md:py-14">
      <PublicPageHeader
        align="center"
        eyebrow="Customer Reviews"
        title="What Utah businesses say about working with Rocky Mountain Vending."
        description="We built this page to feel like the rest of the site: clear, calm, and easy to scan. These reviews highlight why local businesses trust us for placement, restocking, repairs, and day-to-day support."
      />

      <div className="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        {reviews.map((review) => (
          <PublicSurface key={review.author} className="h-full p-5 md:p-6">
            <div className="flex items-center gap-1 text-primary">
              {Array.from({ length: 5 }).map((_, index) => (
                <Star key={index} className="h-5 w-5 fill-current" />
              ))}
            </div>
            <h2 className="mt-4 text-xl font-semibold text-foreground">{review.title}</h2>
            <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{review.body}</p>
            <p className="mt-5 text-sm font-medium text-foreground">— {review.author}</p>
          </PublicSurface>
        ))}
      </div>

      <section className="mt-12">
        <PublicSurface className="overflow-hidden p-5 md:p-7">
          <div className="flex flex-col gap-4 border-b border-border/60 pb-6 md:flex-row md:items-end md:justify-between">
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">All Google Reviews</p>
              <h2 className="mt-2 text-3xl font-semibold tracking-tight text-balance">
                Browse the full review feed from Rocky Mountain Vending customers.
              </h2>
              <p className="mt-3 max-w-3xl text-sm leading-relaxed text-muted-foreground">
                This is the same live review feed that powers the Google review widget, so the dedicated reviews page
                shows the full set instead of just a few highlight quotes.
              </p>
            </div>
            <Badge variant="secondary" className="w-fit rounded-full px-3 py-1 text-sm">
              4.9 / 5.0 on Google
            </Badge>
          </div>

          <div className="mt-6">
            <iframe
              className="lc_reviews_widget min-h-[900px] w-full rounded-[1.5rem] border border-border/60 bg-background"
              src="https://reputationhub.site/reputation/widgets/review_widget/YAoWLgNSid8oG44j9BjG"
              frameBorder="0"
              scrolling="no"
              title="Rocky Mountain Vending Google Reviews"
            />
          </div>
        </PublicSurface>
      </section>

      <section className="mt-12 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
        <PublicSurface>
          <h2 className="text-3xl font-semibold tracking-tight text-balance">Why customers keep choosing Rocky Mountain Vending</h2>
          <div className="mt-6 space-y-4">
            {[
              ["100% free installation", "No upfront costs or hidden fees for qualifying businesses."],
              ["Regular restocking and maintenance", "We keep machines full, clean, and working with ongoing service included."],
              ["Wide product variety", "Healthy snacks, traditional favorites, beverages, and location-specific mixes."],
              ["Fast local support", "Utah-based service means quicker response times and a more personal experience."],
              ["Flexible service options", "From a single machine to multiple properties, we scale with your location."],
            ].map(([title, body]) => (
              <PublicInset key={title}>
                <h3 className="text-lg font-semibold text-foreground">{title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{body}</p>
              </PublicInset>
            ))}
          </div>
        </PublicSurface>

        <PublicSurface className="flex flex-col justify-between">
          <div>
            <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">Want the same experience at your location?</h2>
            <p className="mt-3 text-base leading-relaxed text-muted-foreground">
              If you&apos;re looking for free placement, service help, or machine sales, we can point you to the right intake form right away.
            </p>
          </div>
          <div className="mt-6 grid gap-4 sm:grid-cols-2">
            <Link href="/#request-machine" className="rounded-[1.5rem] border border-border/60 bg-background/90 p-5 text-left transition hover:border-primary/30 hover:text-primary">
              <h3 className="text-lg font-semibold text-foreground">Free Placement</h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">Start a request for free vending machine placement at your business.</p>
            </Link>
            <Link href="/contact-us#contact-form" className="rounded-[1.5rem] border border-border/60 bg-background/90 p-5 text-left transition hover:border-primary/30 hover:text-primary">
              <h3 className="text-lg font-semibold text-foreground">Service or Sales</h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">Reach out about repairs, moving, manuals, parts, or machine sales.</p>
            </Link>
          </div>
        </PublicSurface>
      </section>
    </div>
  )
}