"use client"

import { useEffect } from "react"
import { Star } from "lucide-react"
import { ReviewSchema } from "@/components/review-schema"

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">
          <div className="text-center mb-12">
            <div className="inline-flex items-center justify-center gap-2 mb-4">
              <Star className="h-6 w-6 text-secondary fill-secondary" />
              <h2 className="text-3xl md:text-4xl font-bold">What Our Customers Say</h2>
            </div>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Don't just take our word for it—see what Utah businesses have to say about our service
            </p>
          </div>

          <div className="max-w-5xl mx-auto">
            <iframe
              className="lc_reviews_widget"
              src="https://reputationhub.site/reputation/widgets/review_widget/YAoWLgNSid8oG44j9BjG"
              frameBorder="0"
              scrolling="no"
              style={{ minWidth: "100%", width: "100%", minHeight: "400px" }}
              title="Customer Reviews"
            />
          </div>
        </div>
      </section>
    </>
  )
}