"use client"

import { useEffect } from "react"
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)
    }
  }, [])

  return (
    <section className="py-16 md:py-24 bg-card/30">
      <div className="container mx-auto px-4">
        <PublicPageHeader
          align="center"
          eyebrow="Customer Feedback"
          title="See what businesses say about Rocky Mountain Vending"
          description="Browse the live review feed from businesses that use Rocky Mountain Vending for placement, restocking, repairs, and day-to-day service."
        />

        <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>
  )
}