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

function BudgetForm() {
  const [step, setStep] = cUseState(0);
  const [data, setData] = cUseState({
    tipo: '', metros: 60, presupuesto: '', momento: '', nombre: '', email: '', tel: '',
  });

  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 presupuestos = ['4.000 – 15.000 €', '15.000 – 35.000 €', '35.000 – 70.000 €', 'Más de 70.000 €'];
  const momentos = ['Ya, esta semana', 'Este mes', 'En 1–3 meses', 'Estoy informándome'];

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

  const submit = () => setStep(4);

  return (
    <div className="budget-card">
      <div className="budget-progress">
        {[0, 1, 2, 3].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>Presupuesto y momento</h3>
          <p className="sub">Para ajustar la propuesta a lo que necesitas.</p>
          <div style={{ marginBottom: 12, fontSize: 13, color: 'var(--muted-2)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Presupuesto</div>
          <div className="choice-grid">
            {presupuestos.map(p => (
              <button key={p} className={"choice " + (data.presupuesto === p ? 'selected' : '')} onClick={() => set('presupuesto', p)}>
                <span>{p}</span><span className="glyph">{data.presupuesto === p ? '✓' : ''}</span>
              </button>
            ))}
          </div>
          <div style={{ margin: '20px 0 12px', fontSize: 13, color: 'var(--muted-2)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>¿Cuándo te gustaría empezar?</div>
          <div className="choice-grid">
            {momentos.map(m => (
              <button key={m} className={"choice " + (data.momento === m ? 'selected' : '')} onClick={() => set('momento', m)}>
                <span>{m}</span><span className="glyph">{data.momento === m ? '✓' : ''}</span>
              </button>
            ))}
          </div>
        </div>
      )}

      {step === 3 && (
        <div className="budget-step active">
          <h3>¿Cómo te avisamos?</h3>
          <p className="sub">Te llamamos en menos de 24 h.</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 className="row"><span className="k">Presupuesto</span><span className="v">{data.presupuesto}</span></div>
            <div className="row"><span className="k">Momento</span><span className="v">{data.momento}</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)} />
        </div>
      )}

      {step === 4 && (
        <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 en menos de 2 horas 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 < 4 && (
        <div className="budget-nav">
          {step > 0 ? <button className="btn btn-ghost" onClick={() => setStep(s => s - 1)}>← Atrás</button> : <span />}
          {step < 3
            ? <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()} onClick={submit} style={{ opacity: canNext() ? 1 : 0.4 }}>Pedir presupuesto</button>
          }
        </div>
      )}
    </div>
  );
}

function Contacto() {
  return (
    <>
      <section id="presupuesto" className="cta-section">
        <SectionHead
          eyebrow="Presupuesto online"
          title="En 4 pasos. Sin coste."
          subtitle="Cuéntanos qué quieres reformar y te llamamos en menos de 2 horas. 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 en menos de 2 h</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="https://malaga.reformamostuhogar.es/wp-content/uploads/2026/03/Gemini_Generated_Image_hvg3ehvg3ehvg3eh-removebg-preview.png" 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;