"use client"

import { useEffect } from "react"
import { Package } from "lucide-react"

export function RequestMachineSection() {
  useEffect(() => {
    // Load the form embed script
    const script = document.createElement("script")
    script.src = "https://link.sluice-box.io/js/form_embed.js"
    document.body.appendChild(script)

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

  return (
    <section id="request-machine" className="py-16 md:py-24 bg-background">
      <div className="container mx-auto px-4">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-12">
            <div className="inline-flex items-center justify-center gap-2 mb-4">
              <Package className="h-6 w-6 text-secondary" />
              <h2 className="text-3xl md:text-4xl font-bold">Get Your FREE Vending Machine Consultation</h2>
            </div>
            <p className="text-lg text-muted-foreground">
              Fill out the form below and we'll call you within 24 hours to discuss your vending needs and schedule your free consultation
            </p>
          </div>

          <div className="bg-card border border-border rounded-lg p-6 md:p-8">
            <iframe
              src="https://link.sluice-box.io/widget/form/jco1Ws89cOAK7ztEDtp6"
              style={{ width: "100%", height: "450px", border: "none", borderRadius: "4px" }}
              id="inline-jco1Ws89cOAK7ztEDtp6"
              data-layout="{'id':'INLINE'}"
              data-trigger-type="alwaysShow"
              data-trigger-value=""
              data-activation-type="alwaysActivated"
              data-activation-value=""
              data-deactivation-type="neverDeactivate"
              data-deactivation-value=""
              data-form-name="Short Form"
              data-height="402"
              data-layout-iframe-id="inline-jco1Ws89cOAK7ztEDtp6"
              data-form-id="jco1Ws89cOAK7ztEDtp6"
              title="Request Free Vending Machine"
            />
          </div>
        </div>
      </div>
    </section>
  )
}