"use client"

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

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="Browse the live Google review feed and see what Utah businesses say about placement, restocking, repairs, and service."
      />

      <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">
            <iframe
              className="lc_reviews_widget min-h-[780px] 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.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>
            <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 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>
  )
}