// Auth screens — Splash, Login, Register
const SplashScreen = ({ onDone }) => {
  useEffect(() => { const t = setTimeout(onDone, 1800); return () => clearTimeout(t); }, []);
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(155deg, #1b9a5f 0%, #126b41 60%, #0d4f30 100%)', display: 'grid', placeItems: 'center', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 20%, rgba(255,200,69,0.18), transparent 50%), radial-gradient(circle at 70% 80%, rgba(255,107,61,0.2), transparent 50%)' }}/>
      <div style={{ textAlign: 'center', color: 'white', zIndex: 2 }}>
        <div className="pop-in" style={{ display: 'inline-block' }}>
          <Logo size={104}/>
        </div>
        <div className="fade-in" style={{ animationDelay: '.25s', marginTop: 22, fontSize: 30, fontWeight: 900, letterSpacing: '-0.03em' }}>
          Precio<span style={{ color: '#ffc845' }}>Vivo</span>
        </div>
        <div className="fade-in" style={{ animationDelay: '.4s', opacity: 0.8, marginTop: 6, fontSize: 14, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
          tu lista, tu mejor precio
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 80, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
        <div className="fade-in" style={{ animationDelay: '.55s', width: 32, height: 32, border: '3px solid rgba(255,255,255,0.25)', borderTopColor: 'white', borderRadius: '50%', animation: 'spin 0.8s linear infinite, fade-in .4s ease' }}/>
      </div>
    </div>
  );
};

const LoginScreen = ({ onLogin, onRegister }) => {
  const [email, setEmail] = useState('daniela@ejemplo.com');
  const [pwd, setPwd] = useState('preciovivo');
  const [showPwd, setShowPwd] = useState(false);
  return (
    <div className="fade-in" style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '8px 28px 24px' }}>
      <div style={{ marginTop: 18, marginBottom: 28 }}>
        <Brand size={20}/>
      </div>
      <div style={{ marginBottom: 28 }}>
        <h1 style={{ fontSize: 32 }}>Hola de nuevo<span style={{ color: 'var(--c-accent)' }}>.</span></h1>
        <p className="muted" style={{ marginTop: 8, fontSize: 15 }}>Ingresa para comparar precios y seguir tus ahorros.</p>
      </div>
      <div className="stack stack-4" style={{ flex: 1 }}>
        <div className="field">
          <label className="field-label">CORREO</label>
          <div className="input-icon">
            <span className="ico"><Icon name="mail" size={20}/></span>
            <input className="input" value={email} onChange={e => setEmail(e.target.value)} placeholder="tu@correo.com"/>
          </div>
        </div>
        <div className="field">
          <label className="field-label">CONTRASEÑA</label>
          <div className="input-icon" style={{ position: 'relative' }}>
            <span className="ico"><Icon name="lock" size={20}/></span>
            <input className="input" type={showPwd ? 'text' : 'password'} value={pwd} onChange={e => setPwd(e.target.value)}/>
            <button onClick={() => setShowPwd(!showPwd)} style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--c-ink-3)' }}>
              <Icon name="eye" size={20}/>
            </button>
          </div>
        </div>
        <div className="row between">
          <label className="row gap-2" style={{ cursor: 'pointer', fontSize: 13, color: 'var(--c-ink-2)', fontWeight: 600 }}>
            <span className="checkbox checked" style={{ width: 20, height: 20, borderRadius: 6 }}><Icon name="check" size={14} color="white" stroke={2.5}/></span>
            Recuérdame
          </label>
          <a style={{ fontSize: 13, color: 'var(--c-primary)', fontWeight: 700, textDecoration: 'none' }}>¿Olvidaste tu clave?</a>
        </div>
      </div>
      <div className="stack stack-3" style={{ marginTop: 22 }}>
        <button className="btn btn-primary btn-block" onClick={onLogin}>
          Iniciar sesión <Icon name="arrow-right" size={18} color="white"/>
        </button>
        <div className="row gap-3" style={{ alignItems: 'center', justifyContent: 'center', padding: '6px 0' }}>
          <div style={{ flex: 1, height: 1, background: 'var(--c-line)' }}/>
          <span className="tiny muted">O CONTINÚA CON</span>
          <div style={{ flex: 1, height: 1, background: 'var(--c-line)' }}/>
        </div>
        <div className="row gap-3">
          {['G', '', 'f'].map((c, i) => (
            <button key={i} className="btn btn-ghost" style={{ flex: 1, fontFamily: 'serif', fontSize: 20, fontWeight: 700 }}>
              {i === 1 ? <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg> : c}
            </button>
          ))}
        </div>
        <div className="row" style={{ justifyContent: 'center', marginTop: 6 }}>
          <span className="small muted">¿Nuevo aquí?</span>
          <a onClick={onRegister} style={{ marginLeft: 6, fontSize: 13, color: 'var(--c-primary)', fontWeight: 800, cursor: 'pointer' }}>Crear cuenta</a>
        </div>
      </div>
    </div>
  );
};

