// ===== Login + Register (Auth) =====
const LoginRegister = ({ onAuth, navigate }) => {
  const [mode, setMode] = useState('login'); // 'login' | 'register'
  const [data, setData] = useState({
    email: '', password: '', remember: true,
    name: '', phone: '', confirm: '', terms: false,
  });
  const [showPwd, setShowPwd] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const submit = (e) => {
    e?.preventDefault();
    setError('');
    if (mode === 'login') {
      if (!data.email || !data.password) {
        setError('Ingresa correo y contraseña.');
        return;
      }
    } else {
      if (!data.name || !data.email || !data.phone || !data.password) {
        setError('Completa todos los campos.');
        return;
      }
      if (data.password !== data.confirm) {
        setError('Las contraseñas no coinciden.');
        return;
      }
      if (!data.terms) {
        setError('Acepta los términos para continuar.');
        return;
      }
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      onAuth({
        name: mode === 'login' ? 'Miguel A. Rangel' : data.name,
        email: data.email,
      });
    }, 700);
  };

  const benefits = [
    { icon: 'box', t: '$500 MXN en tu primera compra', s: 'Crédito al instante en tu siguiente orden' },
    { icon: 'truck', t: 'Rastreo de servicio en vivo', s: 'Ve a tu mecánico antes de que llegue' },
    { icon: 'shield', t: 'Garantía vitalicia en talacha', s: 'Mano de obra cubierta para siempre' },
    { icon: 'spark', t: 'Puntos RUTA acumulables', s: '1% de cada compra como crédito' },
  ];

  return (
    <div className="auth-page page-fade">
      {/* Left — brand visual */}
      <aside className="auth-aside">
        <div className="auth-tire">
          <TirePhoto tire={{ id: 'auth', use: 'sport', brand: 'RUTA', name: 'Garage Club', sizes: ['205/55R16'], accent: '#fdb827' }} drift hoverable={false}/>
        </div>
        <div className="auth-aside-inner">
          <a className="auth-back" onClick={() => navigate('home')}>
            <Icon name="arrowL" size={14}/> VOLVER AL INICIO
          </a>
          <div>
            <div className="eyebrow" style={{color: 'var(--accent)'}}>— GARAGE CLUB · RUTA</div>
            <h1 className="auth-headline">Entra al<br/><span>garage</span> de los<br/>que saben.</h1>
            <p className="auth-sub">Acceso a stock VIP, alertas de rotación, y agenda relámpago en tus talleres favoritos.</p>
          </div>
          <ul className="auth-benefits">
            {benefits.map(b => (
              <li key={b.t}>
                <span className="bullet"><Icon name={b.icon} size={16}/></span>
                <div>
                  <strong>{b.t}</strong>
                  <span>{b.s}</span>
                </div>
              </li>
            ))}
          </ul>
          <div className="auth-foot">
            <span className="eyebrow">★ 87,000 CLIENTES · 4.8</span>
          </div>
        </div>
      </aside>

      {/* Right — form */}
      <main className="auth-main">
        <div className="auth-card">
          <div className="auth-tabs">
            <button className={'auth-tab ' + (mode === 'login' ? 'on' : '')} onClick={() => { setMode('login'); setError(''); }}>
              INGRESAR
            </button>
            <button className={'auth-tab ' + (mode === 'register' ? 'on' : '')} onClick={() => { setMode('register'); setError(''); }}>
              CREAR CUENTA
            </button>
            <span className="auth-tab-indicator" data-mode={mode}></span>
          </div>

          <form onSubmit={submit} className="auth-form" autoComplete="on">
            {mode === 'login' ? (
              <>
                <div className="auth-head">
                  <h2 className="display">BIENVENIDO DE<br/>VUELTA.</h2>
                  <p>Continúa donde te quedaste — tus llantas favoritas, tu garage y tus servicios.</p>
                </div>

                <FieldEmail value={data.email} onChange={v => set('email', v)} required/>
                <Field
                  label="Contraseña" icon="lock"
                  type={showPwd ? 'text' : 'password'}
                  autoComplete="current-password"
                  placeholder="••••••••"
                  value={data.password}
                  onChange={v => set('password', v)}
                  required full
                >
                  <input
                    type={showPwd ? 'text' : 'password'}
                    autoComplete="current-password"
                    placeholder="••••••••"
                    value={data.password}
                    onChange={e => set('password', e.target.value)}
                    required
                  />
                  <button type="button" className="field-action" onClick={() => setShowPwd(s => !s)} aria-label="Mostrar contraseña">
                    <Icon name={showPwd ? 'eye' : 'eye'} size={16}/>
                  </button>
                </Field>

                <div className="auth-row">
                  <label className="auth-check">
                    <input type="checkbox" checked={data.remember} onChange={e => set('remember', e.target.checked)}/>
                    <span className="auth-check-box"></span>
                    <span>Recuérdame</span>
                  </label>
                  <a className="auth-link" onClick={(e) => { e.preventDefault(); alert('Te enviaremos un correo para restablecer.'); }}>¿Olvidaste tu contraseña?</a>
                </div>

                {error && <div className="auth-error">{error}</div>}

                <button type="submit" className="btn btn-primary btn-lg btn-block auth-submit" disabled={loading}>
                  {loading ? 'INGRESANDO...' : <>INGRESAR <Icon name="arrow" size={14}/></>}
                </button>
              </>
            ) : (
              <>
                <div className="auth-head">
                  <h2 className="display">CREA TU<br/>GARAGE.</h2>
                  <p>Te tomará 60 segundos. Sin tarjeta. Recibe <strong style={{color: 'var(--accent)'}}>$500 MXN</strong> de regalo.</p>
                </div>

                <Field
                  label="Nombre completo" icon="user"
                  autoComplete="name" placeholder="Juan Pérez"
                  value={data.name} onChange={v => set('name', v)} required full
                />
                <FieldEmail value={data.email} onChange={v => set('email', v)} required/>
                <FieldPhone value={data.phone} onChange={v => set('phone', v)} required/>
                <Field
                  label="Contraseña" icon="lock"
                  type={showPwd ? 'text' : 'password'}
                  autoComplete="new-password"
                  placeholder="Mínimo 8 caracteres"
                  value={data.password}
                  onChange={v => set('password', v)}
                  required
                  hint="8+ caracteres · 1 número"
                >
                  <input
                    type={showPwd ? 'text' : 'password'}
                    autoComplete="new-password"
                    placeholder="Mínimo 8 caracteres"
                    value={data.password}
                    onChange={e => set('password', e.target.value)}
                    required
                    minLength={8}
                  />
                  <button type="button" className="field-action" onClick={() => setShowPwd(s => !s)} aria-label="Mostrar contraseña">
                    <Icon name="eye" size={16}/>
                  </button>
                </Field>
                <Field
                  label="Confirmar contraseña" icon="lock"
                  type="password" autoComplete="new-password"
                  placeholder="Repite la contraseña"
                  value={data.confirm}
                  onChange={v => set('confirm', v)}
                  required
                />

                <label className="auth-check auth-check-full">
                  <input type="checkbox" checked={data.terms} onChange={e => set('terms', e.target.checked)}/>
                  <span className="auth-check-box"></span>
                  <span>Acepto los <a className="auth-link">Términos</a> y el <a className="auth-link">Aviso de privacidad</a> de RUTA.</span>
                </label>

                {error && <div className="auth-error">{error}</div>}

                <button type="submit" className="btn btn-primary btn-lg btn-block auth-submit" disabled={loading}>
                  {loading ? 'CREANDO...' : <>CREAR CUENTA · {fmt(500)} GRATIS <Icon name="arrow" size={14}/></>}
                </button>
              </>
            )}

            <div className="auth-divider"><span>O CONTINÚA CON</span></div>

            <div className="auth-social">
              <button type="button" className="auth-social-btn" onClick={() => onAuth({ name: 'Miguel A. Rangel', email: 'miguel@gmail.com' })}>
                <svg width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84c-.21 1.13-.84 2.08-1.79 2.72v2.26h2.9c1.7-1.56 2.69-3.87 2.69-6.62z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.81 5.96-2.18l-2.9-2.26c-.81.54-1.83.86-3.06.86-2.35 0-4.34-1.59-5.05-3.72H.96v2.34A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.95 10.7A5.4 5.4 0 0 1 3.66 9c0-.59.1-1.16.29-1.7V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.04l2.99-2.34z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.51.45 3.44 1.35l2.58-2.58A9 9 0 0 0 9 0 9 9 0 0 0 .96 4.96L3.95 7.3C4.66 5.17 6.65 3.58 9 3.58z"/></svg>
                Google
              </button>
              <button type="button" className="auth-social-btn" onClick={() => onAuth({ name: 'Miguel A. Rangel', email: 'miguel@me.com' })}>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor"><path d="M14.94 9.58c-.02-2.18 1.78-3.23 1.86-3.28-1.02-1.48-2.6-1.69-3.16-1.71-1.34-.14-2.62.79-3.31.79-.69 0-1.74-.77-2.86-.75-1.47.02-2.83.86-3.59 2.17-1.53 2.65-.39 6.57 1.1 8.72.73 1.05 1.6 2.23 2.74 2.18 1.1-.04 1.52-.71 2.85-.71 1.33 0 1.71.71 2.87.69 1.18-.02 1.94-1.07 2.67-2.12.84-1.22 1.18-2.4 1.2-2.46-.03-.01-2.3-.88-2.33-3.5zM12.79 3.25c.61-.74 1.02-1.76.91-2.78-.88.04-1.95.59-2.58 1.33-.57.65-1.06 1.69-.93 2.69.98.08 1.98-.5 2.6-1.24z"/></svg>
                Apple
              </button>
            </div>

            <p className="auth-switch">
              {mode === 'login' ? (
                <>¿No tienes cuenta? <a onClick={() => { setMode('register'); setError(''); }}>Crea una en 60 segundos</a></>
              ) : (
                <>¿Ya tienes cuenta? <a onClick={() => { setMode('login'); setError(''); }}>Inicia sesión</a></>
              )}
            </p>
          </form>
        </div>
      </main>
    </div>
  );
};

Object.assign(window, { LoginRegister });