/* global React */
const { useState: cUseState } = React;

function BudgetForm() {
  const [step, setStep] = cUseState(0);
  const [sending, setSending] = cUseState(false);
  const [errMsg, setErrMsg] = cUseState('');
  const [data, setData] = cUseState({
    tipo: '', metros: 60, nombre: '', email: '', tel: '',
    privacidad: false, website: '',
  });

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const tipos = ['Reforma integral', 'Baño', 'Cocina', 'Piso para alquiler', 'Local comercial', 'Solo asesoría'];

  const canNext = () => {
    if (step === 0) return data.tipo;
    if (step === 1) return data.metros > 0;
    if (step === 2) return data.nombre && data.tel && data.privacidad;
    return true;
  };

  const submit = async () => {
    if (sending || !canNext()) return;
    setSending(true);
    setErrMsg('');
    try {
      const res = await fetch('enviar.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      const json = await res.json();
      if (json.ok) {
        setStep(3);
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: 'lead_formulario',
          tipo_reforma: data.tipo,
          metros: data.metros,
        });
      } else setErrMsg(json.error || 'No se pudo enviar. Inténtalo de nuevo o llámanos.');
    } catch (e) {
      setErrMsg('No se pudo enviar. Revisa tu conexión o llámanos al 951 23 93 69.');
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="budget-card">
      <div className="budget-progress">
        {[0, 1, 2].map(i => <span key={i} className={i <= step ? 'done' : ''} />)}
      </div>

      {step === 0 && (
        <div className="budget-step active">
          <h3>¿Qué quieres reformar?</h3>
          <p className="sub">Elige una opción. Podrás contarnos los detalles después.</p>
          <div className="choice-grid">
            {tipos.map(t => (
              <button key={t} className={"choice " + (data.tipo === t ? 'selected' : '')} onClick={() => set('tipo', t)}>
                <span>{t}</span>
                <span className="glyph">{data.tipo === t ? '✓' : ''}</span>
              </button>
            ))}
          </div>
        </div>
      )}

      {step === 1 && (
        <div className="budget-step active">
          <h3>¿Cuántos metros cuadrados?</h3>
          <p className="sub">Aproximado. No hace falta exactitud.</p>
          <div className="range-wrap">
            <input type="range" min="10" max="300" value={data.metros} onChange={e => set('metros', +e.target.value)} />
            <div className="val">{data.metros} m²</div>
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="budget-step active">
          <h3>¿Cómo te avisamos?</h3>
          <p className="sub">Te llamamos a la mayor brevedad posible.</p>
          <div className="budget-summary">
            <div className="row"><span className="k">Qué reformamos</span><span className="v">{data.tipo}</span></div>
            <div className="row"><span className="k">Metros</span><span className="v">{data.metros} m²</span></div>
          </div>
          <div className="budget-row">
            <input className="budget-input" placeholder="Nombre" value={data.nombre} onChange={e => set('nombre', e.target.value)} />
            <input className="budget-input" placeholder="Teléfono" value={data.tel} onChange={e => set('tel', e.target.value)} />
          </div>
          <input className="budget-input" placeholder="Email (opcional)" value={data.email} onChange={e => set('email', e.target.value)} />
          <input type="text" name="website" value={data.website} onChange={e => set('website', e.target.value)}
                 tabIndex={-1} autoComplete="off" aria-hidden="true"
                 style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
          <label className="budget-consent">
            <input type="checkbox" checked={data.privacidad} onChange={e => set('privacidad', e.target.checked)} />
            <span>He leído y acepto la <a href="politica-de-privacidad.html" target="_blank" rel="noreferrer">política de privacidad</a>.</span>
          </label>
        </div>
      )}

      {step === 3 && (
        <div className="budget-step active budget-done">
          <div className="check">✓</div>
          <h3>Recibido, {data.nombre.split(' ')[0]}.</h3>
          <p className="sub" style={{ maxWidth: '46ch', margin: '8px auto 0' }}>Te llamamos a la mayor brevedad posible al {data.tel}. Si prefieres, escríbenos ahora mismo por WhatsApp y te respondemos al momento.</p>
          <div style={{ marginTop: 28, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="https://wa.me/34614790667" className="btn btn-primary">Abrir WhatsApp</a>
            <a href="tel:+34951239369" className="btn btn-ghost">📞 Llamar al 951 23 93 69</a>
          </div>
        </div>
      )}

      {step === 2 && errMsg && <p className="budget-error">{errMsg}</p>}

      {step < 3 && (
        <div className="budget-nav">
          {step > 0 ? <button className="btn btn-ghost" onClick={() => setStep(s => s - 1)} disabled={sending}>← Atrás</button> : <span />}
          {step < 2
            ? <button className="btn btn-primary" disabled={!canNext()} onClick={() => setStep(s => s + 1)} style={{ opacity: canNext() ? 1 : 0.4 }}>Continuar →</button>
            : <button className="btn btn-primary" disabled={!canNext() || sending} onClick={submit} style={{ opacity: (canNext() && !sending) ? 1 : 0.4 }}>{sending ? 'Enviando…' : 'Pedir presupuesto'}</button>
          }
        </div>
      )}
    </div>
  );
}

function Contacto() {
  return (
    <>
      <section id="presupuesto" className="cta-section">
        <SectionHead
          eyebrow="Presupuesto online"
          title="En 3 pasos. Sin coste."
          subtitle="Cuéntanos qué quieres reformar y te llamamos a la mayor brevedad posible. Sin compromiso."
        />
        <div className="container">
          <BudgetForm />
        </div>
      </section>

      <section id="contacto" className="contacto">
        <div className="container">
          <div className="contacto-grid">
            <div className="contact-info reveal">
              <Eyebrow>Contacto</Eyebrow>
              <h2 className="headline" style={{ marginTop: 14 }}>Hablemos de tu reforma.</h2>
              <p className="subhead" style={{ maxWidth: '40ch' }}>
                Llámanos o escríbenos por WhatsApp. Le atenderemos personalmente en nuestra oficina para estudiar su proyecto y ofrecerle la mejor solución.
              </p>
              <div className="contact-channels">
                <a className="contact-channel" href="tel:+34951239369">
                  <div className="cc-icon">☎</div>
                  <div className="cc-body">
                    <div className="label">Teléfono · te atendemos a la mayor brevedad posible</div>
                    <div className="value">951 23 93 69</div>
                  </div>
                </a>
                <a className="contact-channel" href="https://wa.me/34614790667" target="_blank" rel="noreferrer">
                  <div className="cc-icon whatsapp">✓</div>
                  <div className="cc-body">
                    <div className="label">WhatsApp · respuesta en minutos</div>
                    <div className="value">614 79 06 67</div>
                  </div>
                </a>
                <a className="contact-channel" href="https://www.instagram.com/reformamos_tuhogar" target="_blank" rel="noreferrer">
                  <div className="cc-icon">◎</div>
                  <div className="cc-body">
                    <div className="label">Instagram · proyectos recientes</div>
                    <div className="value">@reformamos_tuhogar</div>
                  </div>
                </a>
              </div>
              <div className="que-integramos reveal" style={{ marginTop: 40 }}>
                <h4 style={{ fontSize: 15, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--muted-2)', marginBottom: 14 }}>Qué integramos y qué te ofrecemos</h4>
                <p style={{ marginBottom: 14, color: 'var(--muted)' }}>En nuestra forma de trabajar convertimos la transparencia, confianza y tranquilidad en hechos concretos:</p>
                <ul className="que-integramos-list">
                  <li>Visita técnica gratuita a la vivienda para una evaluación detallada y precisa.</li>
                  <li>Desarrollo completo del proyecto con acompañamiento continuo durante toda la obra.</li>
                  <li>Atención personalizada para resolver cualquier duda con rapidez según tus prioridades.</li>
                  <li>Precio de ejecución cerrado desde el principio.</li>
                  <li>Cumplimiento riguroso de los plazos acordados.</li>
                  <li>Sobre todo, tranquilidad durante todo el proceso.</li>
                </ul>
                <p className="que-integramos-closing">Porque cuando todas las partes están correctamente alineadas, el resultado es simplemente perfecto.</p>
              </div>
            </div>
            <div className="reveal reveal-delay-1" style={{ position: 'relative', aspectRatio: '4/5', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
              <img src="https://malaga.reparamostuhogar.com/wp-content/uploads/2026/01/WhatsApp-Image-2026-01-19-at-18.30.50-1.jpeg" alt="Reformas en Málaga y Costa del Sol" loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              <span className="ph-label">Reformas en Málaga y Costa del Sol</span>
            </div>
          </div>
          <footer className="footer">
            <div className="footer-grid">
              <div>
                <div className="brand" style={{ marginBottom: 14 }}>
                  <img className="brand-logo" width="48" height="48" src="imagenes/logo%20pro.png?v=29" alt="Reformamos Tu Hogar Málaga" />
                  <span>Reformamos Tu Hogar · Málaga</span>
                </div>
                <p style={{ maxWidth: '40ch', color: 'var(--muted)' }}>Reformas integrales en Málaga y Costa del Sol. Calidad desde 2019. By Grupo NexoHome.</p>
              </div>
              <div>
                <h5>Servicios</h5>
                <ul>
                  <li><a href="#servicios">Reformas Llave en Mano</a></li>
                  <li><a href="#servicios">Reformas Integrales</a></li>
                  <li><a href="#servicios">Cambio bañera por ducha</a></li>
                  <li><a href="#servicios">Aire Acondicionado</a></li>
                  <li><a href="#servicios">Obras y Licencias</a></li>
                </ul>
              </div>
              <div>
                <h5>Empresa</h5>
                <ul>
                  <li><a href="#proyectos">Proyectos</a></li>
                  <li><a href="#proceso">Proceso</a></li>
                  <li><a href="#garantias">Garantías</a></li>
                  <li><a href="#faq">FAQ</a></li>
                </ul>
              </div>
              <div>
                <h5>Contacto</h5>
                <ul>
                  <li><a href="tel:+34951239369">951 23 93 69</a></li>
                  <li><a href="https://wa.me/34614790667" target="_blank" rel="noreferrer">WhatsApp</a></li>
                  <li><a href="https://www.instagram.com/reformamos_tuhogar" target="_blank" rel="noreferrer">@reformamos_tuhogar</a></li>
                  <li><a href="#contacto">Málaga y Costa del Sol</a></li>
                </ul>
              </div>
            </div>
            <div className="footer-bottom">
              <div>© 2026 Reformamos Tu Hogar · Málaga. By Grupo NexoHome.</div>
              <div style={{ display: 'flex', gap: 24 }}>
                <a href="aviso-legal.html">Aviso legal</a>
                <a href="politica-de-privacidad.html">Privacidad</a>
                <a href="politica-de-cookies.html">Cookies</a>
              </div>
            </div>
          </footer>
        </div>
      </section>
    </>
  );
}

window.Contacto = Contacto;