/* global React */
// Trakkables.com — Terms & Conditions modal. Text comes from content/terms.md (edited at /admin).

function MktTermsModal({ open, onClose }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    if (window.lucide) window.lucide.createIcons();
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [open, onClose]);
  if (!open) return null;
  const teal = '#2FA89A';
  const terms = tkContent().terms;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(12,16,20,0.68)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '48px 20px', overflowY: 'auto' }}>
      <style>{`
        .tk-terms-body { font-size: 14.5px; line-height: 1.72; color: #3D434B; }
        .tk-terms-body h3 { font-family: 'Saira Semi Condensed',sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.01em; color: #161616; margin: 34px 0 6px; padding-top: 20px; border-top: 1px solid #EEF0F2; }
        .tk-terms-body h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
        .tk-terms-body h4 { font-family: 'Saira Semi Condensed',sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: 0.01em; color: #262A30; margin: 22px 0 4px; }
        .tk-terms-body p { margin: 12px 0; }
        .tk-terms-body ul { margin: 10px 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
        .tk-terms-body li { position: relative; padding-left: 20px; }
        .tk-terms-body li::before { content: '▸'; position: absolute; left: 0; top: 0; color: ${teal}; }
        .tk-terms-body a { color: ${teal}; text-decoration: none; font-weight: 600; }
        .tk-terms-body a:hover { text-decoration: underline; }
        .tk-terms-body .tk-sub { display: flex; gap: 13px; margin: 11px 0; align-items: baseline; }
        .tk-terms-body .tk-sub-n { flex: none; font-family: 'Saira Semi Condensed',sans-serif; font-weight: 700; font-size: 14.5px; color: ${teal}; min-width: 40px; }
        .tk-terms-body .tk-sub-t { flex: 1; }
        .tk-terms-body .tk-sub2 { margin-left: 18px; }
        .tk-terms-body .tk-sub2 .tk-sub-n { min-width: 48px; font-weight: 600; }
      `}</style>
      <div onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Terms and Conditions" style={{ position: 'relative', width: '100%', maxWidth: 760, background: '#fff', color: '#161616', borderRadius: 18, boxShadow: '0 30px 80px rgba(0,0,0,0.4)', padding: '46px 52px 40px' }}>
        <button onClick={onClose} aria-label="Close" style={{ position: 'absolute', top: 18, right: 18, width: 36, height: 36, borderRadius: 10, border: '1px solid #E1E4E8', background: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4a5158', zIndex: 2 }}><MktIcon name="x" size={18} /></button>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: "'JetBrains Mono',ui-monospace,monospace", fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: teal, marginBottom: 16 }}>
          <span style={{ width: 26, height: 2, background: teal, display: 'inline-block' }} />Terms &amp; Conditions
        </div>
        <h2 style={{ fontFamily: "'Saira Semi Condensed',sans-serif", fontWeight: 800, fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.01em', margin: '0 0 8px' }}>Terms and Conditions of Service</h2>
        <p style={{ fontFamily: "'JetBrains Mono',ui-monospace,monospace", fontSize: 12, color: '#79828D', margin: '0 0 26px', lineHeight: 1.6 }}>{`Effective Date: ${terms.effectiveDate}  |   Governing Jurisdiction: ${terms.jurisdiction}`}</p>
        <div className="tk-terms-body" dangerouslySetInnerHTML={{ __html: tkTermsHtml(terms.body) }} />
      </div>
    </div>
  );
}
window.MktTermsModal = MktTermsModal;