const { useState, useEffect, useRef, useMemo } = React;

const FORM_STEPS = [
  { key: 'personal', title: 'Tus datos', sub: 'Para poder contactarte' },
  { key: 'vehiculo', title: 'Tu vehículo', sub: 'Marca, modelo y ubicación' },
  { key: 'condicion', title: 'Condición', sub: 'Legal y mecánica' },
  { key: 'fotos', title: 'Fotografías', sub: '6 fotos del vehículo' },
  { key: 'precio', title: 'Expectativa', sub: 'Cuánto esperás recibir' },
  { key: 'confirmar', title: 'Confirmación', sub: 'Revisá y enviá' },
];
const DRAFT_KEY = 'guaca_form_draft_v1';
const emptyForm = () => ({
  cliente: { nombre: '', apellidos: '', cedula: '', telefono: '', email: '' },
  vehiculo: { marca: '', marcaOtra: '', modelo: '', anio: '', placa: '', traccion: '', transmision: '', combustible: '', provincia: '', canton: '', distrito: '', comentarios: '' },
  condicion: { documentos: null, prendado: null, chocado: null, desinscrito: null, arranca: null, desplaza: null },
  expectativa: { monto: '', negociable: null },
  privacidad: false,
});

/* ---------- validación por paso ---------- */
function validateStep(i, f, fotos) {
  const e = {};
  if (i === 0) {
    const c = f.cliente;
    if (!c.nombre.trim()) e.nombre = 'Ingresá tu nombre.';
    if (!c.apellidos.trim()) e.apellidos = 'Ingresá tus apellidos.';
    if (!c.cedula) e.cedula = 'Ingresá tu número de cédula.';
    else if (!GU.validCedula(c.cedula)) e.cedula = 'La cédula debe tener 9 dígitos (o 11–12 si es DIMEX).';
    if (!c.telefono) e.telefono = 'Ingresá un número de teléfono.';
    else if (!GU.validTel(c.telefono)) e.telefono = 'Usá un número de Costa Rica de 8 dígitos (ej. 8888-8888).';
    if (!GU.validEmail(c.email)) e.email = 'Revisá el formato del correo.';
  }
  if (i === 1) {
    const v = f.vehiculo;
    if (!v.marca) e.marca = 'Seleccioná la marca.';
    if (v.marca === 'Otra' && !v.marcaOtra.trim()) e.marcaOtra = 'Escribí la marca.';
    if (!v.modelo.trim()) e.modelo = 'Indicá el modelo.';
    if (!v.anio) e.anio = 'Seleccioná el año.';
    if (!v.placa.trim()) e.placa = 'Ingresá el número de placa.';
    else if (GU.normPlaca(v.placa).length < 3) e.placa = 'Revisá el número de placa.';
    if (!v.traccion) e.traccion = 'Elegí la tracción.';
    if (!v.transmision) e.transmision = 'Elegí la transmisión.';
    if (!v.combustible) e.combustible = 'Elegí el combustible.';
    if (!v.provincia) e.provincia = 'Seleccioná la provincia.';
    if (!v.canton) e.canton = 'Seleccioná el cantón.';
    if (!v.distrito) e.distrito = 'Seleccioná el distrito.';
  }
  if (i === 2) GU.preguntasCondicion.forEach((p) => { if (f.condicion[p.key] === null) e[p.key] = 'Elegí Sí o No.'; });
  if (i === 3) GU.fotosSlots.forEach((s) => { if (!fotos[s.key]) e[s.key] = 'Falta esta foto.'; });
  if (i === 4) {
    const m = Number(GU.digits(f.expectativa.monto));
    if (!m) e.monto = 'Indicá el monto que esperás recibir.';
    else if (m < 100000) e.monto = 'El monto parece muy bajo. Revisalo (en colones).';
    if (f.expectativa.negociable === null) e.negociable = 'Elegí Sí o No.';
  }
  if (i === 5 && !f.privacidad) e.privacidad = 'Debés aceptar la política de privacidad para enviar.';
  return e;
}

/* ---------- piezas ---------- */
function Field({ label, req, opt, err, help, children }) {
  return (
    <div className={'field' + (err ? ' err' : '')}>
      <label>{label}{req && <span className="req">*</span>}{opt && <span className="opt"> (opcional)</span>}</label>
      {children}
      {err ? <span className="msg" role="alert"><Icon name="alert" size={14} style={{ marginTop: 2 }} />{err}</span> : help ? <span className="help">{help}</span> : null}
    </div>
  );
}
function Segmented({ value, options, onChange, err, name }) {
  return (
    <div className={'seg' + (err ? ' seg-err' : '')} role="radiogroup" aria-label={name}>
      {options.map((o) => {
        const v = typeof o === 'string' ? o : o.value, l = typeof o === 'string' ? o : o.label;
        return (
          <button type="button" key={String(v)} role="radio" aria-checked={value === v} className={'seg-opt' + (value === v ? ' on' : '')} onClick={() => onChange(v)}>
            {value === v && <Icon name="check" size={16} />}{l}
          </button>
        );
      })}
    </div>
  );
}

function StepPersonal({ f, set, errs }) {
  const c = f.cliente, up = (k, v) => set((s) => ({ ...s, cliente: { ...s.cliente, [k]: v } }));
  return (
    <div className="grid2">
      <Field label="Nombre" req err={errs.nombre}><input className="input" autoComplete="given-name" value={c.nombre} onChange={(e) => up('nombre', e.target.value)} placeholder="Ej. María" /></Field>
      <Field label="Apellidos" req err={errs.apellidos}><input className="input" autoComplete="family-name" value={c.apellidos} onChange={(e) => up('apellidos', e.target.value)} placeholder="Ej. Rodríguez Solano" /></Field>
      <Field label="Número de cédula" req err={errs.cedula} help="Física (9 dígitos) o DIMEX."><input className="input num" inputMode="numeric" value={c.cedula} onChange={(e) => up('cedula', GU.fmtCedula(e.target.value))} placeholder="1-2345-6789" /></Field>
      <Field label="Teléfono" req err={errs.telefono} help="Preferiblemente con WhatsApp.">
        <div className="tel-wrap"><span className="pre">+506</span><input className="input num" type="tel" inputMode="numeric" autoComplete="tel-national" value={c.telefono} onChange={(e) => up('telefono', GU.fmtTel(e.target.value))} placeholder="8888-8888" /></div>
      </Field>
      <div className="span2"><Field label="Correo electrónico" opt err={errs.email}><input className="input" type="email" inputMode="email" autoComplete="email" value={c.email} onChange={(e) => up('email', e.target.value.trim())} placeholder="nombre@correo.com" /></Field></div>
    </div>
  );
}

function StepVehiculo({ f, set, errs }) {
  const v = f.vehiculo, up = (patch) => set((s) => ({ ...s, vehiculo: { ...s.vehiculo, ...patch } }));
  const modelos = GU.modelos(v.marca);
  const listId = 'modelos-list';
  return (
    <div className="grid2">
      <Field label="Marca" req err={errs.marca}>
        <select className="select" value={v.marca} onChange={(e) => up({ marca: e.target.value, modelo: '', marcaOtra: '' })}>
          <option value="">Seleccioná…</option>
          {GU.listaMarcas.map((m) => <option key={m}>{m}</option>)}
          <option value="Otra">Otra</option>
        </select>
      </Field>
      {v.marca === 'Otra' ? (
        <Field label="¿Cuál marca?" req err={errs.marcaOtra}><input className="input" value={v.marcaOtra} onChange={(e) => up({ marcaOtra: e.target.value })} placeholder="Escribí la marca" /></Field>
      ) : (
        <Field label="Modelo" req err={errs.modelo} help={modelos.length ? 'Elegí de la lista o escribilo.' : null}>
          <input className="input" list={listId} disabled={!v.marca} value={v.modelo} onChange={(e) => up({ modelo: e.target.value })} placeholder={v.marca ? 'Ej. ' + (modelos[0] || '') : 'Primero elegí la marca'} />
          <datalist id={listId}>{modelos.map((m) => <option key={m} value={m} />)}</datalist>
        </Field>
      )}
      {v.marca === 'Otra' && <Field label="Modelo" req err={errs.modelo}><input className="input" value={v.modelo} onChange={(e) => up({ modelo: e.target.value })} placeholder="Escribí el modelo" /></Field>}
      <Field label="Año" req err={errs.anio}>
        <select className="select num" value={v.anio} onChange={(e) => up({ anio: e.target.value })}>
          <option value="">Seleccioná…</option>
          {GU.anios.map((y) => <option key={y}>{y}</option>)}
        </select>
      </Field>
      <Field label="Número de placa" req err={errs.placa}><input className="input" style={{ textTransform: 'uppercase', letterSpacing: '.5px' }} autoCapitalize="characters" value={v.placa} onChange={(e) => up({ placa: e.target.value.toUpperCase().slice(0, 10) })} placeholder="Ej. BRS123" /></Field>
      <div className="span2 opts3">
        <Field label="Tracción" req err={errs.traccion}><Segmented name="Tracción" value={v.traccion} options={['4x2', '4x4']} onChange={(x) => up({ traccion: x })} err={errs.traccion} /></Field>
        <Field label="Transmisión" req err={errs.transmision}><Segmented name="Transmisión" value={v.transmision} options={['Manual', 'Automática']} onChange={(x) => up({ transmision: x })} err={errs.transmision} /></Field>
      </div>
      <div className="span2"><Field label="Combustible" req err={errs.combustible}><Segmented name="Combustible" value={v.combustible} options={['Gasolina', 'Diésel', 'Híbrido', 'Eléctrico', 'Otro']} onChange={(x) => up({ combustible: x })} err={errs.combustible} /></Field></div>
      <div className="span2 loc3">
        <Field label="Provincia" req err={errs.provincia}>
          <select className="select" value={v.provincia} onChange={(e) => up({ provincia: e.target.value, canton: '', distrito: '' })}>
            <option value="">Seleccioná…</option>{GU.provincias.map((p) => <option key={p}>{p}</option>)}
          </select>
        </Field>
        <Field label="Cantón" req err={errs.canton}>
          <select className="select" disabled={!v.provincia} value={v.canton} onChange={(e) => up({ canton: e.target.value, distrito: '' })}>
            <option value="">{v.provincia ? 'Seleccioná…' : '—'}</option>{GU.cantones(v.provincia).map((p) => <option key={p}>{p}</option>)}
          </select>
        </Field>
        <Field label="Distrito" req err={errs.distrito}>
          <select className="select" disabled={!v.canton} value={v.distrito} onChange={(e) => up({ distrito: e.target.value })}>
            <option value="">{v.canton ? 'Seleccioná…' : '—'}</option>{GU.distritos(v.provincia, v.canton).map((p) => <option key={p}>{p}</option>)}
          </select>
        </Field>
      </div>
      <div className="span2"><Field label="Comentarios adicionales" opt><textarea className="textarea" value={v.comentarios} maxLength={800} onChange={(e) => up({ comentarios: e.target.value })} placeholder="Kilometraje aproximado, mantenimientos, extras, detalles que debamos saber…" /></Field></div>
    </div>
  );
}

function StepCondicion({ f, set, errs }) {
  return (
    <div className="cond-list">
      {GU.preguntasCondicion.map((p, i) => {
        const val = f.condicion[p.key];
        return (
          <div key={p.key} className={'cond-row' + (errs[p.key] ? ' err' : '')}>
            <div className="cond-q"><span className="cond-n num">{i + 1}</span>{p.q}</div>
            <div className="yn" role="radiogroup" aria-label={p.q}>
              {[true, false].map((b) => (
                <button key={String(b)} type="button" role="radio" aria-checked={val === b} className={'yn-btn' + (val === b ? ' on' : '')} onClick={() => set((s) => ({ ...s, condicion: { ...s.condicion, [p.key]: b } }))}>
                  {val === b && <Icon name="check" size={16} />}{b ? 'Sí' : 'No'}
                </button>
              ))}
            </div>
          </div>
        );
      })}
      <p className="note"><Icon name="info" size={16} />Respondé con sinceridad: no descarta tu vehículo, nos ayuda a evaluarlo mejor.</p>
    </div>
  );
}

function PhotoSlot({ slot, url, onFile, err, busy, idx }) {
  const camRef = useRef(), fileRef = useRef();
  return (
    <div className={'photo' + (url ? ' has' : '') + (err ? ' err' : '')}>
      <div className="photo-frame" onClick={() => !url && camRef.current.click()}>
        {url ? <img src={url} alt={slot.label} /> : (
          <div className="photo-empty">
            <span className="photo-ic"><Icon name="camera" size={22} /></span>
            <span className="photo-tap">Tomar foto</span>
          </div>
        )}
        {busy && <div className="photo-busy"><span className="spin" /></div>}
        {url && <span className="photo-ok"><Icon name="check" size={14} /></span>}
        <span className="photo-n num">{idx + 1}/6</span>
      </div>
      <div className="photo-meta">
        <div className="photo-lbl">{slot.label}</div>
        <div className="photo-hint">{slot.hint}</div>
        {err && <div className="photo-err"><Icon name="alert" size={13} />{err}</div>}
        <div className="photo-acts">
          <button type="button" className="btn btn-ghost btn-sm" onClick={() => camRef.current.click()}><Icon name={url ? 'refresh' : 'camera'} size={15} />{url ? 'Sustituir' : 'Cámara'}</button>
          <button type="button" className="btn btn-text btn-sm" onClick={() => fileRef.current.click()}><Icon name="upload" size={15} />Galería</button>
        </div>
      </div>
      <input ref={camRef} className="sr" type="file" accept="image/*" capture="environment" onChange={(e) => { e.target.files[0] && onFile(e.target.files[0]); e.target.value = ''; }} />
      <input ref={fileRef} className="sr" type="file" accept="image/jpeg,image/png,image/webp,image/heic,image/heif" onChange={(e) => { e.target.files[0] && onFile(e.target.files[0]); e.target.value = ''; }} />
    </div>
  );
}

function StepFotos({ fotos, setFoto, errs }) {
  const [busy, setBusy] = useState({}); const [ferr, setFerr] = useState({});
  const done = GU.fotosSlots.filter((s) => fotos[s.key]).length;
  const handle = async (key, file) => {
    setBusy((b) => ({ ...b, [key]: true })); setFerr((x) => ({ ...x, [key]: null }));
    try { const blob = await GU.compressImage(file); await setFoto(key, blob); }
    catch (e) { setFerr((x) => ({ ...x, [key]: e.message })); }
    setBusy((b) => ({ ...b, [key]: false }));
  };
  return (
    <div>
      <div className="photo-progress"><div><b className="num">{done} de 6</b> fotos listas</div><div className="pbar"><i style={{ width: (done / 6) * 100 + '%' }} /></div></div>
      <div className="photos">
        {GU.fotosSlots.map((s, i) => <PhotoSlot key={s.key} idx={i} slot={s} url={fotos[s.key]} busy={busy[s.key]} err={ferr[s.key] || errs[s.key]} onFile={(file) => handle(s.key, file)} />)}
      </div>
      <p className="note"><Icon name="info" size={16} />JPG, PNG o WEBP de hasta {GU.MAX_UPLOAD_MB} MB. Optimizamos las fotos automáticamente. Tomalas con buena luz y el vehículo completo en cuadro.</p>
    </div>
  );
}

