/* contact.jsx — Lead capture form (single column, urgency, BANT inline) */

const { useState: useStateC } = React;

function Contact() {
  const [sent, setSent] = useStateC(false);
  const [form, setForm] = useStateC({
    name: '', email: '', phone: '', services: [], budget: '', timeline: '', message: '',
  });
  const [touched, setTouched] = useStateC({});
  // Agregamos el estado para evitar múltiples envíos simultáneos
  const [isSubmitting, setIsSubmitting] = useStateC(false);

  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggle = (v) => setForm(f => ({
    ...f,
    services: f.services.includes(v) ? f.services.filter(x => x !== v) : [...f.services, v],
  }));

  const requiredOk = form.name.trim() && /\S+@\S+\.\S+/.test(form.email);

  const submit = async (e) => {
    e.preventDefault();
    setTouched({ name: true, email: true });
    
    // Si faltan datos o ya se está enviando, no hacer nada
    if (!requiredOk || isSubmitting) return;

    setIsSubmitting(true); // Deshabilita el botón y muestra "Enviando..."

    // Preparamos los datos para enviar.php
    const datos = {
      nombre: form.name,
      email: form.email,
      telefono: form.phone || 'No especificado',
      rango: `Presupuesto: ${form.budget || 'No definido'} | Urgencia: ${form.timeline || 'No definido'}`,
      objetivo: `Servicios: ${form.services.join(', ') || 'Ninguno'} | Desafío: ${form.message || 'Sin mensaje'}`
    };

    try {
      const response = await fetch('/enviar.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(datos)
      });

      const result = await response.json();

      if (result.status === 'success') {
        setSent(true); // ¡Éxito! Muestra la pantalla de confirmación
      } else {
        alert('Hubo un error al enviar: ' + result.message);
      }
    } catch (error) {
      console.error("Error en la petición:", error);
      alert('Hubo un problema de conexión. Inténtalo de nuevo.');
    } finally {
      setIsSubmitting(false); // Vuelve a habilitar el botón
    }
  };

  const services = [
    'Paid Media', 'Estrategia', 'Creatividad', 'Data & Analytics',
    'Línea de crédito', 'AI / Automation',
  ];

  return (
    <section className="section" id="contacto">
      <div className="wrap">
        <SectionHead
          num="06 / CONTACTO"
          eyebrow="Pedí una llamada"
          title={<>Conectá tu estrategia comercial con un <em style={{ color: 'var(--lime)', fontStyle: 'normal' }}>plan de marketing ejecutable.</em></>}
          sub="Completa el formulario y un partner del equipo se conecta para una primera llamada de 15 minutos sin compromiso."
        />

        <div className="contact-shell">
          <div className="dotfield"></div>
          <div className="contact-grid" style={{ position: 'relative' }}>
            {/* Left column — value prop + urgency */}
            <aside className="contact-aside">
              <div className="urgency-badge">
                <span className="urgency-dot"></span>
                <div>
                  <div className="urgency-title">Cupos limitados</div>
                  <div className="urgency-sub">Onboarding Q3 2026 · 2 lugares disponibles</div>
                </div>
              </div>

              <h3 className="h2" style={{ marginTop: 28 }}>Hablemos de tu marca.</h3>
              <p className="body-l" style={{ color: 'var(--bone-mute)', maxWidth: 380, marginTop: 12 }}>
                En esa primera llamada vas a entender exactamente cómo
                conectamos tu negocio con la operación digital. Sin
                presentaciones genéricas, sin contratos por adelantado.
              </p>

              <ul className="contact-bullets">
                <li><span>→</span> Análisis express de tu funnel actual</li>
                <li><span>→</span> Definición de KPIs prioritarios</li>
                <li><span>→</span> Propuesta a medida en una semana</li>
              </ul>

              <div className="contact-trust">
                <div className="contact-trust-row">
                  <span className="ct-mono">EMAIL</span>
                  <a href="mailto:hernan@somoslaburo.com">hernan@somoslaburo.com</a>
                </div>
                <div className="contact-trust-row">
                  <span className="ct-mono">UBICACIÓN</span>
                  <span>Buenos Aires · Argentina</span>
                </div>
              </div>
            </aside>

            {/* Right column — form */}
            {sent ? (
              <div className="success-card">
                <div className="check">
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M4 12l5 5 11-11"/>
                  </svg>
                </div>
                <h3>Mensaje recibido.</h3>
                <p>Un partner del equipo se va a contactar a <strong style={{ color: 'var(--lime)' }}>{form.email}</strong> para coordinar la primera llamada.</p>
                <button className="btn ghost" style={{ marginTop: 16 }} onClick={() => { setSent(false); setForm({ name: '', email: '', phone: '', services: [], budget: '', timeline: '', message: '' }); }}>
                  Mandar otro mensaje
                </button>
              </div>
            ) : (
              <form className="form" onSubmit={submit} noValidate>
                <div className="form-step-tag">PASO 01 · DATOS DE CONTACTO</div>

                <div className="field">
                  <label>Nombre y apellido <span className="req">*</span></label>
                  <input
                    required
                    value={form.name}
                    onChange={e => upd('name', e.target.value)}
                    onBlur={() => setTouched(t => ({ ...t, name: true }))}
                    placeholder="Tu nombre"
                    className={touched.name && !form.name.trim() ? 'error' : ''}
                  />
                </div>

                <div className="field">
                  <label>Email corporativo <span className="req">*</span></label>
                  <input
                    required
                    type="email"
                    value={form.email}
                    onChange={e => upd('email', e.target.value)}
                    onBlur={() => setTouched(t => ({ ...t, email: true }))}
                    placeholder="vos@empresa.com"
                    className={touched.email && !/\S+@\S+\.\S+/.test(form.email) ? 'error' : ''}
                  />
                </div>

                <div className="field">
                  <label>Teléfono / WhatsApp</label>
                  <input
                    type="tel"
                    value={form.phone}
                    onChange={e => upd('phone', e.target.value)}
                    placeholder="+54 9 11 ..."
                  />
                </div>

                <div className="form-step-tag">PASO 02 · CALIFICACIÓN</div>

                <div className="field">
                  <label>¿En qué te podemos ayudar?</label>
                  <div className="chips">
                    {services.map(it => (
                      <button
                        type="button"
                        key={it}
                        className={`chip ${form.services.includes(it) ? 'on' : ''}`}
                        onClick={() => toggle(it)}
                      >
                        {it}
                      </button>
                    ))}
                  </div>
                </div>

                <div className="field">
                  <label>Inversión mensual estimada en medios</label>
                  <select value={form.budget} onChange={e => upd('budget', e.target.value)}>
                    <option value="">Seleccioná un rango</option>
                    <option>&lt; USD 5K</option>
                    <option>USD 5K — 15K</option>
                    <option>USD 15K — 50K</option>
                    <option>USD 50K — 150K</option>
                    <option>USD 150K +</option>
                    <option>Todavía no lo definimos</option>
                  </select>
                </div>

                <div className="field">
                  <label>¿Cuándo querés empezar?</label>
                  <div className="timeline-grid">
                    {[
                      { v: 'urgent', l: 'Ya', sub: 'Esta semana' },
                      { v: 'soon', l: '< 30 días', sub: 'Próximo mes' },
                      { v: 'planning', l: 'Q3-Q4', sub: 'Estamos planificando' },
                      { v: 'exploring', l: 'Explorando', sub: 'Sin urgencia' },
                    ].map(opt => (
                      <button
                        type="button"
                        key={opt.v}
                        className={`timeline-opt ${form.timeline === opt.v ? 'on' : ''}`}
                        onClick={() => upd('timeline', opt.v)}
                      >
                        <span className="t-l">{opt.l}</span>
                        <span className="t-s">{opt.sub}</span>
                      </button>
                    ))}
                  </div>
                </div>

                <div className="field">
                  <label>Contanos brevemente tu desafío</label>
                  <textarea
                    rows="3"
                    value={form.message}
                    onChange={e => upd('message', e.target.value)}
                    placeholder="Objetivo de negocio, contexto, lo que sea útil."
                  />
                </div>

                <div className="form-foot">
                  <span className="mono" style={{ color: 'var(--bone-mute)' }}>* Campos obligatorios</span>
                  <button
                    type="submit"
                    className="btn primary"
                    disabled={!requiredOk || isSubmitting}
                    style={{ opacity: requiredOk && !isSubmitting ? 1 : 0.45 }}
                  >
                    {isSubmitting ? 'Enviando...' : <>Pedir llamada <Arrow /></>}
                  </button>
                </div>

                <p className="form-fine">
                  Al enviar aceptás que un partner del equipo se contacte para coordinar la llamada.
                  Tus datos no se comparten con terceros. Leé nuestra <a href="politica-privacidad.html" style={{ color: 'var(--lime)' }}>política de privacidad</a>.
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap" style={{ padding: 0 }}>
        <div className="footer-top">
          <div>
            <Logo />
            <p style={{ marginTop: 20, color: 'var(--bone-mute)', fontSize: 14, lineHeight: 1.5, maxWidth: 320 }}>
              Diseñamos ecosistemas de crecimiento. El puente del negocio al
              marketing.
            </p>
          </div>
          <div>
            <h5>Sistema</h5>
            <ul>
              <li><a href="#agencia">Qué hacemos</a></li>
              <li><a href="#proceso">Proceso</a></li>
              <li><a href="#stack">Stack</a></li>
              <li><a href="#casos">Casos</a></li>
            </ul>
          </div>
          <div>
            <h5>Servicios</h5>
            <ul>
              <li><a href="#stack">Paid Media</a></li>
              <li><a href="#stack">Data & Analytics</a></li>
              <li><a href="#stack">Creatividad</a></li>
              <li><a href="#stack">Líneas de crédito</a></li>
            </ul>
          </div>
          <div>
            <h5>Contacto</h5>
            <ul>
              <li><a href="mailto:hernan@somoslaburo.com">hernan@somoslaburo.com</a></li>
              <li><a href="#contacto">Pedir llamada</a></li>
              <li><a href="https://www.linkedin.com" target="_blank" rel="noreferrer">LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 LABURO STUDIOS · Best place to grow.</span>
          <span><a href="politica-privacidad.html">Política de privacidad</a> · Buenos Aires</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });