/* Subscribe Modal with Beehiiv embed */

const { useEffect, useRef } = React;

function SubscribeModal({ isOpen, onClose }) {
  const formRef = useRef(null);

  useEffect(() => {
    if (!isOpen || !formRef.current) return;
    const container = formRef.current;
    while (container.firstChild) container.removeChild(container.firstChild);
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://subscribe-forms.beehiiv.com/v3/loader.js';
    script.setAttribute('data-beehiiv-form', '3ef4860b-7e52-4a97-acbd-1ece5b40b800');
    container.appendChild(script);

    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onEsc);
    document.body.style.overflow = 'hidden';

    return () => {
      document.removeEventListener('keydown', onEsc);
      document.body.style.overflow = '';
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Schließen">×</button>
        <div className="modal-header">
          <div className="modal-kicker">Newsletter abonnieren</div>
          <h3 className="modal-title">Donnerstags um sieben.</h3>
          <p className="modal-sub">Tragen Sie unten Ihre Email ein.</p>
        </div>
        <div className="modal-form-host" ref={formRef} />
      </div>
    </div>
  );
}