function StepPrecio({ f, set, errs }) {
  const e = f.expectativa, up = (patch) => set((s) => ({ ...s, expectativa: { ...s.expectativa, ...patch } }));
  const shown = e.monto ? Number(GU.digits(e.monto)).toLocaleString('es-CR').replace(/\s|,/g, '.') : '';
  return (
    <div className="grid1">
      <Field label="¿Cuánto esperás recibir por tu vehículo?" req err={errs.monto} help="Monto en colones costarricenses.">
        <div className="money-wrap money-lg"><span className="cur">₡</span><input className="input num" inputMode="numeric" value={shown} onChange={(ev) => up({ monto: GU.digits(ev.target.value).slice(0, 11) })} placeholder="0" /></div>
      </Field>
      <Field label="¿El monto es negociable?" req err={errs.negociable}>
        <div className="yn yn-wide">
          {[true, false].map((b) => (
            <button key={String(b)} type="button" className={'yn-btn' + (e.negociable === b ? ' on' : '')} onClick={() => up({ negociable: b })}>{e.negociable === b && <Icon name="check" size={16} />}{b ? 'Sí, es negociable' : 'No'}</button>
          ))}
        </div>
      </Field>
    </div>
  );
}

function SumBlock({ title, onEdit, rows }) {
  return (
    <div className="sum">
      <div className="sum-h"><h4>{title}</h4><button type="button" className="btn btn-text btn-sm" onClick={onEdit}><Icon name="edit" size={14} />Editar</button></div>
      <dl>{rows.map(([k, v]) => <React.Fragment key={k}><dt>{k}</dt><dd>{v || '—'}</dd></React.Fragment>)}</dl>
    </div>
  );
}
function StepConfirmar({ f, set, fotos, go, errs }) {
  const c = f.cliente, v = f.vehiculo, yn = (b) => (b ? 'Sí' : 'No');
  return (
    <div className="grid1">
      <SumBlock title="Datos personales" onEdit={() => go(0)} rows={[['Nombre', c.nombre + ' ' + c.apellidos], ['Cédula', c.cedula], ['Teléfono', '+506 ' + c.telefono], ['Correo', c.email]]} />
      <SumBlock title="Vehículo" onEdit={() => go(1)} rows={[['Vehículo', `${v.marca === 'Otra' ? v.marcaOtra : v.marca} ${v.modelo} ${v.anio}`], ['Placa', v.placa], ['Tracción / Transmisión', v.traccion + ' · ' + v.transmision], ['Combustible', v.combustible], ['Ubicación', `${v.distrito}, ${v.canton}, ${v.provincia}`], ['Comentarios', v.comentarios]]} />
      <SumBlock title="Condición" onEdit={() => go(2)} rows={GU.preguntasCondicion.map((p) => [p.short, yn(f.condicion[p.key])])} />
      <div className="sum">
        <div className="sum-h"><h4>Fotografías</h4><button type="button" className="btn btn-text btn-sm" onClick={() => go(3)}><Icon name="edit" size={14} />Editar</button></div>
        <div className="sum-photos">{GU.fotosSlots.map((s) => <figure key={s.key}><img src={fotos[s.key]} alt="" /><figcaption>{s.label}</figcaption></figure>)}</div>
      </div>
      <SumBlock title="Expectativa de venta" onEdit={() => go(4)} rows={[['Monto esperado', GU.fmtCRC(Number(f.expectativa.monto))], ['Negociable', yn(f.expectativa.negociable)]]} />
      <label className={'consent' + (errs.privacidad ? ' err' : '')}>
        <input type="checkbox" checked={f.privacidad} onChange={(e) => set((s) => ({ ...s, privacidad: e.target.checked }))} />
        <span className="box"><Icon name="check" size={14} /></span>
        <span>Acepto la <a href="#privacidad" onClick={(e) => { e.preventDefault(); window.__openPriv && window.__openPriv(); }}>política de privacidad</a> y autorizo a Guaca Usados a tratar mis datos personales para evaluar mi vehículo y contactarme, conforme a la Ley N.º 8968 de Protección de la Persona frente al Tratamiento de sus Datos Personales.</span>
      </label>
      {errs.privacidad && <span className="msg-solo"><Icon name="alert" size={14} />{errs.privacidad}</span>}
      <p className="note"><Icon name="info" size={16} />El envío de este formulario no representa un compromiso de compra por parte de Guaca Usados.</p>
    </div>
  );
}

