'use client'

import { useEffect } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

interface GetFreeMachineModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function GetFreeMachineModal({ open, onOpenChange }: GetFreeMachineModalProps) {
  useEffect(() => {
    if (open) {
      // Load the form embed script when modal opens
      const script = document.createElement("script")
      script.src = "https://link.sluice-box.io/js/form_embed.js"
      script.async = true
      document.body.appendChild(script)

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

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-2xl md:text-3xl font-bold text-center">
            Get Your Free Vending Machine
          </DialogTitle>
          <DialogDescription className="text-center pt-2">
            Fill out the form below and we'll contact you within 24 hours to discuss your needs.
          </DialogDescription>
        </DialogHeader>
        <div className="mt-4 w-full h-[738px]">
          <iframe
            src="https://link.sluice-box.io/widget/form/zQqWU1J1XcUxjAotZQlk"
            className="w-full h-full border-0 rounded"
            id="inline-zQqWU1J1XcUxjAotZQlk"
            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="Contact From Long"
            data-height="738"
            data-layout-iframe-id="inline-zQqWU1J1XcUxjAotZQlk"
            data-form-id="zQqWU1J1XcUxjAotZQlk"
            title="Contact From Long"
          />
        </div>
      </DialogContent>
    </Dialog>
  )
}