'use client'; import { useState, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import * as LucideIcons from 'lucide-react'; /** * Form field configuration */ interface FormField { id: string; name: string; label: string; type: 'text' | 'email' | 'phone' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'number' | 'date'; required?: boolean; placeholder?: string; options?: string[]; defaultValue?: string; layout?: { desktopWidth?: 'full' | 'half' | 'third' }; } interface HeaderIconConfig { name: string; position?: 'left' | 'top'; size?: number; color?: string; backgroundColor?: string; className?: string; } interface IntroBlockText { id: string; type: 'text'; text: string; style?: Record; } interface IntroBlockDisclaimer { id: string; type: 'disclaimer'; text: string; iconName?: string; iconColor?: string; backgroundColor?: string; borderColor?: string; style?: Record; } interface IntroBlockImage { id: string; type: 'image'; src: string; alt?: string; caption?: string; width?: string; height?: string; borderRadius?: string; } interface IntroBlockBanner { id: string; type: 'banner'; src: string; alt?: string; overlayText?: string; height?: string; borderRadius?: string; overlayColor?: string; textColor?: string; } type IntroBlock = IntroBlockText | IntroBlockDisclaimer | IntroBlockImage | IntroBlockBanner; interface ModalLayoutConfig { sizePreset?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'custom'; customMaxWidth?: string; padding?: string; fieldGap?: string; } /** * Form configuration passed to modal */ interface FormConfig { id: string; name: string; heading?: string; subheading?: string; headerIcon?: HeaderIconConfig; introBlocks?: IntroBlock[]; modalLayout?: ModalLayoutConfig; headingStyle?: Record; subheadingStyle?: Record; fields: FormField[]; submitButtonText?: string; successMessage?: string; /** Optional color overrides from user customization */ theme?: Record; } /** * Clean template expressions from form text (heading/subheading). * AI sometimes generates expressions like {content.cta?.headline || 'Fallback'} * which should display the fallback text, not the raw expression. */ function cleanFormText(text: string | undefined): string | undefined { if (!text) return text; const cleaned = text .replace(/\{(?:[^{}]|\{[^{}]*\})*\|\|\s*['"]([^'"]+)['"]\s*\}/g, '$1') .replace(/\{(?:[^{}]|\{[^{}]*\})*\}/g, '') .replace(/\{[^}]*\}/g, '') .replace(/\s+/g, ' ') .trim(); return cleaned || undefined; } /** * FormModal Props */ interface FormModalProps { /** Whether the modal is open */ isOpen: boolean; /** Callback when modal is closed */ onClose: () => void; /** Form configuration - if not provided, uses formId to look up from siteConfig */ formConfig?: FormConfig; /** Form ID for lookup (alternative to formConfig) */ formId?: string; /** All available forms (for formId lookup) */ modalForms?: FormConfig[]; /** Custom submission handler */ onSubmit?: (data: Record) => Promise; /** Site ID for default submission endpoint */ siteId?: string; } /** * Theme-aware modal form component * * Uses CSS variables from the site's theme for consistent styling: * - --color-surface, --color-background, --color-border * - --color-primary, --color-primary-hover * - --color-text, --color-text-muted, --color-text-inverse * - --border-radius, --border-radius-lg * - --shadow-lg */ export function FormModal({ isOpen, onClose, formConfig: propFormConfig, formId, modalForms = [], onSubmit, siteId, }: FormModalProps) { const [isSubmitting, setIsSubmitting] = useState(false); const [isSuccess, setIsSuccess] = useState(false); const [error, setError] = useState(null); const [downloadInfo, setDownloadInfo] = useState<{ url: string; name: string } | null>(null); const modalRef = useRef(null); // Get form config from props or lookup by ID. // Guard: modalForms should always be an array, but a defensive check prevents crashes // when a page file supplies a plain-object fallback (e.g. ?? {}) instead of an array. const safeForms = Array.isArray(modalForms) ? modalForms : []; const rawFormConfig = propFormConfig || safeForms.find(f => f.id === formId); // Defensive: AI sometimes generates steps: [{fields:[...]}] instead of flat fields:[...] const formConfig = rawFormConfig ? { ...rawFormConfig, fields: rawFormConfig.fields || (rawFormConfig as any).steps?.[0]?.fields || [], } : rawFormConfig; // Reset state when modal opens/closes or form changes useEffect(() => { if (isOpen) { setIsSubmitting(false); setIsSuccess(false); setError(null); setDownloadInfo(null); } }, [isOpen, formId]); // Resolve site CSS variables and apply to modal wrapper // This ensures form colors match the site even when CSS variable names differ useEffect(() => { if (!isOpen || !modalRef.current) return; const el = modalRef.current; const cs = getComputedStyle(document.documentElement); // Map of modal CSS var → alternative site CSS var names to try const varMap: [string, string[]][] = [ ['--color-text', ['--color-text', '--foreground', '--text-color', '--color-foreground']], ['--color-text-muted', ['--color-text-muted', '--muted-foreground', '--text-muted']], ['--color-surface', ['--color-surface', '--card', '--background', '--color-card', '--color-background']], ['--color-border', ['--color-border', '--border', '--border-color']], ['--color-primary', ['--color-primary', '--primary', '--accent', '--color-accent']], ]; for (const [target, sources] of varMap) { // Skip if already set by inline style (theme overrides / palette) if (el.style.getPropertyValue(target)) continue; for (const src of sources) { const v = cs.getPropertyValue(src).trim(); if (v) { el.style.setProperty(target, v); break; } } } }, [isOpen]); // Handle escape key useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape' && isOpen && !isSubmitting) { onClose(); } }; document.addEventListener('keydown', handleEscape); return () => document.removeEventListener('keydown', handleEscape); }, [isOpen, isSubmitting, onClose]); // Prevent body scroll when modal is open AND has a valid form to show. // Without the formConfig check, isOpen=true with no matching form locks // scroll (overflow:hidden) but renders nothing - page appears frozen. const shouldLockScroll = isOpen && !!formConfig; useEffect(() => { if (shouldLockScroll) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } return () => { document.body.style.overflow = ''; }; }, [shouldLockScroll]); // Listen for tracking.js custom events on the form element. // tracking.js intercepts data-rtb-form submissions in capture phase and handles // validation + CRM submission. For modal forms (data-form-type="modal"), it // dispatches 'rtb-form-success' / 'rtb-form-error' instead of replacing innerHTML, // so the React component can update its own state and show proper modal UX. useEffect(() => { if (!isOpen || !modalRef.current) return; const form = modalRef.current.querySelector('form'); if (!form) return; const onSuccess = (e: Event) => { setIsSubmitting(false); setIsSuccess(true); setError(null); // Capture download info if gated content is present if (e instanceof CustomEvent && e.detail?.download?.url) { setDownloadInfo(e.detail.download); } }; const onError = (e: Event) => { setIsSubmitting(false); setError((e as CustomEvent).detail?.message || 'Something went wrong. Please try again.'); }; const onSubmitStart = () => { setIsSubmitting(true); setError(null); }; form.addEventListener('rtb-form-success', onSuccess); form.addEventListener('rtb-form-error', onError); form.addEventListener('rtb-form-submitting', onSubmitStart); return () => { form.removeEventListener('rtb-form-success', onSuccess); form.removeEventListener('rtb-form-error', onError); form.removeEventListener('rtb-form-submitting', onSubmitStart); }; }, [isOpen]); if (!isOpen || !formConfig) return null; const resolveModalMaxWidth = () => { const layout = formConfig.modalLayout; // If an explicit preset is configured, use it if (layout?.sizePreset === 'custom' && layout?.customMaxWidth) return layout.customMaxWidth; if (layout?.sizePreset) { const presetMap: Record = { sm: '420px', md: '520px', lg: '680px', xl: '800px', '2xl': '960px', }; if (presetMap[layout.sizePreset]) return presetMap[layout.sizePreset]; } // Auto-detect: widen modal if fields use multi-column layouts const hasThird = (Array.isArray(formConfig?.fields) ? formConfig.fields : []).some((f: FormField) => f.layout?.desktopWidth === 'third'); const hasHalf = (Array.isArray(formConfig?.fields) ? formConfig.fields : []).some((f: FormField) => f.layout?.desktopWidth === 'half'); if (hasThird) return '680px'; // lg - 3-column needs room if (hasHalf) return '520px'; // md - 2-column needs room return '28rem'; }; const getFieldSpanClass = (field: FormField): string => { switch (field.layout?.desktopWidth) { case 'half': return 'col-span-12 md:col-span-6'; case 'third': return 'col-span-12 md:col-span-4'; default: return 'col-span-12'; } }; const renderHeaderIcon = () => { if (!formConfig.headerIcon?.name) return null; const iconMap = LucideIcons as unknown as Record>; const Icon = iconMap[formConfig.headerIcon.name] || iconMap.Sparkles; if (!Icon) return null; const iconSize = Number(formConfig.headerIcon.size) || 18; return (

); }; const renderIntroBlock = (block: IntroBlock) => { if (block.type === 'text') { return (

{block.text}

); } if (block.type === 'disclaimer') { const iconMap = LucideIcons as unknown as Record>; const Icon = iconMap[block.iconName || 'Shield'] || iconMap.Shield || iconMap.BadgeInfo; return (

{Icon ? (

) : null}

{block.text}

); } if (block.type === 'image') { return (

{block.src ? ( {block.alt

) : (

Image block

)} {block.caption && (

{block.caption}

)}

); } return (

{block.src ? ( {block.alt

) : (

Banner block

)} {block.overlayText && (

{block.overlayText}

)}

); }; // Build CSS variable overrides from theme customization const themeVars: Record = {}; if (formConfig.theme) { if (formConfig.theme.primary) { themeVars['--color-primary'] = formConfig.theme.primary; // Derive hover color by darkening ~15% const h = formConfig.theme.primary.replace('#', ''); const dr = Math.max(0, Math.round(parseInt(h.substring(0, 2), 16) * 0.85)); const dg = Math.max(0, Math.round(parseInt(h.substring(2, 4), 16) * 0.85)); const db = Math.max(0, Math.round(parseInt(h.substring(4, 6), 16) * 0.85)); themeVars['--color-primary-hover'] = `#${dr.toString(16).padStart(2,'0')}${dg.toString(16).padStart(2,'0')}${db.toString(16).padStart(2,'0')}`; // Derive button text color that contrasts with the primary color const r = parseInt(h.substring(0, 2), 16) / 255; const g = parseInt(h.substring(2, 4), 16) / 255; const b = parseInt(h.substring(4, 6), 16) / 255; const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; themeVars['--color-text-inverse'] = lum > 0.45 ? '#111827' : '#ffffff'; } if (formConfig.theme.surface) themeVars['--color-surface'] = formConfig.theme.surface; if (formConfig.theme.text) { themeVars['--color-text'] = formConfig.theme.text; // Derive muted text from overridden text color so subheadline/disclaimer follow const th = formConfig.theme.text.replace('#', ''); if (th.length === 6) { const blend = (c) => Math.round(c + (128 - c) * 0.4); const mr = blend(parseInt(th.substring(0, 2), 16)); const mg = blend(parseInt(th.substring(2, 4), 16)); const mb = blend(parseInt(th.substring(4, 6), 16)); themeVars['--color-text-muted'] = `#${mr.toString(16).padStart(2,'0')}${mg.toString(16).padStart(2,'0')}${mb.toString(16).padStart(2,'0')}`; } } if (formConfig.theme.border) themeVars['--color-border'] = formConfig.theme.border; if (formConfig.theme.inputBackground) themeVars['--color-background'] = formConfig.theme.inputBackground; if (formConfig.theme.borderRadius) { themeVars['--border-radius'] = formConfig.theme.borderRadius; themeVars['--border-radius-lg'] = formConfig.theme.borderRadius; } } // Palette defaults from site branding (CSS variable fallbacks) const paletteDefaults: Record = { '--color-primary': '#1A1918', '--color-text-inverse': '#ffffff', '--color-surface': '#F4F3EF', '--color-text': '#2C2B2A', '--color-border': '#2C2B2A', '--color-background': '#EAE8E2', }; // Merge palette defaults with theme overrides (overrides take precedence) const mergedVars = { ...paletteDefaults, ...themeVars }; const themeStyle = Object.keys(mergedVars).length > 0 ? mergedVars as unknown as React.CSSProperties : undefined; // Detect preview context via __MONDOVO_CONFIG__ (injected by previewHtmlGenerator and static-site-exporter) const isPreview = typeof window !== 'undefined' && !!(window as any).__MONDOVO_CONFIG__?.isPreview; const showTitleRowIcon = !!formConfig.headerIcon && !cleanFormText(formConfig.heading); const showBodyHeadingIcon = !!formConfig.headerIcon && !!cleanFormText(formConfig.heading); const topIntroBlocks = (Array.isArray(formConfig?.introBlocks) ? formConfig.introBlocks : []).filter(block => block.type !== 'disclaimer'); const footerDisclaimerBlocks = (Array.isArray(formConfig?.introBlocks) ? formConfig.introBlocks : []).filter(block => block.type === 'disclaimer'); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsSubmitting(true); setError(null); const formData = new FormData(e.currentTarget); const data: Record = {}; formData.forEach((value, key) => { data[key] = value.toString(); }); try { if (onSubmit) { // Use custom handler await onSubmit(data); } else if (siteId) { // POST to site's form submission endpoint (CRM integrated) // Use apiBaseUrl for static sites deployed to custom domains const apiBase = (typeof window !== 'undefined' && (window as any).__MONDOVO_CONFIG__?.apiBaseUrl) || ''; const response = await fetch(`${apiBase}/api/sites/${siteId}/form-submissions`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ blockSlug: formConfig.name || 'contact', blockType: 'form', form_name: formConfig.name, form_type: 'modal', form_id: formConfig.id, data: data, email: data.email || data.Email, name: data.name || data.Name || data.full_name || data.fullName, phone: data.phone || data.Phone || data.telephone, // Preview/test flag - skips CRM and marks as test data isTestSubmission: isPreview, // Tracking context pageUrl: typeof window !== 'undefined' ? window.location.href : undefined, referrer: typeof document !== 'undefined' ? document.referrer : undefined, }), }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(errorData.error || 'Submission failed'); } } else { console.warn('[FormModal] No siteId provided, submission not saved'); } setIsSuccess(true); } catch (err) { console.error('Form submission error:', err); setError('Something went wrong. Please try again.'); } finally { setIsSubmitting(false); } }; const renderField = (field: FormField) => { const baseInputClasses = ` w-full rounded-none outline-none transition-all disabled:opacity-50 disabled:cursor-not-allowed `.trim().replace(/\s+/g, ' '); // Inline style for ALL color/sizing - Tailwind arbitrary-value classes with CSS vars don't compile in preview const baseInputStyle: React.CSSProperties = { width: '100%', padding: '0.625rem 0.875rem', fontSize: '0.875rem', backgroundColor: `var(--color-background, #EAE8E2)`, color: `var(--color-text, #2C2B2A)`, borderWidth: '1px', borderStyle: 'solid', borderColor: `var(--color-border, #2C2B2A)`, }; switch (field.type) { case 'textarea': return (

);

case 'select':
        return (
          <select
            name={field.name}
            required={field.required}
            defaultValue={field.defaultValue || ''}
            disabled={isSubmitting}
            className={baseInputClasses}
            style={baseInputStyle}
          >
            <option value="">{field.placeholder || 'Select...'}</option>
            {field.options?.map((opt) => (
              <option key={opt} value={opt}>{opt}</option>
            ))}
          </select>
        );

case 'checkbox':
        return (
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <input
              type="checkbox"
              name={field.name}
              required={field.required}
              defaultChecked={field.defaultValue === 'true'}
              disabled={isSubmitting}
              style={{ width: '1rem', height: '1rem', accentColor: `var(--color-primary, #1A1918)` }}
            />
            <span style={{ fontSize: '0.875rem', color: `var(--color-text, #2C2B2A)` }}>{field.placeholder}</span>
          </div>
        );

default:
        return (
          <input
            type={field.type}
            name={field.name}
            required={field.required}
            placeholder={field.placeholder}
            defaultValue={field.defaultValue}
            disabled={isSubmitting}
            className={baseInputClasses}
            style={baseInputStyle}
          />
        );
    }
  };

