/* Alchemy — LeadConnector (GoHighLevel) embedded form.
   Renders the real hosted form in an iframe and loads the resizer script once. */
const FORMS = {
  contact: { id: '47UuowlKx3U66ePlKo3j', name: 'Main Contact Form', height: 1446 },
  intake:  { id: 'YbilXkjoGy34TjPmOhOk', name: 'Intake Form',       height: 1906 },
};

function FormEmbed({ form = 'contact' }) {
  const f = FORMS[form] || FORMS.contact;
  React.useEffect(() => {
    const src = 'https://link.msgsndr.com/js/form_embed.js';
    if (!document.querySelector('script[src="' + src + '"]')) {
      const s = document.createElement('script');
      s.src = src; s.async = true;
      document.body.appendChild(s);
    }
  }, []);
  return (
    <div style={{ position: 'relative', width: '100%', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', overflow: 'hidden' }}>
      {/* fallback behind the iframe */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, textAlign: 'center', color: 'var(--text-muted)', padding: 24 }}>
        <span style={{ fontFamily: 'var(--font-label)', fontSize: '0.78rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Loading form…</span>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.9rem', maxWidth: 300 }}>If the form doesn't appear, this preview may be offline. It loads live once published.</span>
      </div>
      <iframe
        src={'https://api.leadconnectorhq.com/widget/form/' + f.id}
        title={f.name}
        id={'inline-' + f.id}
        data-layout="{'id':'INLINE'}"
        data-trigger-type="alwaysShow"
        data-activation-type="alwaysActivated"
        data-deactivation-type="neverDeactivate"
        data-form-name={f.name}
        data-height={f.height}
        data-layout-iframe-id={'inline-' + f.id}
        data-form-id={f.id}
        style={{ position: 'relative', zIndex: 1, display: 'block', width: '100%', height: f.height, border: 'none', borderRadius: 0 }}
      ></iframe>
    </div>
  );
}

window.FormEmbed = FormEmbed;