/* ContactRedirectModal — confirmation overlay that explains the user is
   about to leave for dvz-survey.hsbi.de (the university's secure survey
   tool) before opening a new tab.

   Exposes window.requestContactRedirect() so any "Kontaktdaten senden"
   button across the site can trigger it without prop drilling. */

const CONTACT_REDIRECT_URL = 'https://dvz-survey.hsbi.de/index.php/895629?lang=de';

const ContactRedirectModal = () => {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    window.requestContactRedirect = () => setOpen(true);
    return () => { delete window.requestContactRedirect; };
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);

  const confirm = () => {
    window.open(CONTACT_REDIRECT_URL, '_blank', 'noopener,noreferrer');
    setOpen(false);
  };

  if (!open) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="contact-redirect-title"
      onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(0, 28, 42, 0.62)',
        backdropFilter: 'blur(4px)',
        WebkitBackdropFilter: 'blur(4px)',
        display: 'grid', placeItems: 'center',
        padding: 24,
        animation: 'contactModalFade 200ms cubic-bezier(.2,.7,.2,1)',
      }}
    >
      <style>{`
        @keyframes contactModalFade {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        @keyframes contactModalRise {
          from { opacity: 0; transform: translateY(12px) scale(0.98); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>

      <div style={{
        background: '#fff',
        borderRadius: 26,
        padding: 0,
        width: '100%', maxWidth: 560,
        boxShadow: '0 30px 60px rgba(0, 28, 42, 0.45), 0 6px 12px rgba(0,28,42,0.18)',
        animation: 'contactModalRise 260ms cubic-bezier(.2,.7,.2,1)',
        position: 'relative',
        overflow: 'hidden',
      }}>
        {/* close (×) */}
        <button
          onClick={() => setOpen(false)}
          aria-label="Schließen"
          style={{
            position: 'absolute', top: 14, right: 14,
            width: 36, height: 36, borderRadius: 999,
            border: 'none', background: 'transparent',
            color: 'var(--fg-3)', fontSize: 22, lineHeight: 1,
            cursor: 'pointer',
            display: 'grid', placeItems: 'center',
          }}
        >×</button>

        <div style={{ padding: '32px 36px 0' }}>
          <IconCircle color="cyan" size={48} style={{ marginBottom: 18 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" strokeWidth="1.8"
                 strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect x="4" y="10.5" width="16" height="10" rx="2"/>
              <path d="M7.5 10.5V7a4.5 4.5 0 0 1 9 0v3.5"/>
            </svg>
          </IconCircle>
          <SectionEyebrow tone="cyan">Sichere Übermittlung</SectionEyebrow>
          <h2 id="contact-redirect-title" style={{
            margin: '10px 0 12px',
            fontSize: 28, fontWeight: 800, letterSpacing: '-0.012em',
            lineHeight: 1.15, color: 'var(--fg-1)', textWrap: 'balance',
          }}>
            Sie wechseln gleich auf eine externe Seite.
          </h2>
          <p style={{
            margin: 0, fontSize: 16, lineHeight: 1.65,
            color: 'var(--fg-2)', textWrap: 'pretty',
          }}>
            Die Übermittlung Ihrer Kontaktdaten erfolgt auf einer extra Seite über
            den Dienst{' '}
            <strong style={{
              color: 'var(--fg-1)',
              fontFamily: 'var(--font-mono)',
              fontSize: 15,
              background: 'var(--cream)',
              padding: '2px 7px', borderRadius: 6,
              border: '1px solid var(--border-soft)',
              whiteSpace: 'nowrap',
            }}>dvz-survey.hsbi.de</strong>{' '}
            der Hochschule Bielefeld, damit Ihre Daten sicher übermittelt und
            gespeichert werden.
          </p>

          <div style={{
            marginTop: 18,
            display: 'flex', flexDirection: 'column', gap: 10,
            background: 'var(--cream)',
            border: '1px solid var(--border-soft)',
            borderRadius: 14, padding: '14px 16px',
          }}>
            <ReassureLine>Die neue Seite öffnet sich in einem neuen Tab.</ReassureLine>
            <ReassureLine>Verschlüsselte Übertragung über die Hochschul-Infrastruktur.</ReassureLine>
            <ReassureLine>Die Übermittlung der Kontaktdaten ist noch keine Studienteilnahme.</ReassureLine>
          </div>
        </div>

        <div style={{
          display: 'flex', justifyContent: 'flex-end', gap: 12,
          padding: '22px 36px 28px',
          flexWrap: 'wrap',
        }}>
          <Button variant="secondary" onClick={() => setOpen(false)}>Abbrechen</Button>
          <Button variant="primary" icon="arrow" onClick={confirm}>Weiter zu dvz-survey.hsbi.de</Button>
        </div>
      </div>
    </div>
  );
};

const ReassureLine = ({ children }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10, alignItems: 'flex-start', fontSize: 14, lineHeight: 1.5, color: 'var(--fg-2)' }}>
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
         stroke="var(--brand-cyan-400)" strokeWidth="2.2"
         strokeLinecap="round" strokeLinejoin="round" style={{ marginTop: 2 }} aria-hidden="true">
      <path d="M5 12.5 10 17.5 19 7"/>
    </svg>
    <span>{children}</span>
  </div>
);

Object.assign(window, { ContactRedirectModal });