/* global React */

const HUBSPOT_PORTAL_ID = '26870220';
const HUBSPOT_FORM_ID = '383a66da-e527-4163-bbeb-e1c21573eee4';
const HUBSPOT_REGION = 'eu1';
const HUBSPOT_FORMS_SCRIPT = '//js-eu1.hsforms.net/forms/embed/v2.js';

let hbsptScriptPromise = null;
const loadHbsptScript = () => {
  if (hbsptScriptPromise) return hbsptScriptPromise;
  hbsptScriptPromise = new Promise((resolve, reject) => {
    if (window.hbspt) return resolve();
    const s = document.createElement('script');
    s.src = HUBSPOT_FORMS_SCRIPT;
    s.charset = 'utf-8';
    s.async = true;
    s.onload = () => resolve();
    s.onerror = reject;
    document.head.appendChild(s);
  });
  return hbsptScriptPromise;
};

const DemoModal = () => {
  const [open, setOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(true);
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    const handler = () => { setOpen(true); setLoading(true); };
    window.addEventListener('virage:open-demo', handler);
    return () => window.removeEventListener('virage:open-demo', handler);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    let cancelled = false;
    loadHbsptScript().then(() => {
      if (cancelled || !containerRef.current) return;
      containerRef.current.innerHTML = '';
      window.hbspt.forms.create({
        portalId: HUBSPOT_PORTAL_ID,
        formId: HUBSPOT_FORM_ID,
        region: HUBSPOT_REGION,
        target: '#virage-hubspot-form',
        onFormReady: () => { if (!cancelled) setLoading(false); },
      });
    }).catch(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [open]);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const handler = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [open]);

  if (!open) return null;

  return (
    <div onClick={() => setOpen(false)} className="virage-modal-overlay" style={{
      position: 'fixed', inset: 0, zIndex: 1000,
      background: 'rgba(15, 51, 41, 0.55)',
      backdropFilter: 'blur(6px)',
      WebkitBackdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20,
      animation: 'virage-fade-in 220ms ease-out',
    }}>
      <div onClick={(e) => e.stopPropagation()} className="virage-modal-card" style={{
        position: 'relative',
        background: 'var(--blanc, #fff)',
        borderRadius: 24,
        padding: 'clamp(32px, 5vw, 48px)',
        maxWidth: 580,
        width: '100%',
        maxHeight: '92vh',
        overflowY: 'auto',
        boxShadow: '0 40px 80px -20px rgba(15, 51, 41, 0.45)',
        animation: 'virage-scale-in 260ms cubic-bezier(0.16, 1, 0.3, 1)',
      }}>
        <button onClick={() => setOpen(false)} aria-label="Fermer" style={{
          position: 'absolute', top: 16, right: 16,
          width: 36, height: 36, borderRadius: 999,
          background: 'rgba(15, 51, 41, 0.06)',
          border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'background 150ms ease',
        }}
        onMouseOver={(e) => e.currentTarget.style.background = 'rgba(15, 51, 41, 0.12)'}
        onMouseOut={(e) => e.currentTarget.style.background = 'rgba(15, 51, 41, 0.06)'}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 2L12 12M12 2L2 12" stroke="var(--vert-sapin, #0F3329)" strokeWidth="2" strokeLinecap="round"/>
          </svg>
        </button>

        <div style={{ marginBottom: 28 }}>
          <span className="t-eyebrow">Demande de démo</span>
          <h2 className="t-h1" style={{ fontSize: 'clamp(24px, 3.5vw, 32px)', marginTop: 12, marginBottom: 12, lineHeight: 1.15 }}>
            Parlons de votre virage <span className="italic-accent">IA.</span>
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--texte-mute, #6b7368)', margin: 0 }}>
            On revient vers vous au plus vite.
          </p>
        </div>

        {loading && (
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: '60px 0', color: 'var(--texte-mute, #6b7368)', fontSize: 14,
          }}>
            Chargement du formulaire…
          </div>
        )}
        <div id="virage-hubspot-form" ref={containerRef} style={{ display: loading ? 'none' : 'block' }} />
      </div>

      <style>{`
        @keyframes virage-fade-in {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes virage-scale-in {
          from { opacity: 0; transform: translateY(12px) scale(0.97); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .virage-modal-card .hs-form { font-family: inherit; }
        .virage-modal-card .hs-form-field { margin-bottom: 16px; }
        .virage-modal-card .hs-form-field label {
          display: block;
          font-size: 13px;
          font-weight: 500;
          color: var(--texte, #1a1a1a);
          margin-bottom: 6px;
        }
        .virage-modal-card .hs-form-field .hs-field-desc { font-size: 12px; color: var(--texte-mute, #6b7368); margin-bottom: 6px; }
        .virage-modal-card .hs-form-field input[type="text"],
        .virage-modal-card .hs-form-field input[type="email"],
        .virage-modal-card .hs-form-field input[type="tel"],
        .virage-modal-card .hs-form-field select,
        .virage-modal-card .hs-form-field textarea {
          width: 100%;
          padding: 12px 14px;
          font-size: 15px;
          font-family: inherit;
          background: var(--creme, #fafaf7);
          border: 1.5px solid var(--hairline, rgba(15,51,41,0.1));
          border-radius: 12px;
          color: var(--texte, #1a1a1a);
          transition: border-color 150ms ease, background 150ms ease;
          box-sizing: border-box;
        }
        .virage-modal-card .hs-form-field input:focus,
        .virage-modal-card .hs-form-field select:focus,
        .virage-modal-card .hs-form-field textarea:focus {
          outline: none;
          border-color: var(--vert-sapin, #0F3329);
          background: var(--blanc, #fff);
        }
        .virage-modal-card .hs-form-field textarea { min-height: 96px; resize: vertical; }
        .virage-modal-card .hs-form-required { color: #d04a3a; margin-left: 2px; }
        .virage-modal-card .hs-error-msgs { list-style: none; padding: 0; margin: 6px 0 0; }
        .virage-modal-card .hs-error-msg, .virage-modal-card .hs-error-msgs label { color: #d04a3a; font-size: 12px; }
        .virage-modal-card .hs-button, .virage-modal-card .hs-submit input[type="submit"] {
          width: 100%;
          padding: 14px 24px;
          background: var(--vert-sapin, #0F3329);
          color: #fff;
          border: none;
          border-radius: 999px;
          font-size: 15px;
          font-weight: 600;
          font-family: inherit;
          cursor: pointer;
          margin-top: 8px;
          transition: transform 150ms ease, box-shadow 150ms ease;
        }
        .virage-modal-card .hs-button:hover, .virage-modal-card .hs-submit input[type="submit"]:hover {
          transform: translateY(-1px);
          box-shadow: 0 12px 24px -8px rgba(15, 51, 41, 0.4);
        }
        .virage-modal-card .submitted-message {
          padding: 24px;
          background: var(--vert-menthe-soft, rgba(15, 51, 41, 0.05));
          border-radius: 12px;
          font-size: 15px;
          color: var(--vert-sapin, #0F3329);
          text-align: center;
        }
        .virage-modal-card .legal-consent-container { font-size: 12px; color: var(--texte-mute, #6b7368); margin-top: 8px; }
      `}</style>
    </div>
  );
};

window.openVirageDemo = () => window.dispatchEvent(new CustomEvent('virage:open-demo'));