// CONTACTO — Formulario de cotización interactivo + WhatsApp + Formspree
const projectTypes = [
  'Sistema a medida', 'Aplicación web', 'App móvil',
  'E-commerce', 'Alojamiento web', 'Migración / mantenimiento', 'Capacitación',
];
const budgetRanges = ['< S/ 10K', 'S/ 10K – 30K', 'S/ 30K – 80K', 'S/ 80K+', 'Por definir'];

// 🔧 Configuración de envío
const WHATSAPP_NUMBER = '51979771040'; // +51 979 771 040
const MAIL_ENDPOINT = 'api/send.php'; // ruta al script PHP que envía vía SMTP de Hostinger

function Contact() {
  const [form, setForm] = React.useState({
    name: '', email: '', company: '', message: '',
    type: 'Sistema a medida', budget: 'Por definir',
  });
  const [step, setStep] = React.useState(0);
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);

  const update = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

  const onSubmit = async (e) => {
    e.preventDefault();
    setSending(true);

    // 1) Construir mensaje completo para WhatsApp (incluye TODOS los campos)
    const lines = [
      '*Nueva solicitud de cotización — TecnoEducando*',
      '',
      `· *Nombre:* ${form.name || '—'}`,
      `· *Email:* ${form.email || '—'}`,
      `· *Empresa:* ${form.company || '—'}`,
      `· *Tipo de proyecto:* ${form.type}`,
      `· *Presupuesto:* ${form.budget}`,
      '',
      '*Descripción del sistema:*',
      form.message || '(sin descripción)',
    ].join('\n');
    const waUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(lines)}`;

    // 2) Enviar copia por correo vía SMTP (api/send.php). Si falla, no bloquea WhatsApp.
    let mailOk = false;
    try {
      const res = await fetch(MAIL_ENDPOINT, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name, email: form.email, company: form.company,
          type: form.type, budget: form.budget, message: form.message,
          website: '', // honeypot anti-spam
        }),
      });
      if (res.ok) {
        const data = await res.json().catch(() => ({}));
        mailOk = !!data.ok;
      }
    } catch (err) { /* silencioso — WhatsApp es el canal principal */ }

    // 3) Abrir WhatsApp con el mensaje pre-llenado
    window.open(waUrl, '_blank', 'noopener,noreferrer');

    setSending(false);
    setSent(true);
  };

  return (
    <section id="contacto" style={{ position: 'relative' }}>
      <div className="glow-blob" style={{ right: '-200px', top: '20%', background: 'radial-gradient(circle, rgba(79,140,255,0.28), transparent 60%)' }}/>
      <div className="glow-blob" style={{ left: '-100px', bottom: '0%', background: 'radial-gradient(circle, rgba(168,85,247,0.22), transparent 60%)' }}/>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 0.95fr) minmax(0, 1.05fr)',
          gap: 64, alignItems: 'start',
        }} className="contact-grid">
          {/* Left — info */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, position: 'sticky', top: 100 }}>
            <span className="eyebrow">Contacto</span>
            <h2>Cuéntanos qué <span className="gradient-text">quieres construir</span>.</h2>
            <p style={{ fontSize: 17, maxWidth: 460 }}>
              Recibe una propuesta técnica con alcance, estimación de horas y plan de implementación en menos de 72 horas hábiles. Sin compromiso.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 16 }}>
              {[
                { icon: '✆', label: 'Teléfono · Celular', value: '54-815158 · 979 771 040' },
                { icon: '✉', label: 'Correo', value: 'webmaster@tecnoeducando.edu.pe' },
                { icon: '⌖', label: 'Oficina · Arequipa, Perú', value: 'Av. Arequipa #627 A.S.A.' },
              ].map(c => (
                <div key={c.label} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10,
                    background: 'var(--grad-soft)',
                    border: '1px solid var(--line-2)',
                    display: 'grid', placeItems: 'center',
                    color: 'var(--accent)', fontSize: 18, flex: '0 0 40px',
                  }}>{c.icon}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{c.label}</div>
                    <div style={{ fontSize: 15, marginTop: 4 }}>{c.value}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 16, padding: 16, borderRadius: 12, background: 'rgba(79,140,255,0.06)', border: '1px solid var(--line-2)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#22D3EE', boxShadow: '0 0 12px #22D3EE', animation: 'pulse 2s infinite' }}/>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--accent-3)' }}>Disponibilidad actual</span>
              </div>
              <div style={{ fontSize: 14, color: 'var(--fg-2)' }}>2 cupos abiertos para iniciar proyecto en junio 2026.</div>
            </div>
          </div>

          {/* Right — form */}
          <form onSubmit={onSubmit} className="surface" style={{ padding: 36, display: 'flex', flexDirection: 'column', gap: 22 }}>
            {sent ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'flex-start', padding: '40px 0' }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 16,
                  background: 'var(--grad)',
                  display: 'grid', placeItems: 'center',
                  boxShadow: '0 20px 60px -10px rgba(79,140,255,.5)',
                }}>
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
                </div>
                <h3 style={{ fontSize: 28 }}>¡Listo! Abrimos WhatsApp.</h3>
                <p style={{ fontSize: 15 }}>
                  Gracias <strong style={{ color: 'var(--fg)' }}>{form.name || ''}</strong>. Tu solicitud para
                  <em style={{ color: 'var(--accent-2)' }}> {form.type}</em> ya está lista — confirma el envío en la ventana de WhatsApp que se abrió.
                  También recibiremos copia en <strong style={{ color: 'var(--fg)' }}>webmaster@tecnoeducando.edu.pe</strong>.
                </p>
                <button type="button" onClick={() => { setSent(false); setStep(0); setForm({ name:'', email:'', company:'', message:'', type: 'Sistema a medida', budget: 'Por definir' }); }} className="btn btn-ghost" style={{ marginTop: 12 }}>Enviar otra solicitud</button>
              </div>
            ) : (
              <>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                  <span className="badge">Solicitud de cotización</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '.1em' }}>
                    {String(step+1).padStart(2,'0')} / 02
                  </span>
                </div>

                {step === 0 && (
                  <>
                    <ChoiceGroup label="Tipo de proyecto" options={projectTypes} value={form.type} onChange={v=>update('type',v)} />
                    <div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 8, display: 'flex', justifyContent: 'space-between' }}>
                        <span>Describe el sistema que necesitas</span>
                        <span style={{ color: 'var(--accent-2)' }}>* requerido</span>
                      </div>
                      <textarea
                        value={form.message} onChange={e=>update('message',e.target.value)}
                        placeholder="Ej: Necesito un sistema para gestionar el inventario y ventas de mi cadena de farmacias, con reportes diarios y conexión a SUNAT. También quisiera integrar IA para predecir reposición de stock..."
                        rows={6}
                        style={{
                          width: '100%', padding: '14px 16px', fontFamily: 'var(--font-body)', fontSize: 15,
                          background: 'rgba(5,6,15,0.6)', color: 'var(--fg)',
                          border: '1px solid var(--line-2)', borderRadius: 10, resize: 'vertical',
                          outline: 'none', transition: 'border-color .2s', lineHeight: 1.5,
                        }}
                        onFocus={e=>e.target.style.borderColor='var(--accent)'}
                        onBlur={e=>e.target.style.borderColor='var(--line-2)'}
                      />
                      <div style={{ marginTop: 6, fontSize: 11, color: 'var(--fg-4)', fontFamily: 'var(--font-mono)' }}>
                        {form.message.length} carácteres · mientras más detalle, mejor cotización
                      </div>
                    </div>
                    <ChoiceGroup label="Presupuesto estimado" options={budgetRanges} value={form.budget} onChange={v=>update('budget',v)} />
                  </>
                )}

                {step === 1 && (
                  <>
                    <Field label="Tu nombre" placeholder="María Pérez" value={form.name} onChange={v=>update('name',v)} />
                    <Field label="Email" type="email" placeholder="maria@empresa.com" value={form.email} onChange={v=>update('email',v)} />
                    <Field label="Empresa / Organización" placeholder="Acme S.A.C." value={form.company} onChange={v=>update('company',v)} />
                    <div style={{
                      marginTop: 4, padding: '12px 14px',
                      background: 'rgba(34,211,238,0.06)',
                      border: '1px solid rgba(34,211,238,0.24)',
                      borderRadius: 10,
                      fontSize: 13, color: 'var(--fg-2)',
                      display: 'flex', gap: 10, alignItems: 'flex-start',
                    }}>
                      <span style={{ color: 'var(--accent-3)', fontSize: 16 }}>💬</span>
                      <span>Al enviar abriremos <strong style={{ color: 'var(--fg)' }}>WhatsApp</strong> con el resumen de tu solicitud para que confirmes el envío. También recibiremos copia por correo.</span>
                    </div>
                  </>
                )}

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, gap: 12 }}>
                  {step > 0 ? (
                    <button type="button" onClick={()=>setStep(s=>s-1)} className="btn btn-ghost">← Atrás</button>
                  ) : <span/>}
                  {step < 1 ? (
                    <button type="button" onClick={()=>setStep(s=>s+1)} className="btn btn-primary"
                      disabled={!form.message || form.message.length < 10}
                      style={{ opacity: (!form.message || form.message.length < 10) ? 0.5 : 1 }}>
                      Siguiente
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                    </button>
                  ) : (
                    <button type="submit" className="btn btn-primary"
                      disabled={!form.name || !form.email || sending}
                      style={{ opacity: (!form.name || !form.email || sending) ? 0.5 : 1 }}>
                      {sending ? 'Enviando…' : (<>Enviar por WhatsApp
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-1 1.1-.2.2-.4.2-.6.1-.3-.1-1.2-.4-2.2-1.3-.8-.7-1.4-1.7-1.5-1.9-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3 4.8 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3z"/></svg></>)}
                    </button>
                  )}
                </div>
              </>
            )}
          </form>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px){
          .contact-grid{ grid-template-columns: 1fr !important; gap: 48px !important; }
          .contact-grid > div:first-child{ position: static !important; }
        }
      `}</style>
    </section>
  );
}

