/* global React */
const { useState: useStateModal, useEffect: useEffectModal } = React;

function ContactModal({ open, onClose }) {
  const [submitted, setSubmitted] = useStateModal(false);

  useEffectModal(() => {
    if (!open) return;
    const onKey = (e) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [open, onClose]);

  useEffectModal(() => { if (!open) setSubmitted(false); }, [open]);

  if (!open) return null;

  const head = {
    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
    paddingBottom: '24px', borderBottom: '1px solid var(--border)', marginBottom: '24px',
  };
  const eye = {
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-600)',
  };
  const title = { fontSize: '28px', fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink)', margin: '6px 0 0', lineHeight: 1.1 };
  const close = {
    background: 'transparent', border: 'none', cursor: 'pointer',
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-600)',
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        {!submitted ? (
          <>
            <div style={head}>
              <div>
                <span style={eye}>Conversar</span>
                <h3 style={title}>Vamos marcar uma hora.</h3>
              </div>
              <button style={close} onClick={onClose}>Fechar ×</button>
            </div>
            <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
              <div className="field">
                <label>Nome</label>
                <input type="text" placeholder="Como você se chama" required />
              </div>
              <div className="field">
                <label>E-mail corporativo</label>
                <input type="email" placeholder="você@empresa.com" required />
              </div>
              <div className="field">
                <label>Empresa</label>
                <input type="text" placeholder="Onde você trabalha" required />
              </div>
              <div className="field">
                <label>O que você gostaria de resolver?</label>
                <textarea rows="3" placeholder="Pode ser amplo. Detalhamos na conversa."></textarea>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '8px' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.06em', color: 'var(--warm-500)' }}>
                  Resposta em até 24 h úteis
                </span>
                <button type="submit" className="btn primary">Enviar <span>→</span></button>
              </div>
            </form>
          </>
        ) : (
          <div style={{ paddingTop: 8, paddingBottom: 8 }}>
            <span style={eye}>Recebido</span>
            <h3 style={{ ...title, fontSize: 32, marginBottom: 18 }}>Obrigado<span style={{ color: 'var(--graphite)' }}>.</span></h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--warm-700)', margin: '0 0 32px', maxWidth: '38ch' }}>
              Recebemos sua mensagem. Voltamos em até 24 horas úteis com uma proposta de conversa.
            </p>
            <button className="btn secondary" onClick={onClose}>Fechar</button>
          </div>
        )}
      </div>
    </div>
  );
}

window.ContactModal = ContactModal;