function QuoteModal({ open, onClose, preselected }) {
  const [form, setForm] = React.useState({
    nombre: '', empresa: '', email: '', telefono: '',
    producto: preselected || '', gramaje: '', formato: '', volumen: '',
    notas: '',
  });
  const [sent, setSent] = React.useState(false);

  React.useEffect(() => {
    if (preselected) setForm((f) => ({ ...f, producto: preselected }));
    if (open) setSent(false);
  }, [preselected, open]);

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

  if (!open) return null;

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>

        {/* gradient top border */}
        <div style={{
          position: 'absolute',
          top: 0, left: 0, right: 0,
          height: 4,
          background: 'var(--gradient)',
          borderRadius: '8px 8px 0 0',
        }} />

        <button onClick={onClose} aria-label="Cerrar" style={{
          position: 'absolute', top: 16, right: 16,
          width: 36, height: 36, borderRadius: '50%',
          display: 'grid', placeItems: 'center',
          fontSize: 22, color: 'var(--ink-2)',
          transition: 'background .2s',
        }}
        onMouseOver={(e)=>e.currentTarget.style.background='var(--bg-2)'}
        onMouseOut={(e)=>e.currentTarget.style.background='transparent'}
        >×</button>

        {!sent ? (
          <>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Cotización</div>

            <h3 className="serif" style={{
              fontSize: 36,
              fontWeight: 700,
              color: 'var(--navy)',
              lineHeight: 1.05,
              letterSpacing: '-0.02em',
              marginBottom: 12,
            }}>
              Cuéntanos qué necesitas
            </h3>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 28, lineHeight: 1.55 }}>
              Te respondemos en menos de 24 horas con disponibilidad, precio y tiempos de entrega.
            </p>

            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="modal-grid-2">
                <div className="field">
                  <label>Nombre <span style={{ color: 'var(--teal)' }}>*</span></label>
                  <input type="text" value={form.nombre} onChange={update('nombre')} required placeholder="Tu nombre" />
                </div>
                <div className="field">
                  <label>Empresa</label>
                  <input type="text" value={form.empresa} onChange={update('empresa')} placeholder="Razón social" />
                </div>
              </div>
              <div className="modal-grid-2">
                <div className="field">
                  <label>Email <span style={{ color: 'var(--teal)' }}>*</span></label>
                  <input type="email" value={form.email} onChange={update('email')} required placeholder="tu@correo.com" />
                </div>
                <div className="field">
                  <label>Teléfono</label>
                  <input type="tel" value={form.telefono} onChange={update('telefono')} placeholder="+57 ..." />
                </div>
              </div>
              <div className="field">
                <label>Producto de interés <span style={{ color: 'var(--teal)' }}>*</span></label>
                <select value={form.producto} onChange={update('producto')} required>
                  <option value="">Selecciona una referencia</option>
                  <option>Papel Bond</option>
                  <option>Papel Esmaltado</option>
                  <option>Cartulina Reverso Blanco (C1S)</option>
                  <option>Cartulina Reverso Café (C1S)</option>
                  <option>Kraft Liner</option>
                  <option>Test Liner</option>
                  <option>Kraft Semiextensible</option>
                  <option>Papel MG (Machine Glazed)</option>
                  <option>Papel Antigraso</option>
                  <option>Solicitud personalizada</option>
                </select>
              </div>
              <div className="modal-grid-3">
                <div className="field">
                  <label>Gramaje</label>
                  <input type="text" value={form.gramaje} onChange={update('gramaje')} placeholder="g/m²" />
                </div>
                <div className="field">
                  <label>Formato</label>
                  <input type="text" value={form.formato} onChange={update('formato')} placeholder="70×100" />
                </div>
                <div className="field">
                  <label>Volumen</label>
                  <input type="text" value={form.volumen} onChange={update('volumen')} placeholder="ton" />
                </div>
              </div>
              <div className="field">
                <label>Notas</label>
                <textarea rows="3" value={form.notas} onChange={update('notas')} placeholder="Plazos, aplicación, observaciones..." style={{ resize: 'vertical', fontFamily: 'inherit' }} />
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, gap: 12, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>
                  Respuesta en 24h
                </span>
                <button type="submit" className="btn btn-gradient">
                  Enviar solicitud
                  <span className="arrow">→</span>
                </button>
              </div>
            </form>
          </>
        ) : (
          <div style={{ padding: '24px 0', textAlign: 'left' }}>
            <div style={{
              width: 64, height: 64, borderRadius: '50%',
              background: 'var(--gradient)', color: 'white',
              display: 'grid', placeItems: 'center',
              fontSize: 30, marginBottom: 24,
              fontWeight: 700,
            }}>✓</div>
            <h3 className="serif" style={{ fontSize: 36, fontWeight: 700, color: 'var(--navy)', lineHeight: 1.05, letterSpacing: '-0.02em', marginBottom: 12 }}>
              Solicitud enviada
            </h3>
            <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 28, maxWidth: '40ch' }}>
              Recibimos tu solicitud para <strong style={{ color: 'var(--navy)' }}>{form.producto || 'cotización'}</strong>. Un asesor comercial te responde a <strong style={{ color: 'var(--teal-2)' }}>{form.email}</strong> en menos de 24 horas.
            </p>
            <button className="btn btn-outline-dark" onClick={onClose}>Cerrar</button>
          </div>
        )}
      </div>
    </div>
  );
}

window.QuoteModal = QuoteModal;