// Registration / onboarding — full-bleed editorial intro
function RegistroScreen({ onSubmit }) {
  const T = window.T;
  const { Icon } = window;
  const [nombre, setNombre] = React.useState('');
  const [zona, setZona] = React.useState('');
  const [telefono, setTelefono] = React.useState('');
  const [touched, setTouched] = React.useState({});
  const [step, setStep] = React.useState(0); // 0 = intro, 1 = form

  const nombreValid = nombre.trim().split(/\s+/).length >= 2;
  const telValid = /^0(412|414|416|424|426)\d{7}$/.test(telefono);
  const zonaValid = !!zona;
  const canSubmit = nombreValid && telValid && zonaValid;

  const errs = {
    nombre: touched.nombre && !nombreValid ? 'Ingresa nombre y apellido' : '',
    telefono: touched.telefono && !telValid ? 'Formato: 04121234567' : '',
    zona: touched.zona && !zonaValid ? 'Selecciona una zona' : '',
  };

  const label = (t) => (
    <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: T.inkMute, marginBottom: 8 }}>{t}</div>
  );

  const inputStyle = (ok) => ({
    width: '100%', padding: '14px 16px', borderRadius: 14,
    border: `1px solid ${ok === false ? T.danger : T.hairline}`,
    background: T.paper, fontFamily: T.sans, fontSize: 15, color: T.ink,
    outline: 'none', boxSizing: 'border-box',
  });

  if (step === 0) {
    // Intro / brand moment
    return (
      <div style={{
        width: '100%', height: '100%', background: T.paper,
        display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden',
      }}>
        {/* accent block */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: '52%',
          background: `linear-gradient(180deg, oklch(0.88 0.07 30) 0%, oklch(0.78 0.1 30) 100%)`,
        }} />
        {/* content on accent */}
        <div style={{ position: 'relative', zIndex: 2, padding: '80px 28px 0', flex: 1, display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: 'rgba(255,255,255,0.8)', marginBottom: 20 }}>
            Est. · Venezuela · 2024
          </div>
          <div style={{ fontFamily: T.serif, fontSize: 96, lineHeight: 0.9, color: T.paper, letterSpacing: -2, marginBottom: 12 }}>
            Inova
          </div>
          <div style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 28, lineHeight: 1.1, color: 'rgba(255,255,255,0.85)', letterSpacing: -0.5, maxWidth: 280 }}>
            El pedido, como un ritual.
          </div>

          <div style={{ flex: 1 }} />

          {/* card */}
          <div style={{
            background: T.paper, borderRadius: 24, padding: 24,
            boxShadow: '0 20px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03)',
            marginBottom: 28,
          }}>
            <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: T.inkMute, marginBottom: 8 }}>
              Para vendedoras
            </div>
            <div style={{ fontFamily: T.serif, fontSize: 24, lineHeight: 1.15, color: T.ink, letterSpacing: -0.3, marginBottom: 16 }}>
              Gestiona catálogos, arma pedidos y envía por WhatsApp. Sin fricción.
            </div>
            <div style={{ display: 'flex', gap: 16, marginBottom: 20 }}>
              {['Esika', "L'Bel", 'Cyzone', '+3'].map((c, i) => (
                <div key={i} style={{
                  fontFamily: T.mono, fontSize: 11, color: T.inkSoft,
                  padding: '4px 0', borderTop: `1px solid ${T.hairline}`, flex: 1,
                }}>{c}</div>
              ))}
            </div>
            <button onClick={() => setStep(1)} style={{
              width: '100%', padding: '16px', borderRadius: 999,
              background: T.ink, color: T.paper, border: 'none', cursor: 'pointer',
              fontFamily: T.sans, fontSize: 15, fontWeight: 500, letterSpacing: 0.2,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              Comenzar
              <Icon name="arrowR" size={16} color={T.paper} />
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ width: '100%', height: '100%', background: T.paper, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '68px 24px 20px' }}>
        <button onClick={() => setStep(0)} style={{
          background: 'none', border: 'none', padding: 0, cursor: 'pointer', marginBottom: 20,
          fontFamily: T.mono, fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase', color: T.inkMute,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <Icon name="chevronL" size={12} color={T.inkMute} />
          Volver
        </button>
        <div style={{ fontFamily: T.serif, fontSize: 38, lineHeight: 1, color: T.ink, letterSpacing: -1 }}>
          Tus datos,
        </div>
        <div style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 38, lineHeight: 1.1, color: T.accent, letterSpacing: -1 }}>
          una sola vez.
        </div>
      </div>

      <div style={{ padding: '0 24px', flex: 1, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          {label('Nombre y apellido')}
          <input
            value={nombre} onChange={(e) => setNombre(e.target.value)}
            onBlur={() => setTouched({ ...touched, nombre: true })}
            placeholder="María Pérez"
            style={inputStyle(errs.nombre ? false : undefined)}
          />
          {errs.nombre && <div style={{ color: T.danger, fontSize: 12, marginTop: 6, fontFamily: T.sans }}>{errs.nombre}</div>}
        </div>

        <div>
          {label('Zona de trabajo')}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {window.ZONAS.map(z => (
              <button key={z} onClick={() => { setZona(z); setTouched({ ...touched, zona: true }); }}
                style={{
                  padding: '11px 8px', borderRadius: 12,
                  border: `1px solid ${zona === z ? T.ink : T.hairline}`,
                  background: zona === z ? T.ink : T.paper,
                  color: zona === z ? T.paper : T.ink,
                  fontFamily: T.sans, fontSize: 13, fontWeight: 500,
                  cursor: 'pointer', transition: 'all 0.15s',
                }}>{z}</button>
            ))}
          </div>
          {errs.zona && <div style={{ color: T.danger, fontSize: 12, marginTop: 6, fontFamily: T.sans }}>{errs.zona}</div>}
        </div>

        <div>
          {label('Teléfono')}
          <input
            value={telefono} onChange={(e) => setTelefono(e.target.value.replace(/\D/g, '').slice(0, 11))}
            onBlur={() => setTouched({ ...touched, telefono: true })}
            placeholder="04121234567" inputMode="numeric"
            style={{ ...inputStyle(errs.telefono ? false : undefined), fontFamily: T.mono, letterSpacing: 1 }}
          />
          {errs.telefono && <div style={{ color: T.danger, fontSize: 12, marginTop: 6, fontFamily: T.sans }}>{errs.telefono}</div>}
        </div>
      </div>

      <div style={{ padding: '24px 24px 40px' }}>
        <window.PrimaryBtn
          disabled={!canSubmit}
          onClick={() => canSubmit && onSubmit({ nombre, zona, telefono })}
          icon={<Icon name="arrowR" size={16} color={canSubmit ? T.paper : T.inkMute} />}
        >
          Entrar a mi cuenta
        </window.PrimaryBtn>
      </div>
    </div>
  );
}

window.RegistroScreen = RegistroScreen;