return createPortal(
    <div ref={modalRef} className="fixed inset-0 z-50 overflow-y-auto" data-form-modal-overlay="" style={themeStyle}>
      {/* Backdrop - uses fixed positioning so it covers viewport while parent scrolls */}
      <div
        className={`fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity`}
        style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)', backdropFilter: 'blur(4px)' }}
        onClick={!isSubmitting ? onClose : undefined}
        aria-hidden="true"
      />

{/* Scroll container with flex centering - min-h-full ensures centering when modal is short */}
      <div className="flex min-h-full items-center justify-center p-4">
      {/* Modal - inline style ensures solid background even when CSS vars fail */}
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
        style={{
          backgroundColor: 'var(--color-surface, #F4F3EF)',
          maxWidth: resolveModalMaxWidth(),
          padding: formConfig.modalLayout?.padding || '1.25rem',
          borderWidth: '1px',
          borderStyle: 'solid',
          borderColor: 'var(--color-border, #2C2B2A)',
          color: 'var(--color-text, #2C2B2A)',
        }}
        className={`
          relative w-full
          rounded-none
          shadow-lg
          animate-in fade-in zoom-in-95 duration-200
          
        `.trim().replace(/\s+/g, ' ')}
      >
        {/* Close button */}
        <button
          type="button"
          onClick={onClose}
          disabled={isSubmitting}
          style={{ color: 'var(--color-text-muted, #4e4d4c)' }}
          className="absolute top-4 end-4 p-1 hover:opacity-80 transition-opacity disabled:opacity-50"
          aria-label="Close modal"
        >
          <LucideIcons.X className="w-5 h-5" />
        </button>