function PrivacyModal({ onClose }) {
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Política de privacidad">
        <div className="modal-h"><h3>Política de privacidad</h3><button className="btn btn-text btn-sm" onClick={onClose}><Icon name="x" /></button></div>
        <div className="modal-b">
          <p><b>Responsable:</b> Guaca Usados. Los datos que ingresás (identificación, contacto, información y fotografías del vehículo) se usan únicamente para evaluar una posible compra de tu vehículo y contactarte al respecto.</p>
          <p><b>Acceso:</b> solo personal autorizado de Guaca Usados puede ver tu solicitud. Las fotografías se guardan en almacenamiento privado y no se publican.</p>
          <p><b>Tus derechos (Ley 8968):</b> podés solicitar acceso, rectificación o eliminación de tus datos en cualquier momento escribiendo a los canales oficiales de Guaca Usados.</p>
          <p><b>Conservación:</b> los datos se conservan mientras sean necesarios para la gestión de la solicitud y las obligaciones legales aplicables.</p>
          <p className="muted">Texto de referencia — debe ser validado por el área legal de Guaca Usados antes de producción.</p>
        </div>
      </div>
    </div>
  );
}

function Success({ code, onNew }) {
  const [copied, setCopied] = useState(false);
  return (
    <div className="success">
      <div className="success-ic"><Icon name="check" size={34} /></div>
      <h1 className="disp"><span className="b">¡Recibimos</span> <span className="r">tu solicitud!</span></h1>
      <p>Gracias por considerar a Guaca Usados. Nuestro equipo revisará la información de tu vehículo y se comunicará con vos en caso de requerir información adicional.</p>
      <div className="code-box">
        <span>Tu código de solicitud</span>
        <b className="num">{code}</b>
        <button className="btn btn-ghost btn-sm" onClick={() => { navigator.clipboard && navigator.clipboard.writeText(code); setCopied(true); }}><Icon name={copied ? 'check' : 'copy'} size={15} />{copied ? 'Copiado' : 'Copiar código'}</button>
      </div>
      <p className="note center"><Icon name="info" size={16} />Guardá este código para cualquier consulta. El envío de este formulario no representa un compromiso de compra.</p>
      <button className="btn btn-ghost" onClick={onNew}>Registrar otro vehículo</button>
    </div>
  );
}

