// Modal.jsx — Intake modal (PT)
const Modal = ({ onClose }) => {
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({ name: '', email: '', url: '', goal: '' });

  const overlayStyle = {
    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)',
    backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center',
    justifyContent: 'center', zIndex: 1000, padding: '24px',
  };
  const modalStyle = {
    background: '#fff', borderRadius: '12px', width: '100%', maxWidth: '460px',
    boxShadow: '0 24px 64px rgba(0,0,0,0.25)',
    animation: 'slideUp 500ms cubic-bezier(0.16,1,0.3,1)',
  };
  const inputStyle = {
    fontFamily: "'DM Sans', sans-serif", fontSize: '14px', color: '#0A0A0A',
    background: '#fff', border: '1px solid #E5E5E5', borderRadius: '8px',
    padding: '11px 14px', width: '100%', outline: 'none', boxSizing: 'border-box',
    transition: 'border-color 200ms, box-shadow 200ms', marginBottom: '14px',
  };
  const btnStyle = {
    fontFamily: "'DM Sans', sans-serif", fontSize: '15px', fontWeight: 500,
    background: '#0A0A0A', color: '#fff', padding: '13px 0', borderRadius: '8px',
    border: 'none', cursor: 'pointer', width: '100%',
    transition: 'all 250ms cubic-bezier(0.16,1,0.3,1)',
  };
  const handleInput = (k, v) => setForm(f => ({...f, [k]: v}));
  const focusIn = e => { e.target.style.borderColor='#0A0A0A'; e.target.style.boxShadow='0 0 0 2px rgba(10,10,10,0.08)'; };
  const focusOut = e => { e.target.style.borderColor='#E5E5E5'; e.target.style.boxShadow='none'; };

  return (
    <div style={overlayStyle} onClick={e => e.target === e.currentTarget && onClose()}>
      <style>{`@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }`}</style>
      <div style={modalStyle}>
        {/* Header */}
        <div style={{ padding:'28px 32px 0', display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
          <div>
            <div style={{ fontFamily:"'Space Grotesk',sans-serif", fontSize:'22px', fontWeight:700, letterSpacing:'-0.02em', color:'#0A0A0A' }}>
              {step === 1 ? 'Iniciar projeto.' : step === 2 ? 'Seu objetivo.' : 'Você está dentro.'}
            </div>
            <div style={{ fontFamily:"'DM Sans',sans-serif", fontSize:'13px', color:'#A3A3A3', marginTop:'4px' }}>
              {step === 1 ? 'Etapa 1 de 2' : step === 2 ? 'Etapa 2 de 2' : 'Confirmado'}
            </div>
          </div>
          <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', color:'#A3A3A3', fontSize:'22px', lineHeight:1, padding:'4px', transition:'color 150ms' }}
            onMouseEnter={e => e.target.style.color='#0A0A0A'}
            onMouseLeave={e => e.target.style.color='#A3A3A3'}>×</button>
        </div>
        {/* Progress */}
        <div style={{ padding:'16px 32px 0', display:'flex', gap:'6px' }}>
          {[1,2,3].map(i => (
            <div key={i} style={{ flex:1, height:'2px', borderRadius:'1px', background: i <= step ? '#0A0A0A' : '#E5E5E5', transition:'background 400ms cubic-bezier(0.16,1,0.3,1)' }}></div>
          ))}
        </div>
        {/* Body */}
        <div style={{ padding:'24px 32px 32px' }}>
          {step === 1 && (<>
            <label style={{ fontFamily:"'DM Sans',sans-serif", fontSize:'13px', fontWeight:500, color:'#0A0A0A', marginBottom:'6px', display:'block' }}>Seu nome</label>
            <input style={inputStyle} placeholder="Maria Silva" value={form.name} onChange={e => handleInput('name', e.target.value)} onFocus={focusIn} onBlur={focusOut} />
            <label style={{ fontFamily:"'DM Sans',sans-serif", fontSize:'13px', fontWeight:500, color:'#0A0A0A', marginBottom:'6px', display:'block' }}>E-mail</label>
            <input style={inputStyle} placeholder="maria@empresa.com.br" value={form.email} onChange={e => handleInput('email', e.target.value)} onFocus={focusIn} onBlur={focusOut} />
            <button style={btnStyle} onClick={() => setStep(2)}
              onMouseEnter={e => { e.target.style.background='#1A1A1A'; e.target.style.transform='translateY(-1px)'; }}
              onMouseLeave={e => { e.target.style.background='#0A0A0A'; e.target.style.transform='translateY(0)'; }}>
              Continuar →
            </button>
          </>)}
          {step === 2 && (<>
            <label style={{ fontFamily:"'DM Sans',sans-serif", fontSize:'13px', fontWeight:500, color:'#0A0A0A', marginBottom:'6px', display:'block' }}>Site atual (opcional)</label>
            <input style={inputStyle} placeholder="seusite.com.br" value={form.url} onChange={e => handleInput('url', e.target.value)} onFocus={focusIn} onBlur={focusOut} />
            <label style={{ fontFamily:"'DM Sans',sans-serif", fontSize:'13px', fontWeight:500, color:'#0A0A0A', marginBottom:'6px', display:'block' }}>Qual é seu principal objetivo de conversão?</label>
            <input style={{...inputStyle, marginBottom:'16px'}} placeholder="Ex: Agendar demos, vender assinatura..." value={form.goal} onChange={e => handleInput('goal', e.target.value)} onFocus={focusIn} onBlur={focusOut} />
            <button style={btnStyle} onClick={() => {
              const text = `Olá! Gostaria de finalizar a compra do meu projeto.\n\nMeus dados:\n- Nome: ${form.name}\n- E-mail: ${form.email}\n- Site atual: ${form.url || 'Não informado'}\n- Objetivo: ${form.goal || 'Não informado'}`;
              window.open(`https://api.whatsapp.com/send?phone=5522992717284&text=${encodeURIComponent(text)}`, '_blank');
              setStep(3);
            }}
              onMouseEnter={e => { e.target.style.background='#1A1A1A'; e.target.style.transform='translateY(-1px)'; }}
              onMouseLeave={e => { e.target.style.background='#0A0A0A'; e.target.style.transform='translateY(0)'; }}>
              Finalizar compra →
            </button>
          </>)}
          {step === 3 && (
            <div style={{ textAlign:'center', padding:'16px 0' }}>
              <div style={{ fontFamily:"'Space Grotesk',sans-serif", fontSize:'64px', fontWeight:700, letterSpacing:'-0.04em', color:'#0A0A0A', lineHeight:1, marginBottom:'16px', animation:'fadeIn 600ms cubic-bezier(0.16,1,0.3,1)' }}>24h.</div>
              <div style={{ fontFamily:"'DM Sans',sans-serif", fontSize:'15px', color:'#6B6B6B', lineHeight:1.6, marginBottom:'28px' }}>
                Entraremos em contato em breve.<br />Sua página estará pronta amanhã.
              </div>
              <button style={btnStyle} onClick={onClose}>Fechar</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Modal });