const RegisterScreen = ({ onBack, onDone }) => {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({ name: 'Daniela Ríos', email: '', phone: '', password: '', accept: false });
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  return (
    <div className="fade-in" style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '8px 24px 24px' }}>
      <ScreenHeader onBack={step === 1 ? onBack : () => setStep(step - 1)} right={<div className="small" style={{ color: 'var(--c-ink-3)', fontWeight: 700 }}>Paso {step}/2</div>}/>
      <div style={{ height: 5, background: 'var(--c-line-2)', borderRadius: 3, margin: '4px 4px 26px' }}>
        <div style={{ height: '100%', borderRadius: 3, background: 'var(--c-primary)', width: step === 1 ? '50%' : '100%', transition: 'width .3s' }}/>
      </div>
      <div style={{ padding: '0 4px' }}>
        <h1>Crea tu cuenta</h1>
        <p className="muted" style={{ marginTop: 8, fontSize: 14 }}>{step === 1 ? 'Solo necesitamos algunos datos para comenzar.' : 'Asegura tu cuenta con una buena contraseña.'}</p>
      </div>
      <div className="stack stack-4" style={{ flex: 1, padding: '24px 4px 0' }}>
        {step === 1 ? (
          <React.Fragment>
            <div className="field">
              <label className="field-label">NOMBRE COMPLETO</label>
              <div className="input-icon"><span className="ico"><Icon name="user" size={20}/></span><input className="input" value={form.name} onChange={e => update('name', e.target.value)}/></div>
            </div>
            <div className="field">
              <label className="field-label">CORREO</label>
              <div className="input-icon"><span className="ico"><Icon name="mail" size={20}/></span><input className="input" value={form.email} onChange={e => update('email', e.target.value)} placeholder="tu@correo.com"/></div>
            </div>
            <div className="field">
              <label className="field-label">TELÉFONO</label>
              <div className="input-icon"><span className="ico" style={{ fontWeight: 700, color: 'var(--c-ink-2)' }}>+57</span><input className="input" value={form.phone} onChange={e => update('phone', e.target.value)} placeholder="300 000 0000" style={{ paddingLeft: 56 }}/></div>
            </div>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <div className="field">
              <label className="field-label">CONTRASEÑA</label>
              <div className="input-icon"><span className="ico"><Icon name="lock" size={20}/></span><input className="input" type="password" value={form.password} onChange={e => update('password', e.target.value)} placeholder="Mínimo 8 caracteres"/></div>
              <div className="row gap-2" style={{ marginTop: 6 }}>
                {[1,2,3,4].map(i => (
                  <div key={i} style={{ flex: 1, height: 5, borderRadius: 3, background: form.password.length >= i*2 ? 'var(--c-primary)' : 'var(--c-line)' }}/>
                ))}
              </div>
            </div>
            <div className="field">
              <label className="field-label">CONFIRMAR CONTRASEÑA</label>
              <div className="input-icon"><span className="ico"><Icon name="lock" size={20}/></span><input className="input" type="password" placeholder="Repite tu clave"/></div>
            </div>
            <label className="row gap-3" style={{ alignItems: 'flex-start', cursor: 'pointer' }} onClick={() => update('accept', !form.accept)}>
              <span className={'checkbox ' + (form.accept ? 'checked' : '')} style={{ width: 22, height: 22, borderRadius: 7, marginTop: 2 }}>
                {form.accept && <Icon name="check" size={14} color="white" stroke={2.6}/>}
              </span>
              <span className="small" style={{ color: 'var(--c-ink-2)', lineHeight: 1.45 }}>
                Acepto los <span style={{ color: 'var(--c-primary)', fontWeight: 700 }}>Términos</span> y la <span style={{ color: 'var(--c-primary)', fontWeight: 700 }}>Política de privacidad</span> de PrecioVivo.
              </span>
            </label>
          </React.Fragment>
        )}
      </div>
      <button className="btn btn-primary btn-block" onClick={() => step === 1 ? setStep(2) : onDone()} style={{ marginTop: 18 }}>
        {step === 1 ? 'Continuar' : 'Crear cuenta y empezar'} <Icon name="arrow-right" size={18} color="white"/>
      </button>
    </div>
  );
};

Object.assign(window, { SplashScreen, LoginScreen, RegisterScreen });