"use client"

import { useEffect } from "react"
import Link from "next/link"
import { Breadcrumbs } from "@/components/breadcrumbs"
import {
  PublicInset,
  PublicPageHeader,
  PublicSurface,
} from "@/components/public-surface"

const reviewThemes = [
  {
    title: "Always cold and stocked",
    body: "Customers consistently mention that the machines stay full, drinks stay cold, and the day-to-day experience feels dependable instead of neglected.",
  },
  {
    title: "Fast, friendly service",
    body: "When something needs attention, businesses talk about quick follow-through, easy communication, and issues getting handled without a long delay.",
  },
  {
    title: "Wide product variety",
    body: "Reviews regularly call out strong drink selection, snack variety, and the ability to request items that fit the people using the location.",
  },
  {
    title: "Fair pricing and reliability",
    body: "People mention competitive pricing, clean machines, and a setup that feels professional instead of frustrating or outdated.",
  },
]

const featuredQuotes = [
  {
    quote:
      "He is arguably one of the best vendors in the industry. There probably isn't too many people I would trust more than him.",
    author: "Martin Harrison",
  },
  {
    quote: "He always has my favorite energy drink at a great price!",
    author: "TOPX Kingsford",
  },
  {
    quote:
      "This vending machine is my favorite at my job! It always works and has the best stuff!!",
    author: "DJ Montoya",
  },
  {
    quote:
      "Great to work with, looking forward to having him in more locations.",
    author: "Jennifer Spencer",
  },
]

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="public-page">
      <Breadcrumbs
        className="mb-6"
        items={[
          { label: "About", href: "/about" },
          { label: "Reviews", href: "/reviews" },
        ]}
      />
      <PublicPageHeader
        align="center"
        eyebrow="Customer Reviews"
        title="What Utah businesses say about working with Rocky Mountain Vending."
        description="See the real themes customers mention most often, browse featured comments, and then dig into the live Google review feed."
      >
        <PublicInset className="mx-auto inline-flex w-fit rounded-full px-4 py-2 text-sm text-muted-foreground shadow-none">
          Average rating: 4.9 out of 5, based on 50+ customer reviews.
        </PublicInset>
      </PublicPageHeader>

      <section className="mt-12 grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
        <PublicSurface>
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
            Why Businesses Trust Rocky
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
            The same strengths keep showing up in the reviews.
          </h2>
          <p className="mt-4 text-base leading-relaxed text-muted-foreground">
            We&apos;re honored to have earned strong feedback from Utah
            businesses that rely on us for placement, restocking, repairs, and
            day-to-day service. The reviews tend to point back to the same
            things: stocked machines, responsive help, a better product mix,
            and follow-through after install.
          </p>
          <div className="mt-6 grid gap-4 md:grid-cols-2">
            {reviewThemes.map((theme) => (
              <PublicInset key={theme.title} className="h-full">
                <h3 className="text-lg font-semibold text-foreground">
                  {theme.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {theme.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">
              Featured Comments
            </p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
              A few of the comments that capture the pattern.
            </h2>
          </div>
          <div className="mt-6 grid gap-4">
            {featuredQuotes.map((item) => (
              <PublicInset key={item.author} className="p-5">
                <p className="text-sm leading-relaxed text-foreground">
                  &ldquo;{item.quote}&rdquo;
                </p>
                <p className="mt-3 text-sm font-semibold text-primary">
                  {item.author}
                </p>
              </PublicInset>
            ))}
          </div>
        </PublicSurface>
      </section>

      <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">
                See the full stream of Google reviews from businesses that rely
                on us for placement, restocking, repairs, and day-to-day
                service.
              </p>
            </div>
            <div className="w-fit rounded-full border border-border/60 bg-background px-3 py-1 text-sm text-muted-foreground">
              Live review feed
            </div>
          </div>

          <div className="mt-6 rounded-[1.5rem] bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,249,240,0.92))] p-2 sm:p-3">
            <iframe
              className="lc_reviews_widget min-h-[620px] w-full rounded-[1.35rem] border border-border/60 bg-background md:min-h-[780px]"
              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.05fr_0.95fr]">
        <PublicSurface>
          <h2 className="text-3xl font-semibold tracking-tight text-balance">
            What businesses usually want to verify before they choose a vendor
          </h2>
          <div className="mt-6 space-y-4">
            {[
              [
                "Route consistency",
                "Whether the company actually keeps machines stocked, clean, and working after the initial install.",
              ],
              [
                "Response time",
                "How quickly service issues, refunds, or machine problems get attention when something goes wrong.",
              ],
              [
                "Product mix",
                "Whether the machine selection matches the people using the location instead of forcing a one-size-fits-all lineup.",
              ],
              [
                "Communication",
                "Whether the provider is easy to reach when you need placement, repairs, moving help, or a change in product mix.",
              ],
            ].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">
              Why It Matters
            </p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
              Reviews are usually the last confidence check before someone reaches out.
            </h2>
            <p className="mt-3 text-base leading-relaxed text-muted-foreground">
              Most businesses are trying to verify the same things: follow-through,
              communication, and whether the machines stay stocked and working
              after install. If that sounds like your checklist too, we can help
              you sort through next steps quickly.
            </p>
          </div>
          <div className="mt-6 grid gap-4">
            <PublicInset className="p-5">
              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
                Common Questions
              </p>
              <ul className="mt-3 space-y-3 text-sm leading-relaxed text-muted-foreground">
                <li>Does this location qualify for free placement?</li>
                <li>Can Rocky handle repairs and restocking without extra staff work on our side?</li>
                <li>Should we ask about placement, machine sales, or direct service help?</li>
              </ul>
            </PublicInset>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
              <Link
                href="/#request-machine"
                className="rounded-[1.5rem] border border-border/55 bg-background/70 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">
                  See whether your business qualifies for vending machine
                  placement and ongoing service.
                </p>
              </Link>
              <Link
                href="/contact-us#contact-form"
                className="rounded-[1.5rem] border border-border/55 bg-background/70 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>
          </div>
          <div className="mt-6 rounded-[1.5rem] border border-primary/12 bg-[linear-gradient(180deg,rgba(41,160,71,0.06),rgba(255,255,255,0.7))] p-5">
            <p className="text-sm font-semibold text-foreground">
              Looking for a direct answer?
            </p>
            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
              Tell us about your location, traffic, and what kind of help you
              need. We&apos;ll point you toward the right option instead of
              making you guess between service pages.
            </p>
          </div>
        </PublicSurface>
      </section>
    </div>
  )
}