function Field({ label, value, onChange, placeholder, type='text' }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 8 }}>{label}</div>
      <input
        type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
        style={{
          width: '100%', padding: '14px 16px', fontFamily: 'var(--font-body)', fontSize: 15,
          background: 'rgba(5,6,15,0.6)', color: 'var(--fg)',
          border: '1px solid var(--line-2)', borderRadius: 10,
          outline: 'none', transition: 'border-color .2s',
        }}
        onFocus={e=>e.target.style.borderColor='var(--accent)'}
        onBlur={e=>e.target.style.borderColor='var(--line-2)'}
      />
    </div>
  );
}

function ChoiceGroup({ label, options, value, onChange }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 8 }}>{label}</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {options.map(o => {
          const active = value === o;
          return (
            <button key={o} type="button" onClick={()=>onChange(o)} style={{
              padding: '10px 14px',
              borderRadius: 10,
              border: '1px solid ' + (active ? 'transparent' : 'var(--line-2)'),
              background: active ? 'var(--grad)' : 'rgba(5,6,15,0.4)',
              color: active ? 'white' : 'var(--fg-2)',
              fontSize: 13.5, fontFamily: 'var(--font-body)',
              transition: 'all .2s',
              boxShadow: active ? '0 8px 24px -8px rgba(79,140,255,.5)' : 'none',
            }}>{o}</button>
          );
        })}
      </div>
    </div>
  );
}

window.Contact = Contact;