{isSuccess ? (
          /* Success State */
          <div style={{ textAlign: 'center', padding: '2rem 0' }}>
            <div style={{ width: '4rem', height: '4rem', margin: '0 auto 1rem', backgroundColor: 'rgba(34,197,94,0.1)', borderRadius: '9999px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <LucideIcons.CircleCheckBig style={{ width: '2rem', height: '2rem', color: '#22c55e' }} />
            </div>
            <h3 style={{ fontSize: '1.125rem', fontWeight: 600, color: 'var(--color-text, #2C2B2A)' }}>
              {formConfig.successMessage || 'Thank you!'}
            </h3>
            <p style={{ fontSize: '0.875rem', color: 'var(--color-text-muted, #4e4d4c)', marginTop: '0.5rem' }}>
              We'll be in touch soon.
            </p>
            {downloadInfo && (
              <a
                href={downloadInfo.url}
                download={downloadInfo.name}
                target="_blank"
                rel="noopener noreferrer"
                style={{ display: 'inline-block', marginTop: '1rem', padding: '0.75rem 1.5rem', backgroundColor: 'var(--color-primary, #1A1918)', color: '#fff', textDecoration: 'none', borderRadius: '0.5rem', fontWeight: 600, fontSize: '0.875rem' }}
              >
                Download {downloadInfo.name}
              </a>
            )}
            {isPreview && (
              <div style={{ marginTop: '0.75rem', marginLeft: 'auto', marginRight: 'auto', maxWidth: '20rem', padding: '0.375rem 0.75rem', backgroundColor: '#fffbeb', border: '1px solid #fde68a', borderRadius: '0.375rem', fontSize: '0.75rem', color: '#b45309' }}>
                This was a test submission
              </div>
            )}
            <button
              onClick={onClose}
              style={{ marginTop: '1.5rem', padding: '0.5rem 1.5rem', fontSize: '0.875rem', color: 'var(--color-text-muted, #4e4d4c)', backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
            >
              Close
            </button>
          </div>
        ) : (
          /* Form State */
          <>
            <div className="flex items-center gap-2 mb-4 pe-8 min-w-0">
              {showTitleRowIcon ? renderHeaderIcon() : null}
              <h2
                id="modal-title"
                style={{ color: 'var(--color-text, #2C2B2A)', fontSize: '1.25rem', fontWeight: 600, margin: 0, minWidth: 0 }}
              >
                {formConfig.name}
              </h2>
            </div>

{(cleanFormText(formConfig.heading) || cleanFormText(formConfig.subheading)) && (
              <div className="mb-4">
                <div className="min-w-0">
                  {cleanFormText(formConfig.heading) && (
                    <div
                      className="flex gap-2.5"
                      style={{
                        flexDirection: formConfig.headerIcon?.position === 'top' ? 'column' : 'row',
                        alignItems: 'flex-start',
                      }}
                    >
                      {showBodyHeadingIcon ? renderHeaderIcon() : null}
                      <div className="min-w-0">
                      <div
                        style={{
                          color: formConfig.headingStyle?.color || 'var(--color-text, #2C2B2A)',
                          fontSize: formConfig.headingStyle?.fontSize || '1.125rem',
                          fontWeight: formConfig.headingStyle?.fontWeight || '600',
                          textAlign: formConfig.headingStyle?.textAlign as any,
                          lineHeight: formConfig.headingStyle?.lineHeight || '1.4',
                          letterSpacing: formConfig.headingStyle?.letterSpacing,
                        }}
                        className={formConfig.headingStyle?.className}
                      >
                        {cleanFormText(formConfig.heading)}
                      </div>
                      </div>
                    </div>
                  )}
                  {cleanFormText(formConfig.subheading) && (
                    <p
                      style={{
                        marginTop: cleanFormText(formConfig.heading) ? '0.375rem' : undefined,
                        color: formConfig.subheadingStyle?.color || 'var(--color-text-muted, #4e4d4c)',
                        fontSize: formConfig.subheadingStyle?.fontSize || '0.875rem',
                        fontWeight: formConfig.subheadingStyle?.fontWeight,
                        textAlign: formConfig.subheadingStyle?.textAlign as any,
                        lineHeight: formConfig.subheadingStyle?.lineHeight || '1.5',
                        letterSpacing: formConfig.subheadingStyle?.letterSpacing,
                      }}
                      className={formConfig.subheadingStyle?.className}
                    >
                      {cleanFormText(formConfig.subheading)}
                    </p>
                  )}
                </div>
              </div>
            )}

{error && (
              <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-300 text-sm">
                {error}
              </div>
            )}

<form onSubmit={handleSubmit} noValidate data-rtb-form data-form-name={formConfig.name || 'Contact Form'} data-form-type="modal" data-success-message={formConfig.successMessage || "Thank you! We'll be in touch soon."} className="space-y-0">
              {/* Honeypot - invisible to users, bots fill it */}
              <input type="text" name="_honey" className="hidden" tabIndex={-1} autoComplete="off" aria-hidden="true" />
              {topIntroBlocks.length > 0 && (
                <div className="grid gap-3 mb-4">
                  {topIntroBlocks.map(renderIntroBlock)}
                </div>
              )}

<div
                className="grid grid-cols-12 gap-x-3"
                style={{ rowGap: formConfig.modalLayout?.fieldGap || '0.75rem' }}
              >
                {(Array.isArray(formConfig?.fields) ? formConfig.fields : []).map((field) => (
                  <div
                    key={field.id}
                    className={getFieldSpanClass(field)}
                  >
                  {field.type !== 'checkbox' && (
                    <label
                      htmlFor={field.name}
                      style={{ display: 'block', fontSize: '0.875rem', fontWeight: 500, color: 'var(--color-text, #2C2B2A)', marginBottom: '0.375rem' }}
                    >
                      {field.label}
                      {field.required && (
                        <span style={{ color: '#ef4444', marginLeft: '0.25rem' }}>*</span>
                      )}
                    </label>
                  )}
                  {renderField(field)}
                  </div>
                ))}
              </div>

<button
                type="submit"
                disabled={isSubmitting}
                style={{
                  width: '100%',
                  padding: '0.75rem 1rem',
                  backgroundColor: 'var(--color-primary, #1A1918)',
                  color: 'var(--color-text-inverse, #ffffff)',
                  border: 'none',
                  fontSize: '0.9375rem',
                  fontWeight: 600,
                  cursor: isSubmitting ? 'not-allowed' : 'pointer',
                  marginTop: '0.75rem',
                  opacity: isSubmitting ? 0.5 : 1,
                  transition: 'filter 0.15s ease',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: '0.5rem',
                }}
                className={`rounded-none `.trim()}
                onMouseEnter={(e) => { if (!isSubmitting) e.currentTarget.style.filter = 'brightness(0.85)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.filter = ''; }}
              >
                {isSubmitting ? (
                  <>
                    <LucideIcons.Loader2 className="w-4 h-4 animate-spin" />
                    Sending...
                  </>
                ) : (
                  formConfig.submitButtonText || 'Submit'
                )}
              </button>
              {footerDisclaimerBlocks.length > 0 && (
                <div style={{ display: 'grid', gap: '0.5rem', marginTop: '0.75rem' }}>
                  {footerDisclaimerBlocks.map(renderIntroBlock)}
                </div>
              )}
            </form>
          </>
        )}
      </div>
      </div>
    </div>,
    document.body
  );
}

export default FormModal;
</article></body></html>