// contact.jsx - contact modal + résumé toast
const { useEffect: useEffectC } = React;

function ContactSheet({ open, onClose, onResume }) {
  useEffectC(() => {
    if (!open) return;
    const k = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [open]);
  if (!open) return null;
  const rows = [
    ['mail', 'Email', PROFILE.email, 'mailto:' + PROFILE.email],
    ['linkedin', 'LinkedIn', 'linkedin.com/in/samdoane', PROFILE.linkedin],
    ['github', 'GitHub', 'github.com/sjdoane', PROFILE.github],
  ];
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,0.42)',
      display: 'grid', placeItems: 'center', padding: 20, animation: 'sd-fade .2s ease' }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 18, padding: 'clamp(28px,4vw,40px)',
        width: 'min(480px, 94vw)', animation: 'sd-rise .3s cubic-bezier(.22,.61,.36,1)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <h3 className="t-display-md" style={{ color: 'var(--ink)', margin: 0 }}>Get in touch</h3>
            <p className="t-caption" style={{ color: 'var(--ink-muted-48)', margin: '6px 0 0' }}>The fastest ways to reach me.</p>
          </div>
          <button onClick={onClose} aria-label="Close" style={{ width: 36, height: 36, borderRadius: 9999,
            background: 'var(--canvas-parchment)', border: 0, cursor: 'pointer', display: 'grid', placeItems: 'center' }}>
            <Icon name="close" size={16} color="var(--ink)" /></button>
        </div>
        <div style={{ marginTop: 22 }}>
          {rows.map(([ic, label, val, url]) => (
            <a key={ic} href={url} target={ic === 'mail' ? undefined : '_blank'} rel="noreferrer"
              className="contact-row" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '15px 0',
                borderTop: '1px solid var(--divider-soft)', textDecoration: 'none' }}>
              <Icon name={ic} size={20} color="var(--ink-muted-48)" strokeWidth={1.8} />
              <div style={{ flex: 1 }}>
                <div className="t-caption" style={{ color: 'var(--ink-muted-48)' }}>{label}</div>
                <div className="t-body" style={{ color: 'var(--primary)' }}>{val}</div>
              </div>
              <Icon name="arrowUR" size={16} color="var(--ink-muted-48)" />
            </a>
          ))}
          <button onClick={() => { onClose(); onResume(); }} className="contact-row" style={{ width: '100%', textAlign: 'left',
            display: 'flex', alignItems: 'center', gap: 14, padding: '15px 0', borderTop: '1px solid var(--divider-soft)',
            background: 'none', border: 0, borderTop: '1px solid var(--divider-soft)', cursor: 'pointer', fontFamily: 'var(--font-text)' }}>
            <Icon name="doc" size={20} color="var(--ink-muted-48)" strokeWidth={1.8} />
            <div style={{ flex: 1 }}>
              <div className="t-caption" style={{ color: 'var(--ink-muted-48)' }}>Résumé</div>
              <div className="t-body" style={{ color: 'var(--ink)' }}>PDF, available on request</div>
            </div>
          </button>
        </div>
      </div>
    </div>
  );
}

function Toast({ msg, onDone }) {
  useEffectC(() => {
    if (!msg) return;
    const t = setTimeout(onDone, 3200);
    return () => clearTimeout(t);
  }, [msg]);
  if (!msg) return null;
  return (
    <div style={{ position: 'fixed', left: '50%', bottom: 28, transform: 'translateX(-50%)', zIndex: 210,
      background: 'var(--surface-tile-1)', color: '#fff', padding: '13px 20px', borderRadius: 9999,
      display: 'flex', alignItems: 'center', gap: 10, animation: 'sd-rise .3s cubic-bezier(.22,.61,.36,1)',
      boxShadow: 'var(--shadow-product)', maxWidth: '90vw' }}>
      <Icon name="doc" size={16} color="var(--primary-on-dark)" strokeWidth={1.8} />
      <span className="t-caption" style={{ color: '#fff' }}>{msg}</span>
    </div>
  );
}

Object.assign(window, { ContactSheet, Toast });