/* ---------- App ---------- */
function FormApp() {
  const draft = useMemo(() => { try { return JSON.parse(GU.safeLS.get(DRAFT_KEY)); } catch (e) { return null; } }, []);
  const [f, set] = useState(() => (draft && draft.f) || emptyForm());
  const [step, setStep] = useState(() => (draft && draft.step) || 0);
  const [maxStep, setMaxStep] = useState(() => (draft && draft.maxStep) || 0);
  const [fotos, setFotos] = useState({}); // slot -> objectURL
  const blobsRef = useRef({});
  const [errs, setErrs] = useState({});
  const [sending, setSending] = useState(false);
  const [code, setCode] = useState(null);
  const [priv, setPriv] = useState(false);
  const topRef = useRef();
  window.__openPriv = () => setPriv(true);

  // restaurar fotos del borrador
  useEffect(() => { (async () => {
    const out = {};
    for (const s of GU.fotosSlots) { const b = await GU.fotos.get('draft_' + s.key).catch(() => null); if (b) { blobsRef.current[s.key] = b; out[s.key] = URL.createObjectURL(b); } }
    setFotos(out);
  })(); }, []);
  useEffect(() => { if (!code) GU.safeLS.set(DRAFT_KEY, JSON.stringify({ f, step, maxStep })); }, [f, step, maxStep, code]);
  // revalidar en vivo campos con error
  useEffect(() => { if (Object.keys(errs).length) setErrs(validateStep(step, f, fotos)); }, [f, fotos]);

  const setFoto = async (key, blob) => {
    blobsRef.current[key] = blob; await GU.fotos.put('draft_' + key, blob);
    setFotos((x) => { x[key] && URL.revokeObjectURL(x[key]); return { ...x, [key]: URL.createObjectURL(blob) }; });
  };
  const scrollTop = () => { const el = document.scrollingElement; el && el.scrollTo({ top: 0, behavior: 'smooth' }); };
  const go = (i) => { setErrs({}); setStep(i); scrollTop(); };
  const next = () => {
    const e = validateStep(step, f, fotos);
    setErrs(e);
    if (Object.keys(e).length) {
      setTimeout(() => { const el = document.querySelector('.err, .seg-err, .photo.err'); if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 120; window.scrollTo({ top: y, behavior: 'smooth' }); } }, 30);
      return;
    }
    if (step < 5) { const n = step + 1; setStep(n); setMaxStep((m) => Math.max(m, n)); scrollTop(); }
    else submit();
  };
  const submit = async () => {
    setSending(true);
    try {
      const v = f.vehiculo;
      const data = {
        cliente: { ...f.cliente, nombre: f.cliente.nombre.trim(), apellidos: f.cliente.apellidos.trim() },
        vehiculo: { ...v, marca: v.marca === 'Otra' ? v.marcaOtra.trim() : v.marca, marcaOtra: undefined, anio: Number(v.anio), placa: GU.normPlaca(v.placa), modelo: v.modelo.trim() },
        condicion: f.condicion,
        expectativa: { monto: Number(f.expectativa.monto), negociable: f.expectativa.negociable },
        consentimiento: { aceptado: true, at: new Date().toISOString(), version: '2026-10' },
      };
      await new Promise((r) => setTimeout(r, 700));
      const c = await GU.submitRequest(data, blobsRef.current);
      for (const s of GU.fotosSlots) await GU.fotos.del('draft_' + s.key).catch(() => {});
      GU.safeLS.del(DRAFT_KEY);
      setCode(c); scrollTop();
    } catch (e) { console.error(e); setErrs({ privacidad: 'No pudimos enviar la solicitud. Revisá tu conexión e intentá de nuevo.' }); }
    setSending(false);
  };
  const reset = () => { Object.values(fotos).forEach((u) => URL.revokeObjectURL(u)); blobsRef.current = {}; setFotos({}); set(emptyForm()); setStep(0); setMaxStep(0); setCode(null); setErrs({}); };

  const S = FORM_STEPS[step];
  const nErr = Object.keys(errs).length;
  return (
    <div className="fa" ref={topRef}>
      <header className="fa-top">
        <div className="fa-top-in">
          <GuLogo sub={null} />
          <span className="secure"><Icon name="lock" size={14} />Conexión segura</span>
        </div>
      </header>

      {code ? <main className="fa-main"><div className="fa-card"><Success code={code} onNew={reset} /></div></main> : (
        <main className="fa-main">
          <section className="fa-hero">
            <div className="hero-l">
              <h1 className="disp"><span className="b">¿Querés vender</span><span className="r">tu carro?</span></h1>
              <span className="hero-rule" />
              <p className="hero-tag">Chocado, usado o en buen estado</p>
            </div>
            <div className="hero-r">
              <div className="disp hero-buy"><span className="b">Aquí te lo</span><span className="pill-red">compramos</span></div>
              <div className="hero-doc">
                <span className="doc-ic"><b /><b /><b className="s" /><i className="cursor" /></span>
                <p>En Guaca Usados queremos conocer tu vehículo. Completá el siguiente formulario con tus datos y la información de tu carro para que nuestro equipo pueda evaluar tu solicitud.</p>
              </div>
            </div>
          </section>

          <div className="fa-layout">
            <aside className="fa-steps" aria-label="Pasos">
              <ol>
                {FORM_STEPS.map((s, i) => (
                  <li key={s.key} className={(i === step ? 'cur ' : '') + (i < step || i <= maxStep && i !== step ? 'done' : '')}>
                    <button type="button" disabled={i > maxStep} onClick={() => go(i)}>
                      <span className="dot num">{i < step || (i <= maxStep && i !== step) ? <Icon name="check" size={14} /> : i + 1}</span>
                      <span><b>{s.title}</b><small>{s.sub}</small></span>
                    </button>
                  </li>
                ))}
              </ol>
              <div className="fa-trust"><Icon name="shield" size={18} /><span>Tus datos solo los ve el equipo de Guaca Usados.</span></div>
            </aside>

            <div className="fa-card">
              <div className="fa-prog">
                <div className="fa-prog-row"><span className="num">Paso {step + 1} de 6</span><span>{S.title}</span></div>
                <div className="fa-prog-bar">{FORM_STEPS.map((_, i) => <i key={i} className={i <= step ? 'on' : ''} />)}</div>
              </div>
              <div className="fa-head">
                <h2 className="disp">{['Datos personales', 'Información del vehículo', 'Condición legal y mecánica', 'Fotografías del vehículo', 'Expectativa de venta', 'Revisá tu solicitud'][step]}</h2>
                <p>{['Usaremos estos datos solo para comunicarnos con vos sobre tu vehículo.', 'Contanos qué carro tenés y dónde se encuentra.', 'Tocá Sí o No en cada pregunta.', 'Necesitamos las 6 fotos. Podés usar la cámara del celular o subirlas desde tu galería.', '¿Cuánto esperás recibir? Esto nos ayuda a preparar una propuesta.', 'Confirmá que todo esté correcto antes de enviar.'][step]}</p>
              </div>

              {nErr > 0 && <div className="fa-alert" role="alert"><Icon name="alert" size={18} /><span>{nErr === 1 ? 'Hay 1 dato por completar o corregir.' : `Hay ${nErr} datos por completar o corregir.`}</span></div>}

              <div className="fa-body">
                {step === 0 && <StepPersonal f={f} set={set} errs={errs} />}
                {step === 1 && <StepVehiculo f={f} set={set} errs={errs} />}
                {step === 2 && <StepCondicion f={f} set={set} errs={errs} />}
                {step === 3 && <StepFotos fotos={fotos} setFoto={setFoto} errs={errs} />}
                {step === 4 && <StepPrecio f={f} set={set} errs={errs} />}
                {step === 5 && <StepConfirmar f={f} set={set} fotos={fotos} go={go} errs={errs} />}
              </div>

              <div className="fa-actions">
                {step > 0 ? <button type="button" className="btn btn-ghost" onClick={() => go(step - 1)}><Icon name="chevL" />Atrás</button> : <span />}
                <button type="button" className={'btn btn-next ' + (step === 5 ? 'btn-red' : 'btn-primary')} disabled={sending} onClick={next}>
                  {sending ? <><span className="spin light" />Enviando…</> : step === 5 ? <>Enviar solicitud</> : <>Continuar<Icon name="chevR" /></>}
                </button>
              </div>
            </div>
          </div>
          <footer className="fa-foot">
            <span>© {new Date().getFullYear()} Guaca Usados</span>
            <a href="#privacidad" onClick={(e) => { e.preventDefault(); setPriv(true); }}>Política de privacidad</a>
          </footer>
        </main>
      )}
      {priv && <PrivacyModal onClose={() => setPriv(false)} />}
    </div>
  );
}
GU.db.ready.then(() => ReactDOM.createRoot(document.getElementById('root')).render(<FormApp />));