/* RENOVAM — Agenda multi-paso */
const { useState } = React;

function App() {
  window.useReveal();
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    interest: '', usage: '', bill: '', address: '', name: '', phone: '', email: '', when: '', notes: ''
  });
  const set = (k, v) => setData(d => ({...d, [k]: v}));

  const stepDef = [
    {title:'¿Qué te interesa?', valid:()=>!!data.interest},
    {title:'Tu consumo actual', valid:()=>!!data.usage && !!data.bill},
    {title:'Dónde y cuándo', valid:()=>!!data.address && !!data.when},
    {title:'Tus datos', valid:()=>!!data.name && !!data.phone},
    {title:'¡Listo!', valid:()=>true},
  ];

  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{label:'Inicio', href:'index.html'}, {label:'Agenda tu instalación'}]} />
      <window.PageHero
        eyebrow="Agenda · 5 pasos · 2 minutos"
        title={<>Agenda tu <em style={{fontStyle:'italic', fontFamily:'Syne, serif', color:'var(--ink-dim)', fontWeight:300}}>instalación.</em></>}
        sub="Visita técnica gratuita y sin compromiso. Un ingeniero RENOVAM te visita en CDMX, Morelos o Naucalpan dentro de los siguientes 7 días."
      />

      <section className="section-pad">
        <div className="container">
          <div className="agenda-wrap">
            <div className="agenda-form reveal">
              <div className="calc-stepper" style={{marginBottom:32}}>
                {stepDef.map((s, i) => (
                  <span key={i} className={`calc-step-pill ${step===i?'active':''} ${step>i?'done':''}`}>{String(i+1).padStart(2,'0')}</span>
                ))}
              </div>

              {step === 0 && (
                <>
                  <h3 style={{fontSize:'clamp(28px, 4vw, 40px)', marginBottom:12}}>{stepDef[0].title}</h3>
                  <p className="calc-q-sub">Selecciona el tipo de proyecto. Si dudas, marca la primera opción.</p>
                  <div className="choice-grid">
                    {[
                      ['kit','Kit residencial','Ahorrar en mi recibo CFE'],
                      ['battery','Sistema con baterías','Respaldo total durante apagones'],
                      ['offgrid','Off-grid','Sitio sin acceso a CFE'],
                      ['ev','EV / Wallbox','Cargador para mi auto eléctrico'],
                      ['service','Servicio técnico','Diagnóstico o mantenimiento'],
                      ['other','Otro / no estoy seguro','Quiero asesoría'],
                    ].map(([k, label, sub]) => (
                      <button key={k} className={`choice ${data.interest===k?'selected':''}`} onClick={()=>set('interest', k)}>
                        <span className="dot"></span>
                        <span><strong style={{display:'block', color:'var(--ink)', marginBottom:2, fontSize:14}}>{label}</strong><small style={{color:'var(--ink-mute)'}}>{sub}</small></span>
                      </button>
                    ))}
                  </div>
                </>
              )}

              {step === 1 && (
                <>
                  <h3 style={{fontSize:'clamp(28px, 4vw, 40px)', marginBottom:12}}>{stepDef[1].title}</h3>
                  <p className="calc-q-sub">Esto nos permite preparar una propuesta preliminar antes de la visita.</p>
                  <div className="field">
                    <label>Recibo CFE bimestral promedio (MXN)</label>
                    <input type="number" placeholder="3,500" value={data.bill} onChange={e=>set('bill', e.target.value)} />
                  </div>
                  <div className="field">
                    <label>Patrón de consumo</label>
                    <select value={data.usage} onChange={e=>set('usage', e.target.value)}>
                      <option value="">Selecciona...</option>
                      <option value="day">Mayor uso de día</option>
                      <option value="night">Mayor uso de noche</option>
                      <option value="mixed">Uso mixto</option>
                      <option value="critical">Cero tolerancia a apagones</option>
                    </select>
                  </div>
                </>
              )}

              {step === 2 && (
                <>
                  <h3 style={{fontSize:'clamp(28px, 4vw, 40px)', marginBottom:12}}>{stepDef[2].title}</h3>
                  <p className="calc-q-sub">Dónde está la instalación y qué fecha te funciona mejor.</p>
                  <div className="field">
                    <label>Dirección o colonia</label>
                    <input type="text" placeholder="Coyoacán, CDMX" value={data.address} onChange={e=>set('address', e.target.value)} />
                  </div>
                  <div className="field">
                    <label>Fecha tentativa para la visita</label>
                    <input type="date" value={data.when} onChange={e=>set('when', e.target.value)} />
                  </div>
                  <div className="field">
                    <label>Notas (opcional)</label>
                    <textarea placeholder="Detalles del proyecto, restricciones, dudas..." value={data.notes} onChange={e=>set('notes', e.target.value)} />
                  </div>
                </>
              )}

              {step === 3 && (
                <>
                  <h3 style={{fontSize:'clamp(28px, 4vw, 40px)', marginBottom:12}}>{stepDef[3].title}</h3>
                  <p className="calc-q-sub">Solo lo necesario para confirmarte la cita. No compartimos tus datos con nadie.</p>
                  <div className="field">
                    <label>Nombre completo</label>
                    <input type="text" placeholder="María González" value={data.name} onChange={e=>set('name', e.target.value)} />
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label>Teléfono / WhatsApp</label>
                      <input type="tel" placeholder="55 1234 5678" value={data.phone} onChange={e=>set('phone', e.target.value)} />
                    </div>
                    <div className="field">
                      <label>Email</label>
                      <input type="email" placeholder="maria@..." value={data.email} onChange={e=>set('email', e.target.value)} />
                    </div>
                  </div>
                </>
              )}

              {step === 4 && (
                <div style={{textAlign:'center', padding:'40px 0'}}>
                  <div style={{width:80, height:80, margin:'0 auto 24px', borderRadius:'50%', background:'rgba(95,210,138,0.15)', border:'1px solid rgba(95,210,138,0.4)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4L19 6" stroke="#5fd28a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </div>
                  <h3 style={{fontSize:'clamp(28px, 4vw, 44px)', marginBottom:16}}>¡Recibido, {data.name.split(' ')[0] || 'tocayo'}!</h3>
                  <p style={{color:'var(--ink-dim)', maxWidth:480, margin:'0 auto 32px', lineHeight:1.6}}>
                    Un ingeniero RENOVAM te contactará en menos de 24 horas para confirmar la visita técnica gratuita.
                  </p>
                  <a href="https://wa.me/527778297622" target="_blank" rel="noopener" className="btn btn-primary">Adelantar por WhatsApp →</a>
                </div>
              )}

              {step < 4 && (
                <div className="calc-nav" style={{marginTop:32}}>
                  {step > 0 && <button className="btn btn-ghost" onClick={()=>setStep(step-1)}>← Atrás</button>}
                  <button className="btn btn-primary" disabled={!stepDef[step].valid()} onClick={()=>setStep(step+1)} style={{opacity: stepDef[step].valid()?1:0.4, pointerEvents: stepDef[step].valid()?'auto':'none'}}>
                    {step === 3 ? 'Enviar' : 'Siguiente'} <span className="btn-arrow">→</span>
                  </button>
                </div>
              )}
            </div>

            <aside className="agenda-aside reveal">
              <div className="info-block">
                <h5>Visita técnica gratuita</h5>
                <p>Un ingeniero certificado UVIE visita tu casa, mide techo, sombreado y panel CFE. Sin costo, sin compromiso.</p>
              </div>
              <div className="info-block">
                <h5>Cobertura</h5>
                <p>CDMX, Morelos y Naucalpan (Edomex). Para otras zonas, escríbenos por WhatsApp.</p>
              </div>
              <div className="info-block">
                <h5>Tiempo de respuesta</h5>
                <p>Confirmación en menos de 24 hrs. Visita agendada dentro de los siguientes 7 días.</p>
              </div>
              <div className="info-block">
                <h5>Privacidad</h5>
                <p>Tus datos solo se usan para esta cotización. Nunca se comparten con terceros.</p>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <window.SiteFooter />
      <window.WaFab />
    </>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);