"use client"

import { useEffect } from "react"
import { Star } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { ReviewSchema } from "@/components/review-schema"
import { PublicPageHeader, PublicSurface } from "@/components/public-surface"

export function ReviewsSection() {
  useEffect(() => {
    // Load the review widget script
    const script = document.createElement("script")
    script.src = "https://reputationhub.site/reputation/assets/review-widget.js"
    script.type = "text/javascript"
    document.body.appendChild(script)

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

  // Review data based on website content (4.9 average, 50+ reviews)
  const aggregateRating = {
    ratingValue: 4.9,
    reviewCount: 50,
    bestRating: 5,
    worstRating: 1,
  }

  return (
    <>
      <ReviewSchema aggregateRating={aggregateRating} />
      <section className="py-16 md:py-24 bg-card/30">
        <div className="container mx-auto px-4">
          <PublicPageHeader
            align="center"
            eyebrow="Google Reviews"
            title="What Our Customers Say"
            description="See what Utah businesses have to say about Rocky Mountain Vending and the service they count on every day."
          >
            <div className="mt-4 flex justify-center">
              <Badge variant="secondary" className="rounded-full px-4 py-1.5 text-sm">
                <Star className="mr-2 h-4 w-4 fill-current text-primary" />
                {aggregateRating.ratingValue} / {aggregateRating.bestRating} ({aggregateRating.reviewCount}+ Reviews)
              </Badge>
            </div>
          </PublicPageHeader>

          <PublicSurface className="mx-auto mt-10 max-w-5xl overflow-hidden p-5 md:p-7">
            <iframe
              className="lc_reviews_widget min-h-[400px] 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="Customer Reviews"
            />
          </PublicSurface>
        </div>
      </section>
    </>
  )
}