fix: replace header GHL machine modal

components/get-free-machine-modal.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useEffect } from "react"
 import {
   Dialog,
   DialogContent,
@@ -8,6 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog"
+import { RequestMachineForm } from "@/components/forms/request-machine-form"
 
 interface GetFreeMachineModalProps {
   open: boolean
@@ -15,54 +15,23 @@ interface GetFreeMachineModalProps {
 }
 
 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
+      <DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto rounded-[2rem] border border-border/70 bg-background p-0 shadow-[0_24px_80px_rgba(0,0,0,0.18)]">
+        <DialogHeader className="border-b border-border/60 px-6 pb-4 pt-6 text-left sm:px-8">
+          <DialogTitle className="text-2xl font-semibold tracking-tight text-foreground md:text-3xl">
+            Request a 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 className="pt-2 text-sm leading-relaxed text-muted-foreground">
+            Tell us about your location and we&apos;ll review the best machine mix for the space. This is the same
+            Rocky intake form used on the site, not an external embed.
           </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 className="px-4 pb-4 pt-5 sm:px-6 sm:pb-6 md:px-8">
+          <RequestMachineForm onSubmit={() => onOpenChange(false)} />
         </div>
       </DialogContent>
     </Dialog>
   )
 }
-