/* global React, Reveal */
const { useState: coUseState } = React;

function Contact({ setRoute }) {
  const [form, setForm] = coUseState({ name: '', company: '', email: '', phone: '', budget: '—', service: [], message: '' });
  const [sent, setSent] = coUseState(false);
  const services = ['Estrategia', 'SEO', 'Campañas', 'E-Commerce', 'Branding', 'Desarrollo Web'];
  const budgets = ['< USD 5K', 'USD 5K–15K', 'USD 15K–40K', 'USD 40K+', 'No sé aún'];

  const ci = (window.GM_CONFIG && window.GM_CONFIG.contact) ? window.GM_CONFIG.contact : {};
  const email         = ci.email         || 'hola@growthmasters.digital';
  const phone         = ci.phone         || '+57 305 260 4847';
  const phoneRaw      = ci.phone_raw     || '+573052604847';
  const whatsapp      = ci.whatsapp      || '+573052604847';
  const waMessage     = ci.whatsapp_message || 'Hola, quiero conocer más sobre los servicios de Growth Masters.';
  const city          = ci.city          || 'Bogotá, Colombia';
  const coverage      = ci.coverage      || 'Servimos a toda Latinoamérica';
  const responseTime  = ci.response_time || '< 24 horas hábiles';

  const waUrl = 'https://wa.me/' + whatsapp.replace(/[^0-9]/g, '') + '?text=' + encodeURIComponent(waMessage);

  const toggle = (s) => setForm(f => ({ ...f, service: f.service.includes(s) ? f.service.filter(x => x !== s) : [...f.service, s] }));
  const submit = async (e) => {
    e.preventDefault();
    try {
      if (window.GM_CONFIG && window.GM_CONFIG.apiRoot) {
        await fetch(window.GM_CONFIG.apiRoot + 'contact', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': window.GM_CONFIG.nonce },
          body: JSON.stringify(form),
        });
      }
    } catch (err) {}
    setSent(true);
  };

  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 32 }}>Contacto · agenda una llamada</div></Reveal>
          <Reveal delay={120}>
            <h1>Hablemos de<br />tu <span className="serif accent">crecimiento.</span></h1>
          </Reveal>
          <Reveal delay={240}>
            <p className="lede" style={{ marginTop: 32 }}>
              Cuéntanos en qué estás. Un consultor senior te responde en menos de 24 horas.
              Primera llamada de 30 minutos gratis.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 20 }}>
        <div className="container">
          <div className="grid grid-2" style={{ gap: 60, alignItems: 'start' }}>
            <Reveal>
              <div className="card" style={{ padding: 48 }}>
                {!sent ? (
                  <form onSubmit={submit} className="stack-lg" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                    <div className="grid grid-2">
                      <div className="field"><label>Nombre</label><input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="María Rodríguez" /></div>
                      <div className="field"><label>Empresa</label><input value={form.company} onChange={e => setForm({ ...form, company: e.target.value })} placeholder="Acme S.A." /></div>
                    </div>
                    <div className="grid grid-2">
                      <div className="field"><label>Email</label><input type="email" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="maria@acme.com" /></div>
                      <div className="field"><label>Teléfono</label><input value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} placeholder="+57 300 000 0000" /></div>
                    </div>
                    <div className="field">
                      <label>Servicios de interés</label>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                        {services.map(s => (
                          <button type="button" key={s} className={`chip ${form.service.includes(s) ? 'active' : ''}`} onClick={() => toggle(s)}>{s}</button>
                        ))}
                      </div>
                    </div>
                    <div className="field">
                      <label>Presupuesto estimado mensual</label>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                        {budgets.map(b => (
                          <button type="button" key={b} className={`chip ${form.budget === b ? 'active' : ''}`} onClick={() => setForm({ ...form, budget: b })}>{b}</button>
                        ))}
                      </div>
                    </div>
                    <div className="field">
                      <label>Cuéntanos más</label>
                      <textarea value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} placeholder="¿Qué reto quieres resolver?" />
                    </div>
                    <button type="submit" className="btn btn-accent" style={{ alignSelf: 'flex-start' }}>
                      Enviar solicitud →
                    </button>
                  </form>
                ) : (
                  <div style={{ padding: '40px 0', textAlign: 'center' }}>
                    <div style={{ fontSize: 64 }}>✦</div>
                    <h3 style={{ fontSize: 36, marginTop: 24, letterSpacing: '-0.02em' }}>Recibido, {form.name.split(' ')[0] || 'gracias'}.</h3>
                    <p style={{ marginTop: 16, maxWidth: '40ch', margin: '16px auto 0' }}>Un consultor senior te contacta en menos de 24 horas hábiles. Mientras tanto, te enviamos la guía "Growth 2026" al correo.</p>
                  </div>
                )}
              </div>
            </Reveal>

            <Reveal delay={120}>
              <div className="stack-lg" style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
                <div>
                  <div className="mono ticker">Correo directo</div>
                  <a href={'mailto:' + email} style={{ display: 'block', marginTop: 8, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>
                    {email}
                  </a>
                </div>
                <div>
                  <div className="mono ticker">Teléfono</div>
                  <a href={'tel:' + phoneRaw} style={{ display: 'block', marginTop: 8, fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em' }}>
                    {phone}
                  </a>
                </div>
                <div>
                  <div className="mono ticker">WhatsApp</div>
                  <a
                    href={waUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 10, padding: '12px 20px', background: '#25D366', color: '#fff', borderRadius: 'var(--radius-sm)', fontWeight: 600, fontSize: 15, textDecoration: 'none', letterSpacing: '-0.01em' }}
                  >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                    </svg>
                    Escribir por WhatsApp
                  </a>
                </div>
                <div>
                  <div className="mono ticker">Oficina</div>
                  <div style={{ marginTop: 8, fontSize: 17 }}>{city}<br />{coverage}</div>
                </div>
                <div>
                  <div className="mono ticker">Respuesta</div>
                  <div style={{ marginTop: 8, fontSize: 17 }}>{responseTime}</div>
                </div>

                <div className="card" style={{ padding: 32, background: 'var(--ink)', color: 'var(--bg)', border: 'none' }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent)' }}>Primera consultoría</div>
                  <h3 style={{ fontSize: 28, color: 'var(--bg)', marginTop: 12, letterSpacing: '-0.02em' }}>30 min · sin costo · sin compromiso</h3>
                  <p style={{ color: 'rgba(246,243,236,0.7)', marginTop: 12 }}>
                    Te dejamos por lo menos una idea accionable antes de colgar. Promesa boutique.
                  </p>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Contact });